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

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

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

Come creare l'effetto riflesso con Photoshop

Con il programma di ritocco fotografico Photoshop è possibile creare dei bellissimi effetti speciali sulle immagini, in maniera tale da impreziosirle e renderle uniche. Uno di questi effetti è quello riflesso, che consiste nell'aggiungere all'immagine...
Software

Photoshop: come creare un effetto statua

Alla base di ogni lavoro c'è sempre la fantasia, la creatività ed il divertimento. Nel Photoshop, per creare un effetto statua occorrono soprattutto idee. Poi serve la capacità di immaginare la propria opera con la mente, prima che con gli occhi. Nell'usare...
Software

Come ritoccare i volti con Photoshop

Quando si lavora nel settore della grafica, non è possibile evitare l'impiego del software migliore per il fotoritocco Adobe Photoshop. Questo programma informatico davvero potente contiene numerose opzioni e strumenti in grado di modificare le immagini,...
Software

Come creare animazioni con Photoshop

Non in molti lo sanno, ma con Photoshop è possibile anche animare i vostri disegni trasformandoli in un filmato. Per avere disponibili queste funzioni, è consigliabile essere in possesso della versione più recente di Adobe Photoshop o comunque una...
Software

Nozioni base di Photoshop

Adobe Photoshop è un praticissimo software di grafica digitale e photo editing, prodotto dalla società Adobe Systems Incorporated. Per coloro che si occupano di graphic design, è lo strumento fondamentale per la modifica di immagini e alla creazione...
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 »”.