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

Assicurati di avere a portata di mano:
  • Font-family: Century Gothic, Caviar Dreams
37

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

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

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

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.
Segnala l'immagine o le immagini che ritieni inappropriate
Devi selezionare almeno un'immagine
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 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 ...
Software

Come fare un volantino con illustrator

Uno dei programmi più diffusi per la realizzazione di lavori grafici è Adobe Illustrator, che fa parte della suite Adobe assieme ad altri popolari software ...
Internet

Come creare un font con la propria scrittura

Ti sei stancato dei soliti font di default che sono presenti sul tuo pc fin da quando lo hai acquistato? Vorresti creare un font direttamente ...
Windows

Come creare un banner con ImageReady

Al giorno d'oggi esistono tantissimi mezzi di comunicazione che possono essere fruiti in maniera differente. Quello che più di ogni altro, specie negli ultimi ...
Software

Come alleggerire file pdf con Photoshop

I file con estensione. Pdf (Portable Document Format) sono sempre più utilizzati per la condivisione su Internet. Questo deriva dal fatto che i documenti in ...
Software

Photoshop: come creare l'effetto timbro

Photoshop è il più famoso e il miglior programma di grafica e fotoritocco che esista al mondo. Grazie alle sue innumerevoli funzioni e alle sue ...
Internet

Come installare un template in Joomla

Joomla è uno dei CMS (Content Management System) più usati per creare e gestire siti web. La sua caratteristica principale è la semplicità di utilizzo ...
Software

Come convertire più foto in un unico file PDF con Photoshop

Adobe Photoshop è un programma di elaborazione fotografica e digitale. Una pratica funzione di tale programma è quella di unificare più immagini in un unico ...
Software

Come iniziare ad utilizzare Adobe Photoshop

"Adobe Photoshop" è uno dei software più utilizzati per la modifica di fotografie e la creazione di nuove immagini. Negli anni, tanti degli strumenti disponibili ...
Internet

Come creare ottimi template utilizzando il software Artisteer

Breve guida introduttiva all'utilizzo del software Artisteer per la creazione di ottimi template per i maggiori cms in circolazione, quali Wordpress, Joomla, Drupal, Blogger ...
Software

Come creare una copertina Facebook con Photoshop

Il nuovo diario del famoso Social Network dal logo di colore blu "Facebook" consente di aggiungere un tocco personale, attraverso l'impiego di un'immagine ...
Internet

Come Creare Nuove Posizioni Ad Elementi In Joomla

All'interno di questa guida ti verranno illustrate le modalità che ti porteranno a creare nuove posizioni ad elementi in joomla, ovvero, a posizionare i ...
Windows

Come creare un libro in InDesign

Adobe InDesign è un'applicazione con la quale puoi creare un libro con tutte le relative e necessarie applicazioni per poterlo fare, potrai con esso ...
Software

Come creare una scritta con effetto riflesso con Photoshop

In internet si vedono spesso banner e scritte caratterizzate da un effetto riflesso del testo, in cui le parole sembrano quasi rispecchiarsi in uno specchio ...
Windows

Come Creare un modello di carta intestata

Chi ha un'attività professionale o un'azienda, avrà senz'altro bisogno di carta intestata recante tutti i dati rilevanti della ditta. Rivolgersi a una ...
Windows

Come utilizzare il testo paragrafo in adobe photoshop

Adobe Photoshop è uno strumento dalle mille potenzialità, utilizzato da grafici, fotografi e professionisti dell'immagine per realizzare le loro creazioni. Per quel che riguarda ...
Windows

Come inserire il copyright in una foto con Photoshop

Una cosa fondamentale, che tutti coloro che amano pubblicare le proprie foto su internet, sia sui social network (Facebook, Instagram...) che su blog o altri ...
Mac

Come fare un sito web con Mac

Siete degli utenti Mac? Volete realizzare o modificare il vostro sito già esistente o crearne uno nuovo? Oggi tutto questo è possibile grazie alla tecnologia ...
Software

Nozioni base di Photoshop

Adobe Photoshop è tra i più noti software di grafica digitale, prodotto dalla Adobe Systems Incorporated. È utilizzato per l'elaborazione di immagini, foto-ritocchi, illustrazioni ...
Software

Come scaricare un modello di calendario per Excel

Sul sito della Microsoft si possono scaricare numerosi aggiornamenti o template totalmente gratuiti, come i modelli di calendario. Per scaricare un modello di calendario per ...
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 Banzai Media S.r.l., quale editore degli stessi, 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»”.