Le pagine HTML professionali sono ricche di elementi grafici (pensiamo ai siti Web o alle App mobile) e sarà fondamentale avere uno o più strumenti per la creazione e manipolazione delle immagini.
Per orientarci meglio è utile dividere in gli elementi grafici in due grandi categorie:
| Foto (e illustrazioni) | Hanno funzione decorativa o divulgativa e sono spesso parte del contenuto della pagina |
| Elementi di layout | Arricchiscono e chiarificano il contenuto, ma quasi mai ne sono parte: icone, separatori, badge, tooltip, bozzetti della pagina |
La suddivisione è tutt'altro che banale, infatti a seconda della tipologia di immagine possiamo avere software dalle caratteristiche molto diverse. Cerchiamo anche in questo caso di capire quali siano le funzioni più utilizzate e quali i sotfware che ci possono meglio supportare.
Foto e immagini bitmap
Quando si parla di elaborazione grafica non si può non citare Photoshop. È certamente il software più completo e più utilizzato, il che significa anche più ricco letteratura e di esempi che ci aiutano a lavorare meglio.
Diamo però un'occhiata alle operazioni più frequentemente utilizzate nella gestione di immagini:
| Funzionalità | Descrizione |
|---|---|
| Filtri | Almeno le manipolazioni di base come sfocatura, contrasto, aggiustamento livelli sulla banda cromatica |
| Tagli di immagine (CROP) | Per effettuare tagli precisi delle immagini e rispettare dimensioni e proporzioni richieste dal layout della pagina |
| Livelli | Consentono di sfruttare diversi layer per lavorare in modo semplice con le sovrapposizioni |
| Testi | Aggingere e poter manipolare testi e font |
| Ottimizzazione | Molto utili i tool di ottimizzazione del peso in bytes delle immagini, regolando parametri come sfocatura o numero di colori. |
In base a queste esigenze, quando il budget non ci consentisse di avere uno strumento così potente a portata di mano, abbiamo delle valide alternative gratuite, come Paint.NET o Gimp. Le community a sostegno di questi progetti inoltre sfornano numerosi plugin per estenderne costantemente le funzioni.
Da non dimenticare anche un software come Pixlr e i diversi validi servizi online.
Modifiche su molte immagini
Altri software che possono essere utili sono quelli che consentono di applicare le stesse manipolazioni su molti file (elaborazioni batch come tagli ridimensionamenti). Tra questi segnaliamo FastStone Photo Resizer.
Altra cosa che può risultare utile è un software per la gestione degli sprite. Anche se probabilmente ne parleremo poco o per niente in questa guida, è utile sapere che esistono.
Vettoriali, SVG ed elementi di layout
Una delle pratiche ancora molto diffuse è quella di realizzare il bozzetto del layout direttamente su Photoshop. C'è una corrente tra i designer che ha scelto di abbandonare questa tecnica, prediligendo la definizione degli spazi direttamente tramite semilavorati in HTML e CSS. Questo anche grazie alla potenza dei tool di sviluppo dei browser, che consentono di lavorare in modo rapido sul codice.
In ogni caso poi servono sempre logo, icone per menu e sezioni, elementi decorativi, badge e tutti gli elementi che caratterizzano lo stile del sito o dell'app. Anche questi elementi possono essere realizzati con tecniche diverse e con diversi software.
La pratica più diffusa è quella di realizzare questi elementi in formato vettoriale SVG, perché:
- è possibile ridimensionarli senza perdita di definizione;
- spesso sono file più leggeri;
- si prestano a manipolazioni interessanti anche con i CSS.
I software più interessanti per generare questo tipo di file sono:
- Adobe Illustrator - parente stretto di Photoshop, atrettanto blasonato e altrettanto professionale. Ottimo per i vettori, naturalmente a pagamento
- Inkscape - ottimo software open source, con una forte community di sviluppatori alle spalle e tutte le caratteristiche per manipolare gli SVG
Anche in questo caso non mancano validi servizi online come:
- SVGO's Missing GUI, interfaccia di un ottimo progetto nato per l'ottimizzazione dei vettori, insieme ad altri tool come svg-editor;
- editor.method.ac o vectorpaint.yaks.co.nz, per disegnare SVG in modo semplice, da poter utilizzare anche su tablet.
- Gravit, uno strumento molto potente per il design in vettoriale, con funzionalità di alto livello. È disponibile sia come applicazione Web che come app Chrome.
- boxy-svg, un altro ottimo editor da scaricare come app di Chrome e utilizzare direttamente anche fuori dal browser.