image hosting by Twango

Non sono un grafico,e non conosco nemmeno i trucchi o la terminologia che di solito si utilizza per fare queste cose.
Non sono neanche capace di usare i layer di Gimp,un altro ottimo tool per realizzare un kbfx-button.
Al di la di quelle che possono essere le capacita’ artistiche di ognuno di noi,Inkscape e’ un programma di grafica vettoriale che permette di lavorare con le Curve di Bézier e le maniglie,per “plasmare” la forma desiderata.
Andiamo con ordine..prima di tutto dobbiamo procurarci Inkscape:

sudo apt-get install inkscape

Per molti aspetti,l’interfaccia di questo programma e’ simile ai piu’ blasonati vettoriali per Windows..come Adobe Illustrator
Nel pannello superiore troviamo i menu’ e le impostazioni..mentre in quello di sinistra possiamo gestire,tra le tante cose, le forme geometriche ..che saranno il nostro punto di partenza

================
Gettiamo le basi
================

Inutile dire che la fantasia qui ricopre un ruolo fondamentale,e che non ci sono limiti alle forme o alle composizioni..basta rispettare determinati parametri.
Un bottone standard (uno standard comune non c’e’) e’ compreso tra i 120-160 px e 30-46 px di altezza..Fuori da questi parametri ci ritroveremmo con un kicker “gigante” o davvero troppo piccolo per l’utilizzo quotidiano.
Premiamo sul pulsante “quadrato” sul lato sinistro e col mouse creiamone uno sul campo di lavoro: le misure sono:132×38,ed e’ possibile scriverle direttamente nella barra superiore..W e H (larghezza-altezza) cosi’ il rettangolo assumera’ le dimensioni selezionate:

image hosting by Twango

Per lavorare la figura,apriamo il menu’ “path” e selezioniamo “object to path”
Lo shortcut da tastiera e’

Shift+ctrl+c

Ora selezioniamo la freccetta subito sotto quella standard o premiamo F2
Clicchiamo sul bordo della nostra figura e aggiungiamo un nodo..come da screen

image hosting by Twango

Notiamo come i nodi standard siano 4..ma per manipolare la figura troppo “spigolosa” abbiamo bisogno di aggiungere un ulteriore nodo..per poter “curvare” la linea a nostro piacimento.
Lasciamo la selezione sul nuovo nodo..e trasciniamolo a meta’ strada tra quello superiore e quello inferiore.
Premiamo ora il pulsante del pannello superiore “make selected node simmetric

image hosting by Twango

Si e’ creata una curva,modellabile,con 2 “maniglie” per spostare tale curva nel verso desiderato.Cliccando un altra volta sul nodo possiamo invertire l’angolo di curvatura.

image hosting by Twango

Una volta ottenuta la base desiderata,duplichiamola con click destro–duplica immagine e spostiamola leggermente sull’asse orizzontale.

image hosting by Twango

shift+ctrl+f

Ci permette di selezionare l’elemento dello stile-figura (fill and stroke).Selezioniamo il gradiente lineare per sfumare la duplicazione di prima

image hosting by Twango

ctrl+f1

ci permette di editare il gradiente,sempre tramite le comode maniglie..
Spostiamo il gradiente per dare un effetto “riflesso” sia sopra che sotto..duplicando nuovamente l’immagine e invertendo la direzione del gradiente.

image hosting by Twango

Aggiungiamo un testo,o un immagine..

image hosting by Twango

e modifichiamo la grandezza e lo stile dei font
Per i colori basta selezionare il campo interessato e premere sulla tavolozza nel pannello inferiore
Col solito trucchetto del “duplica e sposta” diamo al testo un effetto “3d” altrimenti risulterebbe troppo piatto.
Usiamo 2 gradienti di colore differente e impostiamo la sfumatura

image hosting by Twango

Il bottone e’ quasi terminato..quello che manca e’ magari un ulteriore sfumatura,con direzione “ondulata”,spostando pero’ il testo al livello superiore,per non essere coperto dal nuovo gradiente.
Selezioniamo il testo e da “object” spostiamo il primo piano

image hosting by Twango

Esportiamo il progetto SVG (sorgente) in Bitmap

image hosting by Twango

Ed ecco il “prodotto” finito:

image hosting by Twango

Visto lo spazio limitato del blog..ho dovuto concentrare tutto in poche righe,..e non e’ facile per spiegare queste cose.
Non ci sono limiti alla fantasia,dicevamo prima,quindi e’ possibile creare piu’ bottoni (hover,pressed e normal) per dare l’effetto “tasto premuto” oppure giocare sui gradienti e sulle misure.
Di progetti Inkscape in SVG ne potete trovare anche su kde-look..Per iniziare e’ vivamente consigliato, perche’ cosi’ e’ possibile “scomporre” il sorgente e carpirne i segreti (dei piu’ bravi) come ho fatto io..:-)
Una guida ad inkscape la potete trovare qua:

Inkscape-Tutorial

Related Posts Plugin for WordPress, Blogger...

Il tuo indirizzo ip:
54.211.135.32

Valutazione 3.00 su 5
happy wheels 2 demo

Category:

Senza categoria

Tags:

,

Commenti via Facebook:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

12 Comments

  • wesbluemarine ITALY 12 anni ago

    Scusa ma se io volessi solo cambiare il colore di un bottone già fatto?:)

      Quota

  • dovrebbe essere in svg..cosi’ che lo puoi caricare con inkscape e modificare i colori come vuoi
    con le bitmap..non e’ possibile…a meno di qualche effetto o plugin di gimp tipo il “colorized” ma e’ una cosa sommaria
    non conosco il formato .xpm di gimp..che a quanto ne so..e’ un sorgente anche quello

      Quota

  • …ma voi ce l’avete fatta a far partire KBFX su kubuntu feisty?
    a me non funziona…non è che avete qualche dritta?

      Quota

  • hehe..dipende dove ti sei fermato..qualche log?..cosa non ha funzionato?..la compilazione?
    hai letto come installare il kbfx silk qui sul blog?
    😉

      Quota

  • non l’ho compilato, l’ho installato dal repo di kubuntu,
    quando avvio il configuratore di kbfx non mi da allarmi/avvisi, clicco su apllico (provando anche a cambiare qualcosa) e non va

    PS mi dai il link sul post di cui parlavi?

      Quota

  • wesbluemarine ITALY 12 anni ago

    io sto usando la versione pre testiing che hanno rilasciato da pochi giorni su kde-apps….per ora l’unico problema che ho riscontrato è che quando applichi nuove modifiche e riavii kbfx, alcune icone del vassoio di sistema spariscono….ma non credo sia colpa di kbfx…per il resto tutto ok, è davvero bello e pratico!

      Quota

  • @Nulll
    la versione dei repository e’ quella vecchia..e tra l’altro non ha mai funzionato
    http://divilinu.wordpress.com/2007/01/18/kbfx-0493cvs-nome-in-codice-silk/
    @wesbluemarine
    segnalali pure i problemi che faccio parte dello staff di kbfx..;)

      Quota

  • mi sono sempre chiesto in che modo si facessero quelle belle sfumature ondulate… ma come hai fatto? come per magia è apparsa la sfumatura, ma non hai mostrato il procedimento O__o
    se mi dessi qualche dritta te ne sarei moooolto grato 🙂

      Quota

  • no ho tagliato per via dello spazio..hehe..ma e’ come per le prime 2 sfumature..solo che crei un nodo e poi una curva ,che “pieghi” in un altra direzione..
    io l’ho messa trasversale alle prime 2 sfumature (se noti dal bottone finale)

      Quota

  • Fabio ITALY 12 anni ago

    Bello il bottone…. spiace mica se già che ci siamo lo uso? 😉
    Fabio
    PS: colgo l’occasione x farti i complimenti per il blog, ogni giorno meglio!

      Quota

  • @Fabio
    grazie..certo che puoi usarlo..:-)

      Quota

  • bel tutorial e bel blog 😀 , complimenti

      Quota