Web Design: come disegnare un template con Photoshop

tramite: O2O
Difficoltà: media
17

Introduzione

Un template è sostanzialmente la "maschera" di un sito web, ovvero il modo in cui si presenta graficamente e in cui esso viene organizzato. Per creare un template personalizzato, si può ricorrere a Photoshop, un programma di grafica che ormai non ha bisogno di presentazione alcuna, in quanto piuttosto celebre anche nel web design. Benché l'uso del software possa apparire complesso, sono sufficienti esercizio e costanza nella pratica per riuscire nell'obiettivo di realizzare dei lavori incantevoli, inclusi i template. Per esercitarvi partendo da zero, continuate nella lettura di questa guida. Capirete come disegnare un layout in pochi passaggi, riversando nel progetto tutta la creatività di cui siete capaci.

27

Occorrente

  • Photoshop
37

Aprite un nuovo file

Aprite Photoshop cliccando due volte sul collegamento, oppure cercatelo tra i programmi del vostro computer, sia esso Windows o Mac. Attendete che il programma elabori tutti i dati e si apra per restituirvi la schermata principale. Quando ciò avviene, cliccate su "file" e poi andate su "nuovo". In questo modo avete avviato il comando per l'apertura di un nuovo file di lavoro, ma dovete sceglierne la tipologia ed impostare alcuni parametri. Per questo motivo si aprirà una finestra che vi consentirà di dare un nome al file, di impostare la tipologia di file su "web", di selezionare il background e le dimensioni di altezza e larghezza del foglio di lavoro. Impostate una larghezza di 5 cm e passate poi alla creazione del logo che dovrà apparire nella parte alta del template, ovvero l'header. L'header contiene il menù orizzontale ed il nome della pagina web, motivo per il quale deve colpire all'occhio. Per creare il logo da posizionare nell'header andate su "livelli" e create un nuovo gruppo. Per facilità chiamerete questo gruppo semplicemente "logo".

47

Create un menu

Come detto, in un template non può mancare il menu, che dà modo al visitatore della pagina web di spostarsi agevolmente tra i contenuti offerti. La creazione del menu dev'essere effettuata in modo del tutto personale, scegliendo a livello grafico il modo in cui questo deve presentarsi. Le singoli voci del menu potete crearle affidandovi al tasto "testo". Potete poi cliccare su "forma personalizzata" per dare carattere ad ogni voce e scegliere il modo in cui si deve presentare all'occhio dell'utente che visiterà il sito. Insomma, avete ampio margine di manovra e sta a voi essere creativi per ottenere un risultato apprezzabile.

Continua la lettura
57

Terminate e chiudete il template

Sulla destra dovete dare forma al contenuto della home page. Date risalto al titolo ed aggiungete un tipo di testo che potete impostare di default, come ad esempio il Lorem Ipsum. Dopodiché cliccate su "sposta" e, selezionando tutt'e due i livelli, date il comando "allinea a sinistra. Dopo aver regolato tutte le impostazioni a vostro piacimento, bisogna chiudere il template. Alla fine del contenitore date forma ad un rettangolo grigio, all'interno del quale scrivere alcune informazioni circa copyright ed altri dati che possono essere utili per l'utente. Ricordate sempre di allineare i testi e solo quando siete sicuri di aver terminato, passate alla chiusura. Salvate il documento in psd, cliccando su "file" e subito su "salva con nome".

67

Guarda il video

77

Consigli

Non dimenticare mai:
  • Esercitatevi varie volte prima di realizzare dei lavori importanti
Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Software

Come creare un template con Photoshop

Per creare più immagini da un singolo file, è necessario eseguire correttamente le indicazioni. Il file è denominato "Modello"; si tratta di un file di Photoshop costruito genericamente. Ogni strato può potenzialmente essere sostituito con dati esterni....
Software

Come ridimensionare una foto per il web con Photoshop

Ridimensionare foto per il web è un fattore essenziale per poter avere file di dimensioni ridotte e di buona qualità da visionare su internet. Con l'ausilio di Adobe Photoshop CC potremo decidere sia la grandezza che il formato da usare, scegliendo...
Software

Come disegnare manga con Photoshop

I manga sono i fumetti giapponesi ormai conosciuti e amati da tutti. Molti sono i ragazzi italiani che vorrebbero imparare questo stile particolare di disegno, per realizzare le loro storie in pieno stile manga. Imparare l'arte dei manga non è difficile,...
Software

Photoshop: disegnare con l'acqua

Adobe Photoshop rappresenta il programma informatico di grafica che permette a qualsiasi utente di realizzare meravigliosi effetti su ogni immagini. Nel seguente tutorial di informatica parleremo di una tecnica veramente funzionale che inizialmente potrebbe...
Software

Come realizzare un template per Wordpress con Dreamweaver

Il mondo del web è talmente intricato che è possibile accedervi soltanto conoscendo tutti gli strumenti più importanti. Attualmente si hanno diversi mezzi famosi per risultare visibili online, come Wordpress. Grazie a quest'ultimo possiamo creare uno...
Software

Come realizzare un template con Dreamweaver

Dreamweaver è un'estensione scaricabile per completare le funzioni di Adobe. In particolare in questa guida ci dobbiamo occupare dei template: ma di cosa si tratta?I template non sono altro che delle funzioni che permettono di modificare centralmente...
Software

Come creare un logo personalizzato con Photoshop

Al giorno d'oggi, per far conoscere il proprio lavoro è importante farsi una buona pubblicità. Soprattutto il web aiuta a rendersi visibili ad una notevole cerchia di persone. Uno dei primi elementi che permettono di distinguersi rispetto agli altri...
Software

Come realizzare una brochure con InDesign

In questa guida vi spiegherò in breve come realizzare una brochure con InDesign. InDesign è un programma di grafica 2D e 3D in parte, per lavorare con le immagini e le formattazioni. Infatti, se avete intenzione di realizzare un invito, un'impaginazione...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.