Cómo crear un icono de aplicación en Illustrator

Sep 17, 2025

Cómo

Página 1 de 2:

Cómo crear un icono de la aplicación en Illustrator: Pasos 01-11

Cómo crear un icono de la aplicación en Illustrator: Pasos 01-11
Cómo crear un icono de la aplicación en Illustrator: Pasos 12-23

En esto Tutorial de ilustrador , Le mostraré cómo crear un icono de la aplicación Calculadora en Adobe Illustrator CC . Usaremos diferentes herramientas de formas, herramienta de pluma, junto con las características 3D de Illustrator. Esperemos que aprendas unos consejos prácticos en el camino.

También necesitarás descargar un par de fuentes gratis Para este tutorial: Ds-digital y Bebas neue . Si aún no lo tienes, puedes conseguir. Adobe Creative Cloud aquí .

Pero primero, echemos un vistazo al resultado final:

01. Abra un documento

illustrator font icon — Haga clic en la imagen para ampliar

Cree un nuevo documento en ilustrador con 600px anchura y 450px altura.

02. Crea el fondo

illustrator app icon — Haga clic en la imagen para ampliar

Seleccione la herramienta Rectángulo (M) y elija # 44484d Rellene el color para dibujar un rectángulo que cubre el lienzo como fondo.

03. Hacer la base.

Comenzaremos creando la base del icono. Por lo tanto, seleccione la herramienta Rectángulo (M) y haga clic en el lienzo para ver la ventana Opciones. Ingrese el ancho 280px, la altura de 265px y presione OK para dibujar un rectángulo como se muestra a continuación. Elegir # E7ded00 como el color de relleno.

A continuación, lo convertiremos en un rectángulo redondeado. Seleccione este rectángulo con la ayuda de la herramienta de selección (V) Orby haciendo clic en el objetivo en forma de anillo presente en el lado derecho de la capa correspondiente. Y ir a efectos & gt; Estilizar & gt; Esquinas redondas. Ingrese 50px para el radio y presione OK.

Click image to enlarge — Haga clic en la imagen para ampliar

04. Establecer efecto

Seleccione este rectángulo y vaya a Efecto & GT; 3D & GT; Extrudio y amplificador; Bisel. Aplicar configuraciones dadas aquí.

05. Aplicar un gradiente

Para aplicar degradado sutil sobre la base, dibuje un rectángulo que cubra toda la forma 3D usando cualquier color de llenado. Ahora convió en un rectángulo redondeado con un radio de esquina de 50px.

Ahora reemplace su relleno con un gradiente negro blanco-negro usando la herramienta de gradiente (G). Cambie su modo de mezcla para colorear con una opacidad del 20% en el panel de transparencia (Shift + Ctrl + F10).

06. Crea otro rectángulo.

A continuación, dibuje otro rectángulo con un ancho de 280px y una altura de 178px con # E9E3D9 de relleno y un golpe de color blanco. Elija 1pt Peso de carrera de la barra de control superior.

Ahora convierte en un rectángulo redondeado por un radio de 40px.

Después de eso, solicite el siguiente gradiente en él y cambie su modo de mezcla para multiplicarse con una opacidad del 50% en el panel de transparencia (MAYÚS + CTRL + F10).

07. Hacer rectángulo redondeado.

Dibuja otro rectángulo de 230px con y 35px altura usando # BCBA95 Llefle Color y para accidentes cerebrovasculares Aplique la luz al gradiente gris oscuro, como se muestra a continuación. Seleccione el peso del trazo 3pt de la barra de control superior.

Convierta este rectángulo en un rectángulo redondeado por un radio de esquina de 10px.

08. Hacer un efecto brillante.

A continuación, seleccione este nuevo rectángulo e vaya a la ventana y GT; Apariencia para ver el panel de apariencia o presione MAYÚS + F6. Ahora seleccione el atributo de relleno y haga clic en el icono del elemento de duplicado seleccionado en la parte inferior del panel de apariencia para duplicar el relleno. Y reemplazar este nuevo relleno con negro y amplificador; Gradiente blanco a 90 grados como se muestra arriba.

Mantenga este rectángulo seleccionado y vaya a Efecto y GT; Estilizar & gt; Brillo interior. Aplicar configuraciones dadas aquí. Una vez que haya terminado, cambie el modo de mezcla de relleno de gradiente para multiplicarse con un 30% de opacidad.

09. Copiar rectángulo

Seleccione este nuevo rectángulo y presione CTRL + C para copiar y presione CTRL + B para pegar hacia atrás. Arrastre esta copia 1-2 pasos hacia abajo. Ahora retire sus atributos de llenado arrastrándolos para eliminar el icono en la parte inferior del panel de apariencia y darle un golpe 3pt de # D1d2d4 color.

10. Añadir texto

A continuación, agregaremos un texto sobre la pantalla. Elija la herramienta Tipo (t) para escribir el texto usando # 404041 llenar color. He usado la fuente DS-Digital aquí.

Ahora presione CTRL + C para copiar y presione CTRL + B para pegar hacia atrás. Arrastre el texto copiado 1-2 pasos hacia abajo y cambie su color de relleno para # 808284 .

11. Hacer la base.

A continuación, vamos a crear la base del botón. Seleccione la herramienta Rectángulo para dibujar un rectángulo con las siguientes dimensiones usando # 847d72 Rellene el color y la misma luz al gradiente gris oscuro en la carrera como se usa en el Paso 7. Sin embargo, elija el peso del trazo 1pt aquí.

Y convertirlo en un rectángulo redondeado por un radio de 25px.

Después de eso, duplique su atributo de relleno en el panel de apariencia y aplique Negro y AMP; Gradiente blanco a 90 grados. Cambie su modo de mezcla para multiplicarse con un 50% de opacidad.

Página siguiente: Los pasos finales para crear una aplicación de iconos en Illustrator ...

Página actual: Cómo crear un icono de la aplicación en Illustrator: Pasos 01-11

Siguiente página Cómo crear un icono de la aplicación en Illustrator: Pasos 12-23

Cómo crear un icono de aplicación en Illustrator

01. Abra un documento

02. Crea el fondo

03. Hacer la base.

04. Establecer efecto

05. Aplicar un gradiente

06. Crea otro rectángulo.

07. Hacer rectángulo redondeado.

08. Hacer un efecto brillante.

09. Copiar rectángulo

10. Añadir texto

11. Hacer la base.

Cómo - Artículos más populares

10 cosas que no sabías que podrías hacer con Photoshop

Crea un efecto de texto tambaleante con JavaScript

Hacer efectos interactivos de la tipografía 3D

Cómo empezar con TypeScript

13 consejos para hacer un mundo de juegos VR

Crea tintas mixtas con InDesign

Cómo perfeccionar el cabello en tus retratos

Crea un carácter peludo 3D desde cero

Categorías