Share
En este rápido consejo crearemos un conjunto de botones web con la ayuda de Efectos 3D en Adobe Illustrator. ¿Por qué? Porque de esta manera podemos olvidarnos de usar diferentes pinceles y efectos para agregar luces y sombras y podemos lograr esto en un solo paso, aprovechando la configuración de luz y las formas de bisel disponibles. Vamos a empezar!
Comencemos con la forma básica de este botón web, así que tome la herramienta Rectángulo redondeado y haga clic en cualquier lugar de su mesa de trabajo para abrir la ventana Rectángulo redondeado. Allí, ingrese los números que se muestran y obtendrá la forma que necesitamos. Seleccione gris claro como el color de relleno.
Una vez seleccionado este rectángulo, vaya a Menú de efectos> 3D> Extruir y biselar. En el lado derecho de la imagen de abajo puede ver la configuración predeterminada, solo se cambian las coordenadas de rotación. Me encantaría usar las formas de bisel más a menudo, pero a veces simplemente no generan los resultados que deseo. En este caso, si elige Tall-Round como Bevel form, el cambio es más que obvio. Obtendrá el borde redondeado y tampoco tendrá que preocuparse por los reflejos y las sombras más adelante.
Si aumenta el valor de Altura, el borde redondeado se vuelve más grueso..
En la ventana Opciones de extrusión y bisel, presione el botón Más opciones para abrir todo el cuadro de diálogo y centrarse en la parte inferior. Si desea resaltar la esquina superior izquierda, mueva la luz hacia la izquierda como se indica abajo o hacia la parte inferior si desea resaltar la esquina inferior derecha.
Finalmente, aquí están las configuraciones que he usado. Cambie las coordenadas, elija Tall-Round como la forma de bisel, aumente la altura de 4 pt a 6 pt y mueva la luz ligeramente hacia la izquierda.
Mientras el botón 3D está seleccionado, vaya al menú Objeto y elija Expandir apariencia. Ahora, use la Herramienta de selección directa (A) para seleccionar el rectángulo redondeado interior y rellénelo con el degradado lineal que se muestra. Fije el ángulo a 90 grados. Con este rectángulo seleccionado, haga doble clic en Contenido (porque esta forma está en un grupo) en el Panel de Apariencia y de esta manera verá los atributos existentes. A continuación, vaya al menú Efecto> Estilizar y aplique el efecto Resplandor interno usando la configuración que se muestra.
Una vez seleccionado el relleno existente en el Panel de apariencia, haga clic en el icono Duplicar elemento seleccionado en la parte inferior y obtendrá un segundo relleno. Cambie la pendiente a la que se muestra con blanco y negro y ajuste el ángulo a 50 grados. Cambie el modo de fusión a pantalla (el negro se vuelve transparente) y reduzca la opacidad al 75%.
Duplique este segundo relleno como lo hizo anteriormente y mantenga el mismo gradiente. Establezca el ángulo a 140 grados y aumente el valor de Opacidad del 75% al 90%..
Ahora, seleccione utilizando la Herramienta de selección directa (A) el rectángulo interior y, en el menú Objeto, elija Copiar y Pegar al frente. En el panel Capas, arrastre el nuevo rectángulo fuera del grupo de botones porque no lo queremos allí. Elimina los atributos existentes y dale un trazo negro. Mientras este rectángulo está seleccionado, vaya a Objeto> Ruta> Agregar puntos de anclaje dos veces para agregar algunos puntos adicionales. A continuación, tome la herramienta de tijeras (C) y haga clic en los dos puntos indicados para cortar la forma y luego elimine la ruta desde la parte inferior.
Ahora, necesitas un pincel de arte. He explicado cómo hacerlo en este rápido consejo en el Paso 9. La única diferencia es que, esta vez, comencé desde una elipse de 100 x 3 px en lugar de 200 x 5 px. Después de arrastrarlo al Panel de Pinceles para guardarlo como un nuevo pincel de arte, utilícelo para trazar la ruta desde la parte superior. Establecer el peso en 2 pt.
Copie y pegue nuevamente en el frente el rectángulo interior y arrástrelo fuera del grupo de botones, delante de él. Elimina las apariencias existentes y dale un relleno negro (1). Ahora, copie y pegue en frente el rectángulo negro y cambie el color de relleno para que pueda diferenciarlos. Mueva el rectángulo rojo un poco hacia arriba presionando la tecla de flecha arriba en su teclado dos veces (2). El Incremento del teclado se debe establecer en 1 px (menú Editar> Preferencias> General).
Seleccione ambas formas y elija Restar del área de forma> Expandir desde el Panel de Pathfinder. La forma delgada resultante debe tener un relleno negro (3). Cambie el modo de fusión para multiplicar y reducir la opacidad al 20% (4).
A continuación, con la herramienta Pluma (P) dibuje una ruta sobre el botón como se muestra en la imagen de abajo. Copie y pegue de nuevo en el frente el rectángulo interior, elimine las apariencias existentes y simplemente dale un trazo negro. Seleccione este rectángulo y también la ruta azul y haga clic en Dividir en el Panel de Pathfinder. En el menú Objeto, elija Desagrupar y luego elimine la forma de la parte inferior..
Rellene la forma obtenida con un degradado lineal de blanco a negro y ajuste el ángulo a menos 90 grados. Cambie el modo de fusión a la pantalla (el negro se vuelve transparente) y reduzca la opacidad al 30%.
Continuemos con el texto. Con la herramienta de tipo (T) escriba "TRY NOW" usando una fuente llamada Anja Eliane, tamaño de 35 pt. Puedes encontrar la fuente aquí. En el menú Objeto, elija Expandir, luego complete el texto con el degradado lineal que se muestra. Ajuste el ángulo a menos 45 grados. A continuación, vaya al menú Efecto> Estilizar y aplique el efecto Sombra paralela usando las configuraciones de abajo.
Ahora, escriba "30 DÍA DE PRUEBA" usando Arial Bold, tamaño de 15 puntos y luego seleccione Expandir en el menú Objeto. Rellene el texto con blanco y luego vuelva a aplicar el efecto Sombra paralela con la configuración que se muestra.
Desde el Panel de símbolos (Menú de ventana> Símbolos), abra el Menú de bibliotecas de símbolos y en la categoría Flechas encuentre la Flecha 24. Arrástrelo a su área de trabajo y presione el icono Romper enlace a Símbolo en la parte inferior del panel. Desagrupe dos veces y luego vaya al menú Efecto> Estilizar> Esquinas redondeadas y aplique un radio de 3 px (1). Llene la flecha con el gradiente lineal que se muestra y luego deles un trazo de 0.5 pt usando el color indicado (2).
Mueva la flecha en el botón y luego vaya al menú Efecto> Estilizar y aplique el efecto Sombra paralela.
Con esta flecha seleccionada, elija Expandir apariencia en el menú Objeto para expandir los dos efectos aplicados, luego vaya al menú Objeto> Transformar> Escala, elija 80% y presione Copiar. Obtendrá la flecha más pequeña. Organícelas como en la imagen y asegúrese de que estén alineadas horizontalmente. Seleccione ambos y luego vaya al menú Objeto> Transformar> Reflejar. Elija Vertical y luego presione Copiar. Ordena las dos flechas nuevas en el lado derecho y el botón está listo.
Todo lo que falta es una sombra debajo del botón. Tome la herramienta Elipse (L) y dibuje una elipse plana en la parte inferior, luego seleccione negro como el color de relleno (1). Envíe esta elipse detrás del botón, luego vaya al menú Objeto> Ruta> Ruta de compensación y aplique una compensación de menos 7 px. Obtendrá una elipse más pequeña en el medio (2). Establezca la Opacidad para la elipse más grande en 0%, luego selecciónelos y vaya al menú Objeto> Fusión> Opciones de fusión. Allí, seleccione 25 pasos especificados y regrese al menú Objeto> Fusionar> Crear (3). Reduzca la opacidad para el grupo de mezcla resultante al 75% y si coloca el botón en un fondo en particular, también cambie el modo de fusión a Multiplicar.
Aquí está el botón web final:
A partir de este botón puedes obtener muchas otras variaciones de color. Todo lo que tienes que hacer es hacer una copia del botón y cambiar algunas cosas. En las imágenes de abajo puedes ver tres ejemplos: azul, verde y morado. Todas las formas que son visibles en la imagen de abajo no han sido modificadas. Mantenlos como son. Aquellos que están ocultos significan que serán modificados y tomaremos cada uno individualmente..
Empecemos por el rectángulo redondeado. Selecciónelo con la Herramienta de selección directa (A) y eche un vistazo al Panel de apariencia. Cambie el primer relleno de degradado con el nuevo degradado que se muestra y mantenga todos los demás atributos como están. Haz lo mismo con los botones web verde y morado..
Para el texto, simplemente cambie el punto medio del degradado de naranja claro a azul claro respectivamente verde claro y púrpura claro. "30 DIA DE PRUEBA" sigue siendo el mismo.
Ahora, seleccione la flecha y cambie el relleno de degradado, luego el color del trazo como se indica. Los efectos siguen siendo los mismos..
Finalmente, como lo hizo en el Paso 10, seleccione Expandir apariencia y luego escale la flecha para obtener la más pequeña. Refleja los dos y habrás terminado..
Esta es la imagen final y aquí están los cuatro botones web listos para usar. Si desea guardarlos para la web, consulte otro tutorial mío en el que explico cómo hacerlo en detalle..
Accentsconagua