Webdesign con Inkscape – Inkscape Tutorial – 1/2

Eccomi qui, come vi avevo promesso nel mio primo post a proposito del web design con gimp ed inkscape ho realizzato una prima inkscape tutorial per invogliarvi a provare questo strumento opensource che finalmente ha raggiunto un livello di qualità/funzionalità che gli permette di essere utilizzato anche a lavoro.

Partiamo dunque con questa prima guida ad inkscape.

L’obbiettivo non è quello di farvi diventare dei grafici professionisti, sicuramente lo siete già. Lo scopo è quello di farvi conoscere ed apprezzare inkscape e le potenzialità offerte dalla grafica vettoriale.

Partiamo allora con questa prima avventura.
Quello che vogliamo realizzare è un header per il mio nuovo blog in stile web2.

Apri inkscape, troverai un primo documento vuoto già aperto.

A questo punto inkscape offre la possibilità di creare un nuovo documento con un formato diverso da scegliere nell’apposita lista.

Noi comunque preferiamo modificare semplicemente le proprietà della pagina, regolando le dimensioni per l’ambito web.

Regoliamo la larghezza a 780px – in modo che anche gli utenti con risoluzione 800×600 abbiano la possibilità di vedere il sito senza scroll orizzontali – e scegliamo il colore di sfondo.
Guardando il foglio di lavoro potrebbe sembrare che il colore di sfondo sia già impostato sul bianco, ma così non è, bisogna farlo manualmente.

Ricordati che Inkscape lavora con un canale aggiuntivo oltre ai tre colori primari. Il quarto canale è il canale alpha, in sostanza il canale che indica l’opacità. Se ti sembra che un colore non venga rispettato o non corrisponda alle tue aspettative controlla sempre che l’opacità sia corretta. Nella selezione dei colori il canale alpha viene identificato con A ed un valore da 0 a 255.

Per il nostro sfondo scegliamo il massimo dell’opacità.

Ora che abbiamo preparato il nostro ambiente di lavoro cominciamo a creare il nostro header.

Prima di tutto attiviamo la griglia.

Una volta attivata la griglia, con il suo aiuto, creiamo un nuovo rettangolo con lo strumento `rettangoli e quadrati`. Il nuovo rettangolo sarà centrato e largo leggermente meno del nostro documento, alto almeno 150px, in modo da poter contenere un menu di navigazione e la nostra intestazione.
Una volta creato il rettangolo scegliamo sulla barra orizzontale dei colori quello che più ci aggrada. Se non sei molto pratico ti consiglio di scegliere un colore neutro come nell’esempio. Potrai sbizzarrirti successivamente con le varie combinazioni di colori.

Ora che abbiamo creato lo sfondo del nostro header andiamo a modificarlo per ottenere dei bordi arrotondati in pieno stile web 2.0.
Attraverso la barra strumento di `quadrati e rettangoli` è possibile alterare gli spigoli del nostro poligono specificando un raggio per la curvatura X ed Y. Io ho scelto un raggio di 10px per entrambe le coordinate.

Ricordate che potete in qualsiasi momento regolare lo zoom o individuare la posizione del vostro mouse all’interno del documento tramite la comoda sezione di stato collocata nell’angolo in basso a destra.

E’ anche utile sapere che ogni elemento dell’interfaccia GUI può essere editato tramite la rotellina del mouse.
Anche le combinazioni di tasti sono piuttosto semplice e dopo qualche ora di lavoro vi dimenticherete sicuramente dei menu del programma.
Ma torniamo al nostro header!
Scriviamo la nostra intestazione con lo strumento testo.
Scegliamo carattere e dimensioni del testo, optando magari per un font libero 😉

Selezioniamo poi il nostro testo di intestazione con lo strumento di selezione e scegliamo un colore (io ho scelto il bianco) nella barra orizzontale dei colori.
Quindi duplichiamo il nostro testo con l’apposito pulsante.

Ora bisogna affrontare un passaggio difficile da spiegare, ma sono sicuro che capirete al volo. Guardate la figura qui sopra. Afferrate le frecce evidenziate dal cerchio arancione con il mouse (click sinistro senza rilasciare) e trascinatele verso il basso come nella figura seguente.

Una volta che avete ottenuto una copia speculare del testo di intestazione rilasciata il pulsante sinistro del mouse.
Visto.. è semplice!
Stiamo per creare un effetto riflesso per l’header del nostro nuovo blog.
Selezioniamo la parte riflessa quindi andiamo ad aprire la finestra delle proprietà dell’oggetto.

Nella linguetta riempimento possiamo stabilire le proprietà di riempimento dell’oggetto selezionato. In questo caso il testo riflesso.
Andiamo a creare una sfumatura sul nostro testo riflesso, in modo da renderlo più realistico.
Selezioniamo gradiente lineare tra le tipologie di riempimento disponibili per il nostro testo e scegliamo un gradiente che sfuma dal bianco verso un qualsiasi colore ad alpha zero (trasparenza completa) come nella figura seguente.

Giunti a questo punto scegliamo lo strumento per la modifica dei gradienti dal pannello degli strumenti posto sulla sinistra dello schermo. Vedrete che questo strumento diventerà il vostro fido scudiero in tempo di guerra, e quando avrete preso confidenza con Inkscape apprezzerete sicuramente le sue potenzialità.
Selezioniamo quindi il nostro testo riflesso con lo strumento modifica gradiente e notiamo che si visualizza una linea orizzontale.

Quella è la linea del gradiente per l’oggetto selezionato.
Trasciniamo i punti di partenza e fine della linea orizzontale che rappresenta la direzione e la lunghezza dell’effetto gradiente per l’oggetto fino ad ottenere l’effetto voluto (una sfumatura che parte dal bianco e termina con una completa trasparenza).

Per il momento siamo giunti ad un buon punto della guida.

Nella 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.

Se intendi proseguire vai alla seconda parte della guida tutorial inkscape.