¿Cómo Crear un Paquete de Iconos de Teléfono en Adobe Illustrator?

En el tutorial de hoy, vamos a tomar un pequeño viaje en el tiempo y mirar el proceso de crear tres de los dispositivo de comunicación más icónicos alguna vez hecho, usando nada más que algunas simples formas geométricas y herramientas de Adobe Illustrator.

Como siempre, no olvides que puedes expandir el paquete yendo a GraphicRiver, donde encontrarás una gran selección de iconos con temas de comunicación.

Habiendo dicho eso, toma un parte de café latte y comencemos.

1. ¿Cómo Preparar un Nuevo Archivo?

Suponiendo que tienes Illustrator abierto y que esté en el fondo, tráelo al frente y prepara un Nuevo Documento (Archivo > Nuevo o Control-N) usando la siguiente configuración:

• Número de Mesas de Trabajo: 1
• Anchura: 800 px
• Altura: 600 px
• Unidades: Píxeles

Y desde la pestaña de Avanzado:

• Modo de Color: RGB
• Efectos de Rasterizar: Pantalla (72 ppp)
• Modo de Previsualización: Por defecto

2. ¿Cómo Preparar una Cuadrícula Personalizada?

Ya que vamos a crear los iconos usando píxel perfecto, queremos poner una buena Cuadrícula para que tengamos control completo sobre nuestras formas.

Paso 1

Ve a Edición > Preferencias > Guías y Cuadrículas y ajusta la siguiente configuración:

• Cuadrícula cada: 1 px
• Subdivisiones: 1

Consejo: puedes aprender más acerca de cuadrículas leyendo este tutorial ¿Cómo Funciona el Sistema de Cuadrícula de Illustrator?.

Paso 2

Una vez que hallas preparado tu cuadrícula personalizada, todo lo que necesitamos hacer para asegurarnos de que nuestras formas se miren frescas es permitir la opción Ajustar a Cuadrícula y Ajustar a Píxel encontradas en el menú Vista, que transformará en Ajustar a Píxel cada vez que entres en el modo Previsualización de Píxel (si estás usando una versión antigua del software).

Ahora, si eres nuevo en esto de "píxel perfecto", recomiendo que leas mi tutorial de ¿Cómo Crear una Obra de Arte de Píxeles Perfectos?, que te ayudará a expandir tu habilidad técnica en el menor tiempo posible.

3. ¿Cómo Preparar las Capas?

Con el Nuevo Documento creado, sería una buena idea estructurar nuestro proyecto usando un par de capas, ya que de esta manera podemos mantener un flujo activo, enfocándonos en un icono a la vez.

Habiendo dicho eso, trae el panel de Capas, y crea un total de cuatro capas, que nombraremos de la siguiente manera.

• capa 1: cuadrícula de referencia
• capa 2: motorola dynatac
• capa 3: nokia communicator
• capa 4: iphone

4. ¿Cómo Crear las Cuadrículas de Referencia?

Las Cuadrículas de Referencia (o Cuadrícula Base) son un grupo de superficies de referencia precisamente delimitadas, que nos permiten crear nuestros iconos enfocándonos en el tamaño y consistencia.

Usualmente, el tamaño de la cuadrícula determina el tamaño de los iconos actuales, y ellos deben siempre ser la primera decisión una vez que comiences un proyecto nuevo ya que siempre querrás comenzar desde el tamaño más pequeño posible y seguir en eso.

Ahora, en nuestro caso, vamos a crear el paquete de iconos usando solo un tamaño, más exactamente de 128 x 128 px, que es algo grande.

Paso 1

Comienza bloqueando todas las capas a excepción de las "cuadrículas de referencia", y luego toma la Herramienta Rectángulo (M) y crea un cuadrado naranja (#F15A24) de 128 x 128 px, que ayudará a definir el tamaño general de nuestros iconos.

Paso 2

Añade otro más pequeño de 120 x 120 px (#FFFFFF), que posicionaremos encima de la forma anterior, ya que actuará como nuestra área activa de dibujo, de esta manera dándonos un relleno de 4 px con el cual trabajar.

Paso 3

Selecciona y agrupa los dos cuadrados usando Control-G, alineando al centro en la respectiva mesa de trabajo. Crea las cuadrículas restantes usando dos copias (Control-C > Control-F) en una distancia horizontal de 40 px de la original, bloqueando la capa actual antes de proceder a la sección siguiente.

5. ¿Cómo Crear el Teléfono Motorola DynaTAC?

Suponiendo que has podido crear las pequeñas cuadrículas de referencia, nos moveremos a la siguiente capa (que sería la segunda), y vamos a comenzar el proyecto creando el primer celular portátil comercial creado por Motorola en 1983.

Paso 1

Comienza creando el fondo circular del icono usando un círculo de 104 x 104 px, que le colorearemos usando #7DDBCD y luego alinearemos al centro de la respectiva área de dibujo activa posicionandola a una distancia de 26 px de su borde superior.

Paso 2

Ya que queremos que el círculo permanezca apegado a la superficie del área activa de dibujo, tendremos que aplicar una máscara usando un cuadrado de 120 x 120 px (resaltado con rojo), que alinearemos al centro de la cuadrícula de referencia más grande. Una vez que tengas la Máscara en su lugar, selecciona ambas formas y luego da clic-derecho > Crear Máscara de Recorte.

Paso 3

Dibuja el primer plano usando una línea de Trazo de 106 px de ancho y 4 px de grosor (#3F3330), que alinearemos a la esquina inferior izquierda del área activa de dibujo, seguida de uno de 2 px de ancho (#3F3330) que posicionaremos en la esquina inferior derecha. Toma tu tiempo, y una vez que termines, selecciona y agrupa las dos usando Control-G, haciendo los mismo para todo el fondo.

Paso 4

Comienza a trabajar en la sección frontal del dispositivo, creando un rectángulo de 24 x 22 px, que colorearemos usando #E6E8EF y luego posicionaremos en el fondo, a una distancia de 38 px del borde izquierdo del área activa de dibujo y 24 px de su parte superior.

Paso 5

Dale a la forma un contorno usando el método de Trazo, creando una copia (Control-G), que pegaremos en frente (Control-F) y luego ajustaremos, cambiando primero su color a #3F3330 y luego volteando su Relleno con su Trazo (Mayus-X). Pon la Anchura del contorno a 4 px y su Esquina a Unión Redonda, seleccionando y agrupando las dos formas usando Control-G.

Paso 6

Añade la línea de intersección central del audífono usando un rectángulo redondo de 12 x 2 px (#3F3330) con un Radio de Vértice de 1 px, que alinearemos al centro las dos formas que agruparemos.

Paso 7

Añade las líneas de intersección usando dos rectángulos redondos de 8 x 2 px (#3F3330) con un Vértice de Radio de 1 px, que pondremos a una distancia vertical de 2 px de su centro más grande. Toma tu tiempo, y una vez que termines, selecciona y agrupa (Control-G) todas las tres intersecciones, haciendo lo mismo para toda la pieza.

Paso 8

Comienza trabajando en la sección de la pantalla creando un rectángulo de 24 x 12 px (#565560), que posicionaremos debajo de las formas anteriores y luego ajustaremos seleccionando sus puntos de ancla, usando la Herramienta Selección Directa (A), que empujaremos al lado derecho por una distancia de 6 px usando la Herramienta Mover (clic-derecho > Transformar > Mover > Horizontal > 6 px.)

Paso 9

Dale a la forma resultante un grosor de contorno de 4 px (#3F3330) con Unión Redonda, seleccionando y agrupando las dos formas usando Control-G.

Paso 10

Crea un rectángulo más pequeño de 14 x 4 px (#3F3330), que ajustaremos seleccionando y empujando sus puntos de ancla al lado derecho por una distancia de 2 px (clic-derecho > Transformar > Mover > Horizontal > 2 px). Posiciona la forma resultante al centro de las formas que hemos creado, seleccionando y agrupando (Control-G) las tres juntas.

Paso 11

Crea la sección de los números del teléfono usando un rectángulo de 24 x 36 px (#828293) con un grosor de contorno de 4 px (#3F3330), que agruparemos (Control-G) y luego posicionaremos en la sección inferior de la pantalla.

Paso 12

Añade cuatro filas de botones, usando tres rectángulos de 4 x 2 px (#3F3330) horizontalmente puestas 2 px una de la otra, que agruparemos (Control-G), y luego pondremos verticalmente a una distancia de 2 px, posicionándolos a una distancia de 4 px a partir del borde superior de la sección actual.

Paso 13

Crea la fila de botones inferiores usando cinco rectángulos de 4 x 2 px (#3F3330), que agruparemos (Control-G) y luego posicionaremos 4 px de sus filas superiores, como se ve en la imagen de referencia.

Paso 14

Añade la pequeña intersección, usando un rectángulo de 8 x 4 px (#3F3330), que ajustaremos individualmente seleccionando y empujando sus puntos de ancla hacia dentro por 2 px (clic-derecho > Transformar > Mover > Horizontal > + / - 2 px dependiendo de que lado vas a comenzar). Alinea al centro la forma resultante al borde inferior de la sección actual, seleccionando y agrupando (Control-G) todas las formas que la componen antes de movernos al siguiente paso.

Paso 15

Crea la sección inferior del teléfono, usando un rectángulo de 24 x 16 px (#565560), que ajustaremos seleccionando y empujando sus puntos de ancla inferior a la parte izquierda por 12 px usando la herramienta Mover (clic-derecho > Transformar > Mover > Horizontal > -12 px). Dale a la forma resultante un contorno de 4 px de grosor (#3F3330), agrupando (Control-G) y luego posicionando las dos debajo de la sección anterior.

Paso 16

Añade la intersección del dispositivo usando un rectángulo redondo de 8 x 2 px (#3F3330) con un Radio de Vértice de 1 px, que posicionaremos 2 px alejado del borde inferior de la sección actual, asegurando de seleccionar y agrupar (Control-G) todas las formas que la componen.

Paso 17

Crea la parte inferior del teléfono usando un rectángulo más pequeño de 24 x 8 px (#E6E8EF) con un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y luego posicionaremos debajo de la sección inferior más larga.

Paso 18

Añade la intersección inferior usando un rectángulo de 8 x 4 px (#3F3330), que ajustaremos seleccionando individualmente y empujando sus puntos de ancla hacia dentro por 2 px usando la Herramienta Mover (clic-derecho > Transformar > Mover > Horizontal > + / - 2 px dependiendo de que lado comiences). Posicionando la forma resultante en el centro del borde inferior, seleccionando y agrupando (Control-G) todas las formas que componen la sección, haciendo lo mismo para las otras secciones.

Paso 19

Crea la sección lateral del teléfono usando un rectángulo de 32 x 94 px (#7C8ADD) con un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y luego posicionaremos en el lado derecho del dispositivo, asegurando posicionarlos debajo de sus secciones frontales (clic-derecho > Organizar > Enviar Detrás) como se ve en la imagen de referencia.

Paso 20

Añade una línea de división vertical usando un rectángulo de 2 x 94 px (#3F3330), que posicionaremos a una distancia de 4 px de la sección frontal del dispositivo. Toma tu tiempo, y una vez hecho, selecciona y agrupa (Control-G) todas las secciones usando Control-G.

Paso 21

Comienza a trabajar en la antena (si, los teléfonos tuvieron antenas exteriores en cierto punto), creando su base usando un rectángulo de 8 x 6 px (#565560) con un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y luego posicionaremos encima del teléfono, a una distancia de 10 px de su borde derecho.

Paso 22

Añade el cuerpo principal usando un rectángulo de 4 x 18 px (#3F3330), que ajustaremos poniendo el Radio de su vértice superior a 2 px desde las Propiedades del Rectángulo del panel Transformar, posicionando la forma resultante encima de la base.

Paso 23

Crea la sección central de la antena usando un rectángulo de 8 x 6 px (#3F3330) que ajustaremos individualmente seleccionando y empujando sus puntos de ancla hacia dentro por 2 px usando la Herramienta Mover (clic-derecho > Transformar > Mover > Horizontal > + / - 2 px dependiendo del lado que comiences). Una vez que termines, posiciona la forma resultante encima de la base, seleccionando y agrupando (Control-G) todas las formas que componen la antena.

Paso 24

Termina el icono dibujando las dos líneas de detalle lateral usando una línea de Trazo de 4 px de alto y 2 px de grosor (#3F3330), seguida de una más grande de 16 px de alto y 2 px de ancho (#3F3330), que pondremos verticalmente a una distancia de 4 px una de la otra, agrupando (Control-G) y luego posicionando las dos en el lado izquierdo del teléfono. Toma tu tiempo, y una vez que termines, no olvides seleccionar y agrupar (Control-G) todas las secciones que lo componen antes proceder al siguiente paso.

6. ¿Cómo Crear el Teléfono Nokia Communicator?

Suponiendo que has terminado de trabajar en tu primer icono, nos moveremos a la siguiente capa (que sería la tercera), donde comenzaremos a trabajar en el Nokia Communicator.

Paso 1

Crea el fondo usando una copia (Control-C) del icono anterior, que pegaremos en la capa actual (Control-F) y luego alinearemos al centro a nuestra segunda área de dibujo activa. Una vez que termines, asegúrate de bloquear la primera capa del icono antes de seguir al siguiente paso.

Paso 2

Crea la sección lateral de la mitad del teléfono, usando un Rectángulo Redondo de 80 x 40 px (#7C8ADD) con un Radio de Vértice 8 px de Radio y 4 px de grosor de contorno (#3F3330), que agruparemos (Control-G) y luego posicionaremos en el primer plano, a una distancia de 14 px del borde derecho del área de dibujo activa.

Paso 3

Añade la intersección rectangular usando un rectángulo de 4 x 12 px que le daremos color usando #3F3330 y alinearemos al centro al borde derecho de la sección más grande.

Paso 4

Crea la sección frontal usando una copia (Control-C) de esa que hemos terminado de trabajar, la cual pegaremos en frente (Control-F) y luego ajustaremos poniendo el color de la forma del relleno a #828293, empujando las dos forma a la izquierdo por 8 px usando la herramienta Mover (clic-derecho > Transformar > Mover > Horizontal > -8 px).

Paso 5

Comienza trabajando en los botones creando la primera fila usando cinco rectángulos redondos de 8 x 4 px (#3F3330) con un Radio de Vértice de 2 px, que espaciaremos horizontalmente 2 px uno del otro, agrupando (Control-G) y luego posicionando a una distancia de 6 px del borde izquierda de la sección frontal y 4 px de su parte superior.

Paso 6

Crea la segunda fila usando seis rectángulos redondos de 8 x 4 px (#3F3330) con un Radio de Vértice de 2 px, que agruparemos (Control-G) y luego posicionaremos a una distancia de 4 px del borde izquierdo del área de dibujo y 2 px de su fila anteriormente creada.

Paso 7

Añade la tercera fila, usando una copia (Control-C > Control-F) de la primera, que posicionaremos debajo de la segunda, manteniendo la misma brecha de 2 px.

Paso 8

Crea la cuarta fila de botones, usando una copia (Control-C > Control-F) de la segunda, que posicionaremos a una distancia de 2 px de la que está en la parte inferior, asegurando de borrar sus últimos botones, seleccionándolo usando la Herramienta Selección Directa (A) y luego presionar Suprimir.

Paso 9

Añade la quint y última fila, usando tres rectángulos redondos de 8 x 4 px (#3F3330) con un Radio de Vértice de 2 px, seguido de uno de 14 x 4 px (#3F3330), que posicionaremos como se ve en la imagen de referencia.

Paso 10

Añade el botón redondo usando un círculo de 4 x 4 px (#3F3330), que posicionaremos 2 px del lado derecho de su fila.

Paso 11

Crea el botón más grande, usando un rectángulo redondo de 8 x 10 px (#3F3330) con un Radio de Vértice de 2 px, que ajustaremos poniendo su Radio de su esquina superior izquierda a 4 px dentro de las Propiedades del Rectángulo del panel Transformar. Una vez hecho, alinea a la parte inferior la forma resultante a la segunda fila, posicionandolo 2 px de su borde derecho.

Paso 12

Comienza trabajando en el D-pad del teléfono, creando un círculo de 16 x 16 px (#3F3330), que posicionaremos a una distancia de 2 px de su borde inferior de la sección frontal y 4 px de su derecho.

Paso 13

Crea un círculo más pequeño de 8 x 8 px (#828293), que posicionaremos encima del que hicimos en el paso anterior.

Paso 14

Separa los botones del D-pad usando dos líneas de Trazo de 2 px de grosor (#828293), que posicionaremos en el círculo más pequeño como se ve en la imagen de referencia.

Paso 15

Termina de añadir el D-pad añadiendo su sección central usando un círculo de 4 x 4 px (#3F3330), asegurando de seleccionar y agrupar (Control-G) todas las formas que lo componen, haciendo lo mismo para los otros botones.

Paso 16

Termina la sección actual añadiendo la intersección inferior, usando un rectángulo de 16 x 4 px (#3F3330), que alinearemos al centro de su borde inferior. Una vez que termines, selecciona y agrupa (Control-G) todas las formas que componen la sección frontal, haciendo lo mismo para toda la mitad inferior de todo el teléfono.

Paso 17

Crea la sección de la mitad superior, usando un rectángulo redondeado de 80 x 40 px (#7C8ADD), con un Radio de Vértice de 8 px y un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y luego posicionaremos encima de la mitad inferior del teléfono a una distancia de 16 px de su borde derecho del área de dibujo activa.

Paso 18

Crea la sección frontal del teléfono, usando otro rectángulo redondo de 80 x 40 px (#A3A3AD) con un Radio de Vértice de 8 px y un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y luego alinearemos a la izquierda de la respectiva mitad inferior.

Paso 19

Añade la pantalla del teléfono usando un rectángulo de 48 x 24 px (#565560) con un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y luego alineamos al centro a su sección de mitad superior.

Paso 20

Crea las flechas de arriba y abajo usando dos rectángulos de 8 x 6 px (#3F3330), que ajustaremos poniendo el Radio de sus esquinas exteriores a 4 px y su interior a 2 px desde las Propiedades del Rectángulo del panel Transformar. Pon verticalmente las formas resultantes a una distancia de 4 px una de la otra, agrupando (Control-G) y luego posicionandolas en el lado izquierdo de la pantalla.

Paso 21

Crea los botones de la derecha usando tres elipses 8 x 4 px (#3F3330), que pondremos verticalmente a una distancia de 2 px una de la otra, que luego agruparemos (Control-G) y posicionaremos en el lado opuesto de la pantalla.

Paso 22

Termina la sección actual añadiendo una pequeña intersección, usando un rectángulo de 12 x 4 px (#3F3330), que alinearemos al centro de su borde superior. Toma tu tiempo, y una vez que termines, selecciona y agrupa (Control-G) todos las formas que lo componen, haciendo lo mismo para toda la mitad superior.

Paso 23

Añade la pieza que conecta el centro, usando un rectángulo redondo de 44 x 8 px (#3F3330) con un Radio de Vértice de 4 px, que posicionaremos en el centro del punto de intersección de las mitades superiores e inferiores.

Paso 24

Comienza trabajando en la antena del dispositivo creando su parte inferior, usando un rectángulo de 6 x 24 px (#565660) con un Radio de Vértice inferior de 3 px y un contorno de 4 px de grosor (#3F3330) con Unión Redonda, que agruparemos (Control-G) y luego posicionaremos a una distancia de 14 px del borde derecho del área activa de dibujo y 22 px de su parte superior.

Paso 25

Añade la línea divisoria horizontal usando un rectángulo de 6 x 4 px (#3F3330), que posicionaremos a una distancia de 2 px de su borde superior de la parte inferior del cuerpo.

Paso 26

Crea la parte superior de la antena usando un rectángulo de 6 x 24 px (#3F3330) con un Radio de Vértice superior de 3 px, que posicionaremos encima de su cuerpo inferior. Una vez terminado, asegúrate de seleccionar y agrupar (Control-G) todas las formas que la componen, haciendo lo mismo para todo el teléfono.

Paso 27

Como hicimos con el primer icono, vamos a terminar el actual añadiendo dos líneas de detalle vertical al lado derecho del cuerpo del teléfono, asegurando de seleccionar y agrupar (Control-G) todas las secciones que la conforman antes de movernos al siguiente paso.

7. ¿Cómo Crear el iPhone?

Ahora vamos a nuestro tercero y último icono, así que sin gastar más tiempo, asegúrate de que estás en la capa correcta (que sería la cuarta) y vamos a comenzar a trabajar en una de los dispositivos de interacción que ha cambiado la industria entera del teléfono.

Paso 1

Comienza creando el fondo repetido usando una copia (Control-C) de uno de los otros iconos, que pegaremos (Control-F) en la capa actual y luego alinearemos al centro de la tercera cuadricula de referencia.

Paso 2

Crea la sección lateral del teléfono, usando un rectángulo redondo de 60 x 114 px (#7C8ADD) con un Vértice de Radio de 8 px y un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y luego posicionaremos en el primer plano a una distancia de 26 px de su borde derecho del área activa de dibujo y 2 px de su parte superior.

Paso 3

Y el botón superior usando un rectángulo de 16 x 4 px (#3F3330), que posicionaremos encima de la sección más grande de lado, a una distancia de 12 px de su borde derecho.

Paso 4

Añade las pequeñas líneas de antena, usando dos rectángulos de 6 x 4 px (#3F3330), que alinearemos al lado del borde derecho de la sección lateral, posicionandolas a una distancia de 8 px de su borde inferior y superior.

Paso 5

Crea el botón de lado usando un rectángulo redondo de 7 x 12 px (#3F3330) con un Vértice de Radio de 2 px, que posicionaremos a una distancia de 12 px de la línea superior de la antena, y 24 px de su borde derecho del área activa de dibujo. Una vez hecho, selecciona y agrupa (Control-G) todas las formas que componen la sección antes de ir al siguiente paso.

Paso 6

Añade la sección frontal del teléfono usando un rectángulo redondo de 60 x 114 px (#E6E8EF) con un Radio de Vértice de 8 px y un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y posicionaremos a una distancia de 24 px del borde izquierdo del área de dibujo.

Paso 7

Crea la pantalla usando un rectángulo de 48 x 82 px (#565560) con un contorno de 4 px de grosor (#3F3330), que agruparemos (Control-G) y luego alinearemos a la sección frontal del dispositivo.

Paso 8

Añade la cámara frontal usando un círculo de 2 x 2 px (#3F3330), que alinearemos al centro a la sección frontal del teléfono, posicionandolo 2 px de su borde superior.

Paso 9

Crea la inserción del auricular usando un rectángulo redondo de 12 x 2 px (#3F3330) con un Radio de Vértice de 1 px, que posicionaremos debajo de la cámara frontal, a una distancia de 2 px.

Paso 10

Añade el sensor de luz usando otro círculo de 2 x 2 px (#3F3330), que posicionaremos en el lado izquierdo de tu auricular, a una distancia de 2 px, seleccionando y agrupando (Control-G) todas las tres formas.

Paso 11

Crea el botón redondo del teléfono usando un círculo de 8 x 8 px, que colorearemos usando #3F3330 y luego alinearemos al centro. Toma tu tiempo, y una vez que termines, selecciona y agrupa (Control-G) toda las formas que componen la sección frontal, haciendo lo mismo para todo el teléfono.

Paso 12

Termina el icono añadiendo dos líneas de detalle vertical, asegurando de seleccionar y agrupar (Control-G) todas las secciones que lo componen antes de guardar el proyecto.

¡Terminado!

Ahí lo tienes—un buen tutorial de cómo crear tus iconos de comunicación, usando nada más que formas y herramientas básicas en Illustrator. Como siempre, espero que hallas podido seguir los pasos y aprendido algo nuevo durante el proceso.