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

Internet

Come creare ottimi template utilizzando il software Artisteer

Breve guida introduttiva viene proposta per cercare di capire come utilizzare il software Artisteer per la creazione di ottimi template e per far conoscere quali sono i maggiori cms in circolazione, quali: Wordpress, Joomla, Drupal, Blogger ecc. È giusto...
Software

Come realizzare la copertina di un CD

Ogniqualvolta realizziamo un CD che contenga la nostra playlist musicale preferita o un album fotografico, oppure un kit di programmi per il computer, pensiamo anche alla copertina. Un CD privo di questo elemento così importante risulterebbe incompleto,...
Software

Web Design: come disegnare un template con Illustrator

Prima di andare al sodo ovvero alla spiegazione di come disegnare un template o un semplice layout di un sito o di qualsiasi altra cosa con Illustrator bisogna spiegare prima cosa tratta questo programma. Infatti, Illustrator è un programma che realizza...
Linux

I migliori template professionali gratuiti per Wordpress

Chi ha un business online non può non conoscere WordPress, il CMS Open Source più popolare tra coloro che lo utilizzano giornalmente. Facilissimo e intuitivo, WordPress offre i migliori template professionali gratuiti in grado di soddisfare tutte le...
Linux

Come modificare un template su Wordpress

Gli amanti di grafica e di internet in generale, conosceranno sicuramente la piattaforma di editoria Wordpress. Si tratta di una piattaforma web che è possibile personalizzare a modo proprio, seguendo vari temi e template estetici di diverso tipo. La...
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...
Internet

Ccome duplicare un template in Joomla

All'interno di questa breve guida spiegherò ccome duplicare un template in Joomla. Prendi carta e penna e preparati ad annotare tutti gli appunti necessari alla duplicazione del template. Non preoccuparti, non è difficile. Riuscirai a farlo, anche se...
Internet

Come installare Google Analytics su Joomla

Un sito web è come una casa con tante stanze dove moltissime persone possono entrare ed uscire. Monitorare da dove vengono queste persone, quale stanza visitano e se se ne vanno subito oppure no è una questione fondamentale per ogni proprietario di...
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 »”.