Diseñar una pestaña Web 2.0 con Photoshop.
La siguiente guía trata de darle una idea de cómo diseñar un menú de pestañas elegante y agradable en Photoshop, estilo Web 2.0.
Paso 1
Cree un nuevo lienzo con fondo blanco [#ffffff] en cualquier tamaño que desee, preferiblemente rectangular; Son más adecuados para dibujar pestañas. Luego cambia a Pestaña de canales (Windows -> Canales), haga clic en Crear nuevo canal abajo a la derecha.
Paso 2
En la capa de canal seleccionada, dibuje una forma similar con la herramienta Lazo poligonal. Rellénelo con color blanco [#ffffff]; deseleccione la región poligonal (seleccione cualquier herramienta de Marquee y presione la pantalla uno); dar la forma Desenfoque gaussiano con radio 6.0px.
Paso 3
CTRL-L para abrir el Diálogo de nivel y presionar la flecha izquierda y derecha para encontrar la flecha central, como en la imagen de arriba. Esta voluntad “suave” Su forma borrosa se adapta y le da una bonita forma de esquina redondeada.
Etapa 4
En la pestaña de canales, Mantenga presionada la tecla CTRL, haga clic en Miniatura del canal de la capa Alpha 1. Ahora se seleccionará la nueva forma, cambie de nuevo a Pestaña de capas, Crear nueva capa y rellene el área seleccionada con negro [# 000000].
Paso 5
Elimine las esquinas redondeadas de la parte inferior izquierda del bot y la inferior derecha, muévalo hacia la izquierda y colóquelo como se muestra arriba. A continuación nos centraremos en la pestaña de color negro..
| Sostener CTRL, haga clic en la pestaña Miniatura de la capa para obtener toda la imagen de la pestaña resaltada. | |
| Con la imagen de la pestaña aún resaltada, seleccione Herramienta Marco Rectangular, sostener ALT y dibuja un rectangular de la región que queremos eliminar.. | |
| Solo deberías ver la parte superior seleccionada.. Seleccionar -> Modificar -> Contrato, Contrato por 2px y debes obtener algo como la imagen de la izquierda. | |
| Cree una nueva capa, rellene la región resaltada con blanco [#ffffff]. Haga clic derecho, elija Opciones de mezcla entonces Superposición Gradiant. Reemplace el tope de color blanco [#ffffff] con gris [# 616161]. Tu pestaña debe verse como la imagen de la izquierda.. |
Paso 6
Crear una nueva capa; Seleccionar Herramienta rectangular redondeada (Radio 8px), dibuje un rectangular y ponga esta capa detrás de la capa de la pestaña negra. Haga clic derecho y seleccione Opciones de mezcla e inserte las siguientes configuraciones.
Sombra paralela
- Opacidad: 31%
- Distancia: 0px
- Spread: 0%
- Tamaño: 2px
Bisel y relieve
- Profundidad: 100%
- Tamaño: 0px
- Suavizar: 0px
Superposición Gradiant
- Aquí están los ajustes de paradas de color.
- Color: #aaaaaa, Ubicación: 0%
- Color: #ffffff, Ubicación 100%
Paso 7
Ponga un poco de texto para ver el aspecto general de la web 2.0. Estoy usando la fuente Lucida Fax, tamaño de fuente 32pt y 25pt. Y tu cuenta está terminada! Siéntete libre de jugar con la combinación de colores de la pestaña.
Descargar tutorial
