Impossibile scaricare o salvare file

Creare un ombra interna

• Nuovo 500x200
• nuovo livello trasparente
• selezione rettangolare crea rettangolo, coloralo
• seleziona, riduci 10
• seleziona, inverti
• con seleziona interseca riselezionare il rettangolo precedente
• gradiente da nero o grigio scuro a trasparente
• selezionare con ctrl , invio

Pulsante rettangolare / ovale

•  Nuovo 205 x 55 sfondo trasparente  
• Prendiamo la Selezione ovale e creiamo un ellisse. Con lo strumento Riempimento la riempiamo di un colore vivace, ad esempio un rosa fucsia.
• Applichiamo Filtri/Decorativi/Porta in rilievo con valore 10, 
  • Sfocature/Gaussiana raggio di sfocatura 5 metodo RLE
  • e quindi Luce e Ombra/Proietta Ombra spostamento 8 raggio 15 opacità 80 impostando un colore grigio scuro.
   
• Con lo strumento Testo inseriamo la scritta scegliendo font e dimensioni adatte, di colore bianco.
  • Applichiamo al testo Porta in rilievo e Sfocatura gaussiana 0,5 e ancora Porta in rilievo.
• Salviamo con File/Salva con nome.
   

Pulsante rettangolare / ovale

• Nuovo 600x400 sfondo bianco
• nuovo livello
• Prendiamo la Selezione rettangolare e creiamo un rettangolo con angoli arrotondati. Con lo strumento Riempimento la riempiamo di un colore bianco
• duplica livello, Con lo strumento Riempimento la riempiamo di un colore vivace, ad esempio un rosa fucsia.
• Applichiamo Filtri/Decorativi/Porta in rilievo con valore 10, 
  • Sfocature/Gaussiana raggio di sfocatura 5
  • e quindi Luce e Ombra/Proietta Ombra spostamento 8 raggio 15 opacità 80 impostando un colore grigio scuro.
• Nuovo livello, con lo strumento Testo inseriamo la scritta scegliendo font e dimensioni adatte 60, di colore bianco, spostiamo il testo al centro.
  • Applichiamo al testo Porta in rilievo e Sfocatura gaussiana 0,5 e ancora Porta in rilievo.
• immagine, ritaglia al contenuto
• Salviamo con File/Salva con nome.

  http://www.csi-multimedia.it/IT/software-freeware/disegnare-un-pulsante-in-rilievo-con-gimp.html#axzz6TPy4PlnI

PULSANTE ROSSO

• Nuovo 1000 x 1000 sfondo trasparente
• cerchio 860
  • colori pp:rosso sp: giallo
  • sfumatura dal basso verso l'alto tenendo premuto ctrl
• nuovo livello
• stessa selezione sfumatura dall'alto verso il basso tenendo premuto ctrl
• livello / scala livello 800x800
• tasto destro sul livello  alfa a selezione per selezionarlo
• nuovo livello 1000
• secchiello (riempire di rosso)
• livello / riaglia alla selezione
• livello / scala livello 660
• deseleziono tutto - tasto destro sul livello alfa a selezione
• nuovo livello
• colori sciegliamo un rosso più scuro
• secchiello e coloro
• seleziona riduci di 4
• canc (viene così lasciato un leggero bordo)
• seleziona niente
• filtri / sfocatura gaussiana 5
• filtri / luci e ombre / proietta ombra tradizionale (drop shadov)  4,4,15,60
• facciamo la scritta la selezioniamo (con lo strumento allinea) scritta bianca 400
  
  • andiamo sul livello del rosso, centra verticale e orizzontale
  • mettiamo in risalto la lettera (non si può fare co tutti i font- si con quelle senza grazie)
    • andiamo sul livello lettera
    • tasto destro alfa a selezione
    • nuovo livello / secchiello nero click
    • selziona / riduci 4 / canc
    • seleziona niente, si vede un bordino nella lettera
    • seleziono il livello della lettera- filtri / luci e ombre / proietta ombra
• andiamo sul livello del rosso - tasto destro sul livello / alfa selezione
  • nuovo livello, opacità 50, secchiello bianco click, si crea un alone bianco
  • con seleziona ellittica, creiamo un cerchio leggermente  più grande e decentrato
  • con il livello bianco attivo, diamo canc
  • deselezioniamo
  • filtri / sfocatura / gaussiana 20

https://www.youtube.com/watch?v=qx4_qkg5zak

Pulsante metallico

• file/nuovo 600x400
• nuovo livello trasparente
• selezione ellittica 250x250
• colore pp bianco  sp nero
• gradiente/ scostamento 20, taglio radiale, sovracampionamento adattivo 3  0,2 - dall'alto verso il basso, ok (invio)
• seleziona, riduci 25
• gradiente dal basso verso l'alto,
• nominiamo questo livello base
• nuovo livello trasparente, seleziona, riduci 5
• pp azzurro,secchiello riempi la selezione
• pp azzurro chiaro, (toglie la spunta da gradiente) sfumatura da pp a trasparente (toglie la spunta da sovracampionamento adattivo), dall'alto in basso partendo da metà circa
• pp bianco, pennello molto sfumato, opacità 75 scala 10, ci spostiamo alla base della selezione e click 1 volta
• rinominiamo questo livello sfera
• nuovo livello che chiamiamo ombra sempre trasparente, seleziona, allarga 1
• pp nero, secchiello click all'interno della selezione
• seleziona, sfumatura 20, modifica ,taglia , creerà un'ombra attorno alla nostra base
• click sul livello ombra e lo duplichiamo, click destro su ombra copia fondi in basso
• filtri, sfocatura, gaussiana 2
• nuovo livello luce  trasparente
• selezioe ellittica, creiamo una piccola ellisse in alto al centro
• pp bianco, sfumatura da pp a trasparente, opacità 75, scostamento 0, lineare, dall'alto verso il basso
• Nuovo livello testo 100, scriviamo una lettera e la spostiamo al centro
• filtri, luci e ombra, proietta ombra, spostamento xy 0, raggio 15, opacità 80, permetti ridimensionamento
• andiamo sul livello base, filtri, proietta ombra, stessi parametri

https://www.youtube.com/watch?v=TGQXqz_FiKA

-------------------------------------------------------

• Prepariamo un nuovo documento con lo sfondo bianco.  1000x1000
• Creiamo un primo livello, nella palette Livelli, dove con la Selezione Ellittica creiamo un cerchio che riempiamo di nero e a cui applichiamo il filtro Sfocature/Gaussiana con raggio 5.
• Duplichiamo il livello nella palette Livelli e con Livello/Scala livello lo scaliamo al 90%.
• Ora lo riempiamo con una sfumatura dal grigio al bianco. Applichiamo il filtro Decorativi/Porta in rilievo con valore 5. Creiamo un nuovo livello che riempiamo con lo strumento Sfumatura da bianco a trasparente.
• Creiamo un duplicato del secondo cerchio, lo scaliamo al 90% e abbassiamo nella palette Livelli l‘Opacità di livello a 41. Rendendo questo livello visibile o meno otteniamo i due stati del pulsante.
• Creiamo un altro livello e lo riempiamo con la strumento Sfumatura da bianco a trasparente. Con la Selezione Ellittica selezioniamo quasi tutta l’area del pulsante meno uno spicchio e diamo cancella per ottenere il riflesso.

Salviamo quindi due differenti GIF con il cerchio prima indicato visibile e invisibile utilizzando il comando File/Salva come.

1 Avviare GIMP. Fare una nuova immagine, 500 per 500 pixel. Dategli uno sfondo bianco. Selezionate lo strumento Rettangolo. Disegnare un rettangolo delle dimensioni e la forma del pulsante che si desidera. Spostare rettangolo a centro dell'immagine.

2 Vai al menu di livello. Create un nuovo livello. Selezionate lo strumento riempimento, e riempire il rettangolo con il nero.

3 Fare clic sul Seleziona strumento rettangolo. Tenere premuto il tasto di controllo e tenendola, selezionare la metà superiore del rettangolo. Questo rimuoverà il riempimento nero da che la metà del rettangolo.

4 Selezionate lo strumento Gradiente dal menu Strumenti. Utilizzare questo strumento per riempire la metà superiore del rettangolo con un gradiente bianco.

5 Deseleziona gli elementi selezionati. È possibile farlo dal menu o usando la scorciatoia da tastiera (tenere premuto Ctrl e Shift insieme, e premere il tasto a).

Fare clic destro sul livello superiore. Questo fa apparire un menu. A sinistra click sull'opzione "Alpha alla selezione". Questo dovrebbe selezionare l'intero del rettangolo.

6 Creare un nuovo livello. Dare un nome, come "Glow". Dal menu Strumenti, selezionare lo strumento pennello. Selezionare un pennello a forma di cerchio, e modificare le dimensioni in modo che il diametro è di circa tre quarti della lunghezza del rettangolo. Cambiare il colore di un rosso scuro.

7 Posizionare la parte superiore del pennello sul rettangolo modo da coprirlo parte con il terzo superiore del cerchio. Fare clic sul pulsante sinistro una volta. Si dovrebbe avere una sezione colorata curva dolcemente del rosso rettangolo sul quel livello.

8 Aprire il menu Filtri. Clicca su "sfocatura gaussiana." Impostare il metodo di sfocatura a RLE. Sollevare il raggio di sfocatura a circa venticinque pixel per entrambe le impostazioni orizzontali e verticali.

Ora si dovrebbe avere un pulsante rettangolare scuro con un aspetto traslucido e un bagliore rossastro.

9 Unire tutti i livelli in modo da avere un unico strato. Salvare una copia dell'immagine. Il tuo pulsante è ora pronto per caricare il tuo sito web.

Cambiare il colore del pulsante cambiando il colore dello strato Glow.

• Lancio Inkscape
• Selezioniamo lo strumento rettangolo sulla barra strumenti a sinistra del programma
• A questo punto disegnamo un rettangolo: basterà premere con il tasto sinistro sull’area di lavoro e tener premuto trascinando il cursore
• Ora aggiustiamo le dimensioni del nostro rettangolo. Con lo strumento freccia selezioneremo il rettangolo appena disegnato, per poi immettere nella barra strumenti in alto la larghezza e l’altezza del nostro bottone   150x35 px
• Per poter lavorare meglio, selezionare lo strumento lente per ingrandire fino alla dimensione voluta il rettangolo. Ricordo che con il tasto Shift premuto insieme alla lente, diminuiremo le dimensioni di visualizzazione.
• Assegneremo quindi un colore al rettangolo. Dal menu Oggetto selezioneremo la voce Riempimento e contorni: si aprirà una nuova finestra. Imposteremo il riempimento con colore unico e sceglieremo il colore dominante del bottone R=10, G=164, B=230, opacità 100
• Una volta scelto il colore, imposteremo quindi il gradiente lineare come riempimento
• In un passo solo andremo a sistemare il gradiente lineare e arrotonderemo gli angoli del rettangolo. Per la prima operazione sposteremo i due estremi della linea del gradiente; mentre per aggiungere gli angoli arrotondati sposteremo il pallino in alto a destra del rettangolo
• Aggiungeremo poi un bordo al rettangolo: sempre dalla finestra Riempimento e contorni imposteremo i bordi su colore unico e definiremo il colore del bordo del bottone 40 82 130
• Passando alla tab Stile contorno imposteremo quindi il bordo spesso 1 pixel
• Ora dovremo creare un altro rettangolo arrotondato per conferire l’effetto gloss al bottone. Con il tasto freccia selezioneremo il rettangolo, per poi premere con il tasto destro e selezionare Copia. Dal menu Modifica selezioneremo quindi incolla in origine.
  Il nuovo rettangolo avrà le stesse dimensioni del primo e verrà disposto esattamente sopra.
• Sempre con la freccia, cliccheremo ripetutamente sul rettangolo fino alla comparsa delle maniglie per ridimensionarlo. Lo renderemo circa la metà dell’altezza originale e un po’ più stretto
• Ora allineeremo i due rettangoli: con la freccia e il tasto shift premuto li selezioneremo entrambi, per poi cliccare dal menu Oggetto sulla voce Allinea e Distribuisci
• A questo punto sistemeremo forma e colore del rettangolo per l’effetto gloss. Dalla finestra Riempimento e contorni elimineremo i bordi.
• Cliccheremo poi ripetutamente sul rettangolo con lo strumento freccia fino alla comparsa della linea di gradiente. Cliccheremo quindi sull’estremo inferiore della linea, impostando il colore bianco. Regoleremo quindi gli angoli arrotondati in modo che si accordino bene con il nostro bottone. Si potranno ora spostare i due estremi della linea di gradiente a piacimento per conferire un’effetto più o meno marcato.
• Siamo così arrivati all’ultima operazione: regoleremo la trasparenza del rettangolo per l’effetto gloss, impostando sul valore 66% circa il valore dell’Opacità generale della voce Riempimento

• Ricordo che per poterlo osservare a dimensioni un po’ più realistiche basterà cliccarci sopra con la lente, tenendo premuto il tasto Shift.

  Ora non ci resta che Salvare il nostro lavoro nel formato più conveniente, dal menu File – Salva:

• Lo esporteremo infine in formato PNG. Dal menu File sceglieremo Esporta bitmap. Sceglieremo quindi di esportare il disegno, e sceglieremo il percorso e il nome del file

Ricordo che è possibile infine cambiare il suo colore globale intervenendo solo sul colore e i bordi del rettangolo più grande, dato che l’effetto gloss dà sempre sul bianco. Da notare inoltre che il file PNG esportato sarà di default semi-trasparente. Se si volesse eliminare la trasparenza, oppure assegnare un altro colore di sfondo, basterà intervenire sul pannello Proprietà documento disponibile nel menu File. È infine possibile regolare le dimensioni del bottone a piacere, per esempio per ottenere un bottone più largo.

Un bottone pronto per il rollover con Gimp

• Una volta ottenuto il nostro bottone gloss con InkScape, ulteriori modifiche e/o elabolazioni risultano più comode con un programma di editing e disegno bitmap, ad esempio Photoshop o Gimp. In questa seconda parte “raddoppieremo” il nostro bottone così da renderlo pronto per il rollover
• Una volta lanciato Gimp, apriamo il file PNG che abbiamo creato con Inkscape dal menu File, scegliendo la voce Open
• Ora apriremo un nuovo file che conterrà il nostro bottone, dal menu File -> New, di dimensione 150×70 pixel, ovvero con la stessa larghezza del bottone originale ma altezza doppia
• Per poter lavorare di precisione dovremo servirci delle griglie. Sulla nuova immagine, impostiamo quindi una griglia 5×5, selezionando la voce Configure Grid dal menu View
• Sempre dal menu View, selezioneremo Show Grid per mostrare la griglia appena impostata e Snap to Grid per ancorare oggetti e selezioni alla griglia
• Ora cliccheremo sul file realizzato con Inkscape, e con Select -> All selezioneremo l’intera immagine, per poi copiarla con Edit -> Copy.
• Torneremo sull’immagine nuova con le griglie, e dal menu Edit sceglieremo Paste per incollarla. La selezione appena incollata andrà quindi spostata in alto. Da notare come la griglia risulti d’aiuto nello spostamento:
• L’operazione andrà eseguita una seconda volta, incollando il bottone nella parte inferiore
• Dal pannello strumenti andremo quindi a premere lo strumento di selezione rettangolare, Per poi selezionare il bottone in basso
• Ora sono moltissime le trasformazioni che potremo effettuare sul bottone in stato rollover, molte delle quali sono disponibili dal menu Image -> Adjustements. Per intervenire sul colore e la saturazione ad esempio, sceglieremo Hue – Saturation, le cui modifiche sono immediatamente visibili sull’immagine spuntando la casella “Preview”
• Il nostro bottone è così ultimato, vediamo il risultato della trasformazione
• salvare il lavoro

 CSS. Oggi vediamo una tecnica da sempre consigliata per alleggerire le pagine e velocizzare i tempi di caricamento

vediamo come formattare l’HTML.

<a id="contattaci" href="#" title="contattaci"><span>Contattaci</span></a>

Questa sarà la riga HTML che mostrerà il bottone all’interno della pagina. Da notare l’attributo “ID” il cui stile verrà poi modificato tramite i CSS. E’ facile notare che la riga qui sopra in realtà non contiene link ad alcuna immagine, è semplicemente un link testuale: “Contattaci“.

Ed ora vediamo come impostare il CSS per trasformare il nostro link in un bottone con effetto rollover del mouse:

#contattaci{
  display: block;
  width: 150px;
  height: 35px;
  background: url("img/bottone.png") no-repeat 0 0;
}

#contattaci:hover{
  background-position: 0 -35px;
}

#contattaci span{
  display: none;
}

Occhio a richiamare l’immagine giusta. Io l’ho messa nella directory “img“. Il bottone è molto grande, com’è semplice notare la larghezza è quella iniziale dell’immagine (width: 150px;), mentre l’altezza è esattamente la metà (height: 35px;). Nel caso in cui il mouse non passi sopra al bottone verrà mostrata la metà superiore del bottone (i primi 106 pixel), mentre se vediamo la seconda regola alla voce “background-position” possiamo notare un valore negativo “-35px“. Questa regola posizionerà il bottone 35px in alto, facendoci di fatto vedere solo la seconda metà dell’immagine nella stessa posizione in cui si trovava la prima.

La terza regola serve semplicemente a nascondere il testo “Contattaci“.

---------------------------

https://www.html.it/articoli/bottoni-gloss-con-gimp-e-inkscape/

https://thejoe.it/2010/12/24/rollover-con-una-sola-immagine-usando-i-css/

Debian Quick Setup

• Installa Flatpak: apt install flatpak                                                     
• Installa il plug-in Software Flatpak: apt install gnome-software-plugin-flatpak                     
• Aggiungi il repository Flathub: flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo       
• Per completare l'installazione, riavvia il sistema. Ora non ti resta che installare alcune app

 ---------------------------------

https://flatpak.org/setup/Debian/