Del dicho al hecho, hay un trecho.
19 de June, 2008. Escrito por skeku en Diseño, [Q] interactiva
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.
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:
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
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.
El porqué de los 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á:
Hice uso de un par de efectos de capa para mejorar ligeramente el aspecto de estas luces traseras:
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:
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
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:
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? 
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í:
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:
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í:
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.
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.
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.
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:
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.
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.
El resultado…y la promesa
Después de unas cuantas horas de laborioso trabajo, el resultado es este:
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.
Comments
32 Responses to “Del dicho al hecho, hay un trecho.”
Leave a Reply
[...] Ver tutorial. [...]
Bueno que sepas que las horas invertidas en el tutorial, se te descontaran del sueldo, por supuesto.
Eso lo daba por hecho, pero era el tutorial o yo. Se convirtió en algo personal xD
yo, como diseñata de tercera regional señalo, apunto, indico que al menos este “post” tutorial es más entretenido que los que postea ese tal boss…
naaaaaa, diseñatas al poder.
juas
super! buen tutorial y actual, ya que es lo que se esta usando ahorita.
Como diria un cuate “retro-glam-del-nuevo-milenio”
saludos!!
..pinta bien el tutorial a ver si por lo menos me sale el cel….
mil gracias!! el tutorial está estupendo voy a intentarlo ^___^
me encantó! muchas gracias por compartirlo
me puse contenta que en algunas cosillas hice las mismas cosas jaja
Ey enhorabuena! me servirá mucho.
Quería lanzar una preguntilla, sabeis como hacer el efecto de curvas de freehand que se ha usado con la herramienta fusion en Illustrator?
Es q me estoy renovando y tengo mucho q aprender del AI. (adios freehand..)
salu2 a to2
Bilfrok en Illustrator lo haces con la opción “Blend” dentro del menú object. HAces dos trazos, los seleccionas y objetc>>blend. Dentro de este mismo menú tienes las opciones para configurar los pasos, la separación, etc…
Ahora sólo nos faltaba que te dedicaras al mundo educativo :·(
Jejeje
Muy bien!
Que sepas que mis efectos con transparencias tendrán un antes y un después de este tuto…
Este niño vale un imperio qboss… jajaja
[...] criterion ] [ 2fast2furious ] [ tutorial ] Tags: diseño Puedes seguir las respuestas a este post mediante nuestro RSS 2.0 feed. Puedes [...]
Al final del tutorial (muy bueno por cierto - felicidades) eché de menos un “afirmamos que ningún teléfono móvil resultó dañado en el tutorial”.
[...] amigo Skeku de Criterion nos obsequia con un magnífico tutorial para crear una imagen publicitaria de un teléfono móvil. Os recomiendo encarecidamente que le [...]
enhorabuena por el tutorial compañero!
y encima el psd trae sorpresas ocultas!!
[...] tutorial en ESPAÑOL de la mano de q-interactiva.com donde nos muestra y enseña el proceso para la creacion de la imagen que preside el post. Un [...]
Buenisimo, mucyhas gracias Skeku, voy a trastear el psd
@bilfrok aprieta la W
Chulísimo
cuando se tiene arte es que se tiene arte…
Un saludo!
Mil gracias!! [Q]Diseñata y Salva, ahora si me empiezo a integrar con el Illustrator, por cierto muy buena pinta.
Vaya tuto, yo ya he hecho mi versión propia, jeje
salu2 a to2
Con esos brillos de neon parece el salpicadero tuneado del coche de algun calamar pastillero.
Que despidan al autor pero ya (iba a decir que devolviera la parte proporcional del sueldo, pero Marcos ha sido más previsor).
X-D
Teniendo en cuenta que el blog se llama 2flash2furious, el efecto neón tendría que salir por alguna parte xD
Si hago un segundo tutorial, os enseñaré a ponerle alerones a una tostadora xD
[...] tutorial lo tenéis aquí « [...]
Alerones a una tostadora???? y también un spoiler personalizado? maemia cuantissmo me queda po aprender…
Felicidades por el tuto (un poco retrasadas, como yo). Boss, por mi parte podeis ajustarle el sueldo, que se lo ha ganado, y no vale redefinir “ajustar” XDDDDD
Felicidades de nuevo.
Se lo vamos a ajustar pero para abajo, porque no puede estar perdiendo el tiempo con estos tutoriales en vez de sacar el curro que tiene que sacar XDD
Después de ver los brillitos de neón, lo de la tostadora me lo creo a pies juntillas. Que no se te olvide ponerle la pegatina esa de la penélope, que mola mazo (o algo así)
[...] Tutorial | [Q] interactiva / Criterion. No sé como titular este tutorial, pero es interesante ver el proceso comentado por Skeku para llegar a este diseño. [...]
¡¡Muy bueno!! Gracias
[...] :: Ver Tutorial This entry was posted on Wednesday, June 25th, 2008 at 8:17 am and is filed under Tutoriales. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
[...] http://www.q-interactiva.com encontramos este tutorial para crear una posible presentación de un terminal móvil o un fondo [...]
Tracked back to from here: http://www.presidiacreative.com/mobile-phone-ads-tutorials-and-inspiration/
[...] Aqui el enlace al tutorial [...]