Cristalab |
- Crear efecto Instagram en Photoshop
- Animación fluida con CSS3
- Coloreado de dibujos en Flash
- Efectos de sonido en FL Studio
| Crear efecto Instagram en Photoshop Posted: 31 Oct 2012 03:34 AM PDT No tienes un smartphone, tablet, ipad o cualquier dispositivo donde Instagram pueda funcionar? ¿sólo tienes un típico celular nokia 1100, y quieres impresionar a tus amigos con fotos tipo instagram? Con este vídeotutorial aprenderás a recrear el efecto Nashville de Instagram en Photoshop.
|
| Posted: 01 Oct 2012 02:13 AM PDT Hace un tiempo creé un ejemplo de lo que se podría hacer con animaciones con simples puntos y ahora os quiero mostrar que con animation de CSS3 podemos crear movimientos bastante "naturales" con rotaciones, que sean fluidos (en el ejemplo se puede ver a lo que me refiero). En este artículo daré por hecho que todos sabemos como funcionan las animaciones, y si no es así os invito a ver este manual de como hacerlas. Crear la fluidezTenemos varios ejemplos, el del Balancín, el de subir una escalera y el de la biela manivela, en los tres jugamos con las rotaciones, pero en elementos que están por debajo del anterior. Por ejemplo, en el balancín tenemos 3 barras, y una está dentro de otra, lo que significa que al girar la primera la siguiente también lo hará y que a su vez gira. Puede ser un poco difícil de explicar y de entender, pero si nos fijamos en el primer ejemplo vemos este efecto, girando la barra azul y por otro lado las que están dentro (más abajo con el código se ve claro cómo surge este efecto). Cómo funcionaComo he comentado antes tenemos que crear el efecto de fluidez, pero antes de esto tenemos que crear la estructura, que simplemente son tres etiquetas DIV, una dentro de la otra. Código : <div> <div> <div> </div> </div> </div> El balancínLa estructura del código HTML es la misma en los tres ejemplos, lo que varía son los @keyfreme. El @keyfreme de la barra central hace un balanceo simple sin rotar y las 2 interiores tienen el mismo (simplemente una rotación que en cierto punto vuelve) y la diferencia de los recorridos de ellas está en que lo hacen en distinto tiempo.Este es el @keyfreme de este ejemplo: Código : /* Es el @keyfreme de la barra con el borde azul */ @keyframes balanzin_principal { 0%{transform:rotate(60deg)} 50%{transform:rotate(-60deg)} 100%{transform:rotate(60deg)} } /* Es el @keyfreme de la barra con el borde azul */ @keyframes balanzin_principal { 0%{transform:rotate(40deg)} 50%{transform:rotate(-600deg)} 100%{transform:rotate(40deg)} }En el momento que establecemos el @keyfreme de la animación podemos probar la velocidad para que se ajuste a un movimiento más o menos realista. Escalera y biela manivelaEn estos dos ejemplos se diferencian del primero (balancín) en que la rotación empieza en el extremo de la etiqueta que lo contiene, y esto se hace con una propiedad que afecta a todas las transformaciones que se crean con transform llamada transform-origin, donde establecemos desde dónde empieza a rotar.Código : <!-- En el ejemplo de la escalera y de la biela manivela tomamos como origen la parte superior y el medio --> transform-origin:top; Esta es una forma con la que podemos animar varias cosas con CSS3 (por ejemplo se podría recrear el movimiento de una serpiente o un árbol que lo mueve el viento) y podríamos crear cosas parecidas a las que se podían crear con flash, simplemente hay que saber sacar partido a lo que actualmente tenemos. Ver ejemplos: Xitrus
|
| Posted: 09 Aug 2009 05:00 PM PDT En este tutorial de coloreado digital, veremos el proceso de entintado de personajes y dibujos usando Adobe Flash como herramienta. |
| Efectos de sonido en FL Studio Posted: 09 Aug 2009 05:00 PM PDT Hay muchos tipos de efectos de sonido en FL Studio (antiguo Fruity Loops). En este tutorial veremos los efectos de audio Delay, Reeverb, Flanger, Phaser, Chorus, Compressor, Clipper, Fast Distortion y Vocoder. |
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario