Share
Siga este tutorial y aprenda cómo crear un conjunto de etiquetas brillantes y también un estado de rollover. Usaremos varias apariencias y pinceles de arte personalizados para obtener un aspecto brillante y cuando hayamos terminado, analizaremos las opciones de Guardar para Web. Hablaremos sobre la configuración y compararemos diferentes formatos de archivo para obtener la mejor imagen para su página web. Muchas variaciones de color te esperan así que comencemos!
Primero abre un nuevo documento web. Tome la herramienta Rectángulo (M), haga clic en cualquier lugar de su mesa de trabajo para abrir la ventana Rectángulo e ingrese las dimensiones que se muestran. Con este rectángulo seleccionado, vaya al menú Objeto> Ruta> Agregar puntos de ancla. Como resultado obtendrás un punto extra en el medio de cada lado. Ahora, seleccione usando la Herramienta de selección directa (A) solo el punto inferior, vaya al menú Objeto> Transformar> Mover, en Tipo vertical menos 55 px y presione Aceptar.
También utilizando la Herramienta de selección directa (A) y mientras presiona la tecla Mayús, seleccione los dos puntos indicados y luego vaya al menú Archivo> Secuencias de comandos> Redondear cualquier esquina. Ejecute el script y seleccione un Radio 10. Si aún no ha instalado este script, vaya aquí y consígalo.
Ahora, seleccione el punto de la sugerencia y vuelva a ejecutar el script. Esta vez selecciona un radio de 15.
Rellene la forma de la etiqueta con el degradado lineal que se muestra y cambie el ángulo a menos 90 grados. Habiendo seleccionado este atributo de relleno en el Panel de apariencia, presione el ícono Duplicar elemento seleccionado en la parte inferior y rellene para obtener un segundo relleno. Reemplace el degradado azul con un patrón llamado Punto de Mezzotint que puede encontrar en el menú Bibliotecas de muestras en Patrones> Gráficos básicos> Gráficos básicos_Texturas. Establezca el patrón en Pantalla y reduzca la Opacidad al 70%..
A continuación, seleccione un trazo azul, luego vaya al menú Efecto> Ruta> Ruta de compensación y aplique una compensación de menos 7 px. En el Panel de trazo, marque la opción Línea discontinua y seleccione un guión de 5 puntos.
Agregue otro golpe presionando el icono Duplicar elemento seleccionado en la parte inferior del Panel de apariencia y cambie el color de azul a blanco. El guión y los valores de desplazamiento siguen siendo los mismos. Vaya al menú Efecto> Distorsionar y transformar> Transformar y en la sección Mover en Selección horizontal menos 1 px. Cambie el modo de fusión a Luz suave pero solo para este trazo blanco.
Ahora vamos a crear un nuevo pincel de arte. Tome la herramienta Ellipse (L), haga clic en cualquier parte de su mesa de trabajo para abrir la ventana de Ellipse e ingrese las dimensiones que se muestran. Use la Herramienta de selección directa (A) para seleccionar solo los puntos de la izquierda y derecha de esta elipse y haga clic en la opción Convertir los puntos de ancla seleccionados a la esquina. Seleccione la forma resultante, luego vaya al menú Objeto> Ruta> Ruta de compensación y aplique una compensación de menos 0.7 px para obtener una forma más pequeña en el medio.
Ambas formas están rellenas de blanco. Reduzca la opacidad para la forma más grande al 0%, luego selecciónelos y vaya al menú Objeto> Fusión> Opciones de fusión. Allí, seleccione 25 pasos especificados y presione Aceptar, luego vuelva al menú Objeto> Fusionar> Crear. Arrastre el grupo de mezcla resultante al panel Pinceles y elija Nuevo pincel de arte.
Copie y pegue en frente de la forma de la etiqueta, elimine el relleno de degradado y déle un trazo. Necesitamos cortar esta forma, por lo tanto, tome la herramienta Tijeras (C) y haga clic en los puntos indicados. Mantenga solo los tres caminos (negro, rojo y púrpura) y borre los otros segmentos. Recorrer estos recorridos con el pincel artístico guardado en el paso anterior y luego establecer los pesos de los trazos como se indica. Cambia el modo de fusión a Overlay para los tres.
Ahora, vamos a añadir la sombra. Duplique el relleno degradado y cambie el color a negro. Con este atributo seleccionado, vaya al menú Efecto> Deformar y aplique el efecto Inflar para agrandar la parte superior (imagen 1). Luego, vaya al menú Efecto> Desenfoque> Desenfoque gaussiano y aplique un radio de 6 px (imagen 2), luego vaya al menú Efecto> Distorsionar y transformar> Transformar. Elija mover este relleno negro menos 5 px verticalmente, luego presione OK (3) y configure el modo de fusión en Luz suave (4).
Aquí están los ajustes para los efectos Inflar y Transformar:
En este paso enmascararemos la parte superior de la etiqueta. Tome la herramienta Rectángulo (M) y dibuje un rectángulo sobre la etiqueta como en la imagen. Ahora, seleccione ambas formas (rectángulo + etiqueta) y vaya al menú Objeto> Máscara de recorte> Crear.
A continuación, tome la herramienta Elipse (L) y dibuje dos elipses que tengan las dimensiones que se muestran. Asegúrese de que estén centrados y luego colóquelos en la parte superior de la etiqueta. Los puntos de anclaje izquierdo y derecho de las elipses deben alinearse con el rectángulo utilizado para enmascarar anteriormente. Ambas elipses están llenas de negro, solo que la más grande tiene la opacidad establecida en 0%. Selecciónelos y luego vaya al menú Objeto> Fusionar> Opciones de fusión y seleccione 30 pasos especificados. Luego, vuelva al menú Objeto> Fusionar y seleccione Crear. El grupo Blend resultante debe estar detrás de la etiqueta..
Necesitamos hacer otra máscara. Dibuje con la herramienta Rectángulo (M) un rectángulo como el negro de abajo y envíelo por detrás de la etiqueta pero delante del grupo Blend. Antes de continuar, alinéelo en la parte superior con el otro rectángulo usado anteriormente. Ahora, seleccione el grupo Mezclar y este rectángulo y vaya al menú Objeto> Máscara de recorte> Crear.
Tome la herramienta Pluma (P) o la herramienta Segmento de línea (\) y dibuje una trayectoria recta exactamente en el borde superior de la etiqueta, como se muestra a continuación. Golpéelo con el pincel Art guardado en el paso 5 y establezca el peso en 0,25 pt. Reducir la opacidad al 80%..
Dibuja otra ruta recta sobre la etiqueta y pásala con un pincel artístico llamado Pincel seco 5 que puedes encontrar en el menú Bibliotecas de pinceles en Artistic> Artistic_Paintbrush. Establezca el peso del trazo en 1.5 pt y luego seleccione Expandir apariencia y desagrupar en el menú Objeto. Rellene la forma resultante con el degradado lineal que se muestra y establezca el ángulo a 90 grados.
Copie y pegue delante de la forma de la etiqueta y, antes de continuar, elimine todas las apariencias existentes. Seleccione la forma obtenida en el paso anterior y también la copia de la etiqueta, que debe estar al frente y vaya al menú Objeto> Máscara de recorte> Hacer (imagen 1). Para obtener el aspecto brillante, cambie el modo de fusión a Pantalla y reduzca la Opacidad al 70% para la forma obtenida en el paso anterior (imagen 2). Si crees que los bordes son demasiado definidos, puedes aplicar un Desenfoque Gaussiano de 1 px (imagen 3).
Dibuje un triángulo pequeño y luego vaya al menú Archivo> Secuencias de comandos> Redondear cualquier esquina. Ejecuta el script y selecciona un radio de 5.
Coloque el triángulo en la parte inferior de la etiqueta y seleccione azul como color de relleno (imagen 1). Vaya al menú Efecto> Estilizar y aplique el efecto Resplandor interior (2), luego aplique el efecto Sombra paralela (3) usando la configuración que se muestra.
Lo último que hay que hacer es el texto. Tome la Herramienta de Tipo (T) y escriba un texto y use una fuente llamada Devinne Swash que puede encontrar aquí. Seleccione Expandir en el menú Objeto para convertir el texto en formas y mantener el relleno negro. Vaya al menú Efecto> Estilizar y aplique el efecto Sombra paralela usando la configuración que se muestra. Cambia el modo de fusión a Overlay.
En este punto, la etiqueta está lista y continuaremos con el estado de rollover.
Haga una copia de la etiqueta y solo cambiaremos algunas cosas. Algunas de las formas están ocultas en las siguientes imágenes y las hablaremos en el momento adecuado. Centrémonos en la forma de la etiqueta y primero cambiemos el relleno degradado. También cambia el tono de azul usado para el primer golpe..
Ahora modificaremos la sombra. Haga doble clic en Desenfoque gaussiano en el Panel de apariencia para abrir la ventana Desenfoque gaussiano y reducir el radio de 6 a 4 px. A continuación, haga doble clic en el efecto Inflar aplicado para abrir la ventana Opciones de deformación y cambie el valor de Curva de 5 a menos 5%..
Seleccione el relleno de degradado en el Panel de apariencia y presione el icono Duplicar elemento seleccionado en la parte inferior. Como resultado obtendrá otro relleno arriba. Mantenga el mismo gradiente y vaya al menú Efecto> Ruta> Ruta de compensación y aplique una compensación de menos 6,5 px. A continuación, vaya al menú Efecto> Estilizar y aplique el efecto Resplandor interno usando la configuración que se muestra.
Vamos a crear un nuevo pincel artístico similar al que se guardó en el paso 5. Use la herramienta Elipse (L) para dibujar una elipse plana de 100 x 3 px y luego transforme los puntos izquierdo y derecho de los puntos lisos a los de la esquina usando el Convertir puntos de anclaje seleccionados a Opción de esquina. Vaya al menú Objeto> Ruta> Ruta de compensación y aplique una compensación de menos 1.2 px para obtener la forma más pequeña en el centro. Reduzca la opacidad para la elipse más grande al 0%, luego selecciónelos y vaya al menú Objeto> Fusión> Opciones de fusión. Elija 25 pasos especificados y luego regrese al menú Objeto> Fusionar> Crear. Arrastre el grupo de mezcla resultante al panel Pinceles y seleccione Nuevo pincel de arte.
Ahora, traza los tres caminos con el nuevo pincel de arte. Establezca el peso en 0.25 pt y el modo de fusión en Soft Light para los tres.
En este caso, queremos que la forma brillante sea menos visible, por lo tanto, reduzca la Opacidad del 70 al 25%..
Cambie el tono de azul que se usa para rellenar el triángulo y luego haga doble clic en el efecto Sombra que se aplica en el Panel de apariencia. En la ventana reduce la opacidad del 80 al 50%. El efecto Resplandor interior sigue siendo el mismo..
Para el texto, reemplace el relleno negro con azul, luego cambie el modo de fusión de Superposición a Normal y reduzca la Opacidad al 80%.
Aquí está el estado final de rollover de la etiqueta:
Ahora que todo está listo, continuaremos guardándolos para la web. Tome la herramienta Rectángulo (M) y dibuje un rectángulo alrededor de la etiqueta, luego vaya al menú Objeto> Área de recorte> Crear. Obtendrá el mismo resultado si usa la herramienta Área de recorte o la Herramienta Artboard (Mayús + O).
Vaya al menú 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-Up y 4-Up. Creo que lo mejor es la vista 4-Up porque puedes jugar con diferentes configuraciones, probar cuatro versiones de la etiqueta y luego elegir la mejor según el tamaño del archivo y el tiempo de descarga. En la parte superior izquierda están las herramientas, desde la esquina superior derecha puede seleccionar otra velocidad de descarga y en la esquina inferior derecha tiene la opción de previsualizar la imagen en el navegador predeterminado.
Ahora vamos a cambiar algunas configuraciones y comparar. De los siete formatos de archivo disponibles para guardar, probaremos solo JPEG, PNG-8 y PNG-24. El formato GIF es más adecuado para imágenes con áreas planas de color, en lugar de aquellas con rellenos degradados y detalles como estas etiquetas. Lo he intentado y no se veian muy bien..
El primer formato es JPEG. Aunque cuanto menor sea la calidad, más pequeño será el tamaño del archivo, no es necesario que disminuya la calidad demasiado. Para una calidad del 60%, el tamaño del archivo es de 7.77K, pero la etiqueta comienza a no verse tan bien y para el máximo (calidad del 100%) el tamaño del archivo es de 26.11K (!!). 70% está bien Si marca la opción Optimizada, la reducción del tamaño del archivo es muy leve, por lo tanto, la omitiremos esta vez. Marque Progresivo si desea que la imagen se cargue en pases.
Si sabe exactamente cuál será el color de fondo, puede elegir un color mate. El fondo se rellenará con el color seleccionado, en este caso de color rosa y la imagen actuará como un GIF transparente, pero aún utilizando los millones de colores que los JPEG pueden mostrar en nuestra ventaja. El tamaño del archivo será un poco más grande aunque.
Sólo por curiosidad, probé el formato PNG-8 y puede ver a continuación las diferentes configuraciones. Si elige Selectivo, Illustrator elige los colores que el ojo puede ver, pero incluye más tonos de colores seguros. Las alternativas son: Perceptual (colores que los ojos ven mejor) y Adaptable (colores que están realmente en la imagen). Vamos a hablar de Dither. Esto distribuye píxeles de diferentes colores uno al lado del otro para hacer que el ojo crea que ve más colores de los que realmente hay en la imagen. La desventaja es que aumenta el tamaño del archivo como se puede ver a continuación, 0% dither vs. 100% dither. Entrelazado es el equivalente de Progresivo del formato JPEG. Sin embargo, ninguna de las imágenes se ve bien, de modo que pasaremos al siguiente formato..
Obtendrá una mejor imagen si selecciona un color mate, en caso de que sepa exactamente cuál será el color de fondo de la página web. También seleccione Sin transparencia..
Con mucho, el mejor resultado se obtendrá con el formato PNG-24, aunque el tamaño del archivo es bastante grande. Debido a la sombra alrededor de la etiqueta, debe marcar la opción Transparencia.
En este punto, puede obtener una vista previa de la etiqueta en un navegador presionando el ícono que se muestra en el paso 24. También obtendrá un código HTML que puede agregar a su página web.
Si ha decidido un formato en particular, presione el botón Guardar, seleccione Solo imágenes y una carpeta de destino, luego presione Guardar nuevamente.
Repita este proceso para el estado de rollover de la etiqueta. En la imagen de abajo puedes ver las tres versiones que he elegido..
Esta es la carpeta con las imágenes guardadas y en este punto puede usarlas como desee..
Como beneficio adicional aquí hay varias variaciones de color de la etiqueta. Todo lo que tiene que hacer es cambiar algunas cosas como: el relleno degradado para la forma de la etiqueta, el color del trazo discontinuo, el degradado para la forma brillante y el color de relleno para el triángulo. Eso es!
Esta es la etiqueta verde:
Aquí está la etiqueta púrpura:
La versión naranja ...
rojo…
y amarillo:
Accentsconagua