Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Drawing

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

by
Read Time:13 minsLanguages:

Spanish (Español) translation by Nadia Gonzales (you can also view the original English article)

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.

imageimageimage

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."   

imageimageimage

Paso 4   

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.     

imageimageimage

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.

imageimageimage

Paso 9

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

imageimageimage

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.

imageimageimage

Paso 11

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

imageimageimage

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.

imageimageimage
imageimageimage

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.

imageimageimage

Paso 14

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

imageimageimage

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.

imageimageimage

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).

imageimageimage

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.

imageimageimage

Paso 18

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

imageimageimage

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.

imageimageimage

Paso 20

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

Paso 25

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

Paso 31

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

Paso 34

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

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%.

imageimageimage

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.

imageimageimage

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.

imageimageimage

Paso 40

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

Paso 43

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

imageimageimage

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.

imageimageimage

Paso 45

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

Terminando el teléfono

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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%.

imageimageimage

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.

imageimageimage

Paso 60

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

imageimageimage

Paso 61

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

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

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.

imageimageimage

Paso 66

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

imageimageimage

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ó.

imageimageimage

Paso 68

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

imageimageimage

Paso 69

Establece la capa Nubes en 30% de Opacidad.

imageimageimage

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.

imageimageimage

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+. ;)

One subscription.
Unlimited Downloads.
Get unlimited downloads