Ottimizzare immagini per le testate dei siti internet: modificare il formato con Scala in base al contenuto di Photoshop

Ormai da tempo le immagini sono diventate fondamentali per la comunicazione sul web.

Nel web design è ormai diffusissima una modalità di progettazione delle home page dei siti internet che dedica ampio spazio nella testata ad immagini belle, grandi e d’impatto, sia fisse che animate tramite slider temporizzate.

I formati che otteniamo con le attuali macchine fotografiche non sono direttamente utilizzabili per questo tipo di progettazione: devono infatti essere tagliate o modificate. Le fotografie scattate con DSLR hanno proporzioni di 3:2, mentre le compatte di solito utilizzano i 4:3 come potete anche leggere in un articolo pubblicato nel blog di Fotolia (https://blog.fotolia.com/it/2015/08/05/taglio-composizione-larte-di-direzionare-lattenzione/).

Infatti, anche le immagini che troviamo all’interno dei più diffusi siti microstock, utilizzati dalle agenzie grafiche per l’acquisto di immagini, hanno per la maggior parte i formati sopra descritti.

Anche il formato più ampio 16:9 sempre più utilizzato per i monitor e TV, risulta troppo alto da utilizzare come testate in home page, in quanto rischia di rubare molto spazio alla lettura dei contenuti.

Per progettare siti internet moderni diventa quindi molto importante avere a disposizione immagini con proporzioni che privilegiano la larghezza piuttosto che l’altezza.

Per ottimizzare le immagini, come al solito, è possibile utilizzare Photoshop ed intervenire in due modi:

1. Realizzare delle vere e proprie immagini panoramiche unendo più fotografie con il comando “Photomerge” (potete leggere un articolo relativo a questo comando sul Blog di Fotolia)
2. Allargare facilmente e piuttosto velocemente solo lo sfondo con il comando “Scala in base al contenuto” (di cui tratterò proprio in questo tutorial)

Come utilizzare SCALA IN BASE AL CONTENUTO

Scopriamo insieme l’utilissima funzione di Photoshop “Scala in base al contenuto” che possiamo utilizzare quando, come in questo caso, dobbiamo allungare o allargare lo sfondo senza ridimensionare i contenuti principali della foto.

Proprio per uno degli ultimi progetti di MM Studio (la rete dei nuovi siti internet per l’azienda Blu Nautilus) abbiamo acquistato su Fotolia una serie di immagini, scelte insieme al cliente per la testata del sito internet principale www.blunautilus.it, in quanto in Home page abbiamo realizzato una slider che prevede la dissolvenza tra varie immagini.

Prendiamo, come esempio, questa foto acquistata su Fotolia.

(Fotolia_84208828)

Il formato di questa immagine è proprio 3:2, mentre nella progettazione del sito abbiamo deciso di dedicare uno spazio con proporzioni 5:2.

Come ho proceduto, quindi?

Il primo tentativo è stato quello di utilizzare la taglierina per eliminare parte della foto in altezza.

La taglierina può essere impostata già con il rapporto prescelto 5:2.

Ho provato ad usare semplicemente la Taglierina per tagliare parte dell’immagine ma, come potrai notare dall’immagine seguente, veniva tagliata parte della tigre ed il risultato non mi piaceva.

Ho quindi annullato l’operazione e, dopo aver sbloccato il livello di sfondo, ho impostato la dimensione del quadro sempre con proporzioni 5:2, lasciando una parte vuota a sinistra come nell’immagine seguente.

Poi sono passata ad utilizzare il comando MODIFICA -> Scala in base al contenuto.

Questo comando riconosce la parte “importante” della foto (il soggetto) e, cercando di mantenerla il più intatta possibile, lavora allargando quello che riconosce come sfondo.

Spesso funziona bene già in modalità automatica. Il primo risultato in modalità automatica è questo, non male… e velocissimo!

Primo risultato con Scala in base al contenuto in modalità automatica

È possibile usarlo anche per restringere la foto senza tagliarla. Questo il risultato.

Volendo, però, perfezionare il risultato e “pilotare” il lavoro di Photoshop, possiamo procedere con la realizzazione di una maschera partendo da una semplice selezione con lazo attorno alla tigre per poi salvarla come canale alfa (Selezione -> Salva selezione) oppure lavorando anche in modalità “Maschera Veloce”.

Creazione maschera in modalità “Maschera veloce”

Dovrete ottenere un canale alfa con la tigre bianca su sfondo nero.

Maschera

A questo punto, quando utilizzi il comando “Scala in base al contenuto” puoi abilitare “Proteggi:” e scegliere il canale alfa appena salvato. Questo permetterà a Photoshop di capire quale contenuto proteggere e non toccare durante il ridimensionamento (quello compreso nell’area bianca del canale alfa).

Questo il risultato finale.

Risultato finale utilizzando la maschera

A fianco della casella “Proteggi” c’è anche un’icona   che permette, se selezionata, di proteggere in automatico il colore dell’incarnato nel caso la foto sia un ritratto.

Bene, spero di essere stata chiara e comunque risponderò volentieri alle vostre domande tramite i commenti 😉