Nokia Final

Del dicho al hecho hay un trecho. Tutorial de retoque digital.

Quizá por envidia hacia el increíble trabajo de Jaworowski y similares diseñadores trendenciosos o por planteármelo como reto personal, iba siendo hora de preparar algún diseño más cool de lo normal. Y como [Q]Mobile necesita ir gestándose pues la ocasión la pintaban calva.

Voy a explicar algunas cosillas que he ido realizando para conseguir que una captura de pantalla se convirtiese en un vistoso ejemplo publicitario de un teléfono móvil.

Tutorial retoque digital Nokia

Como nota aclaratoria me gustaría comentar que lo que voy a escribir no se puede considerar un tutorial al uso; no voy a explicar pormenorizadamente algunas cosas y doy por hecho que se conocen las herramientas a un nivel básico como mínimo. Vamos, que te tienen que sonar conceptos como pincel, máscaras, efectos de capa, etc… Creo que es mejor centrarme en las partes que pueden resultar más interesantes. Además siempre podréis echarle un ojo al archivo original :)

Recortar el teléfono

El primer paso tras conseguir la captura de pantalla fue comenzar a eliminar material indeseado. Lo único que yo quería de la captura era el móvil. Para ello se pueden emplear unas cuantas formas: la máscara de capa, la goma de borrar o la que yo usé, la pluma. Me decanté por esta opción pues la silueta del móvil no era especialmente complicada de realizar. Aún así conviene recordar las capacidades de esta herramienta.

No tiene nada de especial hacer un recorte con pluma así que no creo que haya que explicar mucho más.

El fondo base

Por experiencia hay una fórmula que va muy bien para fondos oscuros en los que destacar un punto concreto. Se trata de emplear un degradado radial con un tono gris con un valor entre #595959 y #898989 y un negro total. La transición entre estos colores es lo suficientemente sutil para que quede bien y aún así se consigue un buen efecto de iluminación o punto de enfoque.

Hay dos formas de hacerlo. La más sencilla es crear una capa y rellenarla de negro para posteriormente crear una por encima y aplicar un degradado radial con el tono gris mencionado anteriormente a transparente. Esto nos permite colocar el degradado en la posición que queramos sin muchas complicaciones. Creo que no tiene mucha más explicación.

El otro método, el que empleé, es aplicar directamente sobre una misma capa un degradado radial del tono gris al negro. En este caso debemos posicionar el degradado de manera similar a la que vemos en la imagen (el inicio fuera de las dimensiones de la imagen) para conseguir que el efecto quede bien:

Tutorial retoque digital Nokia

En realidad no hay una única posición para conseguirlo así. Es cuestión de ir probando y teniendo a mano el historial para deshacer los cambios que no nos gusten.

Sombreado e iluminación de la parte trasera

Tutorial retoque digital Nokia

Recortado el teléfono y superpuesto sobre el fondo la cosa sigue quedando bastante feota. Vamos a “acomodar” el teléfono sobre el fondo para que no de esa sensación de no pertenecer a un mismo plano. Mediante un par de degradados y efectos de capa quiero conseguir que el fondo y el teléfono se fundan en un único espacio dimensional. Actualmente da la impresión está claramente por delante del fondo.

Para ello vamos a empezar a trabajar un par de luces traseras. Aquí entra en juego la curiosidad de cada uno. Pueden realizarse de muchas formas. Yo cogí la herramienta pluma y en una nueva capa (estas cosas siempre hay que probarlas en nuevas capas) probé a hacer una forma con un lado curvo y otro lineal. De este modo me aseguraba el poder probarlo en varias posiciones sin tener que probar con trazados curvos o rectos independientes.

Una vez convertido el trazado en selección, hice dos degradados radiales que comenzaban en la parte inferior izquierda con un gris blanquecino y terminaban en la zona superior derecha a transparente.

Tutorial retoque digital Nokia

El por qué de dos degradados en vez de uno sólo es simplemente para darle mayor fuerza al gris. También puede hacerse un único degradado y duplicar la capa o quizás emplear un gris más tenue. En cualquiera de los casos el resultado sería similar.

Después de probar un par de posiciones, me quedé con la que más me gustaba. Para ello, dupliqué la capa y desde el menú edición > transformar, volteé la copia horizontalmente. Uní las capas y las coloqué por detrás de la del teléfono. Voilá:

Tutorial retoque digital Nokia

Hice uso de un par de efectos de capa para mejorar ligeramente el aspecto de estas luces traseras:

Tutorial retoque digital Nokia

La idea era conseguir un poco más de viveza pero de manera suave. Si esto lo unimos al degradado radial de fondo, resulta un tono igualmente difuso pero ganando algo de fuerza en las zonas próximas a los laterales del teléfono:

Tutorial retoque digital Nokia

Retocando el teléfono

Un truquito que se suele usar bastante es el filtro enfocar. Hay que ir probando el resultado aunque en mi caso apliqué dos veces el filtro y fue suficiente para conseguir una mayor “nitidez”. También podéis probar con la máscara de enfoque. Y si se os va la mano pues empleáis un poco de desenfoque gausiano :)

Tutorial retoque digital Nokia

El problema derivado del enfoque es que pueden empezar a aparecer píxeles coloreados o un indeseable efecto grano. Podemos optar por convivir con él o intentar mitigarlo de algún modo. Como en cada imagen este defecto puede aparecer de una forma u otra, no tengo fórmula mágica para arreglarlo en todos los casos. Aquí toca armarse de paciencia. Yo empecé a tomar muestras de color con el cuentagotas y luego con el pincel ir coloreando las zonas en las que se notase más. Podéis ver el ejemplo de las zonas pintadas que he resaltado en rojo:

Tutorial retoque digital Nokia

Había otras zonas que también había que arreglar que luego “taparía” con otros efectos aplicados más tarde. También cabe destacar que no es estrictamente necesario hacer este paso pues dependerá de las dimensiones finales del documento. Quizá sea un excesivo cuidado del detalle cuando a lo mejor debido al tamaño final sea apenas perceptible.

Volviendo con el sombreado

Como no terminaba de convencerme cómo quedaba el teléfono respecto al fondo, pensé en buscar alguna forma de mejorar el sombreado. Como tampoco quería que me llevase demasiado tiempo (sin que quedase un mal resultado) pensé en aplicar otro truquillo que no me falla en estos casos. Dupliqué la capa del teléfono y apliqué un desenfoque de movimiento con un ángulo de 45º y una distancia de 150 pixeles. El resultado mejora bastante si repetimos el desenfoque una segunda vez.

Hecho esto, nos vamos a efectos de capa y aplicamos un relleno de color a negro. Queda mucho mejor haciéndolo así que variando la iluminación mediante el uso de tono/saturación.

¿Ya? Pues ahora duplicamos esta capa y la transformamos horizontalmente para tener un bonito efecto sombra express. Se nota la diferencia de ponerlo a no ponerlo bastante, ¿eh? :D

Tutorial retoque digital Nokia

Se puede mejorar aún más el acabado si hacemos el típico sombreado con una elipse en la parte inferior. No tiene misterio, con la herramienta selección hacemos una elipse, la rellenamos de negro y le aplicamos un desenfoque gausiano. Buscamos que quede algo así:

Tutorial retoque digital Nokia

Para mejorar el efecto de que el teléfono esté “apoyado” sobre el fondo, además de la elipse también podemos pararnos y hacer un poco de trabajo manual. Cogemos el pincel y pintamos de negro parte de la zona inferior. Podéis ver las zonas resaltadas en rojo:

Tutorial retoque digital Nokia

Como véis en este último paso no he usado el pincel de igual manera en el lado derecho que en el izquierdo. Esto no es un fallo. Es algo que ya hice a conciencia para posteriores retoques que iba a realizar. Pero bueno, a lo que vamos; aplicado todo lo comentado en este punto quedaría algo así:

Tutorial retoque digital Nokia

Retocando el teléfono II

Volvemos con el teléfono. Mediante el uso de la varita mágica y una tolerancia de 16, seleccioné partes del teléfono sobre las que quería aplicar iluminación. No es fácil explicar esta parte pues es bastante laboriosa y particular en cada caso. La sistemática general por definir alguna es seleccionar las zonas y en nuevas capas ir aplicando degradados lineales de blanco a transparente para conseguir que los laterales del teléfono ganasen “luz”. Si luego el efecto era demasiado notorio lo arreglaba aplicado máscaras de capa. También aproveché para arreglar algún detallito de la carcasa que veréis resaltado en rojo.

Tutorial retoque digital Nokia

Retocando el teléfono III

Ahora es cuando toca crear los laterales iluminados del teléfono. Tampoco hay fórmula secreta, simplemente pincel de una dureza en torno al 50-70% con una opacidad del 50%, la tecla shift pulsada casi todo el tiempo (recordad que es un modificador del comportamiento del pincel) y algunos efectos de capa. Los efectos de capa pueden ser muy poderosos, muestra de ello es esto. La verdad es que en este punto se agradece un montón tener una tableta gráfica para manejarse con mayor facilidad.

Tutorial retoque digital Nokia

El flash, la cámara y el logo

Como la captura inicial no era de muy buena calidad, había cosillas que también podían ser mejorables. Por ejemplo el logotipo. Para arreglarlo me pasé por Brands of the world a ver si tenía suerte y me hacía con el logo vectorizado. Y la hubo así que con el tampón de clonar, eliminé el logo de la captura y coloqué el nuevo.

Para la cámara hice una selección circular del tamaño de la “óptica” y apliqué dos degradados radiales de blanco a transparente, uno por cada lado de la diagonal imaginaria que lo divide en dos. Luego con el pincel dibujé un ligero punto morado en el interior.

Para el flash la cosa era algo más laboriosa. Primero hice una capa nueva que rellené de negro en la que empleé el filtro para crear un destello (dentro de los de renderizar). El que viene por defecto me venía bien (el de 30-500mm) pero claro, hay un problema. La capa está completamente en negro y no se ve nada de las capas inferiores.

La solución pasa por emplear los métodos de fusión de capas, en concreto el de trama. Hecho esto podemos colocar la capa mediante la herramienta transformar hasta que la coloquemos en la posición que más nos guste.

Posteriormente pinté con el pincel un punto blanco al que le apliqué los efectos de capa similares realizados con anterioridad. De este modo, el flash adquiriría el característico tono morado que buscaba.

Tutorial retoque digital Nokia

La pantalla

Evidentemente la pantalla de la captura deja bastante que desear para el acabado final. Así que eché mano del Freehand y mediante la herramienta fusión me hice un par de efectos con líneas. Creo que no hace falta que me pare a explicar este punto porque es bastante fácil de realizar. Lo que sí cabría destacar es que para darle un poco más de realismo, creé un patrón con un píxel en blanco para aparentar el efecto de los píxeles de la pantalla. Por si te suena a chino lo de crear patrones, échale un ojo a esto. El detalle ampliado:

Tutorial retoque digital Nokia

Rompiendo el teléfono

Lo de romper zonas del teléfono es algo que hice basándome en el efecto breaking apart de Photoshop Top Secret y que Diego Mattei tradujo al español. En realidad yo lo hice más simple porque apenas tuve en cuenta la disposición de los trozos. Lo único que había que respetar es que la separación entre los trozos es mayor a medida que aumenta la distancia respecto al teléfono. También el efecto mejora si duplicamos algunas piezas y las escalamos para reducirlas a la mitad de su tamaño intercalándolas entre las demás. Esto es cuestión de gustos.

Tutorial retoque digital Nokia

Añadiendo burbujitas

Las burbujitas es otra cosita que me he sacado de la manga para esta imagen. Son muy fáciles de realizar y particularmente creo que me han quedado bastante bien :D. Se trata de realizar una selección circular (verifica que la opción de antialias esté activada) y aplicar dos degradados radiales de manera similar a como se hizo en los primeros pasos pero esta vez uno opuesto al otro. Los degradados pueden ser de diferentes colores pero recomiendo que sean una transición de blanco a transparente y luego emplear los efectos de capa para modificar el acabado o la tonalidad. En mi caso lo hice de este modo para darles el aspecto morado.

Tutorial retoque digital Nokia

El resultado…y la promesa

Después de unas cuantas horas de laborioso trabajo, el resultado es este:

Tutorial retoque digital Nokia

Se puede ver a mayor resolución aquí. Y, tal y como prometí en su día, también podéis descargaros el psd con todas las capas sin acoplar para que podáis trastear y ver todo in situ.

Sólo me resta decir que espero que os pueda servir de algo y que si tenéis dudillas la mejor forma de resolverlas es dejar un comentario. Prometo no tardar tanto en responder como lo que he tardado en hacer el tutorial desde que dije que lo pondría xD.