Ayudante De Santa
06-11-2015, 22:19:08
Ver la Versión Completa Con Imagenes : Crea un set de avatares creativos
Frank Lucas
14-05-2018, 20:43:14
https://img.tutpad.com/tut/tmp/1742/61/47.png?size=%3C700
1. Cómo configurar un documento nuevo
Como hacemos con todos nuestros proyectos, empezaremos creando un documento nuevo (Archivo > Nuevo o Control + N), al cual le aplicaremos los siguientes ajustes:
Número de mesas de trabajo: 1
Anchura: 800 px
Altura: 600 px
Unidades: Píxeles
En la pestaña Avanzado:
Modo de color: RGB
Efectos de rasterizado: Pantalla (72 ppp)
Vamos a crear los iconos al píxel, al más mínimo detalle, así que te recomiendo que dediques un rato a leer este tutorial para estar bien preparado.
https://img.tutpad.com/tut/tmp/1742/61/1.png?size=%3C700
2. Cómo configurar las capas
Una vez hayas creado el documento, es buena idea separar los iconos por capas, ya que así podrás optimizar tu flujo de trabajo centrándote en un elemento cada vez, lo que te permite ir haciendo un seguimiento de todas y cada una de las formas en todo momento.
Abre el panel Capas y crea un total de cinco capas, a las cuales llamaremos de la siguiente manera:
Capa 1 > cuadrículas de referencia
Capa 2 > productor musical
Capa 3 > editor de fotografías
Capa 4 > programador
Capa 5 > ilustrador
https://img.tutpad.com/tut/tmp/1742/61/2.png?size=%3C700
La manera en que integraremos estas capas en nuestro flujo de trabajo será sencilla. Bloquearemos todas las capas excepto aquella en la que vayamos a trabajar. De esta manera, no moveremos algunas de las formas por accidente. Luego, cuando terminemos con el icono en cuestión, podemos bloquear su capa y pasar a la siguiente.
3. Cómo crear las cuadrículas de referencia
En cuanto hayamos dividido el proyecto por capas, podremos empezar a crear las cuadrículas de referencia, que nos ayudarán a crear los iconos, centrándonos en el tamaño y la consistencia.
Paso 1
Activa la herramienta Rectángulo (M) y crea un cuadrado de 128x128 px, al cual le asignaremos el color #F15A24. Céntralo a la mesa de trabajo usando las opciones de Centrar y Centrar verticalmente del panel Alinear.
https://img.tutpad.com/tut/tmp/1742/61/3.png?size=%3C700
Paso 2
Crea otro cuadrado más pequeño, de 120x120 px, que servirá de área activa de dibujo, lo cual nos dará unos contornos de 4 px. Colorea la forma usando el blanco (#FFFFFF) y luego agrupa los cuadrados (Control + G). Crea tres copias más a un lado (Control + C > Control + F tres veces), y colócalas a una distancia de 40 px del original.
https://img.tutpad.com/tut/tmp/1742/61/4.png?size=%3C700
Cuando hayas terminado de crear las cuadrículas de referencia, bloquea esa capa y pasa a la siguiente, en la cual empezaremos a trabajar en el primer icono.
4. Cómo crear el avatar base
Vamos a comenzar creando el avatar base, que nos servirá para ir añadiéndole los símbolos distintivos para cada uno, así que selecciona la capa adecuada (que sería la segunda) y ¡manos a la obra!
Paso 1
Crea un fondo usando un círculo de 120x120 px. Coloréalo con el color #9364D8 y céntralo a la primera área activa de dibujo.
https://img.tutpad.com/tut/0/428/5.png?size=%3C700
Paso 2
Empecemos por la cabeza. Crea la sección circular inferior usando una elipse de 28x12 px y coloréala con el color #FFFFFF. Colócala a una distancia de 36 px del borde izquierdo del área activa de dibujo y de 18 px del borde inferior.
https://img.tutpad.com/tut/0/428/6.png?size=%3C700
Paso 3
Añade un rectángulo de 28x54 px (#FFFFFF) sobre la elipse que acabas de crear. Colócalo de manera que se superponga a la mitad superior de esa elipse, tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/7.png?size=%3C700
Paso 4
Desplázate unos píxeles a la derecha y crea un rectángulo más pequeño, de 12x40 px. Coloréalo usando el color blanco (#FFFFFF) y colócalo pegado al borde derecho de la forma que hemos creado en el paso anterior.
https://img.tutpad.com/tut/0/428/8.png?size=%3C700
Paso 5
Termina esta parte de la cabeza añadiendo un rectángulo aún más pequeño de 8x24 px (#FFFFFF). Colócalo como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/9.png?size=%3C700
Paso 6
Selecciona las cuatro formas y unifícalas pulsando la opción de Unificar en el panel Buscatrazos.
https://img.tutpad.com/tut/0/428/10.png?size=%3C700
Paso 7
Pulamos la forma resultante eliminando los puntos de ancla extra que se han creado al haber unificado las formas (se muestran en la siguiente imagen). Para ello, activa la herramienta Eliminar punto de ancla (-) y haz clic en esos puntos.
https://img.tutpad.com/tut/0/428/11.png?size=%3C700
Paso 8
Asigna a la forma resultante un contorno creando una copia de ella (Control + C) y pegándola delante (Control + F). Cambia el color a #3F3330 e intercambia luego el relleno y el trazo (Mayús + X). Asigna un grosor de 4 px a esta forma y elige la opción de Unión redondeada. Después, agrupa las dos formas usando el atajo de teclado Control + G.
https://img.tutpad.com/tut/0/428/12.png?size=%3C700
Paso 9
Crea la parte superior de la cabeza con una elipse de 48x12 px (#B5ACA9) que tenga un contorno de 4 px de grosor (#3F3330). Agrupa ambos elementos (Control + G) y colócalos en la parte superior de las formas anteriores tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/13.png?size=%3C700
Paso 10
Añade el ojo derecho usando un círculo de 4x4 px. Coloréalo con el color #3F3330 y colócalo sobre la cabeza, a una distancia de 6 px del contorno del borde superior y de 10 px del borde derecho. Una vez hecho, selecciona todas las formas que componen el avatar y agrúpalas usando el atajo de teclado Control + G.
https://img.tutpad.com/tut/0/428/14.png?size=%3C700
Paso 11
Saquemos a relucir nuestro lado más artístico y añadamos algo de textura usando un pincel de punteado que yo mismo he creado y que puedes descargar en la sección de archivos adjuntos del tutorial. Para usarlo, ve al panel Pinceles, abre el menú desplegable, ve a Abrir biblioteca de pinceles > Otra biblioteca y localiza el recurso descargado.
Una vez ya lo hayas cargado, selecciona el pincel que se llama freepik stipple brush y, con un grosor de 0,1 px, dibuja dos líneas verticales en el lado izquierdo del avatar, tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/15.png?size=%3C700
Consejo: te habrás dado cuenta de que la textura no parece aplicarse correctamente, pero esto se debe al renderizado del software. Si exportases el archivo (Alt + Mayús + Control + S), la previsualización te mostraría exactamente el resultado real.
Paso 12
Usando el mismo pincel y el mismo grosor, dibuja otro trazo circular siguiendo la curvatura de la parte superior de la cabeza.
https://img.tutpad.com/tut/0/428/16.png?size=%3C700
Paso 13
Empecemos a enmascarar las líneas de la textura de la izquierda usando una copia (Control + C) de la forma grande que hay debajo de ellas y pegándola enfrente (Control + F). Luego, con todo esto seleccionado, haz clic derecho y elige la opción de Crear máscara de recorte.
https://img.tutpad.com/tut/0/428/17.png?size=%3C700
Paso 14
Ahora, repite el mismo proceso, pero, en esta ocasión, enmascarando la textura de la parte superior de la cabeza.
https://img.tutpad.com/tut/0/428/181.png?size=%3C700
Paso 15
Cuando hayas enmascarado las texturas, tendremos que cortar (Control + X) cada una por separado y luego entrar en sus respectivos grupos haciendo doble clic sobre ellas para acceder al modo de aislamiento, en el cual las pegaremos (Control + F) y nos aseguraremos de que los contornos queden colocados como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/19.png?size=%3C700
Paso 16
Como ya tenemos la base de lo que serán los cuatro avatares, crea tres copias (Control + C) y pega cada una en las capas restantes (Control + F). Después, bloquea esas capas.
https://img.tutpad.com/tut/0/428/20.png?size=%3C700
5. Cómo crear el avatar del productor musical
Como ya tenemos los avatares base, vuelve a la segunda capa para empezar a añadir detalles al primer avatar.
Paso 1
Comencemos con la nota musical creando una elipse de 10x8 px (#D3C5EF) con un contorno cuyo grosor sea de 4 px (#3F3330). Agrupa ambas formas (Control + G) y colócalas sobre la parte superior de la cabeza, a una distancia de 6 px del su borde izquierdo y de 2 px del borde inferior.
https://img.tutpad.com/tut/0/428/21.png?size=%3C700
Paso 2
Crea una copia (Control + C > Control + F) de las formas que acabamos de agrupar y colócalas en el lado derecho de la cabeza tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/22.png?size=%3C700
Paso 3
Crea las dos barras verticales (plicas) y la barra horizontal de las corcheas usando trazos de 4 px de grosor (#3F3330), cuyas uniones estén redondeadas.
https://img.tutpad.com/tut/0/428/23.png?size=%3C700
Paso 4
Dales a las cabezas de estas corcheas algo de textura usando el pincel de punteado con un grosor de 0,1 px. Cuando lo hayas hecho, selecciona todas las formas que componen estas corcheas y agrúpalas (Control + G). Luego, agrupa todo el avatar.
https://img.tutpad.com/tut/0/428/24.png?size=%3C700
Paso 5
Activa la herramienta Pincel (B) y, usando el pincel stipple bg brush, con color blanco (#FFFFFF), añade la textura frontal que cubra prácticamente todo el icono dibujando una línea curvada tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/25.png?size=%3C700
1. Cómo configurar un documento nuevo
Como hacemos con todos nuestros proyectos, empezaremos creando un documento nuevo (Archivo > Nuevo o Control + N), al cual le aplicaremos los siguientes ajustes:
Número de mesas de trabajo: 1
Anchura: 800 px
Altura: 600 px
Unidades: Píxeles
En la pestaña Avanzado:
Modo de color: RGB
Efectos de rasterizado: Pantalla (72 ppp)
Vamos a crear los iconos al píxel, al más mínimo detalle, así que te recomiendo que dediques un rato a leer este tutorial para estar bien preparado.
https://img.tutpad.com/tut/tmp/1742/61/1.png?size=%3C700
2. Cómo configurar las capas
Una vez hayas creado el documento, es buena idea separar los iconos por capas, ya que así podrás optimizar tu flujo de trabajo centrándote en un elemento cada vez, lo que te permite ir haciendo un seguimiento de todas y cada una de las formas en todo momento.
Abre el panel Capas y crea un total de cinco capas, a las cuales llamaremos de la siguiente manera:
Capa 1 > cuadrículas de referencia
Capa 2 > productor musical
Capa 3 > editor de fotografías
Capa 4 > programador
Capa 5 > ilustrador
https://img.tutpad.com/tut/tmp/1742/61/2.png?size=%3C700
La manera en que integraremos estas capas en nuestro flujo de trabajo será sencilla. Bloquearemos todas las capas excepto aquella en la que vayamos a trabajar. De esta manera, no moveremos algunas de las formas por accidente. Luego, cuando terminemos con el icono en cuestión, podemos bloquear su capa y pasar a la siguiente.
3. Cómo crear las cuadrículas de referencia
En cuanto hayamos dividido el proyecto por capas, podremos empezar a crear las cuadrículas de referencia, que nos ayudarán a crear los iconos, centrándonos en el tamaño y la consistencia.
Paso 1
Activa la herramienta Rectángulo (M) y crea un cuadrado de 128x128 px, al cual le asignaremos el color #F15A24. Céntralo a la mesa de trabajo usando las opciones de Centrar y Centrar verticalmente del panel Alinear.
https://img.tutpad.com/tut/tmp/1742/61/3.png?size=%3C700
Paso 2
Crea otro cuadrado más pequeño, de 120x120 px, que servirá de área activa de dibujo, lo cual nos dará unos contornos de 4 px. Colorea la forma usando el blanco (#FFFFFF) y luego agrupa los cuadrados (Control + G). Crea tres copias más a un lado (Control + C > Control + F tres veces), y colócalas a una distancia de 40 px del original.
https://img.tutpad.com/tut/tmp/1742/61/4.png?size=%3C700
Cuando hayas terminado de crear las cuadrículas de referencia, bloquea esa capa y pasa a la siguiente, en la cual empezaremos a trabajar en el primer icono.
4. Cómo crear el avatar base
Vamos a comenzar creando el avatar base, que nos servirá para ir añadiéndole los símbolos distintivos para cada uno, así que selecciona la capa adecuada (que sería la segunda) y ¡manos a la obra!
Paso 1
Crea un fondo usando un círculo de 120x120 px. Coloréalo con el color #9364D8 y céntralo a la primera área activa de dibujo.
https://img.tutpad.com/tut/0/428/5.png?size=%3C700
Paso 2
Empecemos por la cabeza. Crea la sección circular inferior usando una elipse de 28x12 px y coloréala con el color #FFFFFF. Colócala a una distancia de 36 px del borde izquierdo del área activa de dibujo y de 18 px del borde inferior.
https://img.tutpad.com/tut/0/428/6.png?size=%3C700
Paso 3
Añade un rectángulo de 28x54 px (#FFFFFF) sobre la elipse que acabas de crear. Colócalo de manera que se superponga a la mitad superior de esa elipse, tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/7.png?size=%3C700
Paso 4
Desplázate unos píxeles a la derecha y crea un rectángulo más pequeño, de 12x40 px. Coloréalo usando el color blanco (#FFFFFF) y colócalo pegado al borde derecho de la forma que hemos creado en el paso anterior.
https://img.tutpad.com/tut/0/428/8.png?size=%3C700
Paso 5
Termina esta parte de la cabeza añadiendo un rectángulo aún más pequeño de 8x24 px (#FFFFFF). Colócalo como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/9.png?size=%3C700
Paso 6
Selecciona las cuatro formas y unifícalas pulsando la opción de Unificar en el panel Buscatrazos.
https://img.tutpad.com/tut/0/428/10.png?size=%3C700
Paso 7
Pulamos la forma resultante eliminando los puntos de ancla extra que se han creado al haber unificado las formas (se muestran en la siguiente imagen). Para ello, activa la herramienta Eliminar punto de ancla (-) y haz clic en esos puntos.
https://img.tutpad.com/tut/0/428/11.png?size=%3C700
Paso 8
Asigna a la forma resultante un contorno creando una copia de ella (Control + C) y pegándola delante (Control + F). Cambia el color a #3F3330 e intercambia luego el relleno y el trazo (Mayús + X). Asigna un grosor de 4 px a esta forma y elige la opción de Unión redondeada. Después, agrupa las dos formas usando el atajo de teclado Control + G.
https://img.tutpad.com/tut/0/428/12.png?size=%3C700
Paso 9
Crea la parte superior de la cabeza con una elipse de 48x12 px (#B5ACA9) que tenga un contorno de 4 px de grosor (#3F3330). Agrupa ambos elementos (Control + G) y colócalos en la parte superior de las formas anteriores tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/13.png?size=%3C700
Paso 10
Añade el ojo derecho usando un círculo de 4x4 px. Coloréalo con el color #3F3330 y colócalo sobre la cabeza, a una distancia de 6 px del contorno del borde superior y de 10 px del borde derecho. Una vez hecho, selecciona todas las formas que componen el avatar y agrúpalas usando el atajo de teclado Control + G.
https://img.tutpad.com/tut/0/428/14.png?size=%3C700
Paso 11
Saquemos a relucir nuestro lado más artístico y añadamos algo de textura usando un pincel de punteado que yo mismo he creado y que puedes descargar en la sección de archivos adjuntos del tutorial. Para usarlo, ve al panel Pinceles, abre el menú desplegable, ve a Abrir biblioteca de pinceles > Otra biblioteca y localiza el recurso descargado.
Una vez ya lo hayas cargado, selecciona el pincel que se llama freepik stipple brush y, con un grosor de 0,1 px, dibuja dos líneas verticales en el lado izquierdo del avatar, tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/15.png?size=%3C700
Consejo: te habrás dado cuenta de que la textura no parece aplicarse correctamente, pero esto se debe al renderizado del software. Si exportases el archivo (Alt + Mayús + Control + S), la previsualización te mostraría exactamente el resultado real.
Paso 12
Usando el mismo pincel y el mismo grosor, dibuja otro trazo circular siguiendo la curvatura de la parte superior de la cabeza.
https://img.tutpad.com/tut/0/428/16.png?size=%3C700
Paso 13
Empecemos a enmascarar las líneas de la textura de la izquierda usando una copia (Control + C) de la forma grande que hay debajo de ellas y pegándola enfrente (Control + F). Luego, con todo esto seleccionado, haz clic derecho y elige la opción de Crear máscara de recorte.
https://img.tutpad.com/tut/0/428/17.png?size=%3C700
Paso 14
Ahora, repite el mismo proceso, pero, en esta ocasión, enmascarando la textura de la parte superior de la cabeza.
https://img.tutpad.com/tut/0/428/181.png?size=%3C700
Paso 15
Cuando hayas enmascarado las texturas, tendremos que cortar (Control + X) cada una por separado y luego entrar en sus respectivos grupos haciendo doble clic sobre ellas para acceder al modo de aislamiento, en el cual las pegaremos (Control + F) y nos aseguraremos de que los contornos queden colocados como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/19.png?size=%3C700
Paso 16
Como ya tenemos la base de lo que serán los cuatro avatares, crea tres copias (Control + C) y pega cada una en las capas restantes (Control + F). Después, bloquea esas capas.
https://img.tutpad.com/tut/0/428/20.png?size=%3C700
5. Cómo crear el avatar del productor musical
Como ya tenemos los avatares base, vuelve a la segunda capa para empezar a añadir detalles al primer avatar.
Paso 1
Comencemos con la nota musical creando una elipse de 10x8 px (#D3C5EF) con un contorno cuyo grosor sea de 4 px (#3F3330). Agrupa ambas formas (Control + G) y colócalas sobre la parte superior de la cabeza, a una distancia de 6 px del su borde izquierdo y de 2 px del borde inferior.
https://img.tutpad.com/tut/0/428/21.png?size=%3C700
Paso 2
Crea una copia (Control + C > Control + F) de las formas que acabamos de agrupar y colócalas en el lado derecho de la cabeza tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/22.png?size=%3C700
Paso 3
Crea las dos barras verticales (plicas) y la barra horizontal de las corcheas usando trazos de 4 px de grosor (#3F3330), cuyas uniones estén redondeadas.
https://img.tutpad.com/tut/0/428/23.png?size=%3C700
Paso 4
Dales a las cabezas de estas corcheas algo de textura usando el pincel de punteado con un grosor de 0,1 px. Cuando lo hayas hecho, selecciona todas las formas que componen estas corcheas y agrúpalas (Control + G). Luego, agrupa todo el avatar.
https://img.tutpad.com/tut/0/428/24.png?size=%3C700
Paso 5
Activa la herramienta Pincel (B) y, usando el pincel stipple bg brush, con color blanco (#FFFFFF), añade la textura frontal que cubra prácticamente todo el icono dibujando una línea curvada tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/25.png?size=%3C700
Ayudante De Santa
06-11-2015, 22:19:08
Frank Lucas
14-05-2018, 20:43:33
Paso 6
Terminemos el icono enmascarando la línea de textura que acabamos de crear usando una copia (Control + C) del fondo que hay debajo de ella y pegándola enfrente (Control + F). Después, selecciona ambos, haz clic derecho y elige la opción de Crear máscara de recorte. Una vez hecho, selecciona todas las formas que componen el icono y agrúpalas (Control + G) antes de pasar al siguiente.
https://img.tutpad.com/tut/0/428/26.png?size=%3C700
6. Cómo crear el avatar del editor de fotografías
En cuanto hayas terminado de trabajar en el primer avatar, bloquea su capa y pasa a la siguiente (que sería la tercera), en la cual empezaremos a trabajar en el avatar del editor de fotografías.
Paso 1
Selecciona el fondo de color morado y cámbiale el color de relleno a un azul claro (#63C7EA) desde el panel Color.
https://img.tutpad.com/tut/0/428/27.png?size=%3C700
Paso 2
Comencemos con el símbolo de capa de ajuste creando un círculo de 24x24 px (#A0E1F2) con un contorno cuyo grosor sea de 4 px (#3F3330). Colócalo en la parte superior de la cabeza tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/28.png?size=%3C700
Paso 3
Vayamos ahora con la mitad derecha del símbolo de capa de ajuste usando una copia (Control + C > Control + F) de la forma del relleno. Córtala por la mitad seleccionando su punto de ancla izquierdo con la herramienta Selección directa (A) y eliminándolo pulsando la tecla Suprimir. Una vez hecho, asigna a la forma resultante el color #3F3330 antes de ir al siguiente paso.
https://img.tutpad.com/tut/0/428/29.png?size=%3C700
Paso 4
Pasemos a añadir algo de textura al símbolo usando el pincel de punteado. Enmascara la textura después. Una vez hecho, selecciona todas las formas que componen el símbolo de capa de ajuste y agrúpalas usando el atajo de teclado Control + G. Luego, agrupa todo el avatar.
https://img.tutpad.com/tut/0/428/30.png?size=%3C700
Paso 5
Terminemos con el icono añadiendo la textura del fondo, la cual copiaremos (Control + C) del anterior avatar y pegaremos (Control + F) en la capa de este avatar. Selecciona todas las formas que componen este avatar y agrúpalas (Control + G) antes de pasar al siguiente.
https://img.tutpad.com/tut/0/428/31.png?size=%3C700
7. Cómo crear el avatar del programador
El siguiente avatar será el del programador, así que, asumiendo que ya estás en la siguiente capa (que sería la cuarta), acerca el zoom en el área activa de dibujo y ¡prepárate para empezar!
Paso 1
Como hicimos con el anterior icono, comienza cambiando el color del fondo de morado a rojo claro (#F7794D).
https://img.tutpad.com/tut/0/428/32.png?size=%3C700
Paso 2
Comencemos por el rubí. Crea un cuadrado de 24x24 px y coloréalo con el color #FF9E88. Céntralo a la parte superior de la cabeza y colócalo a una distancia de 4 px del borde inferior de ella.
https://img.tutpad.com/tut/0/428/33.png?size=%3C700
Paso 3
Activa el modo Previsualización de píxeles (Alt + Control + Y) y comienza a ajustar la forma añadiendo un par de puntos de ancla con la herramienta Añadir punto de ancla (+). Fíjate en la siguiente imagen para guiarte.
https://img.tutpad.com/tut/0/428/34.png?size=%3C700
Paso 4
Convierte el cuadrado en un diamante eliminando cuidadosamente todos los puntos de ancla de sus esquinas con la herramienta Eliminar punto de ancla (-). Vuelve al modo de previsualización normal (Alt + Control + Y) cuando termines.
https://img.tutpad.com/tut/0/428/35.png?size=%3C700
Paso 5
Dale a la forma resultante un contorno de 4 px de grosor (#3F3330), el cual tendrá uniones redondeadas.
https://img.tutpad.com/tut/0/428/36.png?size=%3C700
Paso 6
Añade una línea horizontal de 24 px de longitud y de 4 px de grosor (#3F3330). Colócala tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/37.png?size=%3C700
Paso 7
Asígnale al rubí una pequeña textura con la ayuda del pincel de punteado. Luego, selecciona todas las formas que componen el rubí y agrúpalas usando el atajo de teclado Control + G. Después, agrupa todo el avatar.
https://img.tutpad.com/tut/0/428/38.png?size=%3C700
Paso 8
Terminemos con el icono añadiendo una textura frontal. Para ello, usa una copia (Control + C) de la que tienen los avatares anteriores y pégala (Control + F) en la capa actual. Céntrala, selecciona todas las formas que componen el avatar y agrúpalas (Control + G) antes de pasar al siguiente.
https://img.tutpad.com/tut/0/428/39.png?size=%3C700
8. Cómo crear el avatar del ilustrador
Ya solo nos queda el cuarto y último icono, así que ve a la siguiente capa (que sería la quinta) y ¡vamos allá!
Paso 1
Como hicimos con los otros avatares, comienza cambiando el color del fondo de morado a amarillo claro (#F9BC50) desde el panel Color.
https://img.tutpad.com/tut/0/428/40.png?size=%3C700
Paso 2
Empecemos a crear el plumín usando un rectángulo de 20x24 px. Coloréalo con el color #FFD694 y, luego, ajusta la forma cambiando al modo Previsualización de píxeles (Alt + Control + Y) y añadiendo un par de puntos de ancla con la ayuda de la herramienta Añadir punto de ancla (+).
https://img.tutpad.com/tut/0/428/41.png?size=%3C700
Paso 3
Sigue ajustando la forma eliminando todos los puntos de ancla de las esquinas usando la herramienta Eliminar punto de ancla (-).
https://img.tutpad.com/tut/0/428/42.png?size=%3C700
Paso 4
Dale a la forma resultante un contorno de 4 px de grosor (#3F3330), que tendrá uniones redondeadas.
https://img.tutpad.com/tut/0/428/43.png?size=%3C700
Paso 5
Añade una línea vertical que tenga una longitud de 12 px y un grosor de 4 px. Haz que sus uniones estén redondeadas y coloca la línea tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/44.png?size=%3C700
Paso 6
Aplica al plumín algo de textura usando el pincel de punteado. Selecciona todas las formas que componen el plumín y agrúpalas (Control + G). Luego, agrupa todo el avatar.
https://img.tutpad.com/tut/0/428/45.png?size=%3C700
Paso 7
Terminemos con el icono, y con el proyecto en general, añadiendo la textura frontal. Sigue el mismo proceso que vimos con los otros avatares. Una vez hecho, selecciona todas las formas que componen este avatar y agrúpalas (Control + G) antes de hacer clic en el botón de Guardar.
https://img.tutpad.com/tut/0/428/46.png?size=%3C700
9. ¡Ya hemos terminado!
Con solo unas cuantas formas y unas texturas, hemos conseguido crear un set de avatares que podría servirte en futuros proyectos.
Como ves, podemos aplicar la misma técnica para crear avatares nuevos personalizados o incluso ajustar los que ya tenemos cambiándoles el color.
Dicho esto, me muero de ganas de ver lo que hayas logrado crear. ¡Si tienes alguna pregunta, escríbela en la sección de comentarios e intentaré responderte tan pronto como pueda!
https://img.tutpad.com/tut/0/428/finished-project-preview1.png?size=%3C700
Terminemos el icono enmascarando la línea de textura que acabamos de crear usando una copia (Control + C) del fondo que hay debajo de ella y pegándola enfrente (Control + F). Después, selecciona ambos, haz clic derecho y elige la opción de Crear máscara de recorte. Una vez hecho, selecciona todas las formas que componen el icono y agrúpalas (Control + G) antes de pasar al siguiente.
https://img.tutpad.com/tut/0/428/26.png?size=%3C700
6. Cómo crear el avatar del editor de fotografías
En cuanto hayas terminado de trabajar en el primer avatar, bloquea su capa y pasa a la siguiente (que sería la tercera), en la cual empezaremos a trabajar en el avatar del editor de fotografías.
Paso 1
Selecciona el fondo de color morado y cámbiale el color de relleno a un azul claro (#63C7EA) desde el panel Color.
https://img.tutpad.com/tut/0/428/27.png?size=%3C700
Paso 2
Comencemos con el símbolo de capa de ajuste creando un círculo de 24x24 px (#A0E1F2) con un contorno cuyo grosor sea de 4 px (#3F3330). Colócalo en la parte superior de la cabeza tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/28.png?size=%3C700
Paso 3
Vayamos ahora con la mitad derecha del símbolo de capa de ajuste usando una copia (Control + C > Control + F) de la forma del relleno. Córtala por la mitad seleccionando su punto de ancla izquierdo con la herramienta Selección directa (A) y eliminándolo pulsando la tecla Suprimir. Una vez hecho, asigna a la forma resultante el color #3F3330 antes de ir al siguiente paso.
https://img.tutpad.com/tut/0/428/29.png?size=%3C700
Paso 4
Pasemos a añadir algo de textura al símbolo usando el pincel de punteado. Enmascara la textura después. Una vez hecho, selecciona todas las formas que componen el símbolo de capa de ajuste y agrúpalas usando el atajo de teclado Control + G. Luego, agrupa todo el avatar.
https://img.tutpad.com/tut/0/428/30.png?size=%3C700
Paso 5
Terminemos con el icono añadiendo la textura del fondo, la cual copiaremos (Control + C) del anterior avatar y pegaremos (Control + F) en la capa de este avatar. Selecciona todas las formas que componen este avatar y agrúpalas (Control + G) antes de pasar al siguiente.
https://img.tutpad.com/tut/0/428/31.png?size=%3C700
7. Cómo crear el avatar del programador
El siguiente avatar será el del programador, así que, asumiendo que ya estás en la siguiente capa (que sería la cuarta), acerca el zoom en el área activa de dibujo y ¡prepárate para empezar!
Paso 1
Como hicimos con el anterior icono, comienza cambiando el color del fondo de morado a rojo claro (#F7794D).
https://img.tutpad.com/tut/0/428/32.png?size=%3C700
Paso 2
Comencemos por el rubí. Crea un cuadrado de 24x24 px y coloréalo con el color #FF9E88. Céntralo a la parte superior de la cabeza y colócalo a una distancia de 4 px del borde inferior de ella.
https://img.tutpad.com/tut/0/428/33.png?size=%3C700
Paso 3
Activa el modo Previsualización de píxeles (Alt + Control + Y) y comienza a ajustar la forma añadiendo un par de puntos de ancla con la herramienta Añadir punto de ancla (+). Fíjate en la siguiente imagen para guiarte.
https://img.tutpad.com/tut/0/428/34.png?size=%3C700
Paso 4
Convierte el cuadrado en un diamante eliminando cuidadosamente todos los puntos de ancla de sus esquinas con la herramienta Eliminar punto de ancla (-). Vuelve al modo de previsualización normal (Alt + Control + Y) cuando termines.
https://img.tutpad.com/tut/0/428/35.png?size=%3C700
Paso 5
Dale a la forma resultante un contorno de 4 px de grosor (#3F3330), el cual tendrá uniones redondeadas.
https://img.tutpad.com/tut/0/428/36.png?size=%3C700
Paso 6
Añade una línea horizontal de 24 px de longitud y de 4 px de grosor (#3F3330). Colócala tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/37.png?size=%3C700
Paso 7
Asígnale al rubí una pequeña textura con la ayuda del pincel de punteado. Luego, selecciona todas las formas que componen el rubí y agrúpalas usando el atajo de teclado Control + G. Después, agrupa todo el avatar.
https://img.tutpad.com/tut/0/428/38.png?size=%3C700
Paso 8
Terminemos con el icono añadiendo una textura frontal. Para ello, usa una copia (Control + C) de la que tienen los avatares anteriores y pégala (Control + F) en la capa actual. Céntrala, selecciona todas las formas que componen el avatar y agrúpalas (Control + G) antes de pasar al siguiente.
https://img.tutpad.com/tut/0/428/39.png?size=%3C700
8. Cómo crear el avatar del ilustrador
Ya solo nos queda el cuarto y último icono, así que ve a la siguiente capa (que sería la quinta) y ¡vamos allá!
Paso 1
Como hicimos con los otros avatares, comienza cambiando el color del fondo de morado a amarillo claro (#F9BC50) desde el panel Color.
https://img.tutpad.com/tut/0/428/40.png?size=%3C700
Paso 2
Empecemos a crear el plumín usando un rectángulo de 20x24 px. Coloréalo con el color #FFD694 y, luego, ajusta la forma cambiando al modo Previsualización de píxeles (Alt + Control + Y) y añadiendo un par de puntos de ancla con la ayuda de la herramienta Añadir punto de ancla (+).
https://img.tutpad.com/tut/0/428/41.png?size=%3C700
Paso 3
Sigue ajustando la forma eliminando todos los puntos de ancla de las esquinas usando la herramienta Eliminar punto de ancla (-).
https://img.tutpad.com/tut/0/428/42.png?size=%3C700
Paso 4
Dale a la forma resultante un contorno de 4 px de grosor (#3F3330), que tendrá uniones redondeadas.
https://img.tutpad.com/tut/0/428/43.png?size=%3C700
Paso 5
Añade una línea vertical que tenga una longitud de 12 px y un grosor de 4 px. Haz que sus uniones estén redondeadas y coloca la línea tal como se muestra en la siguiente imagen.
https://img.tutpad.com/tut/0/428/44.png?size=%3C700
Paso 6
Aplica al plumín algo de textura usando el pincel de punteado. Selecciona todas las formas que componen el plumín y agrúpalas (Control + G). Luego, agrupa todo el avatar.
https://img.tutpad.com/tut/0/428/45.png?size=%3C700
Paso 7
Terminemos con el icono, y con el proyecto en general, añadiendo la textura frontal. Sigue el mismo proceso que vimos con los otros avatares. Una vez hecho, selecciona todas las formas que componen este avatar y agrúpalas (Control + G) antes de hacer clic en el botón de Guardar.
https://img.tutpad.com/tut/0/428/46.png?size=%3C700
9. ¡Ya hemos terminado!
Con solo unas cuantas formas y unas texturas, hemos conseguido crear un set de avatares que podría servirte en futuros proyectos.
Como ves, podemos aplicar la misma técnica para crear avatares nuevos personalizados o incluso ajustar los que ya tenemos cambiándoles el color.
Dicho esto, me muero de ganas de ver lo que hayas logrado crear. ¡Si tienes alguna pregunta, escríbela en la sección de comentarios e intentaré responderte tan pronto como pueda!
https://img.tutpad.com/tut/0/428/finished-project-preview1.png?size=%3C700
vBulletin® v3.8.9, Derechos de autor ©2000-2024, Jelsoft Enterprises Ltd.
SEO by vBSEO
SEO by vBSEO