Share
Para los principiantes, los íconos nítidos pueden ser difíciles de hacer en Adobe Illustrator. Con unos simples trucos, el Panel de apariencia y la Herramienta Shape Builder, estará creando íconos de apariencia profesional en muy poco tiempo, es fácil!
Primero cree un documento nuevo en la escala de su ícono, los tamaños comunes son 96px, 48px, 32px, 24px y 16px. Para este tutorial crearé un icono de tamaño 48 x 48 px. Establezca el Modo de color en RGB, los Efectos de trama en 72ppi y las Unidades en píxeles..
Ahora estableceremos la cuadrícula en píxeles, esto facilitará la planificación del diseño. Vaya a Preferencias> Guías y cuadrículas y configure Gridline para que sea de 10 px con 10 subdivisiones, luego vaya a Ver> Mostrar cuadrícula y luego Ver> Ajustar a cuadrícula.
Con todos mis íconos (aparte de los muy básicos) me gusta hacer un boceto rápido en miniatura como base para mi diseño. Puede dibujar con lápiz y papel o puede dibujar en Illustrator o Photoshop. Hice mi boceto en Photoshop, luego lo copié y lo pegué en la mesa de trabajo en Illustrator.
Una vez que el boceto está en la mesa de trabajo, puedo escalarlo, posicionarlo y luego reducir la opacidad al 50%. Si está usando un boceto, reduzca la opacidad al 50% (o más si el boceto es un poco demasiado oscuro) luego bloquee la capa y cree una nueva capa debajo de la capa del boceto. Esta será su capa de ilustración..
Con cualquier forma compleja, puedes dividirla en formas básicas. Para este diseño, he trazado la cabeza con la herramienta Elipse (L), luego moví y giré las formas hasta su posición con la Herramienta de selección (V).
Cuando las formas básicas están en la posición aproximada, tome la herramienta Generador de formas (Mayús + M) y combínelas arrastrando el cursor sobre las formas.
Si necesita hacer curvas sutiles, tome la herramienta Pluma (P) y dibuje en la forma básica. Haga un punto en el centro de cada curva, aquí es donde las líneas se suavizarán.
Para hacer curvas suaves desde puntos, tome la herramienta Convertir punto de ancla (Mayús + C) y arrastre el punto mientras mantiene presionada la tecla Mayús.
Para facilitar la simetría, use la herramienta Reflect Tool (O). Para reflejar una forma, primero selecciónela con la Herramienta de selección (V), luego seleccione la Herramienta de reflexión (O) y la Opción + Clic en la mesa de trabajo donde se reflejará la forma; ahora debería ver un cuadro de configuración.
Establezca el eje en la forma en que desea reflejar la forma (mi imagen se refleja verticalmente) y haga clic en Copiar. Ahora tendrás una copia reflejada de tu forma..
Combine las formas con la herramienta Generador de formas (Shift + M) y suavice los puntos con la herramienta Convertir punto de ancla (Shift + C).
Aquí está la parte divertida. Hay un truco que puedes usar para obtener una vista previa de tu icono mientras trabajas. Primero, vaya a Ventana> Nueva ventana. Esto creará una copia del documento en el que está trabajando..
Una vez que hayas creado la nueva ventana, oculta la cuadrícula. En el menú "Ver", configure la ventana en Tamaño real, Ocultar tablas de diseño y seleccione Vista previa de píxeles. Ahora tendrá una vista previa casi perfecta de su icono terminado.
Lo mejor de trabajar con la segunda ventana es que cualquier cosa que cambie en la primera ventana también cambiará en la segunda ventana.
Para hacer un botón detrás del ícono, seleccione la herramienta Rectángulo redondeado y la Opción + Clic en la mesa de trabajo, esto abrirá un menú de configuración. Establezca la Anchura y la Altura en unos pocos píxeles menos que el tamaño final de su icono, esto le dará espacio para agregar sombras o efectos más tarde. El radio de la esquina será diferente dependiendo del tamaño del ícono que estés creando, elegí usar 6px porque mi ícono es bastante pequeño.
Una vez que haya creado el rectángulo redondeado, selecciónelo y muévalo detrás del diseño del icono presionando Comando + la tecla de corchete izquierda.
Para hacer un degradado suave para el rectángulo redondeado, rellene la forma con la herramienta Degradado (G) y cambie la muestra inferior en el degradado para que sea gris medio, cambie la muestra superior a un gris muy claro y luego justo debajo de la muestra superior , haga clic en el gradiente para agregar una tercera muestra. Cambia la tercera muestra para que sea un tono ligeramente más oscuro del segundo gris.
Para agregar un contorno, vaya al Panel de apariencia (Ventana> Apariencia) y, con el rectángulo redondeado seleccionado, haga clic en la opción de trazo, establezca el color como gris medio (ligeramente más oscuro que el tono más oscuro) y establezca el peso en 1px.
Ahora agregaremos un esquema de degradado a la forma del ícono y guardaremos el botón y los estilos de íconos para futuros diseños. Primero, la forma más fácil de hacer un esquema de degradado en una forma es crear una ruta de desplazamiento. Para hacer esto, seleccione la forma, luego en el Panel de Apariencia (Ventana> Apariencia) agregue un nuevo relleno encima del primer relleno. Haz de esta una versión ligeramente más oscura de tu primer gradiente..
Como puede ver en la imagen de ejemplo a continuación, he usado un degradado radial oscuro para el interior de la forma (degradado superior) y una versión más clara para el contorno (degradado inferior). Ambos rellenos se pueden modificar seleccionando el relleno en el Panel de apariencia y cambiando la configuración con el Panel de degradado (Ventana> Gradiente) y la Herramienta de degradado (G).
Seleccione el gradiente superior en el Panel de apariencia y vaya a la Fx Botón en la parte inferior del panel. Desplácese a Ruta> Ruta de desplazamiento, establezca el Desplazamiento en -1px con Round Joins y haga clic en Aceptar.
Para guardar una apariencia como una muestra, vaya al Panel de apariencia y arrastre el icono en la parte superior del panel en el Panel de estilos gráficos (Ventana> Estilos gráficos).
Ahora tendrá dos estilos gráficos que se pueden aplicar a muchas formas y botones diferentes para crear un conjunto rápido de iconos básicos. Vea lo que puede hacer y siéntase libre de compartir su trabajo en la página de Facebook de Vectortuts +.
Si te gustó este tutorial, te puede gustar "Cómo hacer un estilo de ícono reutilizable usando el Panel de apariencia".
Accentsconagua