Este es el aspecto final que tendrá el icono de nuestra aplicación. Pero basta de hablar ahora. Empecemos directamente en Adobe Illustrator ...
Paso 1: Crear la base
Una vez en Illustrator, lo primero que tienes que hacer es crear un nuevo espacio de trabajo mediante Archivo>Nuevo. En la siguiente ventana, selecciona un formato de 70x70mm. Confirma la ventana con OK.
Coge la herramienta rectángulo de la paleta de herramientas y haz clic una vez en cualquier parte de tu espacio de trabajo. Aparecerá un cuadro de diálogo en el que podrás introducir el tamaño de tu rectángulo. Introduce un tamaño de 35x35mm y confirma con OK. Esta es nuestra base para el icono de la aplicación.
Como los iconos de aplicaciones de Apple nunca son cuadrados, tenemos que asegurarnos de que las esquinas estén redondeadas. Selecciona el rectángulo y ve a Efecto>Filtro de estilización>Esquinas redondeadas en la barra de menú superior...
En la siguiente ventana, introduce un radio de esquina de 7 mm. Confírmalo todo con OK.
Una vez confirmado este efecto, las esquinas se redondearán, pero el trazado seguirá siendo angular. Para cambiar esto, vaya a Objeto>Convertir aspecto. Ahora el efecto se ha convertido en un objeto (la trayectoria discurre directamente a lo largo de las esquinas redondeadas).
En el siguiente paso, necesitará la paleta de degradados. Si aún no la ha abierto, puede encontrarla en Ventana > Degradado.
Ahora haga clic en el campo de degradado de la paleta de degradados para rellenar su rectángulo redondeado con un degradado estándar blanco/negro. (Si tu rectángulo aún tiene contorno, ahora es el momento de eliminarlo).
En la configuración del ángulo del degradado, introduzca un valor de 90° para que vaya bien de arriba a abajo.
Como nuestro icono va a tener un degradado azul (por supuesto, también puedes utilizar tus propios colores), ya he preparado dos valores de color RGB para ti.
- azul oscuro - 28/57/145
- azul claro - 84/244/255
Para asignar estos valores de color al degradado, basta con hacer doble clic en los campos de color de la paleta de degradado. A continuación, tiene la posibilidad de introducir los valores RGB.
(Si ha establecido un modo de color diferente, haga clic en la pequeña flecha situada en la parte superior derecha de la paleta de degradados para seleccionar el modo de color adecuado).
Una vez hecho esto, todo debería tener este aspecto. (Figura 11).
Para refinar un poco más el degradado, ve a Efecto>Filtro de estilización>Brillo hacia adentro... Establece el modo de fusión en Superponer. Ajusta la opacidad al 75% y el desenfoque a 8,8 mm. Como sólo queremos aplicar este efecto a la zona exterior, establece el punto de selección en Borde. Confirma la ventana con OK.
A continuación, añade una sombra paralela al conjunto. Esto también se puede hacer mediante Efecto>Filtro de estilización> Sombra paral ela ... Selecciona los ajustes para este filtro como se muestra en la Figura 13, pero siéntete libre de variarlos un poco.
En el siguiente paso, copia el rectángulo con Comando+C y pégalo en el mismo lugar con Comando+F. (En el PC puedes hacerlo con Ctrl+C y Ctrl+F).
Como ya no necesitamos los efectos aplicados anteriormente en la copia del rectángulo, debes borrarlos. Como algunos ya sabréis, todos los efectos y filtros aplicados en Illustrator aparecen en la paleta Apariencia. Si esta paleta no está visible para ti, puedes llamarla de nuevo a través de Ventana>Apariencia.
Ahora elimine la sombra paralela. Para ello, coge la sombra paralela de la paleta Apariencia con el botón del ratón pulsado y arrástrala hasta la pequeña papelera de la esquina inferior derecha de esta paleta.
No es necesario eliminar el resplandor interior, ya que sólo lo ajustaremos ligeramente. Antes de hacer esto, sin embargo, debe cambiar el color de la superficie de la copia del rectángulo a blanco.
A continuación, haga clic en el resplandor interior en la paleta Apariencia , establezca el modo en Normal y seleccione un negro intenso para el color. Ajuste la opacidad al 100% y el desenfoque a 10 mm (Figura 17).
Para mezclar esta copia con el original de debajo con el degradado azul, simplemente reduzca la opacidad al 50% y ajuste el modo de relleno a Luz suave. Todo esto se hace utilizando la paleta Transparencia. (Esta paleta también se encuentra en Ventana>Transparencia).
Esto aumenta ligeramente el contraste y da más profundidad al icono de nuestra aplicación.
Paso 2: Crear un halo
En este paso veremos cómo crear el halo para el icono de la aplicación. Para ello, lo mejor es que primero ocultes los dos rectángulos que creaste en el paso 1 para que vuelvas a tener espacio en tu espacio de trabajo.
Coge la herramienta de línea de la barra de herramientas y establece el color del cont orno en negro y el grosor del contorno en 0,5pt.
Ahora dibuja una línea desde aproximadamente el centro hacia arriba mientras mantienes pulsado el botón del ratón. En cuanto hayas trazado la línea (manteniendo pulsado el botón del ratón), pulsa la tecla Ctrl + la tecla con estos dos corchetes < >.
Ahora conduce una vez en círculo mientras mantienes pulsado el botón del ratón. Esta combinación de teclas crea diferentes números de líneas dependiendo de la velocidad de movimiento del puntero del ratón.
Una vez que hayas recorrido un círculo, el conjunto debería parecerse a la Figura 19. (Inténtalo varias veces, ya que aquí también se aplica el dicho "la práctica hace al maestro").
Marca todas las líneas y agrúpalas con Comando+G (en PC: Ctrl+G). Usa Comando+C y Comando+F (en PC: Ctrl+C y Ctrl+F) para copiarlo todo y pegarlo en el mismo sitio. Para esta copia, cambia el color del contorno a blanco y gíralo ligeramente a la derecha o a la izquierda para que las líneas negras vuelvan a ser parcialmente visibles.
El resultado debería ser algo parecido a esto. (Figura 20):
Ahora vuelve a seleccionar todas las líneas y agrúpalas de nuevo con Comando+G (en PC: Ctrl+G).
Ahora puedes volver a mostrar los rectángulos del paso 1. Asegúrese de que el centro de su aureola se encuentra aproximadamente en el centro de su rectángulo.
Ahora copie el rectángulo redondeado gris que desplazó con el degradado azul en el paso 1. (Comando+C o en PC - Ctrl+C).
Ahora haz click en tu grupo con el halo y mira en la paleta de transparencias. Aquí tienes la opción (similar a Photoshop) de crear una máscara. Para ello, haz doble clic en el área que se muestra en la Figura 23. Este doble clic crea una máscara de opacidad. Este doble clic crea una máscara de opacidad.
En cuanto hayas creado esto, también notarás que tu paleta de capas ha cambiado mientras estés dentro de la máscara. Pulsa Comando+F (en PC: Ctrl+F) para pegar el rectángulo previamente copiado en la máscara. Ahora sólo tienes que reducir la opacidad del 50% al 10%.
Ahora necesitas salir de la máscara para volver a la vista normal. Para ello, haga clic una vez en el campo blanco situado junto al símbolo de la máscara. (Figura 25).
Paso 3: Crear la base del pictograma
Ahora casi hemos hecho la mayor parte del trabajo y estamos listos para insertar un pictograma o símbolo en el icono de nuestra aplicación. Sin embargo, tenemos que crear rápidamente una base o una pequeña plataforma de antemano para que el conjunto tenga mejor aspecto más adelante.
Coge la herramienta elipse y dibuja una elipse aproximadamente en el centro. (Véase la figura 26).
Rellena esta elipse con un color azul oscuro. Para ello he utilizado los siguientes valores de color. RGB - 0/0/255.
Reduzca la opacidad a aprox. 70% y luego vaya a Efecto>Filtro Desenfoque>Desenfoque Gaussiano...
He seleccionado un radio de 28 píxeles para el desenfoque. Por supuesto, puede modificar este valor a su gusto. Confirme todo con OK.
Paso 4: Insertar pictograma
Ahora que ya tenemos la base, por fin ha llegado el momento. Todo lo que tenemos que hacer ahora es insertar un pictograma en el icono de nuestra aplicación. Como pequeño extra, he incluido algunos pictogramas diferentes en los archivos de trabajo. Sin embargo, también puedes utilizar los tuyos propios.
Ve a Archivo>Colocar en la barra de menú superior y selecciona un pictograma de tu elección. En mi caso, se trata del ordenador de los datos de trabajo.
... ¡Listo! ... se podría pensar ...
Pero todavía hay una o dos pequeñas cosas que hacer. En primer lugar, el pictograma necesita una sombra. Para ello, ve a Efecto>Filtro de estilización> Sombra paralela. Utiliza la figura 32 como guía para los valores de esta sombra.
Paso 5: Añadir un resplandor de luz
En el último paso, añadiremos un resplandor de luz para redondear el conjunto. Coge la herramienta elipse y dibuja una elipse blanca como se muestra en la Figura 33.
Por último, sólo tienes que establecer el modo de relleno de la elipse en Luz suave. El icono de tu aplicación está listo.
Palabras finales:
Espero que hayas disfrutado del tutorial y que ahora puedas crear unos bonitos iconos de aplicación. En los archivos adjuntos también encontrarás mi archivo de trabajo original, así que puedes echarle un vistazo si te quedas atascado en algún punto.
Si tienes más preguntas sobre este tema, escríbelas en los comentarios. Intentaré responderlas lo antes posible.
Saludos cordiales
Tu Julian
