Webdesign con Inkscape – Inkscape Tutorial – 2/2

In questa seconda parte dell’inkscape tutorial andremo a perfezionare il nostro header. Renderemo lo sfondo sfumato, aggiungeremo qualche effetto, ma soprattutto inseriremo il menu di navigazione per il nostro nuovo blog in stile web 2.0.

Per chi dovesse ancora farlo, consiglio di leggere la prima parte della guida ad inkscape.

Ricapitolando, avevamo creato grazie ad Inkscape lo fondo ed il titolo per il nostro nuovo blog.

Adesso procediamo perfezionando quanto fatto e creando la barra di navigazione.

Selezioniamo quindi il rettangolo del nostro header con lo strumento selettore.
Andiamo sulle proprietà dell’oggetto e nella linguetta riempimento scegliamo il gradiente lineare per migliorare lo sfondo e renderlo meno noioso.
Giocando con lo strumento per la modifica dei gradienti aggiustiamo l’orientamento e la distribuzione della sfumatura. Vi segnalo che mentre trascinare i punti di ancoraggio del gradiente potete utilizzare i tasti CTRL e ALT per spostare la linea in modo guidato a diversi angoli di rotazione in modo preciso.
Per esempio per posizionare in modo perfettamente verticale la sfumatura come in figura ho trascinato l’ancoraggio mantenendo schiacciato il tasto CTRL.

Adesso, visto che lo sfondo del nostro primo header ci soddisfa, cominciamo a creare i pulsanti di navigazione.

Cominciamo a crearne uno per individuare lo stile più adatto da ripetere poi su tutti gli altri.

Un pulsante sostanzialmente è un altro rettangolo con gli angoli smussati (lo stile web 2, ricordate? semplice, pulito, efficace).
Oramai non dovrebbe essere difficile per voi realizzarlo, le procedure da seguire sono le stesse che abbiamo incontrato durante la prima parte del tutorial ad inkscape quando abbiamo creato il rettangolo dell’header.

Ora, per dare maggiore evidenza ai pulsanti, faremo anche qualcosa che non abbiamo fatto con il nostro header: aggiungeremo una leggera bordatura sfumata.

Per aggiungere il bordo è sufficiente selezionare lo sfondo del pulsante con lo strumento selettore e visualizzare le proprietà dell’oggetto.
A questo punto possiamo recarci nella linguetta `colore contorno` e scegliere l’effetto gradiente.

Per concludere la nostra bordatura però, bisogna anche scegliere lo stile del nostro contorno. Per farlo è sufficiente visualizzare la terza linguetta della finestra `proprietà dell’oggetto` denominata `stile contorno`.

Dai un occhiata agli strumenti offerti dallo stile del contorno.
Sicuramente potranno tornare utili in altri contesti.
I web designer più esperti inoltre, avranno notato che il tipo di tratteggio potrebbe essere assimilato alla proprietà CSS `border-style` con interessanti risvolti dal punto di vista pratico.

E’ venuto il momento di parlare dei gruppi.. eh si, perchè con tutti questi oggetti cominciamo a fare confusione. Il pulsante, ad esempio, è formato dalla scritta e dal suo sfondo. Se volessimo spostarlo saremmo costretti a selezionare ogni volta entrambi gli oggetti (sfondo, testo) e la cosa ci porterebbe in breve alla pazzia.
Siccome abbiamo ancora tanto da lavorare e non ci piace soffrire più del dovuto troviamo un rimedio a questo problema nella funzione `raggruppa`.

Selezioniamo quindi entrambi gli oggetti sfondo e testo che costituiscono il nostro pulsante aiutandoci con il tasto SHIFT/MAIUSC della tastiera.

Una volta che abbiamo selezionato entrambi gli oggetti usiamo il pulsante raggruppa per unirli.

Il risultato sarà un nuovo gruppo di oggetti.
La cosa più interessante di un gruppo di oggetti è che rimane sempre possibile dividerlo (con l’apposita funzione) oppure modificarlo in modo rapido con un doppio click sul gruppo.

Ora che il nostro pulsante è finalmente un unica entità, lo selezioniamo con lo strumento selettore e ne creiamo una copia con la combinazione CTRL+D.
Il nostro nuovo clone sarà creato sopra all’oggetto originario e sarà già selezionato in automatico. Basta quindi portarlo a fianco dell’altro pulsante per aggiungere un altro elemento alla nostra nuova barra di navigazione.

Possiamo ripetere più volte l’operazione fino ad arrivare ad un risultato simile a quello che vedrete nella prossima figura.

Se hai osservato con attenzione la figura precedente avrai notato che sono già selezionati tutti i pulsanti. Vogliamo creare un nuovo gruppo?
Per il momento no.
Quello che vogliamo fare è allineare in modo ordinato i pulsanti che abbiamo duplicato facendoci aiutare da Inkscape.
Come fare? E’ presto detto.

Usiamo la funzione di allineamento per allineare gli oggetti selezionati.
Per il momento allineiamoli sulla stessa altezza come riportato in figura.

Adesso che abbiamo allineato i lati superiori dei nostri pulsanti provvediamo anche a distribuire in modo uniforme lo spazio che li divide gli uni dagli altri.

La nostra barra di navigazione comincia finalmente a delineare la sua forma definitiva.
Però c’è qualcosa che manca.
L’header non ha il `peso` che dovrebbe avere: nonostante la sfumatura rimane piatto.
Ah già! Mancano le ombre!

Ci sono differenti metodi per creare l’ombra ad un oggetto, ma quello più pratico rimane sicuramente creare un duplicato dell’oggetto stesso ed attribuirli una sfocatura.
Il nuovo oggetto duplicato e sfocato può essere spostato leggermente più in basso e verso destra rispetto all’oggetto originario per simulare una luce che arriva dall’angolo in altro a sinistra dello schermo.

Diamo una rapida occhiata al nostro lavoro, apportiamo ancora qualche leggera miglioria o personalizzazione e siamo pronti per esportarlo.

Inkscape può esportare immagini in diversi formati, ma a noi piace l’idea di utilizzare PNG che senza ombra di dubbio è il miglior formato utilizzabile per gli elementi grafici vettoriali.

Per ottenere quindi il nostro file PNG, pronto per essere spezzettato e trasportato su XHTML/CSS utilizziamo lo strumento di esportazione come mostrato nella prossima figura.

Scegliamo di esportare l’intera pagina, piuttosto che una selezione personalizzata, e scegliamo la dimensione più adatta al nostro progetto.
Indichiamo dove salvare il file, clicchiamo su `esporta` et-voila, il nostro design è servito!

Come vedete il risultato è molto carino e pulito e l’ho ottenuto in circa 15 minuti di lavoro.
Sicuramente voi saprete fare di meglio quindi, se vi va, provate a farne uno completamente personale partendo da zero.
Se invece vi piace questo risultato… beh.. potete scaricare il sorgente svg della grafica che rilascio sotto licenza Arte Libera.

Inkscape tutorial, guida al web design con inkscape

ll file contiene gli elementi di design per l’header di un nuovo blog web2.0 realizzato in occasione della stesura della presente guida.

Copyright © 2007 Giulio Turetta

Copyleft: quest’opera creativa è libera, puoi ridistribuirla e/o modificarla secondo i termini della licenza Arte Libera.
Puoi trovare un modello di questa licenza sul sito Copyleft Attitude http://artlibre.org così come su altri siti web.

Scarica il file svg della grafica usata nella guida ad inkscape.