fbpx

Come creare le immagini per il sito web

Se stai leggendo questo articolo, ti chiederai quante immagini servono per riempire un sito web? Sfatiamo subito un mito, le immagini create per un sito web non sono soltanto le immagini statiche che si trovano in alto nella home page (la pagina iniziale) di un sito web. Si tratta di uno studio congiunto tra grafico e web designer (colui che tecnicamente realizza le pagine web) dove, scelto, dai secondi (web designer), il template grafico e decisi gli spazi destinati a immagini/testi/form/moduli extra,  il primo (il grafico) è pronto a riempire, con una dimensione in pixel specifica, gli spazi destinati alle immagini concordate. Risulta quindi chiaro, ma non scontato, che un grafico web abbia un’infarinatura di base sul layout di un sito web e sui formati e risoluzioni adatte. Risulta probabile, anche, che il web designer ti dia gli accessi alla piattaforma con la quale realizza il sito web, ad esempio WordPress, e ti chieda di provare le immagini create in maniera autonoma.

come-creare-un-banner-per-il-sito-web

Una breve guida per non sbagliare:

  • Come capire quali sono le immagini più adatte per il sito web commissionato?
  • Come crearle?
  • Come ottimizzare le immagini e rinominarle per il web?

 

Come capire quali sono le immagini più adatte per il sito web commissionato?

Nella comunicazione, le immagini assumono un aspetto di rilievo e hanno il compito di trasmettere in maniera chiara e d’impatto, il messaggio che vuole veicolare il proprietario di quel sito web. Ipotizziamo di dovere creare le immagini per un ristorante che propone il suo menu online, specialità gastronomiche della cucina mediterranea per una clientela raffinata e dai gusti ricercati. Il sito web prevederà, inoltre, una pagina contatti con la quale gli utenti potranno prenotare il loro posto a sedere direttamente online. Ti viene chiesto di preparare l’immagine statica dell’Homepage, che dovrà far risaltare, in maniera incisiva, di cosa si occupa quella pagina web e che si tratta, quindi, di un ristorante dalle specialità culinarie ricercate e raffinate che propone piatti della cucina mediterranea. A quel punto è chiaro che dovrai ricercare delle immagini fotografiche (non disegni), che prediligono dei primi piani delle specialità maggiormente proposte, dai toni caldi e dalla risoluzione nitida. Eccoti un esempio:

Ti consiglio, nell’immagine dedicata all’Homepage, di cercare immagini ad alta risoluzione, che prevedono a destra o a sinistra dello spazio colorato o bianco, che possa permettere al web master di inserire un form di prenotazioni o del testo. Ipotizziamo adesso, che ci troviamo di fronte alla costruzione delle immagini per sponsorizzare il sito web di una rinomata piscina della tua città. Il web designer ti chiede di non lasciare spazi vuoti attorno all’immagine per la Homepage, perché prevede di usare quest’ultima come sfondo di un testo, chiedendoti di ricercare la fotografia di un nuotatore dai toni scuri al fine di far risaltare un testo in primo piano. Potresti usare ad esempio questa che vedi sullo sfondo sotto la scritta, che verrà inserita dal web designer:

Come crearle?

Ci sono due soluzioni per creare le immagini per un sito web: puoi usare i tools presenti ad oggi online che ti permettono in pochi minuti di disporre di template grafici pronti nei quali inserire una fotografia proposta, o puoi decidere di personalizzare le immagini, sapendo come scaricarle libere da licenza Creative Commons, in maniera più creativa, creandole tu stesso con il software, numero 1 sul mercato, Adobe Photoshop. Photoshop, non è gratis, ma ti consente di provare la versione trial della durata di 7 giorni, solo su desktop o Ipad, e decidere successivamente quale piano abbonamento mensile o annuale scegliere come formula di pagamento. 

Come ottimizzare le immagini e rinominarle per il web?

L’immagine ideale per il web deve avere una risoluzione di 72 dpi, metodo colore RGB e pesare poco in quanto a MB (mega-byte). Ed è proprio per questo motivo che si rende molto utile la funzione salva immagini per Web di Photoshop, che ci garantirà che i colori siano visualizzati correttamente, permettendoci di utilizzare anche il formato PNG-24 che prevede una profondità di colore superiore ed una buona alternativa al JPG, quando lavoriamo immagini fotografiche con all’interno del testo o degli elementi grafici come i vettori. Ti semplifico il discorso: crea l’immagine seguendo i passaggi operativi di ricercarla libera da licenza Commons, personalizzala con Photoshop sistemando il colore, ritagliandola, aggiungendo effetti, elementi grafici o creando collage, salva l’immagine finale per il web con la funzione “Salva per il Web” scegliendo i formati JPG o PNG, facendo attenzione che la dimensione finale non sia superiore a 100 Kilobite.

Un buon compromesso in considerazione dei vari device presenti sul mercato è creare immagini con il lato lungo di massimo 1200 pixel e con dimensioni massime di 100 kilobite. Immagina un sito web con una galleria immagini superiore alle 50 fotografie: dovrai esportare ogni immagine scaricata o che ti viene inviata da un fotografo, con una massima dimensione di 100 Kylobite, per ridurre i tempi di caricamento di una pagina web.

Sono un grafico e Web Designer da oltre 10 anni

Realizzo layout per landing page e siti web professionali e curo o manipolo con Photoshop tutte le immagini presenti

Condividi con i tuoi amici

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+

Iscriviti alla Community Facebook

Consigli, risorse e aggiornamenti utili!