Crea un teléfono móvil con el estilo del HTC Touch Diamond

Debo admitir que no hay ningún celular que me guste más que el iPhone, pero cuando vi por primera vez el móvil HTC Touch Diamond, me sorprendió porque se veía muy bien. Se ve tan bien que decidí escribir un tutorial para mostrarte cómo lo hice. Este será un tutorial largo así que ve por un poco de café.

Vista previa de la imagen final   

Antes de comenzar, echemos un vistazo a la imagen que vamos a crear. Haz clic en la captura de pantalla de abajo para ver la imagen en tamaño completo. Como siempre, el archivo de Photoshop en capas está disponible a través de nuestra membresía Psdtuts+ Plus.   

Paso 1 

Comencemos haciendo un nuevo documento en blanco a 1000px por 1000px. 

Paso 2

Ahora haremos la base del teléfono. Con la Herramienta rectángulo redondeado (U) configurado en 20 píxeles, crea una forma como se muestra a continuación.

Paso 3   

Luego, utilizando la misma herramienta, debes mantener presionado el botón Alt antes de comenzar a hacer una forma.    Esta se extraerá de la primera forma que hiciste. Además, usa las reglas y la cuadrícula para ayudarte a establecer la forma del teléfono. Cuando hayas terminado, nombra la forma "Forma del teléfono 1."   

Paso 4   

A continuación, debes duplicar esa capa, rellenar la copia con #5b5b5b y nombrarla "Forma de teléfono 2".

Paso 5  

Ingresa a Opciones de fusión haciendo doble clic en la capa "Forma de teléfono 2" e ingresa las configuraciones que se muestran a continuación. Puedes experimentar, pero personalmente me gustan esos ajustes.

Paso 6   

Haz una nueva capa y nómbrala “luz”. Luego presiona Ctrl + Clic en la miniatura de la capa "Forma de teléfono 2" para hacer una selección. Después, utilizando la Herramienta marco rectangular (M), elimina parte de la selección.

Paso 7      

Crea un degradado lineal utilizando la Herramienta degradado (G) configurada en blanco y transparente. Luego, arrastra y suelta de arriba a abajo para lograr algo similar a lo siguiente.     

Paso 8   

Usando la Herramienta borrador (E) configurada en 0% de dureza, comienza a borrar algo de esa luz, como se muestra a continuación.

Paso 9

Haz trazados en la parte inferior del teléfono con la Herramienta pluma (P).

Paso 10

A continuación, debes crear una nueva capa y ponerle el nombre "luz 2". Configura tu Pincel en 1 píxel y asegúrate de que el primer plano sea blanco. Agarra la Herramienta pluma, haz clic con el botón derecho en la pantalla y elige Contornear trazado. Asegúrate de seleccionar el Pincel de la lista y, además, la Presión de pluma no debe estar activada. A continuación haz clic en Aceptar. Por último, deberás eliminar el trazado para poder ver el contorneado.

Paso 11

Borra los extremos del contorneado. Luego ve a Filtro> Desenfocar > Desenfoque gaussiano y selecciona un radio de 0.7 píxeles.

Paso 12

Los siguientes pasos que deberás seguir son repetir el mismo efecto de luz en todos los lados. También cambiamos el color de nuestro fondo a negro. Sigue las imágenes de abajo.

Paso 13

Hemos terminado con esta parte del teléfono. Deberás moverla a una nueva carpeta y nombrarla >Lado exterior.> Ahora es momento de hacer el interior. Primero, haré una nueva carpeta y la nombraré >Lado interior.> En esta carpeta haré una nueva carpeta y la nombraré> Parte inferior.> En esta es donde irán los botones. Luego usando la Herramienta rectángulo redondeado (U), haz una forma como la que hice.

Paso 14

Sustrae la parte superior de la forma, usando la Herramienta rectángulo (U).

Paso 15

Haz doble clic en la capa para introducir las Opciones de fusión, y usa las configuraciones que se muestran a continuación.

Paso 16

Ahora, necesitas hacer algunas luces adicionales en esta forma. Harás esto de la misma manera en la que lo hiciste en el paso 9, pero esta vez usarás la Herramienta línea (U).

Paso 17

Esta parte del teléfono está terminada. Ahora necesitamos hacer los botones. Primero, crea una nueva carpeta y nómbrala "Botón". En esta carpeta, necesitas hacer una forma circular negra usando la Herramienta elipse (U). Como puedes ver, usé la cuadricula porque quiero que los botones estén centrados.

Paso 18

Usa las configuraciones que se muestran abajo para las Opciones de fusión de esta capa.

Paso 19

Haz un nuevo círculo, pero esta vez hazlo un poco más pequeño. Cuando comiences a hacerlo, empieza desde el medio del otro círculo, manteniendo presionadas las teclas Alt + Shift y arrastrando. Esto te ayudará a hacer el círculo perfecto y en la posición correcta.

Paso 20

Nuevamente, cambia las Opciones de fusión acorde a las que se muestran abajo.

Paso 21

Haz una nueva capa sobre los círculos. Llámala "Brillo 1." Usando la Herramienta degradado (G) establece un Degradado radial de color blanco, haz clic y arrastra como yo lo hice.

Paso 22

Ahora necesitas enmascarar la luz para que solo se vea dentro del botón. A continuación, establece la capa en Luz lineal con un 34% de Opacidad.

Paso 23

Haz una nueva capa y nómbrala "Brillo 2." Haz una selección como la que yo hice, usando la Herramienta marco elíptico (M). Rellena la capa con blanco, enmascárala para que solo sea visible en el botón, y establécela en Luz suave con 70% de Opacidad.

Paso 24

Usando la Herramienta pluma (P), haz un trazado. Configura el Pincel en 2 píxeles con una Dureza de 100%. Usa la Herramienta pluma y haz un Contorneado. Otra vez, asegúrate de hacer el Contorneado de color blanco.

Paso 25

Usando la Herramienta borrador (E), borra un poco la parte inferior de la línea para que se difumine.

Paso 26

Ajusta el contorneado a 70% de Opacidad. Haz una nueva capa y dibuja un punto blanco. Ve a Filtro > Desenfocar > Desenfoque gaussiano y ajústalo al 18.5%. A continuación, establece la capa en Luz suave.

Paso 27

Ya has terminado con el botón redondo. Ahora tenemos que hacer los botones táctiles. Primero, crea una nueva carpeta sobre la carpeta Botón y asígnale el nombre "signos". Haz una forma redonda y agrega la configuración que se muestra a continuación. Además, configúrala en 20% de Opacidad.

Paso 28

A continuación necesitas agregar estas formas. Las hice usando la Herramienta línea (U), y tomé un par de flechas de la Herramienta forma personalizada.

Paso 29

Las siguientes formas las haremos nuevamente usando la Herramienta pluma (P) y la Herramienta línea (U). También, usa estos ajustes para ellas.

Paso 30

Hemos terminado con la parte inferior del teléfono. A continuación tenemos que hacer la parte superior. Aquí debes crear una nueva forma con la Herramienta rectángulo redondeado (U) configurada en 10%. Además, necesitas rellenarla con #626262. Luego sustrae un lado de la parte superior. Fíjate en la imagen de abajo para saber cuánto necesitas sustraer.

Paso 31

Configura las Opciones de fusión para esta capa, como se muestra a continuación.

Paso 32

Haz una nueva capa y nómbrala brillo. Primero debes hacer una selección de la siguiente manera. Luego necesitas sustraer una parte de la selección donde los dos lados se encuentran. Ahora debes usar la Herramienta degradado (G) para rellenar la capa con color blanco.

Paso 33

A continuación, haz un trazado aleatorio con la Herramienta pluma (P). Ahora que tienes el trazado, debes enmascarar la luz que incide en el teléfono, y configurar la capa en 50% de Opacidad.

Paso 34

Seguidamente, recreamos el logotipo utilizando la Herramienta pluma (P) o diseñamos nuestro propio logotipo.

Paso 35

Ahora crea una nueva carpeta y llámala "pantalla". En esta carpeta, crea una nueva forma con la Herramienta rectángulo (U). Además, usa la siguiente configuración para las Opciones de fusión.

Paso 36

Haz otra carpeta, sobre la anterior, y llámala "cámara". Haz un nuevo círculo redondo y rellénalo con #111111. Ahora, aplica la configuración que se muestra a continuación.

Paso 37

Duplica la capa, rellénala con #222222 y usa la siguiente configuración para las Opciones de fusión. También, establece el Relleno en 0%.

Paso 38

Haz un nuevo círculo y rellénalo con #222222. Además, para las Opciones de fusión, aplica la configuración que se muestra a continuación.

Paso 39

Nuevamente, haz otro círculo y rellénalo con #3b3b39. Ahora necesitas sustraer algo de ese círculo. Utiliza la Herramienta elíptica (U) para esto. Además, usa la siguiente configuración para las Opciones de fusión.

Paso 40

A continuación necesitas hacer otro círculo. Esta vez rellénalo de negro.

Paso 41

Haz una nueva capa sobre el círculo negro del Paso 40. Usando la Herramienta pincel, haremos dos pequeños puntos para que esta cámara se vea real. Debes usar dos colores diferentes para esto: #47307a y #1a3327.

Paso 42

Repite el paso 39, pero esta vez haz un círculo más pequeño. Además, usa el color #3b3b39. Establece la capa en 40% de Opacidad y usa la configuración que se muestra a continuación para las Opciones de fusión.

Paso 43

A continuación, haz otra capa blanca; la debes Desenfocar y cambiar su Opacidad a 5%.

Paso 44

Haz otra carpeta y llámala "altavoz". En esta, crea una nueva forma utilizando la Herramienta rectángulo redondeado (U). Asegúrate de que esté configurada en 10 píxeles.

Paso 45

Aplícale a la capa las Opciones de fusión que se muestran a continuación.

Paso 46

Crea una nueva capa y llámala "patrón". Para hacer el patrón del altavoz, he usado la misma técnica que usó Fabio en uno de sus tutoriales Creando una genial superficie de metal cepillado en Photoshop (el Paso 3 de ese tutorial). La única diferencia entre este patrón y el de Fabio, es que este es negro y además los puntos están más juntos. De cualquier manera, no uses las Opciones de fusión de ese tutorial, ya que no las necesitarás.

Una vez que el patrón haya sido creado, enmascáralo para que solo sea visible en el altavoz.

Paso 47

Ahora, haz una forma similar a las que se muestran abajo. También, usa la configuración que se muestra para las Opciones de fusión.

Paso 48

Haz una nueva capa similar a la anterior, pero esta será un poco más pequeña. Rellénala con este color #d7d7d7. También, usa la siguiente configuración para las Opciones de fusión.

Paso 49

El móvil está casi terminado. Lo que haremos ahora es crear una textura atractiva. Crea una nueva capa y llámala "Ruido". Dentro de esta capa, crea una nueva capa y rellénala con blanco. Ve a Filtro > Ruido > Añadir ruido y usa la configuración que se muestra abajo. Además, establece la imagen en Multiplicar con una Opacidad de 20%.

Finalmente, debes seleccionar solo la parte exterior del teléfono y enmascarar el ruido. Esto es para que sea visible sólo en esa parte.

Paso 50

Repite el paso 49, pero esta vez lo harás para una sección diferente del teléfono. Sigue las imágenes que se muestran a continuación para comprender cómo realizar la selección.

Paso 51

El último paso consiste en agregar algunas luces más en el teléfono. Sigue las imágenes que se muestran abajo y lo entenderás. Para las siguientes formas, cambia la Opacidad a 10% e inferior.

Terminando el teléfono

Agrega alguna marca personal al teléfono. Agregué mi logo y un pequeño banner de Psdtuts+.

Paso 52

Ahora que hemos terminado el teléfono móvil, necesitamos hacer un fondo agradable y atractivo. Esta parte consiste en hacer una gran publicidad para el producto.

Primero deberás mover tu teléfono a un documento más grande (mi tamaño es 2215x1510) y rellenarlo con negro.

Paso 53

A continuación, duplicamos este teléfono doce veces y los colocamos uno detrás del otro. Además, recuerda que a medida que los objetos se alejan, se hacen más pequeños. Esta es la regla de perspectiva que debes tener en cuenta. Incluso, como puedes ver, he cambiado la imagen dentro de cada teléfono. Encontré las imágenes en SXC.

Paso 54

Debes agregar sombra a todos los teléfonos que acabas de crear. Usa los ajustes que se muestran a continuación para las Opciones de fusión.

Paso 55

Ahora necesitas agregar una sombra para el primer teléfono también. Vamos a usar una técnica diferente. Haz una forma negra que sea similar al teléfono.

Paso 56

Mueve la forma en la parte posterior del teléfono. Para ello, mueve la capa que acabas de crear debajo de la capa "teléfono". En las Opciones de fusión debes usar los ajustes que se muestran a continuación.

Paso 57

A continuación haremos el reflejo para cada teléfono. Para ello, primero debes duplicar todos los teléfonos y voltearlos al revés.

Paso 58

No es suficiente sólo establecerlos en una baja Opacidad. En este caso, necesitas cambiar algunas configuraciones en las Opciones de fusión. En realidad, cada reflejo tendrá una configuración diferente.

Establece la Superposición de colores en negro, para todos ellos. A continuación necesitas bajar la Opacidad para cada uno. Comenzarás con los dos teléfonos más pequeños (80%). Luego continúa sucesivamente con 70%, 60%, y por último con 50%.

Paso 59

Haz una nueva capa encima de todas las otras capas. Haz una selección como yo lo hice, presionando Ctrl + y haciendo clic en la miniatura de cada teléfono.

Paso 60

Ahora, usa la Herramienta degradado, configurada en negro y transparente. Haz un buen degradado. Además, establécelo en Luz suave.

Paso 61

A continuación, debes crear una nueva capa y colocarla entre los teléfonos y los reflejos. Ve a Filtro > Interpretar > Nubes.

Paso 62

Luego, ve a Filtro > Desenfocar > Desenfoque de movimiento y usa la configuración que se muestra a continuación. Establece la capa en Luz suave. Podrás ver un agradable efecto sobre los reflejos. Esto hace que la superficie se vea brillante.

Paso 63

Haz una nueva capa sobre la que acabamos de trabajar. Usa la Herramienta degradado, nuevamente en negro. En este paso, lo que queremos lograr es esconder parte de los reflejos con el degradado.

Paso 62

Crea una nueva capa y muévela hacia atrás, sobre el fondo negro, y denomínala "Nubes". De nuevo, necesitas algunas nubes. Ve a Filtro > Interpretar > Nubes para aplicarlas.

Paso 65

Agrégale una Máscara de capa a esta, haciendo clic en el botón Máscara de capa, en la Paleta de capas. Rellena la máscara con negro. Luego, usa la Herramienta degradado, configurada en Radial y de blanco a transparente. Recuerda, debes dejar que se vean algunas nubes.

Paso 66

El último paso es hacer una nueva capa sobre estas nubes y rellenarla con blanco. Ve a Filtro > Ruido > Añadir ruido.

Paso 67

Aquí hay un paso importante que la mayoría de ustedes no saben. Coloca el cursor en la linea divisoria entre "nubes" y la capa "ruido". Si presionas el botón Alt mientras el cursor está entre dos capas, lo verás diferente. Mientras mantienes presionado el botón Alt, simplemente haz clic una vez con el ratón. Esta técnica es similar al enmascaramiento, pero enmascarará el ruido para mostrarlo sólo sobre la capa a la que se vinculó.

Paso 68

Establece la Opacidad de la capa ruido en 51% y en Multiplicar.

Paso 69

Establece la capa Nubes en 30% de Opacidad.

Paso 70

El último paso será hacer unos bonitos rayos. Como recordarás, Psdtuts+ ha publicado un excelente artículo llamado Lo mejor de la Web - Junio ve y visítalo. Hay otro excelente tutorial que he escrito llamado Volante publicitario de teléfono móvil. Si lo revisas, en los pasos 42 a 46, aprenderás cómo hacer los rayos.

Final

Cuando hayas terminado con el diseño, simplemente guarda un archivo JPG y experimenta con los niveles, los colores y, quizás, agrega más efectos según tu gusto. Espero que hayas aprendido algo de este tutorial. Cuídate y sigue leyendo Psdtuts+. ;)