[TUTORIAL] Creare un Baloon dei Commenti

Volete indire un contest o ne siete messaggeri? Volete far vedere cosa siete riusciti a fare o vi domandate come ottenere un determinato risultato? Trascinate con voi nella discussione gli altri utenti in questa sezione del forum!
Rispondi
Groove's Man
Utente avanzato
Utente avanzato
Messaggi: 30
Iscritto il: sab 19 feb 2011, 20:48

[TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Groove's Man » dom 28 ago 2011, 16:34

CREARE UN BALOON DEI COMMENTI

ANTEPRIMA:

Immagine


Salve, oggi ho intenzione di spiegare come creare un baloon che spesso vediamo nei siti web / blog per indicare il numero dei commenti.

PREMESSA

Bene come prima cosa apriamo The Gimp, impostiamo una qualsiasi grandezza e, se volete piazzarlo in un sito, inserite uno sfondo trasparente altrimenti utilizzate uno sfondo bianco.
Ricordatevi di non seguire alla lettera questo tutorial, come dico semrpe: "Meglio essere il più creativo possibile". Quindi, sbizzarritevi con i colori, con le forme e con le opacità! Io darò semplicemente delle linee guida.

PRIMO PASSAGGIO - La selezione:

Creiamo 5 livelli per velocizzarci il lavoro. Il primo (che dovete selezionare) lo chiamiamo "ESTERNO".
Ora, prendiamo lo strumento "SELEZIONE RETTANGOLARE" e, con gli SPIGOLI ARROTONDATI a 33,5, creiamo una selezione.

SECONDO PASSAGGIO - I colori esterni:

Utilizziamo un gradiente per colorare l'esterno del baloon. Io ho scelto:
Scuro :- 5d55a6
Chiaro:- 00b4ff

Il primo è quasi un viola, il secondo è un azzurro. Come ho detto prima, cercate di usare colori di ogni tipo rispettando però la tonalità: prima scuro e poi chiaro. Sempre con la selezione attiva, usiamo lo strumento sfumatura (o gradiente... comunque per chi avesse altri nomi, utilizzare la shortcut L). Tenendo premuto CTRL, tiriamo una riga dall' alto verso la base che passa per il punto più alto della selezione fino alla parte più bassa. Ora dovreste avere una situazione simile:

Immagine

TERZO PASSAGGIO - Colorare la parte interna:


Tenendo sempre la selezione precedente (chi l'avesse già tolta, vada sul livello, ci clicchi sopra con il tasto destro e prema "Alpha a selezione"), andiamo su: SELEZIONA - RIDUCI e riduciamo di 8. Clicchiamo, poi, sul nuovo livello che chiameremo "INTERNO" e con i colori di prima piu lo strumento gradiente, andiamo a rifare lo stesso passaggio di prima ma al contrario, ovvero dal basso verso l'alto.

Ora dovreste avere questa situazione:

Immagine

QUARTO PASSAGGIO - Il riflesso sul baloon:

Clicchiamo su un nuovo livello (superiore al baloon interno) e chiamiamolo "Riflesso". Con la selezione precedente attiva, andiamo a prendere lo strumento selezione CIRCOLARE e premendo MAIUSC+CTRL (oppure cliccare dove c'è scritto Modalità - Interseca con la selezione corrente) andaiamo a selezionare la parte più in alto del baloon. ES:

Immagine

Ora, prendiamo il colore bianco, lo strumento gradiente e, nel suo menu (menu gradienti), andiamo a selezionare il gradiene: da pp a Trasparente. L'immagine è questa:

Immagine

Ora settiamo l'opacità DEL LIVELLO tra 33 e 40. Dovreste avere una cosa simile:

Immagine

QUINTO PASSAGGIO - La parte più difficile, il triangolo:

Adesso inizia la parte più difficile. Difficile perchè è possibile sbagliare, farlo storto o tagliuzzato. Ma questo non è un problema, basta stare attenti. Torniamo al livello "Esterno" e nella parte in basso a destra (o in basso a sinistra, come volete voi) facciamo il triangolino per dargli il vero aspetto del fumetto. Per farlo utilizziamo la SELEZIONE A MANO LIBERA. Diamo 4 click: il primo nella parte poco fuori il baloon, poi ne diamo un altro verso il basso, il secondo in linea con il primo ma verso destra e infine li ricolleghiamo; naturalmente potete entrare dentro la parte esterna del fumetto, l'importante è non invaderla troppo. Infine la coloriamo del colore più chiaro che abbiamo messo, in questo caso: 00b4ff.

ES:

Immagine

SESTO PASSAGGIO - La calma dopo la tempesta, il contorno:

Prendiamo un nuovo livello, spostiamolo sopra il livello "Esterno" (che dovrebbe avere l'aggiunta del triangolo) e chiamiamolo "Contorno". Click sul tasto destro del mouse sul livello "Esterno" e premete su "Alpha a Selezione". Ora vi dovrebbe selezionare il contorno del baloon; andate su: SELEZIONA - BORDO, su "SELEZIONE BORDO DI" mettete 1 e spuntate la casellina "Margini sfumati". Ok, con il colore nero ad un opacità del 20% - 30% andate a colorare dentro il bordo. Ricordatevi che per colorarlo lo dovete fare nel livello "Contorno". Adesso seguite questi passaggi: SELEZIONA - ALLARGA - 5px. FILTRI - SFOCATURE - GAUSSIANA - 5,00px e 5,00px.
Il problema è che abbiamo anche la sfocatura fuori dal baloon. Niente paura, cliccate sul livello "Esterno" e rifate un alpha a selezione. Ora tornate sul livello "Contorno" e fate SELEZIONA - INVERTI e premete CANC. Il gioco dovrebbe essere fatto.

Risultato:

Immagine

SETTIMO PASSAGGIO - La fine, l'ombra:


Siamo arrivati alla fine. Nell'ultimo livello (che chiameremo Ombra) rimasto prendiamo la SELEZIONE CIRCOLARE e facciamo una piccola e ristretta selezione, spuntando la casellina "margini sfumati" al 10% . Coloriamo con un nero con l'opacità al 20%.

RISULTATO FINALE:


Immagine

Il numero l'ho inserito io. Grazie a tutti per la visione, se avete qualche problema scrivete pure. Chi vuole inviarmi il proprio lavoro può farlo spedendomi un pm con l'immagine in allegato, oppure può postarlo direttamente qui.

___________________________________________________________________________________________

Gudia creata interamente da Groove's Man. Vietata la copia parziale o totale della guida senza l'autorizzazione dell'autore.
Ultima modifica di Groove's Man il lun 12 set 2011, 13:48, modificato 1 volta in totale.

Avatar utente
morafoto
Mastro Gimper
Mastro Gimper
Messaggi: 310
Iscritto il: dom 28 nov 2010, 17:01
Località: Veneto
Contatta:

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da morafoto » lun 29 ago 2011, 20:21

Uso gimp per il fotoritcco, resto sempre affascinato da chi riesce a creare "clip art" in cui io sono assolutamente impedito. Niente da fare... open, gratis ed un gran del software!
Complimenti per la guida, mi tornerà comoda per fare qualche bottone del sito.
L'esperienza e' il tipo di insegnante piu' difficile. Prima ti fa l'esame, e poi ti spiega la lezione.

http://www.mora-foto.it - Tutorial Gimp e Fotografia

Groove's Man
Utente avanzato
Utente avanzato
Messaggi: 30
Iscritto il: sab 19 feb 2011, 20:48

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Groove's Man » mar 30 ago 2011, 10:18

Beh, che dire, grazie mille ^^. Anchio ho sempre usato gimp per fotoritocchi, compositing, ma poi mi sono dato all'ippica (ovvero ai button-icone) quando ho dovuto fare il mio sito. Da allora ho sempre approfondito le mie conoscenze fino ad arrivare ad un buon punto.

Avatar utente
Lazza
Amministratore
Amministratore
Messaggi: 6220
Iscritto il: dom 5 set 2004, 13:06
Località: Borso del Grappa, Treviso
Contatta:

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Lazza » sab 10 set 2011, 14:25

Groove's Man ha scritto: Salve, oggi ho intenzione di spiegare come creare un baloon che spesso

vediamo nei siti web / blog per indicare il numero dei commenti.
Perché le righe sono tagliate a metà e intervallate da spazi bianchi? Così diventa un incubo leggere... :roll:
Consigli:
  • Cercate prima di postare
  • Rispondete se vi chiediamo chiarimenti
  • Segnate la risposta che vi ha risolto il problema, con l'apposito bottone
  • Valutate cosa si può postare nelle domande di base

Groove's Man
Utente avanzato
Utente avanzato
Messaggi: 30
Iscritto il: sab 19 feb 2011, 20:48

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Groove's Man » sab 10 set 2011, 20:27

Chiedo scusa, ma avendo scritto tutto la guida su un file .txt (per salvare in caso mi potesse servire in futuro) quella schifezza di editori mi ha gestito lui le righe buttandole a capo quando voleva. In caso ci fossero dubbi posso mostrare il file e le immagine relative al tutorial.

Avatar utente
Lazza
Amministratore
Amministratore
Messaggi: 6220
Iscritto il: dom 5 set 2004, 13:06
Località: Borso del Grappa, Treviso
Contatta:

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Lazza » dom 11 set 2011, 8:21

Groove's Man ha scritto:Chiedo scusa, ma avendo scritto tutto la guida su un file .txt (per salvare in caso mi potesse servire in futuro) quella schifezza di editori mi ha gestito lui le righe buttandole a capo quando voleva.
Mi pare strano... Che editor usi? Forse in questi casi è meglio scrivere il documento con qualcosa tipo LibreOffice, senza mettere formattazioni ma solo avendo il testo liscio, e poi il copia-incolla dovrebbe andare bene. Se riesci, metti a posto il primo messaggio così si va meglio a leggere. :)
Consigli:
  • Cercate prima di postare
  • Rispondete se vi chiediamo chiarimenti
  • Segnate la risposta che vi ha risolto il problema, con l'apposito bottone
  • Valutate cosa si può postare nelle domande di base

Groove's Man
Utente avanzato
Utente avanzato
Messaggi: 30
Iscritto il: sab 19 feb 2011, 20:48

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Groove's Man » lun 12 set 2011, 13:44

Uso semplicemente l'editor di testi "Blocco Note" di windows, se riesci a darmi un tuo contatto ti spedisco l'intera cartella contenente: Immagini, Xcf, Testo.

vincenzojrs
Moderatore
Moderatore
Messaggi: 904
Iscritto il: ven 12 nov 2010, 18:56
Contatta:

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da vincenzojrs » lun 12 set 2011, 13:46

Blocco note 8O
Perche non usi open office o word?
Ciauz!

Groove's Man
Utente avanzato
Utente avanzato
Messaggi: 30
Iscritto il: sab 19 feb 2011, 20:48

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Groove's Man » lun 12 set 2011, 13:50

In quel momento mi era più semplice utilizzare quello. Word fa schifo per le sue funzionalità obsolete, 100 volte meglio openoffice. Naturalmente non avevo ne tempo ne la possibilità di utilizzarlo (essendo sul mio 2° pc).

Avatar utente
Lazza
Amministratore
Amministratore
Messaggi: 6220
Iscritto il: dom 5 set 2004, 13:06
Località: Borso del Grappa, Treviso
Contatta:

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Lazza » lun 12 set 2011, 13:51

In effetti basta un semplice blocco note per scrivere qui nel forum. È strano che faccia questo disastro però. Non serve che mi mandi tutto, ora il messaggio è molto più leggibile. :)
Consigli:
  • Cercate prima di postare
  • Rispondete se vi chiediamo chiarimenti
  • Segnate la risposta che vi ha risolto il problema, con l'apposito bottone
  • Valutate cosa si può postare nelle domande di base

Groove's Man
Utente avanzato
Utente avanzato
Messaggi: 30
Iscritto il: sab 19 feb 2011, 20:48

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Groove's Man » lun 12 set 2011, 13:57

Comunque le prossime volte utilizzerò un altro editor!

Avatar utente
donGoGo
Amministratore
Amministratore
Messaggi: 1436
Iscritto il: mer 11 lug 2007, 10:14
Contatta:

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da donGoGo » lun 24 ott 2011, 22:53

Grazie per la condivisione...inserito in http://gimpitalia.it/resources/ :wink:

Avatar utente
samsupergimp
Principiante
Principiante
Messaggi: 2
Iscritto il: gio 29 dic 2011, 18:38

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da samsupergimp » ven 30 dic 2011, 17:03

Ciao Groove's Man, bellissima giuda. Anche io ho realizzato il mio ballon, il problema che non sono riuscito a completare il sesto passaggio, ovvero non sono riuscito a colorare la selezione di bordo e non capisco il perchè. Ad ogni modo questa è la mia realizzazione:
Immagine
Grazie ancora per la guida.

Groove's Man
Utente avanzato
Utente avanzato
Messaggi: 30
Iscritto il: sab 19 feb 2011, 20:48

Re: [TUTORIAL] Creare un Baloon dei Commenti

Messaggio da Groove's Man » mer 4 gen 2012, 22:13

Ciao, scusa se ci ho messo tanto a rispondere. Bravissimo, anche senza il sesto passaggio mi sembra più che ottimo. Se vuoi un consiglio, l'ombreggiatura falla un pò più grande e sottile :wink: Non saprei proprio come risolvere, ma a me sembra che vada benissimo anche così com'è.

Strano però, cerco sempre di fare guide dettagliatissime, con molte immagini per far sì che non ci siano errori.

---

In questi giorni vedrò di risolvere un possibile errore e editerò il mio primo messaggio in caso ci fosse un errore. Grazie mille e continua così!

Rispondi