Comunidad destinado a los que están interesados en todo lo que respecta al Diseño Grafico Multimedia. Tutoriales, Aplicaciones, Gadgets, Trucos, Recursos, etc.

Ver más
  • 1,853 Miembros
  • 386 Temas
  • 562 Seguidores
  • 0

Galería de imagenes con estilo “Cover Flow”

Galería de imagenes con estilo “Cover Flow”


Este post está basado en un excelente tutorial de Web Designer Wall; del cual realizarone la traducción.

Este tutorial de Photoshop + Flash muestra como diseñar una galería de imágenes con el efecto “cool” del sitio de AppleTV, y de otras aplicaciones Mac (por ej. iTune, iPhone). El tutorial es muy simple, lo que necesitas son algunos conocimientos básicos de Photoshop y Flash. Las herramientas necesarias son: Photoshop CS2+, Flash 8+, y un componente photoFlow de Flashloaded. (Este componente es pago; aqui uno otro gratuito).

Ver Demo: PhotoFlip Gallery

Descarga del Zip package

Empecemos con el tutorial!

1. Fondo en Gradiente
En Photoshop, crear un nuevo documento de 950 x 620px. Seleccionar el color de frente negro, y un gris oscuro (#384b55) de fondo. Usar la herramienta de Gradiente, y arrastrar desde la mitad inferior del documento.

Galería de imagenes con estilo “Cover Flow”

2. Grilla de Thumbnails
Juntar algunas fotos de muestra, y crear una grilla de thumbs como esta:

Galería de imagenes con estilo “Cover Flow”

Luego, duplicar la grilla, y aplicar “Rotación Vertical” (Edit > Transform > Flip Vertical). Vamos a necesitar esta grilla duplicada para crear el efecto de reflejo.

Galería de imagenes con estilo “Cover Flow”3. Transformación envolvente[/b]
Seleccionar la capa superior, e ir a Edit > Transform > Warp. Ahora deberías ver la grilla de transformación:

Galería de imagenes con estilo “Cover Flow”

Arrastrar los 4 puntos de las esquinas y las dos líneas verticales del medio, un poco hacia arriba, para crear el efecto de deformación curva.

Galería de imagenes con estilo “Cover Flow”

Repetir el paso previo para la grilla reflejada. Mientras se arrastran los puntos, tratar de mantener la grilla alineada con la capa superior.

Galería de imagenes con estilo “Cover Flow”

Establecer la opacidad de la capa superior al 30% y la de la capa inferior al 50%. Luego, aplicar una capa de máscara gradiente a la capa inferior.

Galería de imagenes con estilo “Cover Flow”

4. Resplandor
Hacer una selección oval, y rellenarla con un color azul cielo. Aplicar un desenfoque Gaussiano (Filter > Blur > Gaussian Blur). Condensarlo un poco, así parece el enfoque de un reflector.

Galería de imagenes con estilo “Cover Flow”

5. Flash
En Flash, crear un nuevo documento del mismo tamaño que la imagen de Photoshop. Copiar y pegar la imagen completa en la primer capa.

Galería de imagenes con estilo “Cover Flow”

6. Componente Flash
Si se tiene el componente photoFlow instalado, solamente arrastrar el componente en el documento. Si el componente no está instalado, se lo puede adquirir en Flashloaded o se puede entrar al concurso Free photoFlow Component Giveaways. Por otro lado, se puede conseguir un componente parecido, de manera gratuita en n99creations.com.

Galería de imagenes con estilo “Cover Flow”

Ahora, abrir el Inspector de Componentes, y chequear los parámetros disponibles. Aquí se puede personalizar el componente con los siguientes datos: dirección XML, autorotar, dimensiones de imágenes, reflejo, efectos de zoom… Para mayores datos sobre cómo usar photoFlow, por favor leer la guía de usuario.

Galería de imagenes con estilo “Cover Flow”

7. Actualizando la galería
Dado que la galería se carga desde un archivo XML externo, se puede actualizar el archivo XML para agregar o remover imágenes.

Galería de imagenes con estilo “Cover Flow”

Listo!!!





Este tutorial fue traducido desde el original “Mac Style PhotoFlip Gallery”, en Web Designer Wall.
  • 0
  • 3Calificación
  • 1Seguidores
  • 4.229Visitas
  • 1Favoritos

7 comentarios

@neodsm Hace más de 4 años
uhh buenisimo graciass.
@gioMDZ Hace más de 4 años
buen aporte!
@screencore Hace más de 4 años
buen aporte gracias =D
@josguiman Hace más de 4 años
muy buena porte pero ya hay formas de crear galeriasmas vistozas pero graxiax de todas maneras
@xDcuzzZ Hace más de 3 años
hola, gracias por el tutorial. Una pregunta, podrias hacer un tutorial de como colocarle links a las imagenes, para que te envien a una pagina en especifico. Gracias.
@kdardon Hace más de 3 años
buen aporte.....
@xmart47 Hace más de 2 años
Muchas gracias buen post y gracias por ahberte tomado el tiempo de traducirlo
Tienes que ser miembro para responder en este tema