Diseña Un Impresionante Mosaico En Blanco y Negro Con Efectos de Iluminación y Siluetas

Publicado en 14. dic, 2009 por Luis Lopez Garay in Tutoriales Photoshop

Hola amigos, les saludo desde mi flamante laptop que ya me des-empeñaron y ahora si tengo la comodidad de escribir artículos y tutoriales de peso. Hoy decidí adentrarme en los mosaicos y los efectos de iluminación en siluetas, también creo que este es un tutorial de los mejores que llevo hasta ahora, este muy bien explicado, amigable a la vista y con un resultado que seguro querrás probar, lo único difícil es conseguir tantas imagenes, yo necesité de al menos unas 129 imagenes.

Bueno primero tengo que aclarar unos puntos, este mosaico es inspirado por diseños de sitios como London Creative, Hongkiat y Envato Networks que implementan mosaicos en sus post o en contexto de sus sitios web, este estilo ya existía antes, yo solo estoy recreándolo con mi estilo y gustos propios, mas vale que te vayas consiguiendo una horita para colocar todas las imagenes en su sitio y otro tiempecito mas para buscar muchas imagenes en caso de que no tengas ninguna imagen relacionada con lo que quieras lograr en tu disco duro.

Qué es lo que se logrará?

Se lograra el siguiente resultado una vez terminado el tutorial, es altamente personalizable:

[ Haz click en la imagen para ver en pantalla completa ]

O si tienes criterio propio de personalización puede quedar algo como esto que logre yo, no se nota nada la diferencia estando pequeño aquí pero si lo comparas bien veras la diferencia decisiva:

[ Haz click en la imagen para ver en pantalla completa ]

Material Necesario

Consigue lo siguiente antes de proceder a leer el tutorial

Asegúrate de tener instalado en tu computadora el programa Adobe Photoshop en versiones superiores o semejante a la CS2, no es necesario versiones muy nuevas ya que se usaran herramientas, estilos de capa, efectos de iluminación, filtros básicos como enfoque y modificación en algunos colores y modos de fusión, nada que requiera CS3, el hecho de haber usado Photoshop CS4 en este tutorial no te pide tenerlo instalado en esa versión, sin embargo si te sientes mas cómodo puedes buscar la versión portable de Photoshop.

Necesitaras también muchas imagenes, para que te des una idea, yo use 128 imagenes en un lienzo de 900×390 pixeles, correspondientes a 16 columnas de 8 imagenes pequeñas cada una, lo cual resulta en 128 imagenes, además si quieres puedes usar una misma imagen pero mostrando diferentes partes de ella, asegúrate de que esas imagenes se relacionen con la silueta.

La fuente Black Rose, esta es la fuente que usa el logotipo del popular sitio de alojamiento de videos Vimeo, el cual tiene un logo estilo cursiva en minúsculas, esta fuente se usaran al final del tutorial y puedes sustituirlas por otras estilo cursiva o que mas te agraden. [Descargar Fuente]

Ahora esto es algo difícil de decidir, la silueta que irá en el centro, puedes guardar la imagen que yo usé pero el chiste de este tutorial es que logres crear tu propio mosaico con tu propia silueta e imagenes, no necesitas necesariamente una silueta, puedes conseguir una imagen normal sin fondo alguno (render) y después hacerla silueta borrando una parte de ella para lograr un efecto de obscurización muy bueno que se explica después, trata de elegir bien la imagen.

Que Comience La Acción!

Procedimiento de pocos pasos bien explicados, leer bien

Como acabas de leer, tienes que leer atentamente y prestar atención a los detalles, la mayoría de las imagenes de los pasos se muestran en un 30% de su tamaño real o un 50%, por lo que no se alcanza a apreciar bien, así que dales click si esta disponible para ver en pantalla completa y prestar mucha atención, sobre todo a las cosas encerradas con rojo o indicaciones sobrepuestas.

Paso 1 – Preparando el lienzo

Es necesario explicar bien la parte del espacio de trabajo o lienzo a crear, nos dirigimos a File > New (CTRL+N) [Archivo > Nuevo] para que nos salga un cuadro de dialogo en el que introducimos primeramente el ancho y alto de nuestro lienzo en pixeles, la resolución es tu decisión, yo use un tamaño WideScreen un poquito mas ancho que 16:9 y no tan grande para no tener que usar muchas imagenes, ahora haz click en Ok [Aceptar] y vamos a comenzar con nuestro documento.

Paso 2 – Creando las líneas guía

Primero que nada rellena la primera capa de negro y llámala “Fondo Base”, bloquéala.

No olvides una vez terminada tu cuadricula, “Sellar las guías” para que no las muevas por accidente luego, la opción esta marcada con una flecha en la imagen.

Todo mundo necesita una ayuda, sin mencionar que sin guías esto nos llevaría horas, tienes dos opciones, dividir tu lienzo en mitades de mitades, hasta fraccionarlo exactamente en partes iguales usando el instinto y el ojo fino para usar la regla de photoshop, o basarnos en la medida del lienzo para escribir un valor con incremento en “Position” para no tener que arrastrar guías con riesgo a que no queden exactamente iguales las partes, a mi me gusta mas el método de la regla. Ve a View > New Guide… [Ver > Nueva Guía…] para crear una o arrastra desde la regla dando click en ella y luego moviendo el mouse hacia la posición exacta donde la quieres, mi consejo es primero dirigir una hacia en medio vertical y horizontalmente para guiarse después, ya que photoshop se imanta a los bordes y a los centros por lo que te será fácil detectar el centro, una vez que tengas tu cuadricula cuenta bien cuantos cuadritos tienes para saber cuantas imagenes colocar, así que cuenta bien.

Paso 2.1 – Colocar las imágenes

Favor de leer con cuidado y tener paciencia (Mucha)

Este es un paso que tienes que seguir con mucha cautela y paciencia, si ya tienes las imagenes que vas a usar procede a crear un nuevo grupo () en el panel de capas a titulado “Imagenes” y dentro de ese grupo crear otro grupo llamado “Columnas”, estando en ese grupo vamos a pegar las imagenes de la columna uno empezando por la izquierda, nos dirigimos a File > Place… [Archivo > Colocar…] en donde buscaremos una imagen para colocar, puedes hacerla mas chica para que luzca casi toda o solo mostrar una parte de ella, puedes ocupar dos o mas cuadritos de forma horizontal o vertical para ahorrarte imagenes (tampoco abuses), mezcla imagenes obscuras con imagenes claras, y como consejo (que no use a la hora de hacerlo yo) primero coloca la imagen de silueta como apoyo para saber donde no colocar imagenes (asegurándose de rellenar toda la fila de hasta abajo y de hasta arriba para no echar a perder la transformación “Skew”). Repite todos los cuadritos de la primera columna hasta que tengas todas, luego ve a Layer > Merge Layers (CTRL + E) [Capa > Combinar Capas] para que se unan las imagenes de la columna y la renombras “Columna 1”, de este modo repite el procedimiento con las columnas restantes, yo tuve 16 columnas en total, ahora que tienes todas las imagenes colocadas en su lugar procede al paso 3.

Paso 3.1 – De colores al blanco y negro

Puede resultar mas profesional el mosaico si lo pones todo en blanco y negro, y así es, en el panel de capas ve a Create new fill or adjustment layer [Crear un nuevo relleno o capa de ajuste], el cual se localiza con el icono ( ), y en el menú localiza la opción Gradient Map [Mapa de Degradado], es de los primeros de abajo hacia arriba, selecciona el que va de negro a blanco, si no existe créalo tu mismo, ahora llama a ese ajuste “Blanco-y-Negro”, asegúrate que esta arriba del folder de grupo “Imagenes” que creamos hace rato, de este modo solo afectara a las imagenes que colocamos.

Paso 3.2 – Poniendo bordes negros

Paso opcional pero visualmente atractivo para las imagenes

Si no quieres hacer esto no lo hagas, bastante tienes con poner las imagenes para que ahora tengas que usar la Herramienta de Selección Rectangular (M) para dibujar rectángulos de 1 pixel de ancho al lado de cada columna (haciendo esto dentro del grupo “Imagenes” arriba del subgrupo “Columnas”) por el alto del lienzo y luego usar la herramienta de Bote de Pintura (G) para rellenar ese angostisimo espacio con color negro, repetir para columnas y filas hasta terminar.

Paso 3.3 – Perspectiva distinta en mosaico

Adivinaste, esto tampoco es obligatorio pero a mi parecer da un mejor toque, lo que haremos es colocar un punto de vista distinto a la cuadricula de imagenes para que las imagenes de arriba luzcan un poquito mas pequeñas (muy poquito) que las de abajo y de un efecto extraño y difícil de describir, para eso te sugiero que veas el siguiente video-paso en GIF (se repite solo):

Como puedes observar lo único que hace es ir a Edit > Transform > Skew [Editar > Transformar > Sesgar (creo…)] y mover las esquinas superior-izquierda/y/derecha hacia adentro muy pero muy ligeramente, de este modo notaras una diferencia en la perspectiva, si hay imagenes que quedan mal de la parte de afuera que se metieron al lienzo, corrígelo con CTLR+Z y borra de forma apropiada lo que hay en el exterior cambiando el tamaño del lienzo (Imagen > Tamaño del Lienzo) a uno unos 100 pixeles mas ancho y mas alto para borrar con claridad los sobrantes en cada imagen.

Paso 4 – La silueta en el centro

Bien primer nos dirigimos a File > Place… [Archivo > Colocar…] y buscamos la imagen sin fondo en PNG o vectorial que hayamos descargado y la colocamos, ahora muévela y cambiarle el tamaño al gusto para que quede en el centro del lienzo emergiendo desde abajo (como nota personal estate muy seguro que el personaje haya quedado arriba de la capa de “Blanco-y-Negro”). Una vez que este en posición duplica la capa desde Layer > Duplicate Layer… [Capa > Duplicar Capa…] para hacer un pequeño truco de sombras ninja; ahora teniendo seleccionada la capa duplicada la cual se llamará “PersonajeSombra” (mientras que la original se llamará “PersonajeOriginal” y se mantendrá debajo de la sombra) nos dirigimos a Image > Adjustments > Hue/Saturation (CTRL+U) [Imagen > Ajustes > Tono y Saturación] y le bajamos por completo la luminosidad:

Y ahora sin luz en la imagen duplicada tendrás nada mas y nada menos que una silueta, mantente así por ahora, poco mas adelante te pediré que borres parte de la silueta para tener este truco finalizado, agrupa las dos capas en un grupo llamado “Siluetas” (yo lo titulé “Personaje:Sombra/Orig.” pero es difícil de recordar), ahora vamos al siguiente paso. La cual será tener una iluminación debajo de la silueta para dar un mejor toque a nuestro mosaico.

Nota Importante: En las capturas no se muestra pero en la silueta seleccionada, tome la herramienta de Borrador (E) y use un soft brush (circulo con dureza de 0%) de tamaño 200px para hacer un borrado ligero en la parte del brazo, el mástil de la guitarra y algo del estomago, de esta manera se vera como si la silueta fuera real pero oculta por una obscuridad misteriosa. Mas adelante cerca del paso 7 u 8 saldrá una nota encerrada en un circulo blanco, esta es esa nota.

Paso 5 – Luz debajo de la sombra

Este puede ser uno de los principales atractivos de este mosaico y sin duda hace resaltar mejor a la sombra, cosa que es fundamental. Para eso tomamos la herramienta Pincel / Brush (B) y en el panel de opciones de este tomamos un soft brush (circulo sin dureza / 0% en Hardness) de tamaño casi tan grande como la silueta y hacemos un pincelazo en una capa que debes colocar debajo del grupo “Siluetas” y si no estas contento con la intensidad de luz puedes bajar la opacidad si quieres, pero lo mejor es jugar con los tamaños del pincel, yo use:

Una vez asegurado que la capa esta debajo del grupo “Siluetas” llámala “Luz AnteSombra” para identificarla, recuerda que debe estar en el centro de la sombra para que luzca bien.

Paso 6 – Opacando un poco las miniaturas

La razón de esto es para quitarle un poco de luminosidad a las imagenes chicas y hacer que el ojo humano se centre un poco mas en la silueta, pero esta teoría no acaba aquí, ya que mas adelante estaremos probando con efectos de iluminación desde el filtro oficial de photoshop. Tomamos la herramienta de Bote de Pintura / Relleno (G) para después crear una nueva capa justo arriba del grupo “Imagenes” (donde están todas las columnas y bordes”) y luego rellena esa capa con color negro, ahora ese enorme abismo puede ser reducido a una opacidad de 10% (recomendado).

Renombra esa capa negra con el nombre de “Polarización”, en la imagen de arriba se muestra como debería quedar el orden de las capas.a estas alturas del partido.

Paso 7.1 – Iluminación Cenital Inicial

Suena extraño pero solo significa que primer crearemos una iluminación central que no influirá mucho en la luz total de la imagen final pero que es importante también para guiarse con la luz, primero vamos a crear una nueva capa, para luego ir a Image > Apply Image [Imagen > Aplicar Imagen], luego llamaremos a esa capa “BrilloCenital_Inicial” (en la imagen de ejemplo se identifica como “AplicarImagen”) para poder aplicar el filtro correctamente.

Pues ahora vamos a Filter > Render > Lighting Effects… [Filtro > Trazado > Efectos de iluminación] procurando usar unos valores aproximados a los siguientes y con el centro del circulo en la parte superior de la imagen, con el tamaño que se muestra en la imagen:

No hagas caso de la extrema obscuridad que se ve aquí, la captura fue tomada cuando se acabo el tutorial y no se suponía que saldría tan obscuro, sin embargo los valores son correctos y puedes probar a moverle un poco para personalizarlos.

Ahora da click en Ok [Aceptar] con lo que tendrás una imagen algo obscura en lo que resta del centro, baja la opacidad de esa capa a un 80% si quieres un 70% para reducir su efecto.

Paso 7.2 – Iluminación Cenital Decisiva

Lo mismo pero diferente, repite lo de crear una nueva capa, aplicar imagen y dirigirse a Efectos de Iluminación, pero ahora aplica los siguientes valores para variar un poco y fíjate en la posición del origen de la luz, también nota que la opacidad de esa capa debe ser de 30% para menor efecto.

Se puede notar un cambio en la obscuridad y centralización de la luz, ahora vamos con la parte final.

Paso 8 – Brillo y Contraste Final

Para rematar el tono de grises de nuestro mosaico vamos a crear una nueva Capa de Ajuste (si no te acuerdas regrésate al paso 3.1 donde se explica donde esta ese menú el cual tiene una opción llamada Brightness/Contrast… [Brillo y Contraste], el cual debemos seleccionar y establecer los siguientes valores para tener control del contraste y el brillo de nuestro trabajo (100% de Opacidad).

No tengo disponible el como queda con esa diferencia mas que el resultado final.

Paso 9 [Final]– Añadiendo los textos lindos

Este paso le da una estética anti vacio pero también es opcional, aunque no me pude quedar con las ganas de escribir cosas en mi mosaico, cosa que seguro querrás hacer también.

Primero tomaremos la herramienta de Rectangular Shape (U) [Forma Rectangular] para dibujar un rectángulo color negro como en la siguiente imagen con un Relleno (Fill, debajo de Opacidad/Opacity) de 80% para que luzca algo transparente, añade un borde negro de un pixel a esa capa para que quede profesional, aquí meterás texto (ve a tomar la herramienta de Texto [ T ] ) de color amarillo (el texto líder) y de color blanco y mas pequeño el texto secundario, use para estos textos la fuente Myriad Pro (de paga) pero tu puedes usar Arial o Verdana. Luego con la herramienta de texto escribimos en partes estratégicas de nuestro mosaico textos de tamaño 72pt y 48pt respectivamente con la fuente Black Rose, escribí Rock y Guitar respectivamente.

Solo falta una cosa, los estilos de capa de estas palabras grandes con la fuente Black Rose, dirígete a Añadir Estilo de Capa [Add Layer Style] pulsando aquí ( ) y pulsando primero en Gradient Overlay, para meter los siguientes valores en cada uno de los estilos que se muestran en las imagenes de a continuación, en total son 4 cosas; Sombra, Degradado, Borde y Brillo Interno:

• Así deben de quedar los textos una vez aplicados los estilos de capa a “rock” y a “guitar”, la fuente Black Rose se ve mal si escribes en mayúsculas, por eso escribe en minúsculas.

Y todo esto para dar un pequeño toque metálico y elegante a nuestras palabras grandes, queda bastante lindo aunque están de mas, basta con el caption del recuadro negro. Hemos terminado el tutorial, a continuación mostramos el resultado final:

Resultado Final del Tutorial

Conclusión y Final Alternativo

No, no estoy hablando de una película, tan solo podemos concluir que para hacer que tu mosaico luzca bien, concentra las imagenes claras en el centro y las obscuras en las “paredes” del mosaico, evita la desesperación y mejora tu creatividad haciendo mejores cosas. Este mosaico puede ser usado en muchas aplicaciones, como sitios web, revistas, flyers, como cartel o tarjeta, no se se me ocurren muchas cosas que hacer con este tipo de diseños, los he visto mas en blogs.

Ahora te presento mi verdadero final, el que se logra borrando la capa “Blanco-y-Negro” y cambiando la opacidad de “BrilloCenital_Decisivo” o “AplicarImagen2” a un 40% (del 30% anterior) para amplificar el obscurecimiento de sobras circundantes, aunque puede aumentar hasta un 70% su efecto sin quitar elegancia ni profesionalismo. También se creo una nueva capa arriba de todo y se aplicó imagen, luego fui a Filter > Sharpen > Sharpen [Filtro > Enfocar > Enfocar] y le baje la opacidad a la mitad para que no se vea tan tán nítido para que se vean mas nítidas las imagenes porque la verdad es que se veían algo borrosas, luego al final a esa capa le puse un borde interno de 4 pixeles de color negro para borrar lo que se vea mal en los bordes. Puedes nivelar el color de las imágenes también si bajas la opacidad de la capa “BrilloCenital_Inicial” o “AplicarImagen1”.

Resultando finalmente en esto, apoco no es genial, creo que lo imprimiré, solo me pregunto porque demonios puse a Avril Lavigne en ese mural, no se lo merece, pero estaba falto de imagenes y red.

Se nota que tienen un poco de color las imagenes y una profundidad mayor. Ya sabes que hacer, divulga este tutorial en tu blog si tienes un blog (tienes permiso de redistribución siempre y cuando cites la fuente y no me jales las imágenes de mi servidor, guárdalas y súbelas al tuyo), o twittea esto con tu cliente de Twitter mas cercano, cuéntale a un amigo por Email. Deja un comentario para preguntar algo sobre el tutorial, felicitaciones, tiradas de quejas y lo que quieras, menos venderme viagra ni insultar a nadie sin fundamentos, para eso esta el alcohol y las drogas.

DESCARGAR PSD DEL TUTORIAL

Entradas Relacionadas:

1. Flickr Streams #1 – Impresionantes Fotografías “Street” en Blanco y Negro
2. Videotutoriales para editar color de ojos y agregarles efectos bonitos apantallamujeres
3. 61 Tutoriales para crear efectos Gore y de Horror
4. Crear una Explosión Mental con Photoshop
5. Wallpaper Tipografico rapido y facil en Photoshop