Este tutorial corresponde a la serie de 4 megatutoriales dedicados a los productos estrella de Apple. Puedes ver la primera entrada de esta serie aquí. Y puedes descargar el archivo original de esta entrada aquí.

En este tutorial les enseñare como diseñar  un iPod nano en Adobe Illustrator.

El resultado:

El resultado debe ser el mas realista posible, vamos a hacer uso de algunos efectos especiales de Adobe Illustrator, como ‘blur’ y transparencias como ‘multiply’ y ‘screen’. La duración de este tutorial ronda entre los 45 – 60 minutos y deberías ser capaz de realizar este diseño en ese tiempo.

Empecemos:

Paso #1: Creamos un rectángulo de 225px  por 530px (posición vertical). Creamos un circulo de 225px de diámetro y los escalamos verticalmente al 5%, lo duplicamos y ahora tenemos dos círculos escalados. Estos círculos nos servirán para crear ese acabado redondeado de la parte de arriba y abajo del cuerpo del iPod. Una vez creados los círculos procedemos a posicionar los vértices de los lados de uno de los círculos exactamente contra los dos vértices de la parte de arriba del rectángulo y los del otro circulo con los vértices de la parte de abajo del rectángulo, una vez hecho esto fusionamos las tres capas, los dos círculos y el rectángulo para que quede una sola pieza (ver imágenes 1, 2, 3, 4, 5)

Paso #2: Creando líneas guía. Las líneas guía nos van a servir para definir el limite de la pantalla oscura. Seleccionamos mostrar las reglas ‘clic derecho – mostrar reglas’ y arrastramos una guía hasta el vértice exterior de la parte de arriba del cuerpo del iPod, vamos a hacer esto sucesivamente hasta rodear el iPod con las guías. Una vez hecho lo anterior creamos un cuadrado de 15 x 15 y colocamos su vértice superior izquierdo encima de la intersección de las guías superior izquierda e izquierda lateral. (ver imágenes 6, 7)

Paso #3: Creando la pantalla oscura. Para crear esta pantalla vamos a crear un cuadrado con las puntas redondeadas, el rectángulo debe ser de 195 x 310 y 5px para el redondeado de las esquinas. Podemos cambiar el color del rectángulo base para poder diferenciar las posiciones(ver imagen 8, 9 y 10)

Paso #4: Creando la paleta de colores. Para crear el efecto metálico del aluminio vamos a utilizar una paleta de colores de 4 colores, básicamente estos colores deberán ser grises mezclados con un todo de azul muy tenue. Estos serian los valores:

Primer color: R:68 G:68 B:69, la posición en el gradiente será: 0

Segundo color: R:175 G:175 B:176, la posición en el gradiente será: 3

Tercer color: R:156 G:156 B:156, la posición en el gradiente será: 10

Cuarto color: R:230 G:230 B:230, la posición en el gradiente será: 50

Quinto color: R:156 G:156 B:156, la posición en el gradiente será: 90

Sexto color: R:175 G:175 B:176, la posición en el gradiente será: 97

Sétimo color: R:175 G:175 B:176, la posición en el gradiente será: 100

A partir del sexto color todo funciona como un espejo los colores y las posiciones deben invertirse. (ver imagen 11 )

Paso #5: Creando el efecto de resplandor metálico. Para crear el efecto de rebote de luz en el metal vamos a duplicar la capa del cuerpo del iPod (el rectángulo) y vamos a crear otro rectángulo que abarque una cuarta parte del ancho de este, con el ‘pathfinder’ vamos a crear un corte de la capa superior sobre la inferior (la capa duplicada). Una vez que tengamos el corte de las capas y la capa resultante encima del cuerpo del iPod procedemos a crear en esta capa un degradado de blanco a negro, la transparencia de esta capa debe ser ‘screen’; debemos ajustar el degradado, no queremos mucho blanco pero tampoco mucho negro en el medio. (ver imágenes 12, 13 y 14)

Paso #6: Creando la rueda y los controles. Para crear los controles del iPod vamos a crear dos círculos, uno grande y uno pequeño que ira en el centro del grande. El diámetro del circulo grande debe medir  150px, el diámetro del circulo del centro debe medir 75 px. Una vez que tengamos los dos círculos debemos seleccionarlos y una vez seleccionados creamos un corte de la capa del frente con la de abajo, con esto creamos un vacío en el centro del circulo grande. La posición de los controles y el circulo en conjunto debe ser de mas o menos 22px desde la base de la pantalla oscura anteriormente creada. Las flechas y los signos de play y stop son muy sencillos de diseñar pero si no sabes como pregúntame. (ver imágenes 15 y 16)

Paso #7: Creando segunda pantalla para la imagen. Para crear la pantalla del centro (la imagen) vamos a crear una vez mas un cuadrado regular de 5 x 5 (pixeles) y vamos a posicionar el vector de la parte superior izquierda justo encima del vector de la primera pantalla oscura. Una vez hecho esto procedemos a colocar guías en el vértice inferior derecho del cuadrado, pasamos el cuadrado a los cuatro lados de la pantalla oscura y colocamos guías en cada lado. Cuando ya tenemos las guías, creamos un cuadrado dentro de las guías creadas, este cuadrado nos va a servir como la pantalla central, es el cuadrado que utilizaremos para crear una mascara mas adelante. (ver imágenes 17, 18, 19 y 20)

Paso #8: Importando la imagen y creando el efecto de rebote de luz. Para colocar la imagen dentro del cuadrado que acabamos de crear debemos importar una imagen que quieras como fondo, o simplemente arrastrar la imagen dentro del escenario en Adobe Illustrator, una vez hecho esto vamos a colocar la imagen debajo del cuadrado y a crear una mascara del cuadrado con la imagen. Para crear el efecto de luz sobre la pantalla, vamos a duplicar la pantalla oscura de abajo y la colocaremos en frente de todo (clic derecho – arrange – bring to the front) de igual manera creamos otra capa que ocupa un tercio del ancho y creamos un corte con el Pathfinder; la transparencia de esta nueva capa debe ser ‘screen’ y su relleno debe ser un degradado de blanco y negro que debe ser ajustado para que la transparencia sea la correcta. (ver imágenes 21, 22, 23 y 24)

Paso #9: Solo debes crear un cuadrado con las esquinas redondeadas, aplicarle un degradado y colocarlo en la parte izquierda-superior para que parezca un botón J. (ver imágenes 25, 26 y 27) y listo!! Ya tienes tu iPod diseñado en 9 pasos!

Resultado: