Recursos web, diseño, joomla!, tutoriales, opinión, algunas noticias...

Suscríbete a través del feed RSS
Recibe los últimos artículos a tu e-mail
Realizar una búsqueda

Dibujar un iPod en 7 pasos Compartelo!
domingo, 03 de septiembre de 2006

Dibujar un iPod es fácil, en solo 7 pasos se puede hacer, mira como queda el dibujo final:

 

A pesar que tendria que usar Illustrator, yo uso Flash para dibujar ya que me acostumbré al uso de sus herramientas y mi desempeño es mucho más rápido allí. Igualmente los pasos son válidos para la mayoria de las herramientas de dibujo ...

 

1. En un escenario de 250 px por 400 px creamos una capa llamada "fondo". En ella dibujamos un rectángulo de 150 px de ancho por 300 px de alto con bordes redondeados.

El color de la línea de contorno es #ABABAB y el relleno es un degradado lineal de #EDEFEF y #F6F6F7:

 

Degradado

 

El radio de las esquinas de los bordes deben ser igual a 10. Eso lo especificamos yendo a la opción Establecer radio de esquina:

 

Creación de un rectángulo

 

Luego con la herramienta Transformación de relleno seleccionamos al relleno y lo rotamos unos grados:

 

Rotar degradado

 

Una vez hecho alineamos el rectángulo en el medio del escenario.

 

2. En una nueva capa superior llamada "menu" creamos 2 círculos sin línea de contorno. El primer círculo tendrá un diámetro de 100 px con un relleno #D2D3D7, mientras que el segundo círculo tendrá un diámetro de 50 px con un relleno igual a #FFFFFF. Después metemos al círculo más chico dentro del más grande y los alineamos. Finalmente los situamos en la parte baja del rectángulo:

 

Circulos que forman el menú

 

3. En otra capa llamada "texto menu" creamos dos pequeños triángulos con relleno #FFFFFF. Luego con la herramienta Texto escribimos "MENU", "II" y "I" con Arial 9, Negrita, color #FFFFFF. Lo siguiente será crear los simbolos de Play / Pausa, Adelante y Atras:

 

Menú hecho

 

4. Creamos una capa llamada "pantalla". En ella dibujamos un rectángulo sin relleno con una línea de contorno negra de 3 px. El tamaño del rectángulo debe ser de 110 px de ancho por 80 px de alto. Además los bordes deben estar redondeados con un radio igual a 10:

 

Pantalla

 

Luego al rectángulo lo dividimos en 3 partes como se muestra la imágen:

 

Pantalla dividida en tres

 

Con la herramienta Cubo de pintura rellenamos a la primera división y ultima con los colores #DEE5E5 y #FFFFFF respectivamente. A la segunda división la rellenamos con un degradado lineal de dos colores: #2C6DCD y #739DDC:

 

Degradado

 

El degradado debe estar en horizontal. Para eso, una vez colocado el relleno, vamos a la herramienta Transformación de relleno, seleccionamos el relleno, lo rotamos 90 grados. Luego eliminamos las líneas divisoras. La pantalla debe quedar así:

 

Pantalla dividida final

 

5. En una capa llamada "textos pantalla" escribimos con la herramienta Texto lo que queremos mostrar dentro de la pantalla. Hay que tener en cuenta que el texto dentro del sector azul debe estar en blanco:

 

Textos en pantalla

 

6. En el costado superior derecho de la pantalla creamos algo como esto:

 

Indicacion de carga

 

El relleno es #9ADD5F y la línea de contorno es #999999 

 

7. Finalmente creamos una capa llamada "sombra" y la situamos por debajo de todas las capas. Dibujamos un óvalo de 150 px de ancho con relleno #ABABAB y lo convertimos en símbolo:

 

Óvalo gris

 

Seleccionamos al óvalo y vamos al panel Filtros. Luego añadimos el filtro Desenfocar con 29 de X e Y:

 

Sombra

 

Después situamos al óvalo por debajo del rectángulo que forma el iPod, quedando asi:

 

Sombra final

Y listo!

 

Descargar ejemplo creado

 

¿Te interesó este artículo?Puedes suscribirte al feed RSS ó dejar tu email para recibir las últimas noticias, tal como lo hacen actualmente las 2255 personas que siguen al blog


..y tal vez te interese:




 Comentarios (1)
 1 Escrito por nicole, el 16-08-2007 17:07
super fome la wuea :@


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code

 
< Anterior   Siguiente >