Share
Con este tutorial, te mostraré cómo crear un ícono de indicador de mapa de iOS perfecto para importar en tu próximo diseño de aplicación basado en mapa. Usaremos una sola forma con múltiples atributos de apariencia para crear un estilo gráfico fácil de usar y editar en Adobe Illustrator.
Empecemos por preparar nuestro documento. Abre Illustrator y pulsa Comando + N para crear un documento nuevo. Ingrese 500 en el cuadro de ancho y 500 en el cuadro de altura, luego haga clic en el botón Avanzado. Seleccione RGB, Pantalla (72ppi) y asegúrese de que la casilla Alinear nuevos objetos con la cuadrícula de píxeles no esté marcada antes de hacer clic en Aceptar..
Cuando se trabaja con dispositivos independientes de resolución, la perfección de píxeles es una necesidad y para crear formas nítidas sería más fácil tener Grid View configurada y Pixel Snapping habilitada, así que lo haremos ahora. Vamos a habilitar la cuadrícula (Ver> Mostrar cuadrícula) y luego ajustar a la cuadrícula (Ver> Ajustar a la cuadrícula). Después de que estén encendidos, necesitarás una cuadrícula cada 1px. Simplemente vaya a Illustrator> Preferencias> Guías y cuadrícula, ingrese 1 en el cuadro Cuadrícula y 1 en el cuadro Subdivisiones. Ahora configuremos la unidad de medida en píxeles desde Illustrator> Preferencias> Unidad> General. Una vez completado su documento debe verse como las imágenes a continuación.
Ahora que nuestro documento está configurado, comencemos creando nuestra forma de círculo que se usa para el ícono indicador. Ya que estamos creando para una pantalla de retina, tendremos que trabajar al doble del tamaño del objeto que queremos crear. En nuestro dispositivo de retina queremos que el indicador parezca 16px por 16px, de modo que si multiplicamos eso por 2, llegamos a 32px. Con esto en mente, seleccionemos nuestra herramienta Ellipse (L) y luego haga clic en cualquier lugar del lienzo. Cuando aparezca el cuadro de diálogo, vamos a escribir 32px tanto para el ancho como para el alto. Esto creará el círculo perfecto necesario para nuestro indicador..
Propina: Presione la letra "D" en su teclado para restablecer su color de Relleno y Trazo a su configuración predeterminada.
Con nuestra forma dibujada podemos llegar a lo divertido. Abra el panel Apariencia (si no está ya en Ventana> Apariencia) y comencemos a crear nuestro icono.
Hay varios atributos de Apariencia para esta forma, por lo que para que sea más fácil de seguir, estaremos trabajando desde abajo hacia arriba en el panel Apariencia..
Para comenzar, en el panel Apariencia, seleccione el elemento de relleno inferior y crearemos un degradado radial opaco a transparente como se describe en la imagen a continuación, luego ajustaremos la opacidad al 50%. Con ese elemento de Relleno aún seleccionado, también haremos clic en el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia, luego seleccionar Ruta> Ruta de compensación e ingresar los atributos que se describen a continuación. También necesitaremos Transformar el elemento de relleno, así que seleccione nuevamente el botón Agregar nuevo efecto y navegue a Distorsionar y Transformar> Transformar e ingrese los atributos como se ve a continuación. Si aún no lo ha adivinado, esta será la sombra para el ícono indicador y lo que hemos hecho es crear una sombra paralela completamente vectorial que proporcione un ligero halo a nuestra forma principal y se reduzca lo suficiente como para proporcionar profundidad. No parece mucho ahora, pero las cosas comenzarán a arreglarse pronto.
Ahora, vamos a crear otro elemento de relleno sobre nuestro elemento de relleno de degradado. Por defecto, esto agregará nuestro degradado de negro a transparente, pero tendremos que eliminar este degradado en lugar de un color plano. Sigamos adelante y seleccionemos un bonito color rojo brillante para esta capa como se describe a continuación. En este punto, puede parecer extraño utilizar un rojo tan vibrante, pero todo tendrá sentido en un momento. Esta capa inferior actuará tanto como nuestro color base como nuestro resaltado secundario una vez que avancemos al siguiente paso.
Una vez más, vamos a crear otro elemento de relleno. Esto se establecerá de forma predeterminada en el color rojo plano que elegimos anteriormente, pero queremos un buen degradado radial para este elemento, así que seleccione el panel Gradiente e ingrese los atributos que se describen a continuación. Un bonito combo de púrpura a blanco configurado en Multiplicar y la Opacidad disminuida al 50% agregará una bonita forma 3D con cuerpo completo al icono. Para aumentar aún más el efecto 3D, vamos a hacer zoom (Z) en nuestro icono hasta que veamos los cuadrados de píxeles individuales en nuestro tablero artístico. Con ese elemento de degradado aún seleccionado, elija su Herramienta de degradado (G) en el panel de Herramientas y esto mostrará la barra de degradado sobre el icono. Vamos a hacer clic y arrastrar esta barra hasta aproximadamente 2,5 píxeles utilizando nuestra mesa de trabajo como guía, asegurándose de mantener la barra lo más centrada posible..
Ahora comenzaremos a crear nuestra fuente de luz primaria. Recuerde que estamos trabajando de abajo hacia arriba para que las cosas no tengan sentido hasta que terminemos con los siguientes pasos.
Teniendo en cuenta que estamos tratando de crear un brillo brillante en nuestro ícono, es lógico pensar que este brillo proyectará cierta iluminación de difusión contra nuestro objeto, así que esto es lo que vamos a crear ahora. Nuevamente vamos a crear una nueva capa de relleno. Ajustemos este gradiente para que sea opaco a transparente como se describe a continuación con una opacidad total del 60%. Seleccione la herramienta Degradado (G) y use la barra de control blanca con el centro negro en el lado izquierdo del recuadro de degradado, haga clic y arrastre el controlador hacia el centro del círculo para que tenga casi la mitad de su tamaño original, luego haga clic en la barra de degradado central y Arrástrelo hacia arriba y hacia la izquierda un poco. Mantenga un ojo en esta capa, ya que es posible que desee volver a ella más tarde para alinearla exactamente con nuestra capa principal de resalte blanca más adelante.
Ahora que tenemos algo de difusión, agregaremos un brillo al resaltado en sí. Cree otra capa de relleno y rellénela con un degradado de blanco a transparente como se describe a continuación. Tenga en cuenta que la posición del degradado coincidirá con la capa de abajo, así que antes de ajustar este degradado, haga clic en la muestra "Ninguno" en el panel de Muestras para eliminar ese relleno, luego agregue el opaco nuevo al degradado transparente para restablecer su posición . Con el gradiente en su lugar, vamos a querer compensar y transformar esta capa de relleno también. Haga clic en el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia, luego seleccione Ruta> Ruta de compensación e ingrese los atributos que se describen a continuación. También necesitaremos Transformar el elemento de relleno, así que seleccione nuevamente el botón Agregar nuevo efecto y navegue hasta Distorsionar y Transformar> Transformar e ingrese los atributos como se ve a continuación.
Con ese brillo fuera del camino, agreguemos nuestro realce real. Haga clic nuevamente en el botón Agregar nuevo relleno y llénelo con un color blanco plano. Luego, seleccione el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia, luego seleccione Ruta> Ruta de compensación e ingrese los atributos delineados abajo. También necesitaremos Transformar el elemento de relleno, así que seleccione nuevamente el botón Agregar nuevo efecto y navegue hasta Distorsionar y Transformar> Transformar e ingrese los atributos como se ve a continuación.
En este momento, puede volver a la capa de difusión de degradado de color rojo, retrocedimos unos pasos y ajustar el punto central del degradado para que esté directamente debajo de la luz blanca..
Ahora ajustemos ese borde negro que ha estado sentado allí mirándonos todo el tiempo. Lo estableceremos en el exterior con un Peso de Trazo de 2px y el color que se describe a continuación.
El indicador ya está completo, pero vamos a dar un paso más y creamos también el anillo del radio del GPS. Haga clic en el botón Agregar nuevo relleno nuevamente y rellénelo con un degradado de rojo a transparente como se describe a continuación y suelte la Opacidad al 25%. Luego seleccione el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia, luego seleccione Ruta> Ruta de compensación e ingrese los atributos que se describen a continuación.
Para la última parte del icono, agregaremos el borde alrededor del anillo del radio del GPS. Haga clic en el botón Agregar nuevo trazo en la parte inferior del panel Apariencia y elija un Peso de trazo rojo de 2 px en el interior de la forma. Ahora compensemos la ruta haciendo clic en el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia, luego seleccione Ruta> Ruta de compensación e ingrese los atributos que se describen a continuación. Y, finalmente, agregaremos un brillo externo a este golpe. Para hacerlo, haga clic en el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia y luego seleccione Estilizar> Resplandor exterior
En este punto, puede pulsar Mayús + Clic en los dos elementos del anillo del radio del GPS para seleccionarlos en el panel Apariencia y luego arrastrarlos a la parte inferior de esta lista para que el icono del indicador real se encuentre en la parte superior.
Con el indicador fuera del camino, ahora crearemos el nombre emergente. Seleccione la herramienta Rectángulo redondeado y haga clic en la página e ingrese la información que se describe en la imagen a continuación. Tenga en cuenta que el ancho puede ser cualquier cosa que desee, siempre que el nombre que elija más adelante se ajuste, pero para el propósito de este tutorial usaremos este ancho de conjunto.
También necesitaremos hacer clic una vez más con la herramienta Rectángulo redondeado para crear la flecha en la parte inferior. para esto necesitaremos que sea perfectamente cuadrado y dejaremos caer el radio como se indica a continuación. Cuando la forma sea hecha, girémosla 45 grados. Para hacerlo, seleccione la Herramienta de selección (V), luego coloque el mouse cerca de cualquier esquina del cuadrado y mientras presiona la tecla Mayús del teclado, arrastre la forma en cualquier dirección hasta que se vea como un diamante, como se ve en la captura de pantalla a continuación..
Ahora alinearemos estos objetos para centrarlos unos con otros. Con la Herramienta de selección (V) en cambio manual, haga clic en ambos objetos para que ambos se seleccionen al mismo tiempo. Ahora navegaremos al panel Alinear (Ventana> Alinear) y elegiremos la segunda opción debajo del encabezado Alinear objetos llamado Centro de alineación horizontal. Luego haga clic en la última opción debajo de ese mismo encabezado llamado Vertical Align Bottom.
Con la herramienta de selección (V) aún habilitada, haga clic en la forma de diamante más pequeño para que sea el único objeto que se haya seleccionado. Mientras mantiene presionado Shift en el teclado, presione la flecha hacia abajo en su teclado una vez. Suelte la tecla de desplazamiento y presione la flecha hacia abajo en su teclado tres veces más para mover el diamante a la posición perfecta.
Presione la tecla Mayús y haga clic en la forma redondeada más grande para que ambos objetos se seleccionen una vez más y navegue hasta el panel Explorador (Ventana> Buscador), luego haga clic en la primera opción debajo del encabezado de los modos de forma titulada Unir. Ambos objetos ahora deben estar unidos en uno.
Con nuestro pop up. La forma ahora creada, trabajaremos en su estilo. Con la forma seleccionada, navegue hasta el panel Apariencia (Ventana> Apariencia) y seleccione Trazo. Mantendremos esto como negro básico, pero configurémoslo para que esté fuera de la forma con un Peso de Trazo de 2px.
A continuación, seleccione Relleno y lo rellenaremos con un gradiente de 90 grados semitransparente en escala de grises como se describe a continuación.
Por último agregaremos un efecto de sombra a este objeto. Haga clic en el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia, luego seleccione Estilizar> Sombra e ingrese las opciones que se describen en la siguiente captura de pantalla.
Vamos a dar a este objeto un buen punto culminante en la parte superior. Con el objeto seleccionado, copiaremos (Comando + C) y luego Pegaremos al frente (Comando + F). Restableceremos rápidamente el estilo predeterminado presionando "D" en su teclado. Esto eliminará los efectos que agregamos anteriormente y devolverá la forma al blanco básico con un trazo negro. Para el propósito de este punto destacado, no necesitaremos un trazo, por lo que vaya a su panel de Herramientas y haga clic en la opción de relleno de trazo cerca de la parte inferior para seleccionarlo. Luego haga clic en el cuadrado blanco con la línea roja diagonal que lo atraviesa para eliminar completamente el trazo. Con el trazo desaparecido, vamos a Copiarlo (Comando + C) y luego Pegar al frente (Comando + F) nuevamente, así que ahora tenemos dos formas blancas lisas una encima de la otra. Luego, mientras se selecciona la forma más superior y se habilita la Herramienta de selección (V), presione la flecha hacia abajo en su teclado dos veces para empujar el objeto hacia abajo. Una vez empujado, haga clic en el objeto plano detrás de él para seleccionar ambos a la vez. Mientras se seleccionan ambos objetos, navegue hasta el panel Explorador (Ventana> Buscador) y seleccione la segunda opción debajo del encabezado "Modos de forma" titulado "Frente menos". Ahora debes quedarte con una pequeña franja de la forma original en la parte superior. Con esta astilla seleccionada, bajemos su opacidad al 25% en el panel Apariencia (Ventana> Apariencia).
Ahora vamos a crear el texto para esta ventana emergente. Seleccione la Herramienta de tipo (T) en el panel Herramientas y luego haga clic en el tablero de arte y escriba el nombre que desee. En el panel Herramientas, haga clic en el color de relleno y cámbielo a blanco. Ahora navegue hasta el panel Carácter (Tipo> Tipo> Carácter) y ajuste el tamaño y el tipo de fuente como se describe a continuación.
Con el texto seleccionado, navegue hasta el panel Apariencia (Ventana> Apariencia) y haga clic en el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia, luego seleccione Estilizar> Sombra e ingrese las opciones descritas en la captura de pantalla de abajo. También podemos usar la Herramienta de selección (V) para arrastrar el texto a la ubicación deseada en la forma de burbuja. Debido a que Smart Guides y Snap to Grid están habilitados, esto debería ser fácil de encontrar.
Con el texto fuera del camino, vamos a crear el ícono de la flecha. Seleccione la herramienta Rectángulo redondeado y haga clic en el tablero artístico, luego conecte estas opciones.
Ahora seleccione la Herramienta de selección (V) y haga clic en el rectángulo recién creado. Con el objeto seleccionado, copiaremos (Comando + C) y luego Pegaremos al frente (Comando + F). Ahora vamos a rotar este nuevo objeto 90 grados. Ahora alinearemos estos objetos para formar una forma de L hacia atrás. Con la Herramienta de selección (V) en cambio manual, haga clic en ambos objetos para que ambos se seleccionen al mismo tiempo. Ahora navegaremos al panel Alinear (Ventana> Alinear) y elegiremos la tercera opción debajo del encabezado Alinear objetos llamada Horizontal Alinear a la derecha. Luego haga clic en la última opción debajo de ese mismo encabezado llamado Vertical Align Bottom.
Con los dos objetos aún seleccionados, navegue hasta el panel de Pathfinder (Ventana> Pathfinder) y luego haga clic en la primera opción debajo del encabezado de los modos de forma titulada Unite. Ambos objetos ahora deben estar unidos en uno. Con la herramienta de selección (V) aún seleccionada, giremos la forma 45 grados. Para hacerlo, seleccione la herramienta de selección (V), luego coloque el mouse cerca de cualquier esquina del cuadrado y mientras mantiene presionada la tecla Mayús del teclado, arrastre una esquina a la derecha del cuadro delimitador hasta que se vea como una flecha que apunta a la Correcto.
Con la flecha seleccionada, navegue hasta el panel Apariencia (Ventana> Apariencia) y haga clic en el botón Agregar nuevo efecto (se parece a las letras "fx") en la parte inferior del panel Apariencia, luego seleccione Estilizar> Sombra e ingrese las opciones descritas en la captura de pantalla de abajo. También podemos usar la Herramienta de selección (V) para arrastrar la forma de la flecha a la ubicación deseada en la forma de burbuja.
Con el pop up. la sección completada habilita la Herramienta de selección (V) y arrastra una selección sobre todas las ventanas emergentes. Objetos para seleccionarlos todos a la vez. Ahora vaya a Objeto> Grupo (Comando + G) en el panel de menú para Agrupar estos objetos. Luego podemos arrastrar este grupo sobre el ícono del indicador y centrarlo para que se vea como la captura de pantalla a continuación. Y con eso en su lugar, hemos terminado.!
Espero haber podido mostrarle cómo utilizar el panel Apariencia para crear efectos complejos sin la necesidad de capas adicionales. Siéntete libre de jugar con diferentes colores como mejor te parezca. Con tantos dispositivos independientes de resolución flotando alrededor de hoy en día, es realmente genial poder usar objetos infinitamente escalables que se pueden usar y reutilizar en los diseños de sus aplicaciones..
Accentsconagua