Intestazione del sito Web in Photoshop

• Potrebbe 5, 2024

In questo tutorial, creeremo un'intestazione del sito Web in Photoshop^R che animeremo in Flash^R Catalizzatore^TM. L'animazione inizia con uno sfondo vuoto e gli elementi di design si inseriscono per "costruire" l'intestazione davanti ai nostri occhi. L'animazione verrà programmata per iniziare "al caricamento" e durerà solo pochi secondi. L'intestazione di questo sito Web sarà destinata a un'azienda di cartoline d'auguri fittizia.

Il nostro primo passo è costruire l'intestazione in Photoshop. Metteremo ogni elemento di design sul suo livello in preparazione per lavorare con loro in Flash Catalyst. Come puoi vedere, avremo 6 elementi di design.

1. Contesto
2. Barra inferiore attraverso la larghezza dell'intestazione
3. Nome dell'azienda
4. Biglietto d'auguri
5. Zucca Notecard
6. Cartolina di Natale

1. Iniziamo un nuovo progetto in Photoshop. Imposta la larghezza su 1000 pixel, l'altezza su 225 pixel e lo sfondo su trasparente. Questa dimensione si adatta perfettamente alla parte superiore della nostra pagina Web.
   
   
2. L'unico elemento che sarà visibile all'inizio dell'animazione è lo sfondo bianco. Riempi il primo strato dell'immagine con il colore di sfondo che preferisci. Nel pannello Livelli, rinomina questo livello "Sfondo".
   
   
3. Per creare il bordo ombreggiato, ho usato lo stile di livello ombra interno. Fare doppio clic sul livello Sfondo e selezionare la casella accanto a Ombra interna. Impostare Distanza e strozzatura su 0 e Dimensioni su 49.
   
   
4. Successivamente aggiungeremo il bordo sottile attorno all'immagine con lo stile del tratto. Ho impostato il Colore su un marrone (# 6e674f), la Dimensione su 2 e la Posizione su Interno.
   
   Successivamente aggiungeremo le carte. Ho ridotto le dimensioni dei miei biglietti di auguri a 230 x 175 pixel. Ciò li manterrà in proporzione alla dimensione dell'intestazione.
   
   
5. Copia / incolla la scheda Pumpkin nella nostra intestazione. Assegna un nome al nuovo livello "Zucca". Fai clic su Modifica - Trasformazione libera per ruotare leggermente la scheda verso destra. Fai clic sul livello Zucca e applica lo Stile livello ombra esterna, mantenendo le impostazioni predefinite.
   
   
6. Ripeti l'ultimo passaggio sia per il compleanno che per la cartolina di Natale.
   
   Successivamente, aggiungeremo la barra nella parte inferiore dell'intestazione. Metteremo le nostre carte dietro questa barra per emulare le carte su uno scaffale.
   
   
7. Aggiungi un nuovo livello al pannello Livelli e chiamalo "Barra".
   
   
8. Con lo strumento Selezione rettangolare, seleziona l'area inferiore dell'intestazione, appena all'interno del bordo marrone. Scegli un colore per la barra e riempi la selezione con questo colore.
   
   
9. Fai doppio clic sul livello e aggiungi lo stile Tratto tratto come hai fatto al livello Sfondo.
   
   
10. Fai clic sullo strumento Tipo orizzontale e scegli un carattere per il nome della tua attività. Ho usato lo stesso colore marrone del colore del bordo. Digita il nome commerciale sul lato sinistro dell'intestazione.
    
    
11. Questo passaggio è facoltativo. Rasterizzeremo il testo. Fai clic con il pulsante destro del mouse sul livello testo e scegli Rasterizza tipo dal menu.
    
    
12. Salva il tuo progetto in formato .psd di Photoshop.
    
    

Copyright 2018 Adobe Systems Incorporated. Tutti i diritti riservati. Le schermate dei prodotti Adobe sono state ristampate con l'autorizzazione di Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Catalyst Flash e Flash Paper è / sono [a] marchi registrati o marchi commerciali di Adobe Systems Incorporated negli Stati Uniti e / o in altri paesi.

Istruzioni Video: HTML5 #3. Elementi di intestazione (Potrebbe 2024).