Share
Lo que vas a crearEn el tutorial de hoy, haremos algunos pequeños cambios en nuestro programa regular y abordaremos un tema que he querido hacer durante mucho tiempo. Si no lo has deducido del título, bueno, vamos a crear cinco íconos simples que podrías convertir en íconos de inicio de Android para cualquier aplicación futura que puedas crear o participar en la creación..
En cuanto al proceso, utilizaremos su selección básica de formas geométricas combinada con el panel Alinear y algunas otras herramientas con las que probablemente ya trabaje todos los días..
Dicho esto, toma un nuevo lote de café y comencemos.
Ah, y no olvides que siempre puedes expandir el proyecto dirigiéndote a GraphicRiver, donde encontrarás toneladas de paquetes de íconos diseñados por Android, solo esperando a que se haga clic en.
¿Prefieres aprender a través del formato de video? Mira el video tutorial sobre el canal de Envato Tuts + YouTube:
Ya que supongo que ya tiene Illustrator listo y funcionando en segundo plano, créelo y configuremos un Nuevo documento (Archivo> Nuevo o Control-N) usando los siguientes ajustes:
Y desde el Avanzado lengüeta:
Consejo rapido: algunos de ustedes habrán notado que la Alinear nuevos objetos a la cuadrícula de píxeles Falta la opción, que es porque estoy ejecutando la nueva versión de CC 2017 del software, donde se han realizado grandes cambios en la forma en que IllustratorManeja la forma en que las formas se ajustan al subyacente. Pixel Grid.
Ya que vamos a crear los íconos utilizando un flujo de trabajo de píxeles perfectos, queremos configurar un poco Cuadrícula de modo que podamos tener control total sobre nuestras formas, es decir, si estamos ejecutando la versión anterior del software.
Ve a la Edición> Preferencias> Guías y cuadrícula submenú, y ajustar las siguientes configuraciones:
Consejo rapido: puede aprender más acerca de las cuadrículas leyendo este detallado artículo sobre cómo funciona el sistema de cuadrículas de Illustrator..
Una vez que hemos configurado nuestra cuadrícula personalizada, todo lo que tenemos que hacer para asegurarnos de que nuestras formas se vean nítidas es habilitar la Encajar a la cuadricula opción encontrada bajo el Ver menú, que se transformará en Ajustar a Pixel cada vez que entras Vista previa de píxeles modo.
Ahora, si eres nuevo en todo el "flujo de trabajo de píxeles perfectos", te recomiendo que sigas mi tutorial de creación de ilustraciones de píxeles perfectos, que te ayudará a ampliar tus habilidades técnicas en poco tiempo..
Con el Nuevo documento creado, sería una buena idea estructurar nuestro proyecto utilizando un par de capas, ya que de esta manera podemos mantener un flujo de trabajo constante al concentrarnos en un ícono a la vez..
Dicho esto, trae la Capas y cree un total de seis capas, que cambiaremos de nombre de la siguiente manera:
los Rejillas de referencia (o Rejillas base) son un conjunto de superficies de referencia delimitadas con precisión, que nos permiten construir nuestros iconos centrándonos en el tamaño y la consistencia.
Por lo general, el tamaño de las cuadrículas determina el tamaño de los íconos reales, y siempre deben ser la primera decisión que tomes al comenzar un nuevo proyecto, ya que siempre querrás comenzar desde el tamaño más pequeño posible y construir sobre eso..
Ahora, ya que vamos a crear los íconos con la intención de que se utilicen dentro del sistema operativo Android real, tendremos que seguir las pautas recomendadas de Tamaño y Formato, y configurar una cuadrícula personalizada de 96 x 96 px con un todo alrededor 4 px relleno.
Comience por bloquear todo menos la capa de la cuadrícula de referencia, y luego tome la Herramienta Rectangular (M) y crea un 96 x 96 px naranja (# F15A24) cuadrado, que ayudará a definir el tamaño total de nuestros iconos.
Agrega otro más pequeño 88 x 88 px uno (#FFFFFF) que actuará como nuestra área activa de dibujo, dándonos así todo 4 px relleno.
Agrupe los dos cuadrados que componen la cuadrícula de referencia usando el Control-G teclado y luego cree tres copias a una distancia de 24 px unos de otros, asegurándose de alinearlos al centro de la Mesa de trabajo.
Una vez que haya terminado, bloquee la capa actual y pase a la siguiente donde comenzaremos a trabajar en nuestro primer icono.
Vamos a iniciar el proyecto creando el ícono de la batería, que podría usarse para una aplicación de ahorro de energía, o incluso un indicador de estado, ya que es bastante básico..
Dicho esto, asegúrate de estar en la capa correcta (esa sería la segunda) y luego haz zoom en la primera cuadrícula de referencia para que podamos comenzar..
Comience por crear el fondo del icono usando una 88 x 88 px circulo, el cual colorearemos usando # 00C853, El centro se alinea con el área de dibujo activa subyacente después.
Consejo rapido: Como Google fue lo suficientemente bueno como para publicar una guía de diseño de materiales para los colores, terminé mezclando y combinando algunos de los valores que he usado para los fondos..
Crea el cuerpo principal de la batería usando un 24 x 40 px rectángulo, que colorearemos utilizando blanco (#FFFFFF) y luego alinee el centro al círculo más grande, a una distancia de 20 px desde su borde inferior.
Convierte la forma que acabamos de crear en un contorno, volteando su Llenar con su Carrera (Shift-X), y luego establecer su Peso a 4 px y es Esquina a Round Join, todo desde dentro del Carrera panel.
Cree la primera barra indicadora de estado, usando una 12 x 4 px rectángulo#FFFFFF) o un 12 px golpe ancho (#FFFFFF) con un 4 px de peso, centraremos en el cuerpo de la batería, dejando un 4 px brecha a su alrededor.
Agregue dos barras de indicadores más, que apilaremos verticalmente a una distancia de 4 px el uno del otro, agrupándolos (Control-G) después.
Termine el icono agregando la tapa superior, que crearemos usando un tamaño más pequeño. 8 x 4 px rectángulo#FFFFFF) que nos alinearemos en el centro de la batería, a una distancia de 6 px (4 px para el relleno + 2 px para la mitad superior del trazo).
Una vez que hayas terminado, no olvides seleccionar y agrupar (Control-G) todas las formas de composición de la batería, haciendo lo mismo para todas las secciones de composición del icono también.
Suponiendo que haya logrado finalizar el primer icono, bloquee su capa y luego continúe con el siguiente (ese sería el tercero) y comencemos a trabajar en la configuración.
Como hicimos con el ícono anterior, comience por crear su fondo usando un 88 x 88 px circulo, el cual colorearemos usando # 2196F3, El centro se alinea con el área de dibujo activa subyacente después.
Comience a trabajar en el deslizador central creando un 4 x 32 px rectángulo o un 32 px golpe alto con una 4 px grueso Peso, que colorearemos utilizando blanco (#FFFFFF) y luego alinee el centro al círculo más grande, a una distancia de 18 px desde su borde superior.
Cree el indicador de estado del deslizador usando una 12 x 4 px rectángulo#FFFFFF) que alinearemos en el centro con la forma creada anteriormente, a una distancia de 4 px desde su borde inferior.
Añadir la sección inferior del control deslizante utilizando 4 x 12 px rectángulo#FFFFFF) que ubicaremos justo debajo de la barra de indicadores de estado, seleccionando y agrupando (Control-G) las tres formas juntas después.
Cree la sección superior para el control deslizante izquierdo utilizando una 4 x 12 px rectángulo#FFFFFF), que alinearemos con el borde superior del deslizador central, posicionándolo a una distancia de 12 px de eso.
Agregue el indicador de estado del deslizador creando una 12 x 4 px rectángulo#FFFFFF) que apilaremos verticalmente a la forma creada anteriormente, a una distancia de 4 px desde su borde inferior.
Termine el control deslizante izquierdo agregando la sección inferior que crearemos usando un 4 x 32 px rectángulo#FFFFFF) que posicionaremos debajo del indicador.
Una vez que haya terminado, seleccione las tres formas y agrúpelas (Control-G) como hicimos con el deslizador central.
Termina el icono creando una copia (Control-C> Control-F) de su deslizador izquierdo, que colocaremos en el lado derecho del círculo, a una distancia de 4 px desde el control deslizante del centro.
Una vez que hayas terminado, no olvides seleccionar y agrupar (Control-G) todas sus secciones de composición para que no se separen por accidente.
Suponiendo que ya ha pasado a la siguiente capa (que sería la cuarta), amplíe la tercera cuadrícula de referencia y comencemos.
Crea el fondo del icono usando una 88 x 88 px circulo, el cual colorearemos usando # 7C4DFF y luego alinee el centro con el área de dibujo activa subyacente.
Cree la forma principal para el cuadro de mensajería izquierdo usando un 32 x 24 px rectángulo, que colorearemos utilizando blanco (#FFFFFF) y luego posicionarse a una distancia de 20 px Desde el área de dibujo activa, tanto el borde izquierdo como el superior..
Comience a ajustar la forma que acabamos de crear, encendiendo primero la Vista previa de píxeles modo (Alt-Control-Y) y luego agregar un nuevo punto de anclajea su borde inferior, a una distancia de 10 px de su izquierda haciendo clic izquierdo con la ayuda de la Agregar herramienta de punto de anclaje.
Una vez que hayas terminado, no te olvides de salir Vista previa de píxeles modo usando el Alt-Control-Y atajo de teclado.
Continúe ajustando el rectángulo seleccionando su punto de anclaje inferior izquierdocon el Herramienta de selección directa (A), y luego empujándolo hacia el fondo por 8 px con la ayuda del Movimiento herramienta(clic derecho> Transformar> Mover> Vertical> 8 px).
Convierte la forma resultante en un contorno, volteando su Llenar con su Carrera (Shift-X) y luego configurando su Peso a 4 px y es Esquina a Round Join.
Agrega la línea de texto más pequeña creando una 10 x 4 px rectángulo, que colorearemos utilizando blanco (#FFFFFF) y luego posicione dentro del pequeño cuadro de mensaje, alineándolo hacia su esquina superior izquierda, asegurándose de dejar un 4 px brecha a su alrededor.
Agrega la línea de texto más ancha usando una 20 x 4 px rectángulo#FFFFFF) que alinearemos a la izquierda con el creado previamente, a una distancia de 4 px desde su borde inferior.
Una vez que haya terminado, no olvide seleccionar y agrupar todas las formas del cuadro de texto usando la Control-G atajo de teclado.
Crear una copia (Control-C> Control-F) del contorno del pequeño cuadro de texto, y luego refleje (clic derecho> Transformar> Reflejar> Vertical) y colóquelo en el lado derecho del círculo, a una distancia de 18 px desde el borde derecho e inferior del área de dibujo activa.
Termine el ícono, eliminando la sección superpuesta del cuadro de texto (resaltada con rojo) para que termine teniendo una 4 px Brecha entre ella y el contorno de la izquierda. Para hacer esto, simplemente agregue un nuevo punto de anclajea su borde superior e izquierdo, y luego retire todos los otros.
Una vez que haya terminado, seleccione todas las secciones de composición del icono y agrúpelas usando el Control-G atajo de teclado.
Ya que probablemente ya conozca el ejercicio, bloquee la capa y avance a la siguiente capa (que sería la quinta) y comencemos a trabajar en nuestro icono de alarma.
Crear un 88 x 88 px círculo, que luego colorearemos usando # FFC107, Centro alineándolo al área de dibujo activa subyacente.
Crea el cuerpo principal del despertador usando un 40 x 40 px círculo, que colorearemos utilizando blanco (#FFFFFF) y luego alinee el centro con el área de dibujo activa, a una distancia de 20 px desde su borde inferior.
Convierte la forma que acabamos de crear en un contorno, volteando su Llenar con su Carrera, y luego establecer su Peso a 4 px desde dentro del Carrera panel.
Selecciona el Herramienta Pluma (P) y dibujar en las manos del reloj usando una 4 px grueso Carrera con el color configurado en blanco (#FFFFFF) y el Esquina a Round Join, asegurándose de dejar un 4 px brecha entre los puntos de anclaje finalesy el círculo más grande.
Mueve unos pocos píxeles hacia la parte superior y crea un 8 x 6 px rectángulo#FFFFFF) que alinearemos en el centro de la sección superior del círculo más grande, posicionándolo de modo que termine superponiéndose con la Carreramitad superior.
Agrega un 16 x 4 px rectángulo#FFFFFF) encima del que acabamos de crear, seleccionar y agrupar (Control-G) juntos después.
Termine el icono dibujando en los dos pequeños segmentos de línea diagonales usando una 4 px trazo con el color configurado en blanco (#FFFFFF). Una vez que hayas terminado selecciona y agrupa (Control-G) todas las formas de composición del reloj de alarma juntas, haciendo lo mismo para todo el ícono después.
Dirígete a la sexta y última capa y terminemos el proyecto creando el ícono de fotos..
Usando una 88 x 88 px circulo (# FF6F00) crea el fondo del icono que alinearemos en el centro del área de dibujo activa subyacente.
Crea el cuerpo principal de la foto usando un 36 x 36 px rectángulo, que colorearemos utilizando blanco (#FFFFFF) y luego alinee el centro al área de dibujo activa subyacente, a una distancia de 20 px desde su borde superior.
Convierte la forma que acabamos de crear en un contorno, volteando su Llenar con su Carrera (Shift-X), y luego establecer su Peso a 4 px y es Esquina a Round Join desde dentro del Carrera panel.
Utilizando la Herramienta Pluma (P) dibujar en la línea divisoria horizontal utilizando una 4 px grueso Carrera (#FFFFFF) que colocaremos dentro de la forma creada previamente, a una distancia de 4 px desde su borde inferior.
Usando el mismo 4 px grueso Carrera (#FFFFFF) con un Round Join, Empieza a dibujar la primera montaña colocando tu primer punto de anclaje.en el borde izquierdo de la foto, a una distancia de 10 px de la línea divisoria horizontal que acabamos de crear.
Agrega el segundo anclaa una distancia de 10 px Tanto horizontal como vertical desde la primera. Termine la montaña agregando el tercer y último anclajeen la línea divisoria horizontal, mientras mantiene presionada la tecla Cambio Clave para dibujar en una perfecta línea diagonal..
Dibuja en la segunda montaña más pequeña, utilizando la misma. 4 px grueso Carrera (#FFFFFF), y luego, una vez que haya terminado, seleccione y agrupe todas las formas de composición de la foto usando la Control-G atajo de teclado.
Crea la sección inferior del icono usando una 28 x 6 px rectángulo, que colorearemos utilizando blanco (#FFFFFF) y luego alinee el centro con la sección inferior del contorno de la foto, a una distancia de 4 px.
Termine el icono, convirtiendo la forma que acabamos de crear en un 4 px contorno grueso (#FFFFFF) con un Round Join, y luego ajustándolo agregando un nuevo punto de anclajeal centro de su borde superior, que luego eliminaremos para abrir el camino (resaltado en rojo).
Seleccione la forma resultante y el resto de los elementos de composición de la foto y agrúpelos (Control-G) haciendo lo mismo para las secciones de composición del ícono después.
Espero que haya logrado mantenerse al día con cada paso, y lo más importante, haya aprendido algo nuevo y útil durante el proceso. Dicho esto, te veré en la próxima.!
Accentsconagua