Spanish (Español) translation by Rosario (you can also view the original English article)
En este tutorial aprenderás a crear un conjunto de etiquetas brillantes y también un estado rollover (cuando el ratón está sobre tu elemento). Utilizaremos múltiples apariencias y pinceles artísticos personalizados para obtener el aspecto brillante, y cuando hayamos terminado analizaremos las opciones de Guardar para Web. Hablaremos de los ajustes y compararemos diferentes formatos de archivo para obtener la mejor imagen para tu página web. Te esperan muchas variaciones de color así que ¡comencemos!
Paso 1
Primero abre un nuevo documento web. Toma la herramienta Rectángulo (M), haz clic en cualquier lugar de tu mesa de trabajo para abrir la ventana Rectángulo e introduce las dimensiones indicadas. Con este rectángulo seleccionado, ve al menú Objeto > Trazado > Añadir puntos de ancla. Como resultado obtendrás un punto extra en el centro de cada lado. Ahora, selecciona con la herramienta Selección directa (A) sólo el punto inferior, ve al menú Objeto > Transformar > Mover, en Vertical escribe -55 px y pulsa OK.
Paso 2
También usando la herramienta Selección directa (A), mientras presionas la tecla Mayús, selecciona los dos puntos indicados y luego ve al menú Archivo > Secuencias de comandos > Redondear cualquier esquina. Ejecuta la Secuencia de comandos y selecciona un Radio de 10. Si aún no has instalado dicha Secuencia de comandos, ingresa aquí y descárgala.
Ahora, selecciona el punto de la punta y ejecuta nuevamente la secuencia de comandos. Esta vez selecciona un Radio de 15.
Paso 3
Rellena la forma de la etiqueta con el degradado lineal que se muestra a continuación, y cambia el Ángulo a -90 grados. Teniendo este atributo de relleno seleccionado en el panel Apariencia, pulsa el icono Duplicar elemento seleccionado en la parte inferior y obtendrás un segundo relleno. Reemplaza el degradado azul por un motivo llamado Punto media tinta que puedes encontrar en el menú Biblioteca de muestras en Motivos > Gráficos básicos > Gráficos básicos_Texturas. Establece el motivo en Trama y reduce la Opacidad al 70%.
Paso 4
A continuación, selecciona un trazado azul y luego ve al menú Efecto > Trazado > Desplazamiento y aplica un Desplazamiento -7 px. En el panel Trazo, marca la opción Línea discontinua y selecciona un guión de 5 pt.
Añade otro trazo pulsando el icono Duplicar elemento seleccionado en la parte inferior del panel Apariencia y cambia el color de azul a blanco. Los valores del trazo y del desplazamiento siguen siendo los mismos. Ve al menú Efecto > Distorsionar y transformar > Transformar y en la sección Mover Horizontal selecciona -1 px. Cambia el Modo de fusión a Luz suave pero sólo para este trazo blanco.
Paso 5
Ahora vamos a crear un nuevo Pincel de arte. Toma la herramienta Elipse (L), haz clic en cualquier lugar de tu mesa de trabajo para abrir la ventana Elipse e introduce las dimensiones mostradas. Utiliza la herramienta Selección directa (A) para seleccionar sólo los puntos de la izquierda y la derecha de esta elipse y haz clic en la opción Convertir puntos de ancla seleccionados en vértices. Selecciona la forma resultante y luego ve al menú Objeto > Trazado > Desplazamiento y aplica un Desplazamiento -0,7 px para obtener una forma más pequeña en el centro.
Ambas formas están rellenas de blanco. Reduce la Opacidad de la forma más grande al 0%, luego selecciona ambas y ve al menú Objeto > Fusión > Opciones de fusión. Allí, selecciona 25 Pasos especificados y pulsa OK, luego vuelve al menú Objeto > Fusión > Crear. Arrastra el grupo resultante al panel de pinceles y elige Nuevo pincel de arte.
Paso 6
Copia y Pega delante la forma de la etiqueta, quita el relleno degradado y sólo dale un trazo. Tenemos que cortar esta forma, por lo tanto, toma la herramienta Tijeras (C) y haz clic en los puntos indicados. Conserva sólo los tres trazados (negro, rojo y morado) y elimina los demás segmentos. Traza estos trazados con el Pincel de Arte guardado en el paso anterior y luego establece los Grosores de Trazo como se indica. Cambia el Modo de fusión a Superponer para los tres.
Paso 7
Ahora, vamos a añadir la sombra. Duplica el relleno degradado y cambia el color a negro. Con este atributo seleccionado, ve al menú Efecto > Deformar y aplica el efecto Inflar para hacer la parte superior más ancha (imagen 1). A continuación, ve al menú Efecto > Desenfocar > Desenfoque gaussiano y aplica un Radio de 6 px (imagen 2) y luego ve al menú Efecto > Distorsionar y transformar > Transformar. Mueve este relleno negro -5 px verticalmente, luego pulsa OK (3) y establece el Modo de fusión en Luz suave (4).
Estos son los ajustes de los efectos Inflar y Transformar:
Paso 8
En este paso enmascararemos la parte superior de la etiqueta. Toma la herramienta Rectángulo (M) y dibuja un rectángulo sobre la etiqueta como en la imagen. Ahora, selecciona ambas formas (rectángulo + etiqueta) y ve al menú Objeto > Máscara de recorte > Crear.
Paso 9
A continuación, toma la herramienta Elipse (L) y dibuja dos elipses con las dimensiones indicadas. Asegúrate de que están centradas y colócalas en la parte superior de la etiqueta. Los puntos de anclaje izquierdo y derecho de las elipses deben estar alineados con el rectángulo utilizado para enmascarar antes. Ambas elipses están rellenas de negro sólo que la más grande tiene la opacidad fijada en 0 %. Selecciónalas y luego ve al menú Objeto > Fusión > Opciones de fusión y selecciona 30 Pasos especificados. Después, vuelve al menú Objeto > Fusión y selecciona Crear. El grupo de fusión resultante debería estar detrás de la etiqueta.
Necesitamos hacer otra máscara. Dibuja con la herramienta Rectángulo (M) un rectángulo como el negro de abajo y envíalo detrás de la etiqueta pero delante del grupo de fusión. Antes de continuar, alinea la parte superior de este rectángulo con el otro rectángulo utilizado anteriormente. Ahora, selecciona el grupo de fusión y el nuevo rectángulo y ve al menú Objeto > Máscara de recorte > Crear.
Paso 10
Toma la herramienta Pluma (P) o la herramienta Segmento de línea (\) y dibuja un trazado recto exactamente en el borde superior de la etiqueta, como se muestra en la imagen de abajo. Hazle un trazo con el Pincel de arte guardado en el paso 5 y establece el Grosor en 0,25 pt. Reduce la Opacidad al 80%.
Paso 11
Dibuja otro trazado recto sobre la etiqueta y aplícale un trazo con el Pincel seco 5 que puedes encontrar en el menú Biblioteca de pinceles > Artístico > Artístico_Pincel. Establece el Grosor del trazo en 1,5 pt y luego selecciona Expandir apariencia y Desagrupar en el menú Objeto. Rellena la forma resultante con el degradado lineal mostrado en la siguiente imagen, y establece el ángulo en 90 grados.
Paso 12
Copia y Pega delante la forma de la etiqueta y antes de continuar borra todas las apariencias existentes. Selecciona la forma obtenida en el paso anterior y también la copia de la etiqueta, que debe estar delante y ve al menú Objeto > Máscara de recorte > Crear (imagen 1). Para obtener el aspecto brillante, cambia el Modo de fusión a Trama y reduce la Opacidad al 70% para la forma obtenida en el paso anterior (imagen 2). Si te parece que los bordes están demasiado definidos puedes aplicar un Desenfoque gaussiano de 1 px (imagen 3).
Paso 13
Dibuja un pequeño triángulo y luego ve al menú Archivo > Secuencias de comandos > Redondear cualquier esquina. Ejecuta la secuencia de comandos y selecciona un Radio de 5.
Coloca el triángulo en la parte inferior de la etiqueta y selecciona el azul como color de relleno (imagen 1). Ve al menú Efecto > Estilizar y aplica el efecto Resplandor interior (2) y luego aplica el efecto Sombra paralela (3) usando los ajustes mostrados.
Paso 14
Lo último que hay que hacer es el texto. Toma la herramienta Texto (T) y escribe lo que quieras, utilizando la fuente Devinne Swash que puedes encontrar aquí. Selecciona Expandir en el menú Objeto para convertir el texto en formas y mantener el relleno negro. Ve al menú Efecto > Estilizar y aplica el efecto Sombra paralela utilizando la configuración mostrada en la imagen. Cambia el Modo de fusión a Superponer.
En este punto la etiqueta está lista y continuaremos con el estado "rollover".
Paso 15
Haz una copia de la etiqueta, solo cambiaremos algunas cosas. Algunas de las formas están ocultas en las siguientes imágenes y hablaremos de ellas en su momento. Centrémonos en la forma de la etiqueta y cambiemos primero el relleno degradado. También debemos cambiar el tono de azul utilizado para el primer trazo.
Paso 16
Ahora modificaremos la sombra. Haz doble clic en Desenfoque gaussiano en el panel Apariencia para abrir la ventana de Desenfoque gaussiano y reduce el Radio de 6 a 4 px. A continuación, haz doble clic en el efecto Inflar aplicado para abrir la ventana Opciones de deformación y cambia el valor Curvar de 5 a -5 %.
Paso 17
Selecciona el relleno degradado en el panel Apariencia y pulsa el icono de Duplicar elemento seleccionado en la parte inferior. Como resultado obtendrás otro relleno arriba. Mantén el mismo degradado y ve al menú Efecto > Trazado > Desplazamiento y aplica un Desplazamiento de -6,5 px. A continuación, ve al menú Efecto > Estilizar y aplica el efecto Resplandor interior utilizando la configuración mostrada.
Paso 18
Vamos a crear un nuevo Pincel de arte similar al guardado en el paso 5. Utiliza la herramienta Elipse (L) para dibujar una elipse plana de 100 x 3 px y luego transforma los puntos izquierdo y derecho de suavizados a vértices utilizando la opción Convertir puntos de ancla seleccionados en vértices. Ve al menú Objeto > Trazado > Desplazamiento y aplica un Desplazamiento de -1,2 px para obtener la forma más pequeña en el centro. Reduce la Opacidad de la elipse más grande al 0%, luego selecciona ambas y ve al menú Objeto > Fusión > Opciones de fusión. Selecciona 25 Pasos especificados y luego vuelve al menú Objeto > Fusión > Crear. Arrastra el grupo de fusión resultante al panel Pinceles y selecciona Nuevo pincel de arte.
Paso 19
Ahora, traza los tres trazados con el nuevo Pincel de arte. Ajusta el grosor a 0,25 pt y el Modo de fusión a Luz suave para los tres.
Paso 20
En este caso queremos que la forma brillante sea menos visible, por lo tanto, reduce la Opacidad del 70 al 25 %.
Paso 21
Cambia el tono de azul utilizado para rellenar el triángulo y luego haz doble clic en el efecto Sombra paralela aplicado en el panel Apariencia. Una vez dentro de la ventana, reduce la Opacidad de 80 a 50 %. El efecto Resplandor interior permanecerá igual.
Paso 22
Para el texto, reemplaza el relleno negro por azul, luego cambia el Modo de fusión de Superponer a Normal y reduce la Opacidad al 80%.
Este es el estado final de la etiqueta en su estado "rollover":
Paso 23
Con todo listo, vamos a proceder a guardar nuestro material para la web. Toma la herramienta Rectángulo (M) y dibuja un rectángulo alrededor de la etiqueta y luego ve al menú Objeto > Área de recorte > Crear. Obtendrás el mismo resultado si utilizas la herramienta Área de recorte o la herramienta Mesa de trabajo (Mayús+O).
Paso 24
Ve a Archivo > Guardar para Web y dispositivos. Esta ventana ofrece cuatro formas de comparar la etiqueta original con la que vamos a optimizar: Original, Optimizado, 2 copias y 4 copias. Creo que la mejor es 4 copias porque puedes jugar con diferentes ajustes, probar cuatro versiones de la etiqueta y luego elegir la mejor en función del tamaño del archivo y el tiempo de descarga. En la parte superior izquierda están las herramientas, en la esquina superior derecha puedes seleccionar otra velocidad de descarga y en la esquina inferior derecha tienes la opción de previsualizar la imagen en el navegador por defecto.
Paso 25
Ahora vamos a cambiar algunos ajustes y a comparar. De los siete formatos de archivo disponibles para guardar, probaremos sólo JPEG, PNG-8 y PNG-24. El formato GIF es más adecuado para imágenes con áreas planas de color, que para aquellas con rellenos degradados y detalles como estas etiquetas. Lo probé y no quedaron muy bien.
El primer formato es JPEG. Aunque cuanto menor sea la calidad, menor será el tamaño del archivo, no hay que bajar demasiado la calidad. Para una calidad del 60% el tamaño del archivo es de 7,77K pero la etiqueta empieza a no verse tan bien y para la máxima (calidad del 100%) el tamaño del archivo es de 26,11K (!!). El 70 % está bien. Si marcas la opción Optimizado, la reducción del tamaño del archivo es muy ligera, por lo tanto, la omitiremos esta vez. Selecciona la opción Progresivo si quieres que la imagen se cargue en pases.
Si sabes exactamente cuál será el color de fondo, puedes elegir un color mate. El fondo se rellenará con el color seleccionado, en este caso el rosa, y la imagen se comportará como un GIF transparente, pero aprovechando los millones de colores que JPEG puede mostrar. No obstante, el tamaño del archivo será un poco mayor.
Paso 26
Sólo por curiosidad he probado el formato PNG-8 y puedes ver a continuación las diferentes configuraciones. Si eliges Selectivo, Illustrator escoge los colores que el ojo puede ver pero incluye más tonos de color seguros. Las alternativas son: Perceptual (colores que los ojos ven mejor) y Adaptativo (colores que realmente están en la imagen). Hablemos de Tramar. Esta función distribuye píxeles de diferentes colores uno al lado del otro para hacer creer al ojo que ve más colores de los que realmente hay en la imagen. La desventaja es que aumenta el tamaño del archivo, como puedes ver a continuación, 0 % de Trama vs. 100 % de Trama. El Entrelazado es el equivalente al Progresivo del formato JPEG. Sin embargo, ninguna de las imágenes se ve bien, así que pasaremos al siguiente formato.
Obtendrás una mejor imagen si seleccionas un color Mate, en caso de que sepas exactamente cuál será el color de fondo de la página web. Selecciona también Tramar sin Transparencia.
Paso 27
Sin duda, el mejor resultado se obtiene con el formato PNG-24, aunque el tamaño del archivo es bastante grande. Debido a la sombra que rodea a la etiqueta, debes marcar la opción Transparencia.
Paso 28
En este punto puedes previsualizar la etiqueta en un navegador pulsando el icono que se muestra en el paso 24. También obtendrás un código HTML que podrás añadir a tu página web.
Paso 29
Si ya has decidido un formato concreto, pulsa el botón Guardar, selecciona Sólo imágenes y una carpeta de destino y vuelve a pulsar Guardar.
Paso 30
Repite este proceso para el estado "rollover" de la etiqueta. En la imagen de abajo puedes ver las tres versiones que elegí.
Paso 31
Esta es la carpeta con las imágenes guardadas y a partir de este momento puedes utilizarlas como quieras.
Conclusión
Como extra, aquí tienes diferentes variaciones de color de la etiqueta. Todo lo que tienes que hacer es cambiar algunas cosas como: el relleno degradado de la forma de la etiqueta, el color del trazo, el degradado de la forma brillante y el color de relleno del triángulo. ¡Y listo!
Esta es la etiqueta verde
Esta es la etiqueta purpura:
la versión naranja...
roja...
y amarilla:
By
