Salta il menu

[Inkscape] Pulsante traslucido effetto Aqua

Notizia del 30/03/2007

Per prima cosa creo un rettangolo e ne arrotondo gli angoli usando i parametri che compaiono nella barra in alto selezionando lo strumento Crea rettangoli e quadrati:

Disegno un rettangolo e imposto l'arrotondamento degli angoli dalla barra delle opzioni che compare con lo strumento Disegna rettangolo

***

Usando l'apposito pannello raggiungibile sia attraverso il pulsante evidenziato in alto che attraverso il percorso Oggetto -> Riempimento e contorni, modifico l'elemento come segue:

  • riempimento sfumato da grigio scuro a nero (per approfondimenti consultare il tutorial sui riempimenti sfumati)
  • contorno nero
  • spessore contorno abbastanza accentuato

Modifico il riempimento e lo imposto sfumato e aggiungo un bordo piuttosto visibile con le opzioni del pannello Riempimenti e contorni

***

Dopo averlo attivato (basta cliccarci su), duplico il rettangolo con Modifica -> Copia e Modifica -> Incolla (figura [1]) e ne modifico riempimento e bordo ([2]) usando il pannello visto sopra e con le seguenti impostazioni:

  • riempimento sfumato da bianco a trasparente
  • nessun contorno (scelgo la [x])
  • opacità impostata al 60% circa

Duplico il rettangolo e a quello nuovo modifico i riempimenti: bianco sfumato e semitrasparente, senza contorno

***

Rimodello l'elemento superiore e ne diminuisco lo spessore (cliccando sull'elemento, questo si attiva e compaiono le maniglie per la modifica), quindi riattivo lo strumento Disegna rettangolo per poter ripristinare i valori originari per l'arrotondamento degli angoli:

Rimodello l'elemento superiore stringendolo e ridefinendo gli angoli e lo allineo al bordo alto dell'elemento sottostante

***

Attivo lo Strumento testo e scelgo un font spesso e lineare, quindi scrivo il testo del pulsante; non è essenziale impostare già prima di scrivere la giusta misura del font, perché posso modificare la scritta in un secondo tempo usando le maniglie che compaiono ai lati e agli angoli:

Inserisco il testo scegliendo un font piuttosto semplice e corposo, in questo caso Impact

***

Con il solito pannello imposto un riempimento sfumato anche al testo: bianco più accentuato verso il basso e più sfumato verso l'alto; posso modificare il riempimento trascinando le maniglie anche al di fuori dell'area dell'elemento e in questo modo ottengo un effetto meno accentuato e più naturale:

Imposto il riempimento sfumato al testo; le maniglie si possono trascinare anche fuori dall'area dell'elemento

***

L'ultima operazione è di raggruppare i vari elementi in modo da poterli spostare e modificare come un unico blocco; per far questo attivo lo Strumento seleziona e trasforma oggetti e disegno un rettangolo che racchiude tutti gli elementi, poi premo il pulsante Raggruppa oppure scelgo Oggetto -> Raggruppa:

Racchiudo le varie parti in un rettangolo e le unisco attraverso lo strumento Raggruppa

***

Ed ecco il risultato finale nello stile Aqua:

Risultato finale: il pulsante sembra rivestito da una pellicola bombata trasparente con il testo posizionato sotto alla bombatura

Il pulsante può essere esportato in un formato raster (File -> Esporta bitmap) per essere usato in una grafica web per esempio per enfatizzare un link di download, una promozione o un elemento a cui vogliamo dare particolare risalto.

Salvando il lavoro in un file.svg prima di chiudere Inkscape, potremo in ogni momento rielaborare il pulsante creandone di nuovi senza dover ricominciare daccapo.

Torna a inizio pagina

Commenti

1 - Scritto da Marco GRAZIA il 30/03/2007 alle 17:28

Non hai nemmeno idea di quanto potrebbe aiutarmi questo tuo esempio.

Mi chiedo solo se è possibile farlo anche con più luci, ovvero, con un'ombreggiatura a più di due colori.

2 - Scritto da reb il 31/03/2007 alle 00:07

eh, penso proprio di si! se hai un qualche esempio sottomano provo a rifartelo, perche' cosi' "a freddo" non sono sicura di aver capito cosa ti serva

ad ogni modo e' questione di aggiungerci tanti elementi quanti sono i vari "punti luce"... vedi se riesci a trovarmi un link e ci provo :)

p.s. son contenta che ti torni utile! :D

3 - Scritto da Gabri il 13/09/2007 alle 12:19

Io non riesco a sfumare il testo...

4 - Scritto da reb il 20/09/2007 alle 14:27

ops! non mi ero accorta che avevi scritto, scusami :(

(sono un po' presa e non entro da qualche giorno)

beh, il testo lo sfumi come il resto, e' a tutti gli effetti un elemento; unica cosa devi badare a rendere completamente opaco il colore grigio e lo fai sul pannello di gestione dei riempimenti; piu' o meno, i passaggi sono questi:

  • dopo aver evidenziato il testo (che sia l'elemento attivo, insomma), apri il pannello del riempimento
  • scegli la sfumatura lineare
  • scegli Modifica
  • premi Aggiungi passaggio
  • porti l'opacità a 1 sia nel selezionatore appena sotto i pulsanti "aggiungi passaggio - elimina passaggio", sia nella barra del colore in basso che regola l'alpha

il campione della sfumatura nel primo campo dovrebbe essere completamente opaco (te ne accorgi perche' scompare l'effetto quadretti che si intravede)

5 - Scritto da daniele il 21/12/2007 alle 17:37

Bella guida ma non ci sono riuscito mi potresti dare una mano???

6 - Scritto da reb il 21/12/2007 alle 23:42

certo, quale passaggio non ti e' chiaro?

7 - Scritto da daniele il 22/12/2007 alle 18:45

Scusa non ne ho più bisogno..grazie lo stessto dekk'imprgno :S ;)

8 - Scritto da reb il 22/12/2007 alle 20:54

nessun problema :)

9 - Scritto da Andrew Low il 04/12/2008 alle 22:12

Davvero molto bello e molto utile!!! Grazie!

10 - Scritto da reb il 20/12/2008 alle 09:26

grazie a te :)

11 - Scritto da motumboe il 14/01/2009 alle 15:51

Ciao,

bella guida complimenti!

Ho una domanda... conosci qualche trucco in inskape per non dover cambiare il testo tutte le volte che si genera un bottone?

Es. modifico un colore perchè lo voglio più verdino, poi devo scrivere es. home ed esportare, prodotti ed esportare, ecc...

Un'idea che mi è venuta scrivendo è di preparare vari layer, uno con la scritta home, l'altro prodotti, etc.

Però devo sempre fare tutto a mano... ciao grazie e ancora complimenti :-)

12 - Scritto da reb il 21/02/2009 alle 09:04

ciao :)

grazie per i complimenti e scusa il ritardo della rispostat: no, purtroppo non credo che al momento ci sia un sistema miglire di quello che hai adottato; io stessa lo uso o in alternativa uso le guide per centrare la scritta e poi la modifico per creare tutti i pulsanti che mi servono

13 - Scritto da Antonella il 08/04/2010 alle 18:02

ma gli angoli interni ed esterni non li dici?

14 - Scritto da DOMENICO il 03/01/2017 alle 09:31

Ciao, vedo che ci sai fare anche con inskape. Io avrei bisogno di aiuto, perché mi è stato chiesto un logo che contiene due lettere bombate che sono state create con inskape ma io con lo stesso programma non riesco a riprodurle. se ti mando la scansione puopi aiutarmi ? grazie

Aggiungi il tuo commento

I campi con * sono obbligatori.

Torna a inizio pagina

Torna a inizio pagina