Creare un’immagine di intestazione per il tuo sito web con Gimp

Lug 15, 2020 | Grafica

creare un intestazione per il tuo sito con gimp

Vuoi sapere come creare un’immagine che faccia da instestazione per il tuo sito web e vorresti qualcosa di professionale, ma non sai come fare?
Pensi di non essere portata per i programmi di grafica professionale?
Ecco, in questo articolo troverai un tutorial su Gimp che ti spiega passo passo alcune funzioni utili che ti permetteranno di poter creare rapidamente delle grafiche accattivanti che potrai usare per creare l’intestazione del tuo sito webe altre grafiche varie, i tuoi post sui social, le tue locandine e i tuoi biglietti da visita.

Attenzione: ho detto “alcune funzioni utili” di proposito perché questa guida ha uno scopo ben preciso: metterti nelle condizioni di essere in grado di creare autonomamente delle grafiche professionali per la tua attività al più presto possibile.

Infatti, purtroppo o per fortuna, non si diventa esperti di grafica da un giorno all’altro (né di qualunque altra cosa): ci sono come al solito tanti “dipende” a cui si va incontro ogni volta che si approfondisce un argomento, quindi qui mi limiterò a spiegarti qualche funzione per dare giusto un tocco di personalità al tuo sito web; se ti spiegassi tutte le funzioni di Gimp questo articolo richiederebbe qualche giorno per essere letto tutto e avresti in testa una gran confusione per niente.

Se invece segui passo passo le istruzioni in questo tutorial potrai differenziare il tuo profilo social e il tuo sito web da quello dei tuoi colleghi in men che non si dica.

Non ci credi?

Hmm…io scommetto di sì! Ti servirà solo un po’ di pazienza, ma sono certo che potrai ottenere ottimi risultati. 😏
Ok…tanta pazienza 😁 ma il resto lo trovi tutto qui.

Proviamo?

Ok, proviamo…ma io perché dovrei usare Gimp?

Sarò molto breve: per differenziarti.

Quanti siti e quanti post hai visto con le solite immagini prese da internet? Non so tu, ma io troppi.

Ormai queste immagini sono dappertutto, perciò quando la gente gira sui siti e vede le immagini dei post sa già che non sono certo tue.

Il punto è che i siti con le immagini prese da internet, molto probabilmente su uno sfondo bianco neutro senza particolari dettagli e con qualche area qua e là di un colore scelto esclusivamente su gusto personale (quindi senza qualche minima competenza grafica), non fanno altro che indebolire il tuo brand.

Inconsciamente le persone si renderanno conto che hai dedicato poca cura al tuo sito web o al tuo profilo social, e con i siti super professionali a cui siamo abituati oggi questo non gioca affatto a tuo favore.
Un altro collegamento che facciamo inconsciamente (più o meno tutti nella maggior parte dei casi) è collegare la professionalità del profilo social e del sito web alla  professionalità della persona: se vedo un sito professionale mi aspetto un servizio più professionale.

Se apparentemente questo legame può sembrare infondato, nella maggior parte dei casi nella realtà dei fatti è proprio così: chi ha un sito e un profilo social più curato di solito ha già maturato più esperienza, ha assaporato i benefici del web, ha migliorato i propri servizi e ha investito sulle sue piattaforme.

Chi invece è all’inizio e si rimbocca le maniche col fai da te, spesso pecca anche di esperienza che la portano ad avere meno risultati e quindi meno fondi da investire per avere delle piattaforme più professionali.

Cos’è Gimp e come si installa

Gimp è un programma di grafica professionale (e fin qui c’eravamo arrivati); ok, forse non professionale come photoshop ma ci va molto vicino e in più è open source, e quindi gratuito.

Per intenderci, tutti i disegnini e le forme varie che vedi sul mio sito e su tutti quelli che ho fatto sono fatte con Gimp e in questo tutorial scoprirai che potrai fare facilmente anche tu grafiche come queste o di altra tipologia.

L’unico “neo” è che non esiste un’app per mobile, ma è solo per computer.
O meglio…esiste un’app, ma è stra-scomoda e con un decimo delle funzioni della versione desktop, quindi te la sconsiglio.

Altra premessa è che le istruzioni che troverai qui serviranno per fare un disegno ben preciso, che è quello mostrato in questo tutorial. Naturalmente puoi usare colori diversi e forme diverse da quelle proposte. Se all’inizio non ti è chiaro come si fa puoi fare un primo giro di prova seguendo tutto alla lettera, per poi fare un secondo giro con un po’ più di creatività.

 

La procedura di installazione

Per installare Gimp vai sulla pagina di download, scegli il tuo sistema operativo (se hai Windows va già bene così, mentre se hai Mac clicca su OS X, e poi clicca sul pulsante arancione “Download GIMP directly”.

Questo ti scaricherà il file di setup. Una volta scaricato aprilo e segui le istruzioni per installare GIMP.
Se Windows ti chiede se vuoi davvero eseguire il programma digli pure di sì; seleziona “italiano” come lingua di installazione, e se poi ti chiede se vuoi procedere con l’installazione personalizzata, completa o compatta, seleziona “installazione completa“.

A questo punto, finita questa operazione, dovresti trovarti l’iconcina di GIMP sul desktop o nella cartella in cui hai deciso di installarlo.

gimp loading

Durante il caricamento del programma dovresti avere una schermata simile a questa, ed è proprio a questo punto che inizia il nostro tutorial di GIMP!

 

Come usare GIMP: I livelli

Partiamo da qui: I livelli.

Ogni programma di grafica che si rispetti lavora su livelli, il che, sostanzialmente, significa che l’immagine sarà composta da tante immagini stratificate.

livelli-gimp

Questa cosa naturalmente è un enorme vantaggio, perché se l’immagine fosse composta da un singolo strato ogni modifica richiederebbe tanto ma tanto lavoro.

Ti faccio subito un esempio:

Prendiamo l’immagine di copertina di questo articolo. Se fosse una cosa unica e io volessi spostare me nel lato sinistro dell’immagine sarebbe un disastro perché dovrei cancellarmi dal lato destro, cosa che non richiederebbe poi troppo tempo…se non ci fossero tutte quelle ombre e sfumature.

Già, perché  quelle mica si fanno da sole!

In un’immagine tradizionale va disegnato tutto manualmente pixel per pixel. Se teniamo presente che il monitor di un pc normalmente ha 1920×1080 pixel possiamo velocemente calcolare che dovranno essere disegnati circa 2 milioni di puntini.

No aspetta, niente panico, non capiterà mai a una persona sana di mente di mettersi a disegnare 2 milioni di puntini, perché ci sono vari strumenti che agevolano il lavoro, come, tra i tanti, la possibilità di pennellare grandi aree, fare linee e forme geometriche facilmente (sto semplificando al massimo, spero mi perdoni chi già sa usare Gimp), ma nel caso si debba apportare qualche correzione all’immagine non è difficile trovarsi a sistemare a mano centinaia di pixels.

Tipo in questo caso dovrei ricreare  tutta la parte cancellata; la parte blu/grigia potrebbe anche essere facile perché è un colore unico, ma il grigio chiaro sotto è sfumato (anche se qui non si vede perché l’immagine è in formato gif che ha meno qualità rispetto ad un’immagine normale).

post image gimp no livelli

Se volessi cancellarmi da lì (definitivamente o per spostarmi da un’altra parte dell’immagine) verrebbe un quadrato bianco perché si cancellerebbe anche lo sfondo…che quindi dovrei rifare. Ti assicuro che non è bello. 😅

Tranquilla, con Gimp è molto meno probabile che accada perché, come dicevo, ci sono i livelli.

Prendendo sempre l’immagine di copertina di questo articolo, abbiamo diversi livelli.

Se partiamo dal fondo abbiamo:

  1. Lo sfondo bianco
  2. La prima forma tondeggiante grigino molto chiaro che sfuma verso un grigino un po’ meno chiaro
  3. Io sulla destra
  4. La seconda forma tondeggiante di un grigino azzurro, che sta sopra a tutto.
  5. Il trapezio bianco semitrasparente che contiene il titolo del post
  6. Il titolo del post
  7. L’icona di Gimp sulla sinistra
post image gimp

Quindi io in questo caso posso prendermi e spostarmi dove voglio o cancellarmi senza intaccare gli altri livelli, cioè il resto dell’immagine.

Così:

post image gimp livelli

Questo è possibile perché io non sto cancellando una parte dell’immagine, ma solo il livello in c’è la mia foto lasciando invariati tutti gli altri.

Strumenti utili per partire

Ok, capita la logica dei livelli vediamo quali sono gli strumenti che ci serviranno per partire. Non li vediamo in ordine di importanza, ma nell’ordine di quelli che ci serviranno per questo tutorial:

 

nuova immagine gimp

Dimensioni immagini

Per prima cosa seleziona “File” in alto a sinistra e quindi la voce “Nuova…”

A questo punto ti troverai un piccolo pannello come questo:

dimensioni nuova immagine gimp

Sarebbe troppo facile se ti dicessi di cliccare ok e andare avanti…infatti non lo farò.

Non lo farò perché le dimensioni dell’immagine sono importantissime ed influiscono molto sul peso in Kb o Mb dell’immagine finale.

Le dimensioni dell’immagine si possono anche modificare in corso d’opera (non è che una volta scelte sono quelle e ciao), però visto che siamo qui e ce le chiede ti spiego cosa devi fare.

Scegli le misure in pixel (px) che ti servono tenendo presente che, come abbiamo detto prima, uno schermo di solito ha una dimensione di 1920px x 1080px, come le misure che a me (e probabilmente anche a te) dà di default.

Quand’è che le dobbiamo modificare? E di quanto?

Ecco alcune misure che ti suggerisco di usare per il web:

 

  • 1080 x 1080 le dimensioni per i post sui social
  • 1080 x 1920 per le storie sui Instagram e Facebook (quindi NON 1920 x 1080 ma il contrario)
  • 820 x 315 sono le dimensioni della copertina della tua pagina Facebook (NB la copertina non è la foto profilo; la foto profilo meglio quadrata, quindi 1080 x 1080)
  • 2048 x 1152 sono le dimensioni della copertina di Youtube
  • 1536 x 768px sono le dimensioni della copertina di Linkedin
  • 700 x circa 400 (diciamo da 350 a 450) per le copertine dei post se hai una struttura tipo la mia, quindi con la barra laterale sulla destra e l’immagine sulla sinistra (riferito al computer)
  • 1080 x circa 700 se invece usi un’immagine dei post più grande, quasi a tutto schermo
  • 1920 x boh se devi fare gli sfondi delle pagine tipo quello che facciamo in questo tutorial; l’altezza dipende tutto da quello che ci vuoi disegnare, ma è consigliato non superare i 2500 pixel altrimenti potrebbe darti problemi nel caricamento dell’immagine su WordPress e sarebbe un vero peccato lavorare magari ore per poi non riuscire a caricare l’immagine.

Ho parlato dell’importanza di usare le misure giuste anche nell’articolo in cui spiego come ridimensionare un’immagine con Gimp, perciò se il tuo scopo qui è solo quello di rimpicciolire una cosa enorme che hai preso da internet ti basterà leggere quell’articolo.

Se invece vuoi usare Gimp per creare un biglietto da visita che rispecchi la tua attività di psicologo libero professionista devi assolutamente impostare i PPI e la dimensione corretta in millimetri.

Supponiamo di voler creare, in questo tutorial, un’immagine di intestazione del nostro sito web; creeremo questa:

tutorial intestazione

😆 Lo so, è più forte di me ma che ci posso fare, sono un giocherellone. 😁

Naturalmente tu userai la tua foto, non la mia, e, mi raccomando, usane una un po’ più seria (ma non per forza seriosa 😉).

Bene, detto ciò, seleziona quindi le dimensioni 1920 x 650 (se vuoi farla a tutto schermo puoi mettere 920 di altezza, se invece vuoi farla meno alta puoi anche fare 500), clicca “OK” e andiamo avanti.

Strumento “apri come livelli”

A questo punto ti troverai davanti ad un’immagine bianca e per prima cosa andremo ad aggiungere la nostra foto.

Prima di andare avanti però ci tengo a precisare che per il tuo sito è bene avere foto di qualità, possibilmente su sfondo bianco che ti permette di rimuoverlo facilmente permettendoti di posizionare la foto dove vuoi, anche con sfondi personalizzati.
Se invece vuoi tenere lo sfondo della tua foto ovviamente il risultato verrà diverso e alcune soluzioni non saranno fattibili ma te le spiegherò via via nel tutorial, proponendoti delle alternative per avere comunque un buon risultato stilistico.

Ora clicca su File, in alto a sinistra, e quindi clicca su “Apri come livelli”.
Seleziona la foto che vuoi inserire e quindi clicca su “Apri”.

La mia viene così:

immagine caricata

Come avrai certamente notato, è un po’ troppo grande. Se invece hai il problema contrario, cioè che la tua foto è troppo piccola, allora ti conviene cambiare foto e sceglierne (o farne) una più grande, perché ingrandendo una foto piccola viene tutta sgranata.

Prima di rimpicciolirla, però, voglio farti notare che se guardi sulla colonna di destra, nella metà inferiore, ora vedrai due livelli.

area livelli gimp

Quello più in alto è l’immagine che abbiamo appena importato con la funzione “Apri come livelli” (e infatti è stata aggiunta come un nuovo livello), mentre l’altro è lo sfondo bianco che ci siamo trovati davanti quando abbiamo aperto il file.

Ogni livello può essere spostato, nascosto o eliminato.

Se ad esempio vai col mouse su “Sfondo” e lo trascini sopra al livello della tua foto (oppure selezioni il livello della tua foto e lo trascini sotto lo sfondo) vedrai di nuovo tutto bianco perché il livello più in alto è quello che rimane sopra anche nell’immagine, nascondendo quelli sotto, e in questo caso abbiamo appena spostato l’area bianca sopra alla nostra foto che quindi la copre e noi non la vediamo più.

Però, se ci fai caso, vedrai che di fianco all’iconcina del livello (mi riferisco sempre all’area dei livelli cerchiata in rosso nell’ultima immagine) c’è il simbolino di un occhio. Se ci clicchi su, il livello verrà nascosto e non sarà quindi visibile nell’immagine.
Se, ad esempio, clicchi l’occhio corrispondente al livello “Sfondo” che ora dovrebbe essere in alto, lo sfondo non si vedrà più e tornerai a vedere la tua foto. Se lo riclicchi torni a vedere lo sfondo e la foto scompare.

La terza alternativa è quella di cancellare definitivamente il livello, e possiamo farlo semplicemente selezionando il livello che vogliamo eliminare e poi cliccando la X che trovi in basso a destra, proprio nell’angolo dello schermo.

In questo caso io seleziono il livello “Sfondo” e lo cancello perché non mi serve (in realtà non è vero ma per la scienza questo ed altro), e rimango quindi con solo il livello con la mia foto, che ora rimpicciolisco con lo strumento scala.

ridimensiona gimp

Ed ecco quindi, nel mio caso, il risultato.

immagine ridimensionata gimp

Ok, ora abbiamo la foto della dimensione giusta, ma decisamente nel posto sbagliato.

Inoltre avrai certamente notato che l’immagine è piena di quadratini grigi ma questo è assolutamente normale perché sta ad indicare che non c’è niente e che lo sfondo è trasparente.

NB: se scarichi delle immagini in formato png da internet e hanno lo sfondo con questi quadratini, è molto probabile che siano trasparenti (probabile, non certo, perché a volte i quadretti sono “finti” nel senso che non è veramente trasparente ma ci sono proprio i quadratini disegnati).

Strumento “sposta”

Sempre dall’area strumenti in alto a sinistra, seleziona il pulsante che raffigura una specie di ancora a quattro punte.

strumento sposta gimp

Dopodiché clicca su un punto nell’immagine che vuoi spostare e spostala dove vuoi.
Se non riesci a completare questa operazione puoi seguire il tutorial dove spiego in modo più approfondito come spostare le immagini con Gimp.

Nel mio caso la sposto sulla destra. Così:

immagine spostata gimp

Crea livello

Ok, fantastico, abbiamo la nostra immagine al posto giusto e delle dimensioni giuste. Abbiamo fatto il primo passo. 🙂

Ora creiamo lo sfondo e lo faremo in un nuovo livello; quindi clicchiamo su “crea livello” che è il pulsantino nell’area dei livelli.

crea livello gimp

Ti si aprirà una finestrella con le impostazioni del nuovo livello che stai andando a creare.

Le voci importanti sono:

  • Il nome del livello, che ci servirà per riconoscere i livelli nell’elenco (in questo caso possiamo chiamare “sfondo”)
  • Larghezza, che in questo caso lasciamo così ma se volessimo creare qualcosa di piccolo potremmo ridurre
  • Altezza, idem con patate
  • Riempi con: puoi riempire di bianco, del colore primario che hai selezionato, del secondario, o lasciarlo trasparente; per ora lasciamolo trasparente
impostazioni nuovo livello gimp

Premi “OK” e l’unica cosa che noterai è che ci sarà un nuovo livello visibile nell’area dei livelli sulla destra, ma nell’immagine non sarà cambiato nulla proprio perché il livello che abbiamo appena aggiunto è trasparente.

Quindi ora lo coloriamo, e per farlo usiamo lo strumento pennello.

strumento pennello gimp

Prima di pennellare però dobbiamo fare 2 cose:

  1. Dobbiamo invertire i livelli perché vogliamo che la foto resti visibile
  2. E dobbiamo selezionare il colore che vogliamo usare per pennellare

Quindi, prima di tutto seleziona il livello che contiene la tua foto, dall’area dei livelli in basso a destra e mettila come prima dell’elenco, in modo che lo sfondo vada sotto e faccia, appunto, da sfondo.
Dopodiché, cosa molto importante, prima di andare avanti accertati che sia selezionato il livello di sfondo, sempre dall’area dei livelli di destra, altrimenti quando inizierai a pennellare lo farai sulla foto anziché sullo sfondo…e non è questo che vogliamo. 😅

Poi cambiamo colore e per farlo clicca sul rettangolino nero che vedi appena sotto gli strumenti, in alto a sinistra.

La tavolozza colori

seleziona colore gimp

Ti si aprirà una finestrella con cui potrai scegliere un colore qualunque in tutta la gamma di colori possibili.

tavolozza colori gimp

Clicca in un punto qualsiasi con il mouse all’interno dell’area A per scegliere l’intensità e la luminosità del colore, e clicca in un punto qualsiasi della colonna B per scegliere il colore.

Se vuoi un colore bianco ti basterà puntare nell’angolo in alto a sinistra dell’area A, a prescindere da quello che c’è nella colonna B, mentre se vuoi tutto nero dovrai puntare il punto più in basso dell’area A, destra o sinistra non importa.

Un altro modo per scegliere il colore, se ne hai già deciso uno (ad esempio con strumenti come coolors che ti permette di creare facilmente una tua palette di colori), è riportare il codice esadecimale del colore che hai scelto nell’area C.

Faccio un breve excursus sui codici esadecimali. Negli esadecimali i caratteri vanno da 0 a 15 solo che dal 10 al 15, per usare un solo carattere, si usano le lettere dalla A alla F. Quindi il codice #000000 è nero, mentre il codice #FFFFFF è bianco.

Naturalmente con gli esadecimali si possono rappresentare tutti i colori possibili, per cui ad esempio #FF0000 è rosso, #00FF00 è verde e così via.

Nel mio caso ho scelto un azzurro chiaro con codice 87bff9. Quando hai scelto il tuo colore premi ok.

Bene, a questo punto ingrandiamo il pennello a dismisura e coloriamo tutta l’area.
La voce per fare questo la trovi nella colonna di sinistra; se hai problemi e non riesci a ingrandire il pennello puoi dare un’occhiata al tutorial che spiega come usare il pennello di Gimp.

Ed ecco il risultato:

sfondo azzurro gimp

Il grande cerchio tratteggiato che vedi è il mio pennello.

Ora che abbiamo il nostro sfondo…beh, c’è quella roba bianca intorno alla nostra foto che noi non vogliamo, e quindi la togliamo.

Per farlo selezioniamo (dall’area dei livelli in basso a destra) il livello che vogliamo scontornare e lo scontorniamo; trovi tutta la procedura nell’articolo in cui spiego passo per passo come togliere lo sfondo dalle foto con Gimp.

risultato senza sfondo gimp

Ora non ci resta che fare il livello con le forme tonde. Creiamo un nuovo livello trasparente, come abbiamo fatto prima, con il pulsante che trovi sotto all’area dei livelli e, se non lo è già, lo mettiamo in prima posizione, cioè più in alto di tutti.

Ora riprendiamo lo strumento pennello, selezioniamo un altro colore dalla tavolozza dei colori (nel mio caso scelgo un grigio con codice esadecimale #cccccc), impostiamo le dimensioni del pennello a 500 a facciamo una pennellatona sull’angolo in basso a destra.

Facciamo un semplice clic, senza trascinare.

primo cerchio

Ora dobbiamo fare il contrario, cioè vogliamo che la curva continui verso il basso e poi torni su. Per fare questo dovremo riempire un po’ di spazio che popi andremo a cancellare con lo strumento gomma. Andando avanti ti sarà tutto più chiaro.

Ora vado a riempire solo lo spazio necessario, non di più, altrimenti non verrà cancellato; lo faccio semplicemente con un paio di pennellate.

altre pennellate pregomma

Il cerchio tratteggiato che vedi è la gomma (che trovi sempre nell’area strumenti, accanto al pennello, e ha le stesse identiche impostazioni e funzionamento del pennello solo che cancella anziché disegnare), che ho ingrandito a 580 e ho posizionato nel punto in cui voglio cancellare.

Come ora puoi capire, le pennellate le ho fatte in modo che, una volta cancellata l’area, la curva proseguisse. La pennellata centrale arriva a filo con il punto di contatto tra la gomma e il primo cerchio che abbiamo fatto, mentre l’ultima è un po’ più approssimativa, visto che dobbiamo ancora disegnare in quell’area.

Ora cerco di posizionarmi in modo preciso (ingrandisco l’immagine per essere preciso e arrivare giusto a contatto col bordo del cerchio precedente per non far venire degli scalini) e clicco per cancellare.

prima onda

Ecco fatto! 😃 Abbiamo così ottenuto la nostra prima onda!

Ora voglio proseguire con una variazione, aggiungendo una grossa linea che punta verso l’alto.

Per farlo devo cambiare tipo di pennello, quindi prima di tutto riseleziono il pennello per evitare di cancellare cose che non voglio cancellare; poi clicco sul cerchio che indica il tipo di pennello che sto usando e seleziono il rettangolo.

tipo di pennello

Ora che ho selezionato il pennello rettangolare voglio impostarlo come serve a me, quindi metto:

Dimensione 400 perché penso che crei una riga abbastanza grossa.

Angolo 45 perché quell’angolo segue la linea interrotta dell’ultimo cerchio.

Durezza 100 perché altrimenti le pennellate vengono con i bordi un po’ sfumati, cosa che non voglio.

Ora mi posiziono in modo che il bordo del lato lungo in alto coincida con la curva tagliata e clicco.

riga diagonale gimp

Ora riseleziono il pennello tondo, riseleziono la gomma da cancellare, imposto le dimensioni a 200 e vado a cancellare il pezzo di cerchio rimasto creando una curva contraria a quella che c’è ora. Così:

seconda onda

Cosa ci manca? La testa della riga che va verso l’alto.

Quindi riselezioniamo il pennello e lo impostiamo di una dimensione che combaci con la larghezza della riga (nel mio caso 100).
Mi posiziono poi in modo da avere metà pennello dentro la riga e metà fuori e clicco.

riga con testa tonda

Ora, nella stessa identica maniera, faccio un’altra riga diagonale con testa tonda poco più a sinistra, come se sbucasse da sotto.
Quindi di  nuovo seleziono il pennello rettangolare, dimensioni 400, angolo 45 e durezza 100. Clicco, poi pennello tondo, dimensione 100 e clicca sulla testa della riga.

riga 2

E poi, per equilibrare un po’, un’altra sulla sinistra, questa volta che parte da dentro l’immagine e fa per uscire.

riga 3

Ecco fatto!

Beh, se sei arrivata fin qui ed è il tuo primo disegno devi esserne super entusiasta! 😃

Ora aggiungiamo qualche dettaglio per dare quel tocco di modernità che si usa oggi e rende il contesto più professionale.

I dettagli che andremo ad aggiungere sono 2:

  1. La sfumatura
  2. La profondità

La sfumatura

Se ci fai caso, molti dei siti web moderni (fatti da chi li sa fare) spesso non hanno colori a tinta unita, ma sfumature che ne danno un aspetto quasi tridimensionale.

Per ottenere questo effetto è bene tenere presente che la sfumatura deve essere leggera, quindi non si passerà, per esempio, dal blu al rosso, ma da un blu scuro a un nero, oppure a un blu un po’ meno scuro.
Da un rosa non si arriverà a un rosso e nemmeno a un bianco. Meno. La sfumatura deve essere leggera.

Può esserci una variazione di luminosità o una variazione di colore, ma sempre molto leggera.
Ad esempio nel mio caso, poiché ho usato un grigio con codice #cccccc, passerò a un grigio con codice #999999.

 

Ora, per fare la sfumatura, dopo aver selezionato colore che voglio usare (nel mio caso un grigio un po’ più scuro) devo dirgli che cosa voglio sfumare, quindi uso lo strumento “seleziona per colore“.

seleziona per colore

Imposto la soglia a 40 (la trovi nella colonna di sinistra sotto il colore) così sono sicuro che mi prende anche i bordi, dopodiché seleziono il pennello e scelgo quello più sfumato tra tutti.

pennello sfumato

Lo imposto alla dimensione di 2000, imposto lo zoom a 50% così riesco a vedere tutto e a posizionarmi fuori dall’immagine, l’opacità del pennello a 70%, mi posiziono quindi fuori dall’angolo in basso a destra (più sotto che a destra) e faccio un clic.

colore selezionato

Come al solito, il cerchiolone che vedi è il pennello posizionato nel punto in cui ho già cliccato (infatti si nota la sfumatura), e tutte le parti grigie sono selezionate perché le abbiamo selezionate prima con lo strumento “seleziona per colore“.

Allo stesso modo mi posiziono appena fuori dal bordo di sinistra e sfumo il lato sinistro. Ed ecco il risultato:

seconda sfumatura

Ora tocca allo sfondo.
Clicca su “Seleziona” dal menù in alto, e quindi “niente” per deselezionare l’area che avevi selezionato; dopodiché, dall’area dei livelli in basso a destra, seleziona lo sfondo, seleziona una variazione di colore (nel mio caso un azzurro ancora più chiaro), imposta il pennello a 4000 circa, posizionati sopra il bordo in alto, vicino all’angolo, e clicca una volta.

sfuma sfondo

Si vede poco (volevamo giusto un effetto non troppo evidente), ma l’angolo in alto a destra tende ad un azzurro più chiaro. Ecco che abbiamo fatto le nostre sfumature. Ora diamo un po’ di profondità al tutto.

La profondità

Per dare l’effetto della profondità facciamo due cose:

  1. Creiamo delle ombre
  2. Creiamo degli elementi più piccoli e più trasparenti che staranno in secondo piano

Per prima cosa selezioniamo il livello con le forme tonde e lo duplichiamo.

duplica livello

Step 1

Così abbiamo due livelli identici e questo ci servirà per fare l’ombra.

Siccome l’ombra è solitamente nera e non grigia sfumata, clicchiamo su “Colori” dal menù in alto, e quindi scorriamo giù fino a che non troviamo la voce “Colorizza“.

colorizza gimp

Ci si aprirà una finestrella con un colore di default, e tutto il livello (ad eccezione delle aree trasparenti) cambierà colore.
In questo modo puoi cambiare colore facilmente a qualunque cosa, ma a noi, in questo caso, ci serve l’ombra, quindi clicchiamo sul rettangolo colorato per aprire la tavolozza dei colori, e selezioniamo il nero.

livello nero

Non sembra ancora un’ombra, vero?
Lo so, ma siamo sulla buona strada.

Prendiamo lo strumento scala (dall’area strumenti in alto a sinistra) e ingrandiamo il livello prendendolo dall’angolo in alto a destra. Ma giusto un pochino pochino; io l’ho ingrandito fino ad arrivare ad una larghezza di 2000.

ridimensiona ombra

Poi, dall’area dei livelli in basso a destra, selezioniamo questo livello e lo portiamo sotto a quello delle curve grigie, ma sopra agli altri; quindi sarà in seconda posizione e avremo un risultato come questo:

ora sembra un ombra

Somiglia già di più ad un’ombra, vero? Se ti piace questo stile puoi anche finire qui, direi che sembra già professionale, no?
Non dovrai far altro che caricare l’immagine sul tuo sito e mettere il testo nello spazio a sinistra. Tieni presente però che un’immagine come questa sarà perfetta per il desktop ma non adatta per mobile. Per questi ultimi ci vorrà qualcosa di più alto e stretto, ma ti basterà spostare i livelli per adeguarti agli spazi che richiesti. 😉
In fondo all’articolo spiego come fare questo e come esportare l’immagine se pensi di aver finito, per poterla usare sul tuo sito web.

Se invece preferisci uno stile più realistico, nessun problema: possiamo fare di meglio!

Step 2

Vai su “Filtri“, dal menù in alto, e andando sulla voce “Sfocature” ti si aprirà un’ulteriore sottomenù dal quale selezionerai la prima voce: “Sfocatura Gaussiana“.

Utilizzando le freccine, imposta i valori a 10,50 (modificandone uno dovrebbero modificarsi entrambi automaticamente).

Sfocatura Gaussiana gimp

Ora, nell’area dei livelli in basso a destra, appena sopra ai livelli, noterai una barra che riporta la scritta “Opacità“.
Questa ti permette di impostare la trasparenza dei singoli livelli, per cui, assicurandoci che sia selezionato sempre il livello dell’ombra (che nel mio caso porta l’originalissimo nome di “Nuovo livello copia“), ora impostiamo l’opacità a 40, ed ecco che la nostra ombra assume un aspetto più realistico.

opacità gimp

Ultimi ritocchi

Ora, per dare un tocco in più alla nostra immagine, creiamo un altro livello con delle palline che terremo in semi trasparenza, quasi come se fossero in sfondo.

Dall’area livelli in basso a destra clicchiamo ancora una volta, dai pulsanti in basso, su crea nuovo livello.

nuovo livello gimp

Questo livello servirà per dare un altro po’ di profondità all’immagine, perciò posizioniamolo sotto al livello che contiene l’ombra.

Nel mio caso questo volta cerco di essere un po’ meno pigro del solito e gli do un nome, lo chiamo “Elementi di sfondo” e lo posiziono sopra allo sfondo ma sotto a tutti gli altri, perché voglio che sia le forme tonde che la mia foto vengano sopra agli elementi che sto per creare.

elementi di sfondo gimp

A questo punto selezioniamo di nuovo lo strumento pennello dall’area degli strumenti in alto a sinistra, scegliamo un colore che sia simile a quello che abbiamo usato per le forme tonde, ma più scuro.

Ad esempio, se hai usato un viola per le forme tonde, qui userai un viola scuro. Se hai usato un giallo userai un giallo più scuro e così via.
Io ho usato un grigio chiaro, il #cccccc che però sfumava fino al #999999, quindi qui uso un #666666, che è ancora più scuro.

Selezionato il colore e selezionato il pennello tondo senza sfumature, andiamo a fare delle piccole pennellate tonde qua e là, senza trascinare il pennello e variando le dimensioni, andando spesso, ma non sempre, un po’ sotto agli altri elementi dell’immagine.

Così:

elementi di sfondo applicati

Ora, esattamente come abbiamo fatto per l’ombra, riduciamo l’opacità del livello per renderlo più trasparente, quindi prendiamo la barra opacità che vedi appena sopra ai livelli e con le freccine, o trascinando il mouse dal centro della barra verso sinistra, porta il valore di opacità a 30 e otteniamo questo:

elementi sfondo trasparenti

Infine aggiungiamo un ultimo livello che chiamiamo elementi di sfondo 2 e che mettiamo sopra al livello attuale, cioè elementi di sfondo, e disegniamo degli altri cerchi, ma per non creare troppo pasticcio questa volta ne facciamo solo 2 o 3, sempre di dimensioni diverse e cercando questa volta di sovrapporli almeno in parte ai cerchi appena creati.

Dovrebbe venire una cosa simile:

elementi sfondo 2

Ora riduco l’opacità anche di questo livello e la porto a 40, e TADAAA! Ecco che abbiamo finito!

A questo punto se hai usato questo tutorial come allenamento dovresti avere un risultato molto simile a questo; se invece l’hai usato per sviluppare la tua idea dovresti avere qualcosa che abbia una profondità e una tridimensionalità, con i colori da te scelti, ma che siano cerchi, ovali, quadrati o altre cose poco importa.

Sono certo che il risultato sarà comunque bello e soddisfacente. 🙂

Ora, cosa super importante, salva il file.
A questo proposito, se vai su file, salva o salva con nome, ti salverà il file in formato xcf, che è il formato di lavoro di Gimp. Quello sarà il file che conterrà tutti i livelli che hai creato e che potrai modificare quando vorrai, perciò non cancellarlo ma assicurati di averne sempre una copia!

Però il file xcf non è utilizzabile sul web e per molte altre cose, quindi ci serve un file in formato jpg, o png se nella tua immagine c’è uno sfondo trasparente, che si possa adattare a qualunque cosa tu lo metta.
Per avere questi tipi di immagine dobbiamo esportarla, quindi vai su File e “Esporta“; questo ti permetterà di salvare l’immagine in jpg o png, per poterla poi utilizzare sul tuo sito web.

Come adattare per mobile l’intestazione del tuo sito creata con gimp

Se il tema che stai usando ti consente di impostare delle immagini specifiche per i vari dispositivi (Divi te lo consente di sicuro) e devi modificar l’intestazione che hai appena creato con Gimp, ti basterà spostare i vari livelli in modo da farlo stare in uno spazio più verticale che orizzontale, cercando di pensare comunque di lasciare dello spazio per il testo che metterai; per modificare le dimensioni dell’immagine non dovrai far altro che andare su “Immagine” dal menù in alto, e cliccare su “Dimensione superficie“.

Modificando il valore di questo tutorial che è 1920×650 a 700×900, e spostando i vari livelli (selezionando lo strumento sposta e quindi trascinando gli elementi di ogni livello tranne lo sfondo che andrà adattato), ottengo questo:

verticalizza 1

Non sono stato preciso, volutamente, perché magari non sei riuscita o non hai capito bene cosa sarebbe successo al primo colpo.

Ecco, se hai seguito le indicazioni è successo questo! 🙂
Lo spazio è più stretto e più alto, quindi naturalmente molte cose non si vedono, ma, soprattutto, abbiamo un problema: una parte dell’immagine è scoperta.

Per risolvere questo problema con i vari elementi è facile: li spostiamo a destra, sinistra, su, giù (in questo caso solo giù) per metterli dove stanno meglio per lo spazio che c’è, ma il problema è lo sfondo perché se lo spostiamo sarà sempre troppo basso, visto che era alto 650 pixel e ora l’immagine è alta 900 pixel.

Quindi lo ridimensioniamo, come abbiamo fatto per l’ombra. Usiamo lo strumento scala, che trovi nell’area degli strumenti in alto a sinistra, e lo ingrandiamo finché non arriverà ad un’altezza di 900, poi diamo ok; in questo modo sarà abbastanza grande da occupare tutto lo spazio.

In generale ti consiglio di evitare di ingrandire le immagini perché perdono di qualità, ma in questo caso che si tratta solo di uno sfondo (nel mio caso) azzuro sfumato verso un azzurro più chiaro, non si nota, perciò possiamo procedere.

Il risultato, alla fine, spostando i vari livelli perché si integrino bene nello spazio che abbiamo, sarà questo:

intestazione mobile

Ecco fatto! Così anche qui, sopra hai dello spazio per scriverci qualcosa.

Spero che questo tutorial ti sia stato utile e se hai dubbi o domande scrivimi pure nei commenti qui sotto. 🙂

Buon lavoro!

Ti è piaciuto l’articolo?
Hai altri suggerimenti o riflessioni che vorresti condividere con i tuoi colleghi che leggeranno questo articolo?
Scrivile usando il modulo dei commenti qui sotto 👇

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Psst! Mi trovi anche sui social!

Marketing per psicologi: la strategia dalla A alla Z

Stai cercando una efficace strategia di marketing per psicologi perché non sai da dove cominciare a promuoverti? Oppure perché hai provato l'ennesimo corso dell'ennesimo imprenditore/business/life coach/entrepreneur/healthfitlifestyle tizio che ti vende il metodo...

Aprire uno studio di psicologia: dalla burocrazia al marketing

Ci siamo dottoressa! La laurea c'è, la specializzazione anche, partita IVA aperta e ora è arrivato il momento di aprire uno studio di psicologia tutto tuo! Per avviare la libera professione e aprire il tuo studio di psicologia hai bisogno di: Uno studio (a meno che tu...

Togliere lo sfondo dalle foto con Gimp

Buongiorno doc! In questo tutorial vediamo come togliere lo sfondo dalle foto o dalle immagini usando Gimp. Inutile dire che questo tutorial non ha lo scopo di farti diventare un grafico professionista, ma di permetterti di conoscere qualche nozione base di grafica...

Come creare un sito web se sei una psicologa – Tutorial fai da te PRO

Sei una psicologa e hai deciso di creare un sito web, ma non essendo un esperta di siti non sai da dove cominciare? Bene, questo non è uno dei tanti articoli con due informazioni in croce, ma l'inizio di un vero e proprio tutorial per creare un sito web se sei una...

Come si usano i plugin di WordPress

Buongiorno doc! Stai imparando a creare il tuo blog ma non sai come si usano i plugin di Wordpress? Rimediamo subito! I plugin sono delle funzionalità aggiuntive installabili sul tuo sito Wordpress, che ti permettono di fare quasi qualunque cosa. Forse anche senza...

Psicologi e effetto di sovraesposizione

Buongiorno dottoresse e dottori, scusate se vi ho lasciato in suspence per tutto il weekend ma adesso mi faccio perdonare ssssubito! Nell'ultimo video ho parlato dell'importanza di usare bene i social e ho concluso con il concetto di sovraesposizione...di cui non vi...

Codice deontologico VS marketing parte 6

Buongiorno dottoresse e dottori! Partiamo subito con l'articolo 20: "Nella sua attività di docenza e formazione lo psicologo stimola negli studenti l'interesse per i principi deontologici, ispirando ad essi la propria condotta professionale." In questo caso parliamo...

Gli psicologi possono fare marketing?

Ancora troppe volte la risposta è che gli psicologi non possono fare marketing per paura di andare contro il codice deontologico. Ma c'è davvero da avere paura del codice?E se invece il codice stesso sostenesse il marketing? Io penso che il problema non sia il codice,...

Codice deontologico VS marketing parte 8

Buongiorno dottoresse e dottori, siamo all'ottavo video di analisi del codice deontologico per vedere se limita in qualche modo la possibilità di promuoversi degli psicologi. Riprendiamo dall'articolo 25, che dice: "Lo psicologo non usa impropriamente strumenti di...

Come usare le storie sui social per promuovere la tua attività di Psicologo

Buongiorno dottoresse e dottori, come anticipato nell'ultimo video su come si racconta una storia (che se non hai visto ti consiglio di andare a vedere immantinente), oggi parliamo di come usare le storie sui social. Quelle che pubblichiamo tutti i giorni sui social....

Richiedi una consulenza gratuita

Compila il modulo inserendo i tuoi dati e spiegando brevemente la tua richiesta.

Rispondo entro 24 ore

Contattami

Accettazione Privacy