In questo articolo, ti mostro come creare una pagina web con Photoshop, utilizzare un file psd e trasformarlo in html. Una delle tante funzionalità supportata anche da Oneminutesite 2.0. Ti guiderò, passo dopo passo, nell’utilizzare il template che hai realizzato per le tue pagine web. Continua a leggere e scopri quanto è semplice caricare file .psd sul nostro site builder.

Abbiamo già visto come realizzare un sito web e un blog possa essere tanto facile, utilizzando il nostro team builder e con l’aiuto della formazione in linea che spetta a tutti coloro che acquistano da One Minute Site 2.0 In questo articolo, vedremo una delle tante funzionalità che il nostro site builder possiede: caricare un file .psd e trasformarlo in una pagina web.

Se hai già dimestichezza con Photoshop e la tua idea di sito web in testa, sei già un passo avanti. Quello che bisogna sapere per disegnare un template su Photoshop è una logica che sta alla base di molte regole grafiche.

Quindi, se sai come utilizzare Photoshop ma non hai mai creato pagine web, questa guida è quello che fa per te. In pochi semplici passi, avrai la possibilità di utilizzare un template creato da te e caricarlo come sito web o landing page.

Entriamo nel vivo della guida, seguimi nella lettura.

Come creare una pagina web con Photoshop?

Hai presente la maggior parte di siti web di ultima generazione?

Rispettano quasi tutti determinate logiche di visualizzazione ed user experience, che sono funzionali a far orientare l’utente al meglio, oltre che a farlo rimanere più a lungo possibile sullo stesso sito.

Ecco perché quando devi progettare un template per sito web devi fare attenzione a  questi aspetti fondamentali:

• Logo
• Menù Navigazione
• Banner
• Footer

La tendenza, negli ultimi anni, è quella di realizzare dei siti web abbastanza minimalisti, ma senza volerci addentrare in dibattiti da addetti ai lavori del web designer, gli elementi sopra indicati sono quelle essenziali da tenere in considerazione.

Prima di ogni progetto, sito web o altro, è sempre bene pianificare e capire quali sono gli obiettivi da raggiungere.

Nel caso di un sito web, avrai l’esigenza di comunicare un progetto o un’attività nel modo più chiaro possibile. Ecco di seguito i passi operativi per creare una pagina web con Photoshop

Partiamo!

Ecco il prototipo del sito web che puoi costruire da un PSD.

Logo

Prendendo spunto dal nostro sito web, ti mostro come creare le varie parti.

Il primo elemento da posizionare è il logo. Solitamente, per convenzione il logo si mette in alto a sinistra, poiché siamo abituati a leggere da sinistra verso destra e dall’alto verso il basso (almeno in occidente).

Per facilitare il lavoro ti suggerisco di aprire le guide o righelli di Photoshop da Visualizza-Righelli e poi sempre da Visualizza-Nuovo Layout Guida questo ti aiuterà a rimanere nei margini ed allineato.

Qui hai la possibilità di creare un logo o caricarlo se ne hai uno già pronto e posizionarlo in alto a destra.

Nella figura sotto vedi come è stato posizionato il logo e il menu di navigazione.

Per semplicità abbiamo preparato delle immagini da caricare nel layout che ti ho mostrato sopra.

Se hai già dimestichezza con Photoshop, non ti sarà difficile disegnare le varie sezioni.

Se invece non hai molta esperienza, continua a leggere per sapere come trovare PSD online per il layout di un sito web.

Menù

Nel menu bisogna inserire le pagine del sito web o le categorie principali se si tratta di un blog.

• Chi siamo
• Servizi
• Contatti

Queste sono solo alcune delle sezioni più diffuse.

Inserire queste voci, che possono anche avere dei sottomenu, è fondamentale per far orientare gli utenti sul sito e andare alla sezione che più gli interessa.

In caso di siti complessi, come gli e-commerce, è fondamentale avere un menù con diverse categorie, tanti per quanto siano le categorie prodotto che proponi.

Le tassonomie, cioè la nomenclatura e la catalogazione degli argomenti/prodotti presenti nel sito è molto importante. Infatti, devi ricordare che un sito è sì per gli utenti, ma anche per i motori di ricerca che devono sapere in modo inequivocabile di cosa tratta il tuo sito web.

In questo articolo trovi consigli utili su come scrivere per le persone e per i motori di ricerca.

Nelle prossime righe ti spiegherò come caricare un PSD sul nostro page builder e farne una pagina web. 

Slider

La parte centrale della pagina web, solitamente, è occupata dallo slider che è un’immagine con del micro-testo che spiega con uno slogan quello che l’azienda o l’attività fa, come lo fa e il vantaggio che dà.

Una parte fondamentale di ogni layout web perché è la più in vista, soprattutto, se accompagnata da un’immagine luminosa, colorata e dal testo che vi spicca sopra.

Nel nostro caso, abbiamo usato la frase CREA IL TUO PROGETTO WEB CON NOI

Riassume quello che One Minute Site 2.0 fa: aiutare piccole e medie imprese a lanciare i propri progetti online con un page builder da personalizzare in modo facile e veloce.

Stai per capire come ottenre una pagina web da un PSD e caricarla su One Minute Site.

Continua a leggere…

Banner

Nella parte sotto lo slider iniziale, c’è una parte in cui vengono elencate alcune caratteristiche del servizio/attività che il sito web propone.

E’ interessante, perché è una parte che non punta più a colpire l’occhio dell’utente (compito riservato allo slider), ma spiega in modo più dettagliato quali sono almeno 3 caratteristiche o vantaggi del proprio business.

La scelta di tre elementi è, spesso, dettata da una scelta grafica e di visual.

Utilizza delle caratteristiche o dei vantaggi e poi esplica meglio con delle brevi frasi ciò che fai per i tuoi utenti.

Piccolo consiglio: parla spesso del vantaggio che i tuoi utenti avranno dal tuo lavoro/prodotto/servizio.

La gente che è sul tuo sito vuol avere un motivo per restarci e contattarti, nel caso!

Footer

La parte finale di ogni layout è il footer. In questa sezione si mettono, generalmente:

• La denominazione dell’attività e il logo nuovamente
• Riepilogo con elenco puntato delle categorie del sito
• Eventuali link utili come faq o area download

In alcuni casi, molti siti web includono la casella per l’iscrizione alla newsletter proprio nel footer. E’ una buona soluzione, se si vuol puntare a fidelizzare i propri utenti.

Una volta creato il footer, non ti resta che salvare ed esportare l’immagine in formato PSD.

Come caricare un PSD  su One Minute Site 2.0

Adesso hai il tuo file PSD pronto.

Se non l’avessi già fatto, ti ricordo che l’iscrizione alla piattaforma One Minute Site 2.0 prevede un periodo gratuito di 60 giorni.

Una volta che avrai fatto accesso alla piattaforma, potrai caricare il tuo PSD semplicemente trascinandolo sul builder.

Dopo di che, selezionato il file, il builder caricherà il file PSD dopo averti chiesto la conferma.

Finito il caricamento troverai il file PSD caricato sulla piattaforma.

Qui abbiamo utilizzato un template per un sito in cui ci sono dei bambini in primo piano.

Ed il gioco è fatto.

Nel caso volessi scaricare dei file PSD già fatti dal web…

Continua a leggere

Come trovare PSD online per il layout di un sito web

Trovare file PSD da trasformare in pagine web non è molto difficile, ci sono vari siti di risorse gratuite ed a pagamento che possono fare al caso tuo.

Ecco alcuni dei siti più forniti:

• Freepik è uno dei più importanti per risorse grafiche, immagini e PSD gratuti
• Freebiesbug con icone ed immagini molto belle
• Themeforest propone una selezione di ottimi layout e templates PSD a pochi euro

Come vedi non è per nulla difficile riuscire a personalizzare il tema grafico del sito web, basta avere un file PSD e caricarlo sulla piattaforma.

Conclusioni

In questo articolo hai imparato in modo semplice e veloce come creare una pagina web con Photoshop, caricare il file PSD sul nostro builder e dove reperire file PSD già pronti per essere utilizzati come template per il tuo sito web.

La personalizzazione del sito è un modo per differenziarsi dai soliti siti web canonici e dai classici modelli che, pur essendo molto belli e professionali, possono sembrare poco personali.

Spero di averti instillato l’idea di rinnovare o ideare un tema grafico per il tuo sito web con Photoshop.Con One Minute Site puoi continuare a lavorare anche online, con la stessa logica. La piattaforma ti consente di usare strumenti come i livelli che sono tipici di un ambiente di lavoro Photoshop. Se sai usare questo strumento, fare un sito con One Minute Site sarà una passeggiata di salute.