Share
Con el lanzamiento del último sistema operativo móvil de Apple, iOS 7, pensé que sería fantástico crear algunos iconos personalizados de la barra de pestañas para este nuevo sistema operativo. En este tutorial, crearemos algunos iconos en el estilo de línea plana y delgada que se usa en iOS 7. Estaremos creando estados normales y seleccionados para estos iconos en Adobe Illustrator, así que siéntase libre de seguirlos.!
Comencemos por crear nuestra barra de pestañas base. Necesitaremos crear un nuevo documento que sea 640 x 98pt. Por favor note que estamos usando "Puntos"para este tutorial. También habilitaremos Encajar a la cuadricula así como ajustar la cuadrícula de documentos para ser cada 1 pt.
Con el documento configurado seleccione el Herramienta rectangular (METRO) y dibuje un rectángulo del mismo tamaño que la mesa de trabajo y luego ajuste el color como se ve a continuación.
Para finalizar el fondo de la barra de pestañas, agregaremos una barra de separación en la parte superior que tiene el mismo ancho que la mesa de trabajo pero solo 2 puntos alto, entonces alinéelo con la parte superior de la mesa de trabajo y rellénelo con el siguiente color
Esto completará la barra de pestañas, por lo que una vez que haya terminado, no dude en bloquear la capa para no seleccionarla más tarde de manera accidental..
Selecciona el Herramienta de rectángulo redondeado y crea un nuevo rectángulo como se ve a continuación. Ahora quite el relleno y ajuste el Carrera a lo que ves abajo.
Habilitar el Herramienta Elipse (L) y cree un círculo con el mismo trazo que antes y céntrelo dentro del rectángulo redondeado como se ve a continuación.
Con el Herramienta Elipse (L) aún seleccionado, cree dos círculos más con los siguientes tamaños y alinéelos como se ve a continuación. Rellena estos con el mismo color que el trazo y elimina el trazo.
Para esta próxima parte, querrás acercarte un poco para que puedas ver lo que estás haciendo. Habilitar el Herramienta Pluma (P) y haga clic para crear cuatro nuevos puntos de anclaje en la parte superior del rectángulo redondeado. Grupo (Comando + G) juntos en dos y los dos puntos más cercanos deben ser 3 puntos Aparte con una gran brecha entre ambos grupos..
Cambiar a la Herramienta de selección directa (A) y seleccione los dos puntos inter que acabamos de hacer y con el botón de flecha en el teclado, empuje estos 5 puntos.
Habilitar el Herramienta Rectangular (M) y crea un nuevo rectángulo y rellénalo y alinéalo como se ve a continuación.
Con eso el icono en sí es bastante completo. Siéntase libre de seleccionar todo el elemento y Grupo (Comando + G) ellos juntos.
Habilitar el Tipo de herramienta (T) y agregaremos una etiqueta. La fuente predeterminada para iOS 7 es "Helvetica Neue", que debería ser una fuente preinstalada. Haremos que el color sea el mismo que el ícono y ajustaremos la configuración como se ve a continuación..
Con eso, el icono de nuestra cámara está bastante completo, pero vamos más allá y también diseñamos un estado seleccionado / habilitado.
Para ello, duplique el icono de la cámara y oculte el original en el Capas panel. Ahora seleccione el rectángulo redondeado que forma el cuerpo de la cámara, así como el rectángulo pequeño que indica el botón del obturador, elimine el trazo y agregue un color de relleno de su elección. Usaré un bonito color azul
Selecciona el círculo más grande que tiene un trazo y visita. Objeto> Expandir Apariencia para convertir el trazo a una forma.
Con esta nueva forma seleccionada también selecciona los círculos más pequeños y visita Objeto> Ruta compuesta> Hacer para unir estas formas en una sola. Ahora seleccione tanto los círculos como el cuerpo de la cámara y debajo de Pionero panelVentana> Pathfinder) seleccionar Frente menos para quitar los círculos del cuerpo de la cámara.
Ahora puede copiar la etiqueta de texto y ajustar el color para que coincida con el color del nuevo icono.
Con el Herramienta Elipse (L) habilitado crear dos círculos y centrarlos entre sí como se ve a continuación.
Cambiar a la Convertir herramienta de punto de anclaje y haga clic en el punto de anclaje más bajo para el círculo más grande para crear un punto. Con ese punto aún seleccionado, mantenga presionada la tecla Mayús en el teclado y presione la tecla Flecha hacia abajo en su teclado dos veces para mover ese punto hacia abajo 20 puntos.
No soy un gran fan de lo que la curva del círculo está haciendo en la mitad inferior del pin, así que vamos a ajustar esto un poco.
Cambiar a la Herramienta Pluma (P) y donde el punto central de la forma del pin es crear un nuevo punto de anclaje haciendo clic en el camino.
Con este nuevo camino de anclaje creado cambiar a la Herramienta de selección directa (A) y seleccione el controlador inferior y arrástrelo hacia el propio punto de anclaje para que no haya ningún control inferior.
Ahora ajuste el asa superior de este punto de anclaje para que esté más abajo un poco más y luego baje el asa del punto de anclaje desde el lado del círculo de una vez.
Asegúrese de duplicar este proceso en el lado opuesto antes de continuar.
Ahora puede agregar una etiqueta a este ícono como lo hizo antes con el ícono anterior. Siéntete libre de agrupar las formas de iconos también.
Para crear la versión seleccionada, duplique la forma del icono y rellénelo con el color de resaltado.
Selecciona el círculo pequeño y ajusta el tamaño para ser 12 x 12 puntos. Ahora seleccione el círculo y la forma del pin juntos y elija Frente menos desde el Pionero.
Ahora ajusta el color del texto de la etiqueta.
Selecciona el Herramienta de rectángulo redondeado y crea un rectángulo con un trazo interior como se ve a continuación.
Cambiar a la Herramienta Rectangular (M) y cree un rectángulo que tenga el mismo ancho que el redondeado a continuación y alinéelo con la parte superior del rectángulo redondeado.
Seleccione el rectángulo redondeado y el rectángulo más pequeño y elija Unir desde el Pionero panel.
Con el Herramienta Rectangular (M) Todavía seleccionado crear tres rectángulos más que son 2 x 40pt y centrarlos dentro del rectángulo más grande.
Seleccione estos rectángulos y Grupo (Comando + G) ellos juntos. Con el grupo seleccionado visita. Efecto> Warp> Shell Upper y aplicar los siguientes ajustes..
Con esta visita seleccionada en forma deformada. Objeto> Expandir Apariencia convertirlo en una forma.
Ahora cambia a la Herramienta de selección directa (A) y selecciona los caminos a lo largo de la parte superior y elimínalos..
Vuelve a la Herramienta Rectangular (M) y crea un rectángulo que es 46 x 2 puntos y alinéelo con la parte superior del icono.
Habilitar el Herramienta de rectángulo redondeado y cree un rectángulo redondeado con un trazo interior y alinéelo como se ve a continuación.
Dibuje otro rectángulo directamente debajo de la parte superior de la tapa del bote de basura y asegúrese de que cubra el área del asa inferior.
Seleccione tanto el controlador como el nuevo rectángulo y seleccione Frente menos desde el Pionero panel.
Grupo (Comando + G) los elementos del icono de la papelera juntos y ahora puede agregar una etiqueta a continuación como lo ha hecho antes.
Duplique la agrupación del icono de la papelera y ajuste el color de relleno al color de resaltado
Cambiar a la Herramienta de selección directa (A) y seleccione un punto de anclaje dentro de la forma del contorno de la papelera y presione eliminar en el teclado dos veces para crear una forma rellena.
Seleccione los tres rectángulos dentro del ícono de la papelera (los he recorreorizado para que pueda verlos en las capturas de pantalla) y visite Objeto> Ruta compuesta> Hacer. Ahora seleccione la forma del icono de papelera y los tres rectángulos y seleccione Frente menos desde el Pionero panel.
Asegúrese de ajustar también el color de resaltado de la etiqueta también.
Selecciona el Herramienta Elipse (L) y crea un círculo que es 52 x 52pt y tiene un trazo inter como los otros iconos.
Con el Herramienta Elipse (L) Todavía habilitado crear un nuevo círculo que es 8 x 8 puntos rellénelo con nuestro color gris y colóquelo en el centro superior de nuestro círculo más grande. Ahora cambia a la Herramienta de selección directa (A) y seleccione el punto de anclaje más bajo y empuje hacia arriba 3 puntos presionando Arriba en el teclado tres veces. Duplique esta forma abollada y gírela, luego colóquela en la parte inferior del círculo más grande.
Seleccione ambas formas dentadas y Grupo (Comando + G) ellos juntos. Con ese grupo seleccionado botón derecho del ratón y visita Transformar> Transformar cada e ingrese los siguientes ajustes luego haga clic en Dupdo. Una vez que haya sido copiado, pulse. Comando + D en el teclado para duplicar esta función de copiar / rotar cuatro veces más para que pueda crear todos los dientes de engranaje.
Selecciona el Herramienta Elipse (L) y crea un círculo que es 12 x 12 puntos con nuestro golpe interno como antes y céntrelo en el círculo más grande.
Cambiar a la Herramienta Rectangular (M) y dibuja un rectángulo que sea 2 puntos de ancho y abarca el radio del círculo interior hacia el círculo exterior y rellénalo con nuestro color gris
Con este rectángulo seleccionado cambiar a la Herramienta de rotación (R). Mientras sostiene el Opción haga clic en el centro de los círculos donde desea que se produzca el eje de rotación y luego ingrese 120 en el cuadro de ángulo y presione Dupdo. Haz esto otra vez con la copia seleccionada para crear tu tercer y último rectángulo.
También puede agregar su etiqueta en el mismo estilo que los demás.
Grupo (Comando + G) los elementos juntos y duplíquelos y ajuste el color para que podamos crear nuestra versión resaltada.
Selecciona los dos círculos que conforman el cuerpo del engranaje y visita. Objeto> Expandir Apariencia convertirlos en formas.
Seleccione el círculo más pequeño y los tres rectángulos y Unir ellos desde el Pionero panel.
Cambiar a la Herramienta de selección directa (A) y seleccione un punto de anclaje desde la parte interior del círculo más grande, luego presione Borrar en el teclado un par de veces para eliminarlo para que te quede un gran círculo lleno.
Seleccione el círculo más grande, así como los dientes de engranaje y Unir ellos desde el Pionero panel.
Seleccione tanto la forma del engranaje como las barras interiores y la forma de círculo pequeño y seleccione Frente menos ellos desde el Pionero panel.
Asegúrese de ajustar también el color de la etiqueta
Con el Herramienta de rectángulo redondeado Crea una forma de pastilla del tamaño de seguimiento y nuestro golpe interno.
Dibujar otro Rectángulo redondeado con la siguiente información y posición como se ve a continuación. Con esta nueva forma de pastilla seleccionada visita. Objeto> Expandir Apariencia para convertir el trazo a una forma.
Cambiar a la Herramienta Rectangular (M) y dibuja un rectángulo para que cubra la mitad superior de la forma de la píldora que hicimos en el paso anterior.
Seleccione tanto el rectángulo como la forma de la píldora y seleccione Frente menos desde el Pionero panel.
Cambiar a la Herramienta Rectangular (M) y cree un rectángulo con las siguientes dimensiones y colóquelo como se ve a continuación.
Crea otro rectángulo con la siguiente información y posicionamiento..
Haz un rectángulo final con la siguiente información y posicionamiento..
Cambiar a la Herramienta Elipse (L) y crea un 3 x 3 puntos Círculo y céntrelo dentro de la forma de la píldora a dos puntos del interior de la parte superior.
Duplica el círculo nueve veces más y sepáralos dos puntos. Ahora puede agregar su etiqueta a continuación.
Grupo (Comando + G) los elementos del micrófono juntos y duplicarlos y cambiarlo a nuestro color de relieve
Seleccione los puntos y el rectángulo interior juntos y visite Objeto> Ruta compuesta> Hacer
Seleccione la forma de la píldora y cambie el trazo al relleno de nuestro color de resaltado Ahora seleccione la forma de la píldora y los círculos / rectángulo y elija Frente menos desde el Pionero panel.
Asegúrese de ajustar también el color de la etiqueta.
Su barra de pestañas está terminada y lista para agregarse a su próximo proyecto de diseño de iOS 7. Espero haber podido mostrarle algunas técnicas para crear iconos delgados inspirados en iOS 7 que puede duplicar fácilmente para otras formas que se ajusten a las necesidades de su aplicación..
Accentsconagua