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.

Guida inkscape, inkscape tutorial, web2, header, svg

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

Guida inkscape, inkscape tutorial, web2, header, svg 2

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

Guida inkscape, inkscape tutorial, web2, header, svg 3

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.

Guida inkscape, inkscape tutorial, web2, header, svg 4

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.

Guida inkscape, inkscape tutorial, web2, header, svg 5

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.

 

Guida inkscape, inkscape tutorial, web2, header, svg 6

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.

Guida inkscape, inkscape tutorial, web2, header, svg 7

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.

Guida inkscape, inkscape tutorial, web2, header, svg 8

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😉

Guida inkscape, inkscape tutorial, web2, header, svg 9

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.

 

Guida inkscape, inkscape tutorial, web2, header, svg 10

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.

Guida inkscape, inkscape tutorial, web2, header, svg 11

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.

Guida inkscape, inkscape tutorial, web2, header, svg 12

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.

Guida inkscape, inkscape tutorial, web2, header, svg 13

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.

 

Guida inkscape, inkscape tutorial, web2, header, svg 14

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

Guida inkscape, inkscape tutorial, web2, header, svg 15

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.

Tags: , , , ,

About Giulio Turetta

Sviluppo e curo siti web dal 1998, amo internet e le opportunità che ci offre. Grazie anche a te, che fai parte di questo mondo fantastico.

10 responses to “Webdesign con Inkscape – Inkscape Tutorial – 1/2”

  1. Lee says :

    Ciò potrebbe aiutare:

    http://freshmeat.net/projects/svgslice/

    Ndr: un software utile per esportare immagini multiple a partire dalle guide di inkscape (ottimo per il webdesign) – untested

  2. azian says :

    Nice tutorial, I try to follow your tutorial using google translator.

  3. Giulio Turetta says :

    @azian
    thank you!:)
    I hope to publish it soon in english.. unfortunately my english is not very good:/:)

  4. patrick91 says :

    wow un altro ottimo “inkscaper” italiano😀
    bel tutorial, se ti va potresti pubblicarlo anche su Inkscape Italia😉


    Patrick

  5. davide says :

    Ciao, ho segnalato questo tutorial in inkscape gallery, spero che ti faccia piacere…
    Nel sito abbiamo una sezione di tutorials e cerchiamo di raccoglierne ed aggiungerne costantemente.
    Tra l’altro su inkscape gallery ci sono immagini di layout web realizzati con inkscape, io per esempio utilizzo questo software costantemente nella realizzazione dei miei layout.
    Grazie,
    Da.
    http://www.inkscapegallery.net

  6. Giulio Turetta says :

    @davide
    Grazie mille, mi fa sicuramente piacere!
    Se avrò un po’ di tempo libero tornerò sicuramente a produrre qualche altro tutorial, nel frattempo tento sempre di corrompere i colleghi `addobbati`:)
    Appena ho un attimo poi vengo sicuramente a fare un salto più approfondito sul sito che hai segnalato e spero di poter contribuire con qualche realizzazione. Buon lavoro!

  7. riccardo says :

    come creare una tabella utilizzando “righe e colonne”……?????? grazie!!!!!!!!

  8. inkscapeforum.it says :

    Abbiamo inserito il suo articolo all`interno del nostro forum dedicato ad Inkscape.
    Se volessi venirci a trovare per dare piu delucidazioni e’ il benvenuto

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: