Encabezado de sitio web en Photoshop

• Abril 28, 2024

En este tutorial, crearemos un encabezado de sitio web en Photoshop^R que animaremos en Flash^R Catalizador^TM. La animación comienza con un fondo vacío y los elementos de diseño se deslizan para "construir" el encabezado ante nuestros ojos. La animación se programará para comenzar "en carga" y durará solo unos segundos. El encabezado de este sitio web será para un negocio de tarjetas de felicitación falso.

Nuestro primer paso es construir el encabezado en Photoshop. Pondremos cada elemento de diseño en su propia capa en preparación para trabajar con ellos en Flash Catalyst. Como puede ver, tendremos 6 elementos de diseño.

1. Antecedentes
2. Barra inferior a lo ancho del encabezado
3. Nombre de la empresa
4. Tarjeta de cumpleaños
5. Notecard de calabaza
6. Tarjeta de navidad

1. Comencemos un nuevo proyecto en Photoshop. Establezca el Ancho en 1000 píxeles, la Altura en 225 píxeles y el Fondo en transparente. Este tamaño encajará muy bien en la parte superior de nuestra página web.
   
   
2. El único elemento que será visible al comienzo de la animación es el fondo blanco. Rellene la primera capa de la imagen con el color de fondo que elija. En el panel Capas, cambie el nombre de esta capa a "Fondo".
   
   
3. Para crear el borde sombreado, utilicé el estilo de capa de sombra interior. Haga doble clic en la capa Fondo y marque la casilla junto a Sombra interior. Establezca la Distancia y el Estrangulador en 0 y el Tamaño en 49.
   
   
4. A continuación, agregaremos el borde delgado alrededor de la imagen con el Estilo de capa de trazo. Establecí el Color en marrón (# 6e674f), el Tamaño en 2 y la Posición en el interior.
   
   A continuación agregaremos las tarjetas. Reduje el tamaño de mis tarjetas de felicitación a 230 x 175 píxeles. Esto los mantendrá en proporción al tamaño del encabezado.
   
   
5. Copiemos / peguemos la tarjeta de calabaza en nuestro encabezado. Nombra la nueva capa "Calabaza". Haga clic en Editar - Transformación libre para girar la tarjeta ligeramente hacia la derecha. Haga clic en la capa de calabaza y aplique el estilo de capa de sombra paralela, manteniendo la configuración predeterminada.
   
   
6. Repita el último paso para la tarjeta de cumpleaños y Navidad.
   
   A continuación, agregaremos la barra en la parte inferior del encabezado. Colocaremos nuestras tarjetas detrás de esta barra para emular tarjetas en un estante.
   
   
7. Agregue una nueva capa al panel Capas y asígnele el nombre "Barra".
   
   
8. Con la herramienta Marco rectangular, seleccione el área inferior del encabezado, justo dentro del borde marrón. Elija un color para su barra y complete la selección con este color.
   
   
9. Haga doble clic en la capa y agregue el estilo de capa de trazo como lo hizo a la capa de fondo.
   
   
10. Haga clic en la herramienta Tipo horizontal y elija una fuente para el nombre de su empresa. He usado el mismo color marrón que el color del borde. Escriba el nombre comercial en el lado izquierdo del encabezado.
    
    
11. Este paso es opcional. Rasterizaremos el texto. Haga clic derecho en la capa de texto y elija Rasterizar tipo en el menú.
    
    
12. Guarde su proyecto en formato Photoshop .psd.
    
    

Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.

Instrucciones De Vídeo: Dreamweaver CS6 Encabezado de la web (Abril 2024).