In questo tutorial di Photoshop web design, ci accingiamo a progettare un layout di sito web smashing, pulito e professionale in Photoshop. Il layout che stiamo facendo in questo tutorial può essere utilizzato come progettazione di siti web personali o aziendali. Questo design è abbastanza user-friendly, quindi dovrebbe essere ottimo per la reputazione del tuo sito.
Aggiorna: Questa è la prima parte di una serie in due parti che ti insegnerà come creare il layout in Photoshop e quindi come convertirlo in un web design HTML conforme agli standard (X).
La serie “Clean and Professional Web Design”
- Parte 1: Creare un Web Design pulito e professionale in Photoshop
- Parte 2: Codificare un Web Design pulito e professionale
Anteprima finale
Dai un’occhiata al layout che creeremo in questo tutorial. Puoi vedere l’anteprima finale dell’immagine qui sotto o fare clic qui per una versione full size. 
Preparare il documento Photoshop
1 Creare un nuovo documento in Photoshop (Ctrl/Cmd + N) utilizzando le impostazioni dell’immagine seguente.
Imposta le impostazioni unità e righelli
2 Assicurati di lavorare in unità pixel, che è l’unità fissa standard per il web design.
Imposta le seguenti impostazioni per i tuoi Righelli dalla finestra di dialogo Preferenze (Ctrl/Cmd + K); fai clic su Unità & Righelli e assicurati di avere tutto impostato come mostrato nella figura seguente. 
Aggiungere guide per designare l’area del contenuto
3 Attivare i righelli di Photoshop dalla Vista > Righelli.
Alterna la visibilità dei righelli premendo “Ctrl / Cmd + R”.
Apri anche il pannello Info dalla Finestra > Info (tasto di scelta rapida: F8).
Il pannello Info fornisce informazioni utili a seconda dello strumento selezionato.
Premendo “M”, scegli lo strumento Selezione rettangolare e crea una scatola larga 120 px dall’angolo sinistro della tela. È possibile regolare le dimensioni guardando nel pannello Informazioni mentre si effettua la selezione.
Ora fai clic sul righello sinistro e trascina una guida a destra della selezione del marquee come mostrato nell’immagine qui sotto. 
4 Spostare questa selezione sul bordo destro dell’area di disegno. Assegnare un’altra guida al lato sinistro della selezione.
La tua tela ora dovrebbe essere simile a questa: 
Creazione del logo
5 Ora creeremo il logo per il nostro sito web.
Il logo sarà molto semplice e avrà un effetto sfumato di colore. Crea un nuovo gruppo (Layer > New > Group) e chiamalo “logo”.
6 Seleziona lo strumento Tipo orizzontale (T) e digita “SMASHING” (o il nome del tuo sito web) in lettere maiuscole.
7 Quindi nel pannello Caratteri, impostare il carattere su Arial, lo stile su Bold e la dimensione su 42pt. Impostare anche l’opzione del metodo anti-aliasing su Sharp e utilizzare il colore # 101112.
È anche possibile impostare queste opzioni nella barra delle opzioni quando lo strumento Tipo è lo strumento attivo. 
8 Fare doppio clic per aprire la finestra di dialogo Stile livello. Selezionare Sovrapposizione gradiente, fare clic sull’Editor Gradiente e utilizzare le impostazioni come mostrato di seguito.
9 Metti il livello di tipo “SMASHING” alla distanza di 35px dall’alto e 0px dalla guida sinistra. È possibile farlo con precisione utilizzando lo strumento Sposta (V) e i tasti freccia. Duplica questo tipo di livello (Livello > Duplica livello).
Sposta il livello duplicato accanto alla parola “SMASHING” e modifica il testo in “Dzine”. Ripeti i passaggi 6, 7, 8 ma usa diversi colori sfumati (Stop colore sinistro: #b27625, stop colore destro: #e5ad27) per la parola “Dzine”.
10 Selezionare lo strumento Tipo orizzontale (T) e aggiungere una tag line sotto il logo con le seguenti impostazioni. 
11 Il logo finale dovrebbe apparire come l’immagine qui sotto.
Per attivare/disattivare le guide, andare su Visualizza > Mostra > Griglia o utilizzare la scorciatoia Ctrl/Cmd + ; 
Creazione della barra di navigazione
12 Crea un nuovo gruppo e chiamalo “navigazione”, dovrebbe essere sopra il gruppo “logo”. Trascinare una guida dal righello superiore, 150px sotto il bordo superiore della tela. Selezionare lo strumento Rettangolo (U) e disegnare una linea orizzontale di altezza 4px con un colore di #e3ab27, attraverso la tela.
13 Aggiungi collegamenti di navigazione a 12px-alto da questa linea orizzontale e 20px a destra della guida sinistra.
Selezionare lo strumento Rettangolo arrotondato (U) e disegnare una casella con la dimensione di 72px per 35px. Sposta questo livello sotto i collegamenti di testo e assegna un nome al livello “hover”.
Raddrizza gli angoli arrotondati inferiori con lo strumento Converti punto. Spostare i lati dei bordi irregolari sotto con un margine di 8px per rendere i bordi uguali agli altri bordi interni in basso.
Fare doppio clic sul livello” hover ” per aprire la finestra di dialogo Stile livello e aggiungere colori sfumati (Stop colore sinistro: #e5ad27, Stop colore destro: #b27625). Seleziona lo strumento Tipo orizzontale (T), seleziona il testo, “Home” e cambia colore in #ffffff (bianco). 
Creazione della sezione “chiamaci”
14 Successivamente creeremo la sezione “chiamaci” in alto a destra del nostro design (esattamente sul lato opposto del logo).
Scarica questa icona del telefono e posizionala vicino alla guida giusta. Assegna un nome a questo livello “icona del telefono”. Selezionare lo strumento Tipo orizzontale (T).
Aggiungi un numero di telefono a sinistra dell’icona del telefono usando il carattere Arial, con la dimensione impostata su 20pt e il colore #292929.
Aggiungi del testo correlato sotto il numero di telefono usando il font Arial, impostato in Grassetto, con una dimensione di 11pt e un colore di #595959. 
Creazione dell’intestazione
15 Ora ci accingiamo a un creare la sezione di intestazione. Crea un nuovo gruppo e chiamalo “intestazione”.
16 Selezionare lo strumento Rettangolo (U) e creare una forma rettangolare con le dimensioni di 1200px per 440px.
Metti questo rettangolo a una distanza di 1px sotto la barra di navigazione e chiama questo livello “header bg”. Fare doppio clic sul livello” intestazione bg”, selezionare lo stile del livello Sovrapposizione gradiente e avere questi due colori nell’editor Gradiente (Stop colore sinistro: #2e2226, stop colore destro: #7a7556).
Vedere l’immagine qui sotto per la posizione del rettangolo e i dettagli dei colori. 
17 Creare un altro rettangolo dallo strumento Rettangolo (U) con le dimensioni di 960px per 360px.
Metti questo rettangolo alla distanza di 40px dalla parte superiore del livello “header bg” e 0px dalla guida sinistra. Assegna un nome a questo livello “contenitore intestazione”. Anteprima sotto quello che abbiamo fatto fino ad ora con il design.
Creazione della sezione “progetto in primo piano”
18 Successivamente creeremo la sezione progetto in primo piano. Crea un nuovo gruppo all’interno del gruppo di intestazione e chiamalo “fp”. Seleziona lo strumento Rettangolo (U) e crea un rettangolo con le dimensioni di 630px per 340px alla distanza di 10px dall’alto e dalla sinistra del contenitore dell’intestazione.
Dai a questo livello il colore # 000000 e chiamalo “contenitore fp”. 
19 Apri un’immagine in Photoshop da posizionare qui come progetto in primo piano. Vai a Selezionare > Tutti (Ctrl/Cmd + A), quindi Modifica > Copia (Ctrl/Cmd + C).
Torna al nostro web design.
Crea un nuovo livello sopra il livello “contenitore fp” e vai a Modifica > Incolla (Ctrl/Cmd + V) per incollare l’immagine del progetto in primo piano. Rinominare questo livello in “immagine fp”. Fare clic con il pulsante destro del mouse sul livello “immagine fp” e selezionare Crea maschera di ritaglio.
Ora l’immagine è visibile solo all’interno del rettangolo (“contenitore fp”).
Effettuare le regolazioni in modo che l’immagine del progetto in primo piano è simile a quella mostrata di seguito. 
20 Vai a Modifica > Trasforma > Scala (Ctrl / Cmd + T). Dalla barra delle opzioni, fare clic nella casella Rotazione e digitare -4 e premere invio due volte per regolare l’angolo.
Rimanere sullo stesso livello (“immagine fp”) e selezionare Luminosità come modalità di fusione di questo livello. 
21 Successivamente creeremo la barra del titolo e della descrizione per l’immagine del progetto in primo piano. Seleziona lo strumento Rettangolo (U) e crea una forma rettangolare con le dimensioni di 630px per 90px usando il colore #161718.
Cambia l’opacità di questo livello al 90% e chiamalo “titolo bg”. Posiziona questo rettangolo come mostrato nell’immagine qui sotto. 
22 Crea un altro rettangolo con le dimensioni di 630px per 1px usando il colore # 9c9c9c e chiamalo “linea orizzontale del titolo”.
Posiziona questo rettangolo sul bordo superiore del contenuto del livello” titolo bg”.
23 Aggiungi un titolo e una descrizione all’interno del rettangolo creato nel passaggio 21, utilizzando le seguenti impostazioni per titolo e descrizione.
Per il titolo:
- font: Arial, colore: # ffffff, dimensione: 25pt e opzione del metodo anti-aliasing: Sharp
Per la descrizione:
- font: Arial, colore: #a4a4a4, dimensione: 12pt e opzione del metodo anti-aliasing: Nessuna
Creazione della sezione “citazione rapida”
24 Creare un altro gruppo all’interno del gruppo di intestazione e denominarlo “citazione rapida”. Selezionare lo strumento Rettangolo (U) e creare un rettangolo con le dimensioni di 300px per 340px. Posiziona questo rettangolo alla distanza di 10px a destra della sezione del progetto in primo piano e chiamalo “contenitore qq”.
25 Copieremo uno stile di livello da un altro livello che abbiamo creato in un passaggio precedente.
Vai all’interno del gruppo “navigazione”, fai clic con il pulsante destro del mouse sul livello “hover”, seleziona Copia stile livello, torna al livello “contenitore qq”, fai clic con il pulsante destro del mouse e seleziona Incolla stile livello. Ora abbiamo lo stesso stile di livello del livello “hover” per il nostro “contenitore qq”. 
26 Selezionare lo strumento Tipo orizzontale (T).
Scrivi “Citazione rapida” all’interno di” contenitore qq ” alla distanza di 20px dai bordi superiore e sinistro della scatola contenente. Imposta la famiglia di font su Trabucco MS (o un font sicuro per il Web di tua preferenza) con il colore del bianco (#ffffff) e l’opzione del metodo anti-aliasing impostata su Sharp. Useremo lo strumento Rettangolo arrotondato (U) per creare tre campi modulo.
Selezionare lo strumento Rettangolo arrotondato (U) e impostare il raggio su 3px. Quindi crea due rettangoli arrotondati con le dimensioni 260px per 35px usando il colore bianco (#ffffff). Quindi denominare i livelli di forma rispettivamente come” field1 “e” field2″.
Crea il terzo rettangolo arrotondato con le dimensioni di 260px per 75px usando un colore bianco (#ffffff) e chiamalo “field3”. Selezionare lo strumento Tipo orizzontale (T) e creare etichette per ogni campo modulo. 
27 Selezionare lo strumento Rettangolo arrotondato (U) e creare una casella di 80px per 35px e denominarla “invia btn”.
28 Fare doppio clic sul livello per aprire la finestra di dialogo Stili di livello e selezionare la casella di controllo Sovrapposizione gradiente da sinistra.
Fare clic sull’editor del gradiente e modificare i colori del gradiente come mostrato di seguito. 
29 Selezionare lo strumento Tipo orizzontale (T) e digitare “Invia” utilizzando il carattere Arial, stile grassetto e dimensione a 13pt. Selezionare entrambi i livelli nel pannello Livelli (“invia btn “e”Invia testo”).
30 Scegliere lo strumento Sposta (V) dal pannello Strumenti e fare clic su Allinea centri verticali e Allinea centri orizzontali dalla barra delle opzioni.
(In alternativa, puoi ottenere lo stesso risultato andando su Layer > Allinea > Centri verticali e Layer > Allinea > Centri orizzontali). 
Creazione dell’area contenuto principale
31 Creare un nuovo gruppo e denominarlo “contenuto”. Selezionare lo strumento Rettangolo (U).
Crea un rettangolo di 300px per 175px e chiamalo “c01”. Posiziona questo livello 30px sotto l’intestazione e 0px dalla guida sinistra. Fare doppio clic sul livello e utilizzare le impostazioni dall’immagine seguente.
32 Stiamo per aggiungere contenuti a questa casella ora. Selezionare lo strumento Tipo orizzontale (T) e aggiungere il testo, “Informazioni su SmashingDzine”. Fai una selezione della parola “Informazioni” usando lo strumento Tipo orizzontale (T), quindi cambia il suo colore in #b47825.
Quindi fai una selezione della parola “Smashing”, quindi cambia il colore in #2f2f2f. Aggiungi una piccola descrizione e un testo di collegamento sotto il titolo. Le seguenti opzioni sono state utilizzate per il titolo, la descrizione e il testo del collegamento.
(È possibile regolare queste opzioni in base alle esigenze). 
Per il Titolo:
- Font: Trabucco MS, stile: Normale, dimensione: 24pt, metodo anti-aliasing: Sharp
Per la descrizione:
- Carattere: Arial, stile: Normale, dimensione: 12pt, metodo anti-aliasing: Nessuno, colore: #767676
Per il testo del collegamento:
- Carattere: Arial, stile: Grassetto, dimensione: 13pt, metodo anti-aliasing: Nessuno, colore: #252525, Sottolineato
33 Aggiungeremo una casella quadrata accanto alla descrizione ora. Seleziona lo strumento Rettangolo (U) e colora # ffffff, tieni premuto il tasto Maiusc per mantenere le proporzioni e crea un quadrato con le dimensioni 88px per 88px. Sposta questo quadrato a una distanza di 10px dalla sinistra del rettangolo (“c01”).
Denomina questo livello “bordo”. Fare doppio clic sul livello per aprire la finestra di dialogo Stile livello e aggiungere uno stile livello Tratto con le seguenti impostazioni: 
34 Crea un’altra casella con le dimensioni di 82px per 82px e posizionala al centro del livello “bordo”. Assegna un nome a questo livello “box” e cambia il colore di questo quadrato in # d5d5d5.
Seleziona tutti i livelli in questo gruppo (gruppo”contenuto”), vai al Livello > Nuovo > Gruppo dai livelli (Ctrl/Cmd + G) e rinomina questo nuovo gruppo “informazioni”. 
Nota: La scatola quadrata grigia interna è un portaoggetti per un’immagine e può essere sostituita con qualsiasi immagine di tua scelta.
35 Duplica il gruppo “informazioni” (fai clic destro sul gruppo e seleziona Duplica gruppo) e chiamalo “servizi”. Fare clic con il pulsante destro del mouse sul gruppo “servizi “e selezionare nuovamente Duplicate Group e denominarlo”portfolio”.
Ora abbiamo tre gruppi (“informazioni”,” servizi “e”portafoglio”). Sposta l’ultimo gruppo (“portfolio”) sulla guida destra come mostrato di seguito. 
36 Selezionare tutti e tre i gruppi nel pannello Livelli, quindi passare a Livello > Distribuire > Centri orizzontali per spaziarli in modo uguale.
Clicca qui per vedere l’immagine a grandezza naturale dell’immagine seguente. 
37 Modificare i titoli del gruppo ” servizi “(al centro) e del gruppo” portfolio ” (a destra) come illustrato di seguito. (È possibile modificare questi titoli in base alle proprie esigenze.) 
Creazione del piè di pagina
38 Crea un nuovo gruppo e chiamalo “piè di pagina”.
Seleziona lo strumento Rettangolo (U) e crea un rettangolo con le dimensioni di 1200px per 100px nella parte inferiore del nostro layout di progettazione. Assegna un nome a questo livello “piè di pagina bg”. Usa lo stesso stile di sovrapposizione gradiente del livello ” header bg “facendo clic con il pulsante destro del mouse sul livello” header bg ” e scegliendo Copia stile livello.
Torna al gruppo piè di pagina, fai clic con il pulsante destro del mouse sul livello “piè di pagina bg” e seleziona Incolla stile livello. 
39seleziona lo strumento Tipo orizzontale (T) e aggiungi testo copyright e collegamenti piè di pagina a sinistra usando il carattere Arial, dimensione di 12pt e un colore grigio (#dddddd). 
40 Stiamo per aggiungere la sezione di sottoscrizione e-mail sulla destra.
Crea un nuovo gruppo all’interno del gruppo “piè di pagina” e chiamalo “iscriviti”. Selezionare lo strumento Rettangolo arrotondato (U) e creare un rettangolo di 85px per 35px. Assegna un nome a questo livello “subscribe btn”.
41 Ripetere il passaggio 26 per aggiungere i campi e le etichette del modulo.
42 Selezionare lo strumento Tipo orizzontale (T) e digitare “Subscribe” utilizzando il carattere Arial, stile impostato su Grassetto e dimensione a 13pt.
Seleziona entrambi i livelli (“subscribe btn “e”Subscribe text”).
43 Ripetere il passaggio 28 per creare il pulsante Iscriviti.
44 Selezionare lo strumento Rettangolo arrotondato (U) e impostare il raggio su 3px. Crea un rettangolo arrotondato con le dimensioni 210px per 35px usando un colore bianco (#ffffff) e denomina questo livello di forma come “campo email”. Aggiungi una riga di testo sopra “campo email”.
Risultato finale
OK, questo è tutto e abbiamo finito. Ecco il risultato finale.
Clicca sull’immagine qui sotto per vedere il layout a grandezza naturale. Grazie per aver seguito insieme al mio tutorial. Spero che tutti voi goduto e imparato qualcosa di nuovo da questo tutorial.
Gentilmente lascia i tuoi commenti qui sotto e condividi i tuoi pensieri e opinioni, mi piacerebbe sentirli. È inoltre possibile condividere questo tutorial di progettazione ai tuoi amici se si pensa che potrebbe essere utile a loro!
Scarica il file sorgente
Puoi scaricare il file Photoshop (PSD) di questo tutorial dal link sottostante come archivio ZIP.
- clean-professional-weblayout (ZIP, 2,4 MB)
Sommario
Se si decide di utilizzare questo disegno, assicurarsi di ottimizzare le immagini per ridurre il tempo di caricamento. Questo decidere dovrebbe essere grande per piccoli siti come uno per un campo da golf perché è semplice, facile da usare e facile da usare.
Contenuto correlato
- Come creare un blog pulito con Photoshop
- Codifica di un Web pulito 2.0 Stile Web Design da Photoshop
- Creare un layout Web chiazza di petrolio e minimalista in Photoshop
Circa l’autore
Waheed Akhtar è un web designer freelance da Dubai, Emirati Arabi Uniti. È il fondatore ed editore di Boost Inspiration, dove mette in mostra diverse risorse creative di arte digitale, Graphic Design, Illustrazione, Fotografia e tipografia per l’ispirazione. Puoi raggiungerlo tramite Twitter o Facebook.