Come creare un template con Photoshop

tramite: O2O
Difficoltà: media
17

Introduzione

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. Creare un template con Photoshop non è così difficile. Photoshop è un programma di grafica che puoi installare sia su Windows che su Mac. Contrariamente a quello che può sembrare, esso non è utilizzato soltanto per i foto-ritocchi delle foto, ma anche per la creazione grafica del layout di un sito web e dei loghi. Ecco come creare un template con Photoshop.

27

Occorrente

  • Font-family: Century Gothic, Caviar Dreams
37

Prima fase

Per creare un template grafico bisogna per prima cosa aprire Photoshop tramite l'icona che trovi sul tuo desktop o tramite la voce "Programmi" raggiungibile dal pulsante "Start". Crea un nuovo documento, clicca su "File" e successivamente su "Nuovo", oppure utilizza il comando veloce CTRL+N con Windows. Si aprirà una finestrella in cui potrai scrivere il nome, scegliere la tipologia del documento che vuoi creare (in questo caso "Web"), la dimensione (larghezza e altezza), la risoluzione ed il background. Nella finestra di dialogo "Nuovo", nomina il file, della larghezza di 5 cm. La prima cosa che vedi in un sito web è l'header, ovvero la parte iniziale di una pagina in cui generalmente trovi il logo ed il menù orizzontale. Vai nel box "Livelli" e crea un nuovo gruppo denominandolo "logo".

47

Menù

Per rendere un sito web navigabile devi dare all'utente l'opportunità di cambiare pagina tramite un menù. In questo caso ho creato un menù orizzontale includendo le pagine più importanti del sito. Sotto le voci del menù (create con il pulsante "Testo"), ho disegnato un rettangolo azzurrino (#f4f9fc) e ad ogni voce ho affiancato una freccetta (disegnata con il tasto "forma personalizzata").

Continua la lettura
57

Secondo passo

A destra crea il contenuto principale della home page. Metti in evidenza il titolo e aggiungi un testo di default come Lorem Ipsum. Clicca sul pulsante "Sposta", seleziona entrambi i livelli e premi il pulsante "Allinea a sinistra". Il testo deve essere ben leggibile, quindi puoi utilizzare un font-size di 14/15 pt. La grandezza del font varia in base al font family.

67

Il footer

L'elemento con cui viene chiuso un template è il footer. Crea un rettangolo grigio alla fine del contenitore; scrivi al suo interno il copyright ed altre informazioni utili all'utente. Non dimenticare mai di allineare i testi, aiutati anche con le linee guida. In fine salva il documento nel formato psd. Scegli "File" e "Salva con nome". Nella finestra di dialogo "Salva", il nome del file dovrebbe essere indicato con il nome dato in precedenza. Imposta dal menù formato per Photoshop e fai clic sul pulsante "OK" per salvare il nuovo file PSD sul desktop.

77

Consigli

Non dimenticare mai:
  • Installa Photoshop in inglese, ti aiuterà a familiarizzare con dei termini che ritroverai durante lo sviluppo in CSS
  • Fai in modo che il contenuto, escludendo lo sfondo, rientri sempre in un width di 1024px

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.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

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...
Internet

Come creare un template per Joomla

"Joomla!" è uno dei software di Content Management (CMS) maggiormente famosi ed impiegati, perché è estremamente utile per consentire di realizzare, gestire e personalizzare dei complessi siti web, senza toccare nemmeno una riga di codice ("HTML",...
Internet

Come creare un font con la tua calligrafia

Creare delle divertenti immagini modificate o dei semplici biglietti d'auguri di buon compleanno è un'operazione semplice e divertente. La creazione del proprio carattere digitale, scritto a mano, sarebbe un'idea originalissima per fare regali personalizzati:...
Software

Come creare un logo personalizzato con Photoshop

Al giorno d'oggi, nel mondo in cui viviamo, è importante sapersi distinguere, e un ottimo modo per farlo è senza dubbio un logo. Infatti, che tu abbia un'azienda, un locale, o, nel mondo dei social, una pagina su Facebook o un canale Youtube, un logo...
Windows

Come salvare un file da Illustrator

Utilizzare il computer per realizzare i propri progetti e lavori ormai è diventata una consuetudine o quasi un obbligo per riuscire a velocizzare i compiti e fornire comunque un prodotto fruibile da tutti e facilmente interfacciabile con molti dispositivi....
Software

I migliori programmi per creare inviti

Una volta stampare degli inviti era una cosa lunga e costosa, dovevano essere ordinati, stampati, ritirati... Oggi, per fortuna, biglietti, depliant, pieghevoli ed inviti possono essere fatti in casa utilizzando un PC, una stampante (sempre che non si...
Software

Creare delle scritte personalizzate con Photoshop

"Adobe Photoshop" è un software che, ultimamente, impiegano anche quelli che non lavorano come graphic designer: infatti, tale programma informatico offre numerose opportunità, grazie alle sue funzioni. Usando il celebre editor di casa "Adobe", si possono...
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...
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 »”.