Share
Lo que vas a crearEn este tutorial, crearemos un conjunto de iconos planos para Apple Watch que se pueden encontrar en el menú original de la pantalla de inicio de Apple Watch de forma predeterminada. Usaremos formas básicas y efectos de deformación, así como algunos métodos más complicados para crear un diseño de interfaz de usuario moderno. Empecemos!
Los íconos de Apple Watch están diseñados en un estilo moderno y muy similar a los íconos de iOS, que se pueden encontrar en la última versión de iOS en iPhone, iPad u otros dispositivos de Apple. Sin embargo, hay una característica específica notable: los iconos son redondos. En este tutorial usaremos una cuadrícula redonda para crear una base única para cada icono. Puede descargar una plantilla de iconos muy agradable en vector para que sea más fácil trabajar con ella..
Si está interesado en una teoría más detallada sobre la creación de íconos para Apple Watch, le recomiendo encarecidamente que utilice las Directrices y especificaciones oficiales de la interfaz humana de Apple Watch..
Consulte también estos artículos muy útiles y descriptivos "Creación de iconos para Apple Watch" e "Iconos para Apple Watch - La Guía definitiva", donde las personas comparten sus plantillas gratuitas y sus conocimientos sobre cómo crear iconos personalizados..
¡Ahora es el momento de seguir adelante y crear los iconos de Apple Watch! Si desea que sus iconos sean más perfectos en píxeles y realistas, como los iconos originales de Apple Watch, puede encontrar una imagen de muestra de la pantalla de inicio de Apple Watch en Google Images. Archivo> Lugar Colóquelo en su mesa de trabajo y utilícelo como plantilla, dibujando sus íconos sobre él, conservando los tamaños y proporciones deseados. De lo contrario, simplemente siga este tutorial como una guía inspiradora, no como una instrucción estricta sobre cómo crear copias exactas de los íconos originales..
Comience abriendo una de las plantillas de iconos (para este tutorial usaremos el 80 x 80 px plantilla de icono para 38 mm reloj). Ir Ver> Ocultar cuadrícula para hacer que la cuadrícula sea invisible si te distrae, pero asegúrate de tener la Guías inteligentes y Snapping habilitado (puede encontrarlos en el mismo menú) para facilitar el trabajo con.
Comencemos a crear nuestro primer ícono para la aplicación Time colocando un 4 x 4 px Incluso circular en el centro de la plantilla. Haga doble clic en Herramienta Elipse (L) para llamar a la ventana emergente de opciones, y luego diríjase a la Alinear Panel para alinear el círculo horizontal y verticalmente en la mesa de trabajo. Rellena el circulo con naranja (# FF9506).
Utilizar el Herramienta Rectangular (M) para crear un 2 x 40 px segunda mano de nuestro reloj, llena del mismo color naranja, y colóquela a lo largo de la línea de guía central, como se muestra en la captura de pantalla.
Usted puede alinear la mano al objeto clave, haciendo clic en el círculo mientras mantiene pulsada la tecla Alt llave.
Copiemos la segunda mano, acortemos y girémosla. -60 grados, colocándolo a lo largo de la Guía, como se muestra a continuación.
Ahora formaremos el cuerpo de la manecilla de los minutos. Hacer un negro 4 x 30 px rectángulo y usar el Esquinas vivas característica para hacer ambos extremos redondeados tirando de los pequeños marcadores circulares con el Herramienta de selección directa (A) a su máximo (2 px radio de esquina en nuestro caso).
Coloque la mano en el lugar adecuado a lo largo de la línea de guía (puede hacerla un poco más pequeña, de modo que se ajuste al círculo interior de la base del icono).
Crea otro rectángulo de 4 x 20 px tamaño de la manecilla de la hora. Hazlo redondeado, rota a 60 grados y colóquelo en el lado opuesto del minutero.
Finalmente, crea un 80 x 80 px elipse blanca con el Herramienta Elipse (L) para la base de iconos y colóquelo debajo de todos los demás objetos. ¡Genial! Nuestro primer icono está listo; vamos a la siguiente.
Ahora vamos a crear el icono de correo. Empieza a formar el sobre haciendo un 50 x 33 px rectángulo de cualquier color.
Agrega un triángulo con Trazo 2 pt ya sea utilizando un Herramienta de polígono con 3 lados valor o con el Herramienta Pluma (P). Objeto> Expandir El triángulo para convertirlo en curvas..
Agregue otro triángulo en el lado superior de la base del sobre, haga su esquina inferior redondeada y expanda la forma. Puede borrar las partes superior e inferior de los rectángulos con la Herramienta de borrador (Shift-E), ya que no los necesitaremos.
Eliminar la parte superior del triángulo inferior con el Herramienta de borrador (Shift-E) y Unir ambas partes de los triángulos en Pionero. Por último, hacer una copia de la forma básica del sobre. (Control-C> Control-F), seleccione tanto el rectángulo como la forma superior, y use la Intersecarse funcion de Pionero cortar las partes fuera del sobre.
Seleccione el rectángulo y las rayas otra vez y aplique el Frente menos funcion de Pionero para cortar las líneas. Cambie el color del sobre a blanco y agregue una base circular para nuestro icono, llenándolo con un degradado lineal de azul oscuro (# 2066F0) arriba a azul más claro (# 1DD4FD) en la parte inferior.
Nuestro siguiente ícono es para la aplicación Música, que consiste en el único elemento: un signo de nota musical. Empieza a formar la nota con un 27 x 11 px rectángulo. Seleccione los puntos de anclaje en el lado izquierdo de la forma con el Herramienta de selección directa (A) y arrástrelos hacia abajo para hacer la forma torcida.
Utilizar el Herramienta Rectangular (M) para crear dos formas más y comenzar a formar la "pierna" de la nota.
Seleccione tres puntos de anclaje del cuadrado inferior con el Herramienta de selección directa (A) Y hazlos redondeados. Entonces Unir las formas en Pionero y hacer la esquina entre las formas redondeadas también, usando el Esquinas vivas característica.
Agregue la segunda parte de la nota y haga que la forma general sea más suave y redondeada. Termine con el icono haciendo la base, llena de degradado lineal de naranja (# FA5D3B) a rosa (# FF2968).
Ahora nos estamos moviendo a un conjunto de iconos conectados con el tiempo, y todos creados en un solo estilo. Comience formando un 48 x 48 px Incluso círculo, y un círculo más pequeño dentro. Utilizar el Frente menos funcion de Pionero para crear un anillo.
Cree un anillo elíptico más pequeño dentro de la primera forma y agregue dos líneas cruzadas, alineadas al centro.
Agregue una línea horizontal en la parte superior de la forma y dóblela con la ayuda de Efecto> Deformación> Arco. Selecciona el Curva horizontal valor para -35%.
Agregue otra línea doblada en la parte inferior de nuestro globo y termine con este ícono expandiendo la forma del globo y formando una base de degradado con un fondo naranja oscuro (# ff7632) y top naranja claro (# ff9408). Añade un círculo más pequeño de color naranja más oscuro (# e45221) y escóndalo detrás de la forma del globo, dándole más contraste.
Para nuestro próximo ícono, el Cronómetro, usaremos la base del ícono del Reloj mundial que hemos creado previamente. Forma el centro del cronómetro haciendo un 8 x 8 px elipse, alineada con una 2 x 25 px Rectángulo para la segunda mano del reloj..
Utilizar el Herramienta Rectangular (M) Para agregar detalles menores a la parte superior de nuestro cronómetro. Haga que el botón del cronómetro sea más redondeado, utilizando las esquinas vivas y configurando el radio de la esquina a 1.4 px.
Vayamos al icono del temporizador: tiene la misma base que el icono del cronómetro. Formar un 2.5 x 13 px raya en la parte superior central del anillo con el Herramienta Rectangular (M). Entonces toma el Herramienta de polígono, estableciendo el Lados cantidad a 3, o usa el Herramienta Pluma (P) para formar un triangulo. Colóquelo como se muestra en una captura de pantalla a continuación, como si fuera un trozo de pastel..
Seleccione tanto el anillo blanco básico como la forma de triángulo y use el Frente menos Función para cortar la parte izquierda del anillo. Añadir un pequeño 6 x 6 px Círculo en el centro de nuestro icono..
Finalmente, gire el círculo de modo que su punto de anclaje superior sea aproximadamente 45 grados a la izquierda. Arrastre el punto de anclaje con el Herramienta de selección directa (A), extendiendo la forma. Convertir el punto de anclaje seleccionado en esquina ya sea con la ayuda de la Convertir en el panel de control superior o haciendo clic con el botón Herramienta de punto de anclaje (Shift-C), Convirtiendo así nuestra forma en la mano de un reloj..
Nuestro último icono en este conjunto es la alarma. Tiene la misma base con el anillo blanco que los iconos naranjas anteriores. Las manecillas del reloj se forman con dos franjas estrechas hechas con el Herramienta Rectangular (M).
Formemos la parte superior del reloj de alarma haciendo un círculo uniforme con el Herramienta Elipse (L) y dividiéndolo en dos partes iguales haciendo clic en los puntos de anclaje laterales con el Herramienta Tijeras (C). Coloque las mitades en la parte superior de la alarma y agregue dos “patas” pequeñas en la parte inferior para terminar el icono..
El icono de Mapas es bastante simple y no contiene tantos elementos. Empieza formando su centro con una 40 x 40 px círculo de un azul (# 087eff) color. Forma una flecha de compás de un 17 x 25 px triángulo, subiendo.
Añadir un beige (# e5decb) icono de base. Ir Objeto> Ruta> Añadir puntos de anclaje yseleccione el punto de anclaje en el centro en la parte inferior y tire de él hacia arriba un poco, formando la punta de flecha.
Coloque una amplia franja vertical, hecha con una 26 x 83.5 px Rectángulo, a través del icono, y unirlo con otra franja ancha, colocándolo perpendicular. Oculta la forma cruzada detrás del círculo azul con la flecha. Seleccione tanto la base del icono como las rayas cruzadas y utilice la tecla Dividir funcion de Pionero para dividir la forma en tres partes.
Rellene las partes de la base del icono con verde (# 78c73d) y rosa claro (# fbc7d2) colores.
Vayamos al icono del tiempo. Rellena la forma básica del cielo con un degradado lineal desde el azul más oscuro (# 2066f0) arriba a azul más claro (# 1dd4fd) en la parte inferior. Añadir un amarillo (degradado lineal de # ffc505 a # fee403) Círculo para el sol en la parte izquierda del icono. Empieza a formar las nubes con dos círculos: a 25.5 x 25.5 px círculo en el centro de la plantilla y una 21 x 21 px Círculo más cerca de la parte derecha del icono.
Crear un 43 x 16 px Rectángulo y realizar sus esquinas redondeadas con 8 px radio de esquina. Alinee el rectángulo con los círculos y Unir las tres formas en Pionero para formar una nube suave y redondeada.
Llena la nube de color blanco y hazla semitransparente, bajando el Opacidad a 90%.
Vamos a pasar al icono de la cámara. Haz un círculo gris básico, lleno de degradado lineal de gris oscuro (# 8e9196) en la parte inferior a gris más claro (#dadcdd) en la parte superior, y comience a formar la silueta de la cámara desde un gris oscuro (# 3c3c3c) rectángulo redondeado.
Añadir una más pequeña 30 x 17 px rectángulo en la parte superior y haga su esquina superior izquierda redondeada con 7 px radio de esquina. Unir Las formas y hacen la esquina entre las formas redondeadas también..
Agregue una franja estrecha en la parte superior de la cámara y use la Frente menos función para cortarlo.
Forma el icono del obturador desde una 9 x 4 px Rectángulo, y colóquelo en el centro de nuestra plantilla. Utilizar el Herramienta Pluma (P) para agregar una flecha apuntando hacia abajo en el obturador. Selecciona el Peso del trazo a 4 puntos y hacer las tapas y la esquina de la línea redondeada en el Carrera panel.
Agrega los detalles finales a nuestra cámara: forma un amarillo brillante (# fac81b) indicador de un 6 x 6 px tamaño. Además, crea un gran círculo con 4 puntos de peso de trazo. Coloque el círculo en la esquina inferior derecha de la cámara, como se muestra en la captura de pantalla.
Objeto> Expandir El gran círculo, convirtiéndolo en el anillo. Seleccione tanto el anillo como la cámara y aplique Frente menos Para cortar el anillo, formando el objeto de vidrio. Luego, seleccione todas las partes gris oscuro de nuestra cámara y conviértalas en una sola forma compuesta presionando Control-8.
Finalmente, use el Herramienta de creación de forma (Shift-M) o la Intersecarse funcion de Pionero para cortar las partes innecesarias de la cámara fuera de la base de nuestro icono.
Hagamos un auricular para el icono del teléfono. Crear un 8 x 40 px rectángulo y usar un Efecto Arc Warp con 27% Curva vertical Valor para doblar el rectángulo hacia el lado izquierdo. Añadir dos 17 x 20 px Rectángulos en las partes superior e inferior del teléfono y redondean sus esquinas, haciendo que las formas sean suaves.. Unir todas las partes del auricular en Pionero.
Alise el lado izquierdo del auricular eliminando los puntos de anclaje innecesarios con el Eliminar herramienta de punto de anclaje (-) y redondea las esquinas interiores con el Esquinas vivas característica. Finalmente, gire el teléfono para 45 grados y colóquelo sobre la base del icono, lleno de degradado lineal de un verde más claro (# 86fb71) a un verde más oscuro (# 0fd51c).
Formemos el icono de mensaje en la misma base verde que hemos utilizado anteriormente. Hacer una 40 x 40 px Círculo blanco y extiéndelo un poco hacia los lados, haciendo que la forma aplastada a 48 x 40 px. Agrega un pequeño triángulo en la parte inferior de la forma blanca, formando un bocadillo. Haz la esquina inferior del triángulo ligeramente redondeado. Utilizar el Efecto Arc Warp con -Curva Vertical 36% Valor para hacer el triángulo ligeramente arqueado..
Así es como se ve el ícono completado.
Nuestro siguiente ícono es el ícono de la aplicación Remoto, que también es muy simple y consiste en un solo elemento. En primer lugar, forma una base de degradado (de azul oscuro). # 2066f0 en el fondo a azul claro # 1dd4fd) encima. Añadir trazo blanco con Peso del movimiento 5.3 pt y Alinear eso al interior. Colocar un 30 x 30 px Triángulo blanco en el centro de nuestro icono..
Finalmente, haz las esquinas del triángulo redondeadas con un 2.5 Radio de esquina. ¡Genial! El icono está listo, así que sigamos adelante..
El icono de entrenamiento muestra una silueta estilizada de un hombre corriendo. Crea una base de iconos brillante, llena de degradado lineal de color verde amarillento (# c2ec38) en la parte superior a verde en la parte inferior (# a3fc3f).
Tomar el Herramienta Pluma (P) y crear líneas separadas para los brazos doblados, piernas y torso con Peso del movimiento de 3 puntos y tapas redondeadas y esquinas.. Aumentar el espesor de la Peso del trazo de la linea del torso a 6 pt y agrega un 9 x 9 px circulo para la cabeza.
Objeto> Expandir Las líneas y rellenar las formas con color negro..
El icono de configuración consiste en un engranaje. Forma la base del diente de un 48 x 48 px Círculo con un centro recortado, haciendo un anillo. Agrega tres líneas con Peso del movimiento de 3 puntos, Conectado en el centro de la plantilla de iconos..
Ahora necesitamos agregar las ondas a nuestro engranaje. Formar un 5 x 9 px Rectángulo y hacer su parte superior un poco más estrecha. Haga sus esquinas superiores redondeadas con 1.6 Radio de esquina. Coloque las ondulaciones en las partes superior e inferior de la base del diente..
Vamos a usar el Herramienta de rotación (R) Para añadir más elementos. Seleccione ambas ondulaciones, haga doble clic en el Herramienta de rotación (R) para llamar a la ventana de opciones emergente y configurar Girar valor para 360/18. De esta manera, Adobe Illustrator calculará automáticamente el valor adecuado para 18 formas presione el Dupdo botón.
prensa Control-D Varias veces para repetir nuestra última acción, añadiendo más elementos. Para terminar con este ícono, seleccione todas las ondulaciones, cambie el color de relleno a blanco y Girar todos juntos por -10 grados.
Nuestro siguiente icono es una flor estilizada para la aplicación Fotos. Empieza formando el pétalo de un 20 x 30 px Rectángulo y realizar sus esquinas redondeadas con 10 px Radio de esquina. Duplique el pétalo y coloque su copia en la parte inferior de la plantilla del icono, como se muestra en la siguiente captura de pantalla. Selecciona ambos pétalos y usa el Herramienta de rotación (R) para hacer ocho copias más de los pétalos, aplicando el Ángulo de 360/8 valor y presionando el Dupdo botón.
prensa Control-D Varias veces para formar la flor de ocho pétalos. Cambia los pétalos a Multiplicar el modo de fusión y baja el Opacidad a 80%. Apliquemos el color apropiado a cada pétalo, comenzando desde el medio superior y moviéndonos en sentido horario: naranja (# fa9700), amarillo (# f0e22c), verde (# b5d558), turquesa (# 6ec19d), azul (# 71b5e1), Violeta (# 8f60c3), rosado (# d782a4) Y Rojo (# ff2c2c).
Pon la flor en la base del icono blanco..
El icono de Stocks consiste en un diagrama minimalista. Empieza a formar el diagrama haciendo un azul brillante (# 02a6f5) línea vertical de 3 puntos tamaño con el Herramienta de línea (\). Colóquelo en el centro de nuestra plantilla, en un lugar oscuro (# 3f3f3f) base de iconos.
Agregue un pequeño círculo azul sobre la mitad de la plantilla y aplique un gris oscuro (# 3f3f3f) 1 pt Carrera A ella para separarla visualmente de la línea. Agregue cuatro líneas más en ambos lados del icono, con un gris más claro (# 555555) Carrera de 3 puntos.
Objeto> Expandir las líneas y corte las partes innecesarias fuera de la base del icono, ya sea con la Herramienta de creación de forma (Shift-M) o con la ayuda de la Pionero.
Termina con el ícono agregando una línea en zigzag con Trazo de 1.5 pt para el gráfico usando el Herramienta Pluma (P). Amplía la línea y haz que encaje en la base de iconos..
El icono de Actividad es más complicado e interesante de hacer. Se compone de tres círculos de colores degradados. Para formar un círculo de este tipo, primero debemos hacer un Grupo de Fusión..
Haz dos iguales 6 x 7 px rectángulos de color rosa (# ff2b91) Y Rojo (# f1281e) colores. Selecciona los rectángulos y ve a Objeto> Mezcla> Hacer. Puede editar la configuración en Objeto> Mezcla> Opciones de mezcla, aplicando Color liso para hacer una buena mezcla perfecta. Arrastre el grupo de mezcla creado a la Cepillos panel y crear una nueva Pincel de arte con la configuración por defecto.
Crear un gris oscuro (# 393839) Círculo base para nuestro icono y coloque otro círculo encima de él, aplicando nuestro pincel como un Carrera. Ajuste el tamaño del círculo para que se ajuste al borde exterior de la plantilla de iconos. Selecciona el Peso del trazo a 1 pt y Objeto> Expandir Apariencia para convertir el trazo de pincel en unaforma. Gire o invierta la forma con la Herramienta de reflexión (O) Horizontalmente, si es necesario, para que tengamos el lado rosa del círculo a la izquierda y el rojo a la derecha..
Crea un rosa pequeño (# ff2b91) Encierre en un círculo y colóquelo en el área central superior del anillo de color, de modo que se ajuste a la altura de la forma, ocultando la conexión de los dos colores..
Ahora necesitamos agregar dimensión al anillo formando una sombra sutil. Como puede observar, el anillo se dividió en varias partes después de que lo expandimos. ¡Esto es exactamente lo que necesitamos! Selecciona la pieza roja superior del anillo., dupdo eso y Pegar en el frente (Control-C> Control-F). Rellene la copia con degradado lineal de rojo oscuro (# a11b17) a blanco, y cambiar a Multiplicar el modo de fusión, Haciendo así invisible la punta blanca del degradado..
Usa la misma técnica para crear dos anillos más coloridos dentro de la primera forma. Crea los pinceles artísticos de un color amarillo (# d8ff06) y verde (# 86e402) grupo de mezcla y de un turquesa (# 06ffaa) y azul (# 06e3f9) mezclar. Termina con el ícono agregando círculos y aplicando sombras suaves.
El siguiente es el icono de la libreta, que consta de cuatro pictogramas pequeños: una tarjeta de crédito, un avión, una cámara de cine y una taza de café. Estos pictogramas son minimalistas y están hechos de formas básicas con la ayuda de Pionero y Esquinas vivas característica. A continuación puede ver una captura de pantalla paso a paso, que muestra cómo combinar las formas para cada pictograma..
La base del icono consiste en cuatro franjas de diferentes colores: rojo (# ff4e46), azul (# 439eca), verde (# 3dca36) y naranja (# ffa02b), Cada uno de 20 px altura. Crear un predeterminado 80 x 80 px base circular para nuestro icono y elimine las piezas innecesarias de las rayas con la ayuda de la Herramienta de creación de forma (Shift-M) seleccionando todos los objetos y haciendo clic en las partes no deseadas mientras mantiene presionada la tecla Alt llave.
Formar un par 3.5 x 3.5 px circule, cruce el lado superior de la franja naranja y cópielo a la derecha sosteniendo ambos Alt y Cambio y arrastrando la forma. prensa Control-D Varias veces para hacer más copias del círculo. Luego selecciona todas las copias y conviértelas en un Camino compuesto presionando Control-8. Selecciona elcírculos y la raya naranja y aplicar la Frente menos Función para cortar los orificios, haciendo la raya perforada..
Finalmente, coloque los pictogramas que creamos anteriormente y alinéelos con el centro de nuestro icono.
El último icono de nuestro conjunto es el icono de Calendario. Se compone de texto, hecho con la fuente Helvetica Neue y una sencilla base de iconos blancos.
Esta fue una búsqueda larga pero emocionante! Hemos creado un total de 20 iconos de aplicaciones de la pantalla de inicio, que utilizan formas básicas, efectos de deformación y algunos trucos y efectos. Espero que hayas disfrutado siguiendo esta guía y que hayas encontrado algunas técnicas útiles. Buena suerte con tus diseños.!
Accentsconagua