blinkies a bannerino

Oggi vedremo i blinkies a bannerino che troverete divisi in due tutorials. Il primo tratta dei bannerini minuscoli il cui bordo si può animare benissimo usando lo stesso metodo che abbiamo già visto nell’ effetto tratteggio come possiamo vedere qua sotto…

.

Ho fatto anche una coppia di maschere piccoline se volete provare a fare anche questi piccoli con le maschere, ma essendo già piccoli il bordo riduce ancora di più lo spazio dentro, diventando sempre più difficile decorarli. Io preferisco usare il metodo del tratteggio in questi piccolissimi al punto che, come vedete, potendo risparmiarmi tutto il primo tutorial, ho preferito spiegare per darvi la possibilità di farli in questo modo.

Nel secondo tutorial, quello fatto per i più grandini, con le maschere, spiego soltanto la parte diversa per animare il bordo. E qua potete vedere il risultato e la differenza fra entrambi. Come potete vedere quello fatto col tratteggio è ancora più piccolo di questo con le maschere…

.

Come allora, quando ho spiegato l’effetto tratteggio, vi avverto che una volta fatto il tratteggio non è visibile al pc, rimanendo coperto dal bordo dell’immagine, ma basta postarlo e lo vedrete funzionare e muoversi. 🙂

.

Vedremo in ciascun caso cosa ci serve avere, ma logicamente se volete farli dovrete avere:

  • Photofiltre che se non avete trovate nel sito ufficiale.

  • Unfreez per l’animazione che potete scaricare qua

.

Ricordate di consultare Tutorials per caso per i vostri dubbi o la ricerca di links dove trovare materiale e che ora all’ Elenco dei Tutorials potete accedere anche direttamente dalla home (lo trovate nella parte destra in ultimo, nelle Pagine). Per i vostri commenti siete pregati di scrivere nel tutorial a cui vi riferite o se le domande sono in generale nella pagina dell’ Elenco dei Tutorials, per non allungare oltre, possibilmente, Tutorials per caso 🙂

.

BLINKIES A BANNERINO PICCOLI

.

.

Ho usato come esempio il “Buongiooorno” con la paperella e per la sua realizzazione vi occorre…

  • una gif con un cuoricino rosso minuscolo che trovate qua

  • un’ altra gif da mettere sopra, se lo volete… Io ho usato questa…

  • due immagini glitter se volete glitterare la vostra scritta… Ecco le due che io ho usato…

  • i due patterns minuscoli dell’effetto tratteggio che trovate qua. Cliccateci sopra e salvateli…. ….. ….. Chi avesse fatto il tutorial Effetto Selezione non ha bisogno di salvarli, dato che sono gli stessi.

.

Ma vediamo ora come fare… 🙂

.

  1. Aprite un documento nuovo col solito sistema: File – Nuovo (FILE – NEW) (imm.1) di 148 di larghezza e 18 di altezza (imm.2)

  2. Procedete ora a colorarlo come preferite cliccando nel Menù a Destra nel Colore scelto (punto 1 imm.3), poi nel Barattolino (punto 2 imm.3) e successivamente con questo nel documento (punto 3 imm.3). Io, in questo caso ho scelto un rosso pallido, rosato. Ovviamente per lo sfondo dei vostri blinkies potrete anche fare dei gradienti per farli ancora più variati come colore e belli. La spiegazione, se non sapete come fare o non ricordate, la trovate nei punti 3 e 4 del tutorial dei blinkies con le letterine, io qua mi limiterò a spiegare il resto, colorandoli normalmente.

  3. Cliccate ora nel Menù in Alto sulla T per scrivere il testo che apparirà all’interno del vostro blinkie. Scegliete il carattere, colore, ed anche gli eventuali effetti che volete inserire. Io ho scelto come carattere Handwriting, in maiuscolo, color carne, misura 1 ed ho selezionato grassetto. (imm.4)

  4. Cliccando in Effetti, in alto, ho selezionato nella finestra che appare Tratto e come colore Bordeaux. Ho scritto il mio testo (BUONGIOOORNO!) ed ho confermato con Ok (imm.5).

  5. Ora vi appare la scritta sul vostro documento. Ingrandite con la Lente d’Ingrandimento di sinistra quanto vi serve per poterci lavorare al meglio e spostate sulla posizione migliore tenendo conto però che dovete fare poi il bordino, lasciando perciò uno spazio ovunque fra la scritta ed il bordo (imm.6).

  6. Mettete ora le decorazioni se le volete aggiungere nel blinkie, perciò aprite l’immagine: File – Apri (FILE – OPEN) che in questo caso è un Cuoricino Rosso (imm.7).

  7. Cliccate su Modifica – Copia (EDIT – COPY) (imm.8 ) e poi toccando il vostro blinkie per attivarlo, cliccate su Modifica – Incolla (EDIT – PASTE) (imm.9).

  8. Sistemate il vostro cuoricino al meglio e prima di confermare l’incollatura, con la selezione ancora attiva, mettendo il puntatore dentro la selezione, cliccate col tasto destro del mouse e nella finestrina che vi appare su Incolla Opzioni (imm.10) deselezionando nella finestra successiva Antialiasing automatico perché non si perda nell’incollatura qualche parte del cuoricino e confermate con Ok (imm.11) .

  9. Basta ora un invio per confermare la vostra incollatura. Ovviamente si procede nello stesso modo per il secondo cuoricino incollato a destra ed un pochino sopra il primo.

  10. Ora procederemo a fare il nostro bordino animato. Toccate il vostro blinkie per attivarlo e cliccate su Selezione – Seleziona Tutto (SELECTION – SELECT ALL) (imm.12).

  11. Ora che avete il vostro banner completamente attorniato dalla selezione, andate al Menù di Destra, cliccate sulla Punta di Freccia di Selezione e tornando alla vostra immagine col puntatore dentro la selezione cliccate col tasto destro del mouse.

  12. Cliccate nella finestra che vi appare su Contorno e Riempimento (STROKE AND FILL) (imm.13)

  13. Nella finestra che appare selezionate Tratto (STROKE), scegliete un Colore che poi vedete bene e che non appaia nella vostra immagine, possibilmente. Qua, al contrario che nell’ Effetto Tratteggio e Selezione, questa riga la potete lasciare a formare parte del tratteggio perciò potete scegliere un colore che risalti vicino alle righine nere del tratteggio del pattern. Io ho scelto qua un giallo deciso ma potete scegliere qualunque colore che pensiate vada bene per il bordo tratteggiato della vostra immagine. Mettete 1 di larghezza, controllate l’anteprima e se va bene confermate con Ok (imm.14).

  14. Togliete ora la vostra selezione cliccando su Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm.15). Vedrete attorno alla vostra immagine un sottile contorno colorato, giallo in questo caso.

  15. Duplicate ora la vostra immagine: Immagine – Duplica (IMAGE – DUPLICATE) (imm.16).

  16. La vostra immagine dovrebbe essere ancora ingrandita ma, se non lo fosse, ora la dovete ingrandire in modo da poterci cliccare tranquillamente su quel sottile bordino colorato con la Bacchetta Magica e che null’altro tranne quel bordo venga selezionato per cui, se non lo avete fatto prima, andate ora al Menù in Alto e cliccate sulla Lente d’Ingrandimento col segno “+” (quella a sinistra).

  17. Andate ora al Menù a Destra e cliccate sulla Bacchetta Magica con tolleranza 30, deselezionate la casellina Colore per, tornati alla vostra immagine, cliccare proprio al centro del bordino colorato e soltanto su di esso. Vi appariranno due righe di selezione ai lati del vostro bordino (imm.17).

  18. Ora aprite in Photofiltre il primo pattern dell’effetto tratteggio che è già trasparente: File – Apri (FILE – OPEN) (imm.18 ).

  19. Col pattern attivo cliccate su Modifica – Utilizza come Trama (EDIT – DEFINE PATTERNS) (imm.19).

  20. Toccate la vostra immagine per attivarla e cliccate su Modifica – Riempi con la Trama (EDIT – FILL WITH PATTERN) (imm.20).

  21. Togliete ora la selezione: Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm.21).

  22. Ora potete lasciare così oppure colorare con un altro colore le righine nere (nel mio caso bianche nelle immagini dato che ho usato un pattern bianco)…Io questa volta ho preferito colorarle in bordeaux perciò ho cliccato sulla Bacchetta Magica del Menù di Destra, selezionando la casellina Colore e con tolleranza 30 e poi tornata sull’immagine ho cliccato su uno dei trattini neri. Tutti i trattini neri ora appaiono selezionati. Clicco ora sul colore con cui li vorrei colorare. Il Colore appare nel Menù Colori, in alto del menù a destra, come primo colore nel quadretto grande di sinistra. Cliccate ora sulla Freccia Nera fra i due quadrati colore grandi e questo primo colore passerà come secondo colore (imm.22).

  23. Una volta che lo avete come secondo colore, toccate la vostra immagine per attivarla e cliccate su Modifica – Pulisci (EDIT – CLEAR) (imm.23).

  24. Togliete ora la selezione: Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm.24). La vostra prima immagine è finita ed ora potete salvarla come gif col numero 1: File – Salva con Nome (FILE – SAVE AS) (imm.25).

  25. Procediamo ora con la seconda immagine come dal punto 10 al 24 compreso ma ovviamente col secondo pattern.

  26. Una volta che avete salvato entrambe le immagini le lasciate scivolare in Unfreez e mettendo 10 come velocità fate il vostro blinkie animato.

  27. Volendo, potreste glitterare la vostra scrittina dentro e allora procederete come nelle scritte glitterate ed al punto 4, invece di confermare con ok, cliccherete su Trasformare in Selezione, importando come gif animata poi il glitter con cui vorrete riempirla e riempiendo la Selezione di ogni immagine del vostro blinkie con le diverse componenti del vostro glitter (imm.26). Se usate quelli messi sopra, basta che li apriate normalmente come una qualsiasi immagine dato che sono già separati.

  28. Potete anche mettere una gif sopra il vostro blinkie. Lo farete come avete fatto negli altri blinkies, quelli con le letterine. Aprite un documento nuovo, bianco. In questo caso, supponendo di mettere la paperella di prima, vi servirà un documento di 150 di larghezza e di 100 di altezza. Incollerete in basso la vostra prima immagine facendo attenzione che rimanga dentro completamente e poi incollerete sopra di essa la vostra gif. Prima d’incollarla, con la selezione ancora attiva, cliccherete su Selezione – Impostazioni Manuali (imm.27) e controllerete i valori di “x” e “y” (imm.28) scrivendoli in un foglio per mettere gli stessi valori nell’altra immagine del vostro blinkie perchè la gif si trovi in identica posizione e non salti. Confermata la vostra incollatura con un invio non vi rimane che tagliare l’ecceso d’immagine cliccando su Immagine – Taglierina Automatica (IMAGE – AUTOMATIC CROP) (imm.29), salvarla come gif e procedere nello stesso modo con l’altra immagine. Il resto, come sopra…fate scivolare in Unfreez entrambe le immagini e fate il vostro blinkie animato (imm.30).

  29. Ed ecco il risultato finale del blinkie normale, di quello con la scritta glitterata e con la gif…

.

BLINKIES PIU’ GRANDI

.

(cliccateci sopra per ingrandirli, aprirli e salvarli)

.

.

Per fare i bordi animati dei blinkies più grandini dovrete servirvi delle maschere ed a seconda delle misure ve ne metto qualcuna fatta da me… Ne troverete altre anche nel web che potrete usare lo stesso ma tenete conto sempre della misura della maschera ed usatela per un blinkie di uguale misura o almeno molto simile.

Vi serve dunque…

  • gifs piccole per decorarlo dentro o sopra

  • una coppia di maschere per ciascuno da salvare e sistemare seguendo il seguente percorso: Risorse del computer/disco C/programmi/Photofiltre/Masks. Per questo tutorial le due maschere sono queste (cliccate per ingrandirle e salvarle)

E qua di seguito qualche altra coppia di maschere di diverse misure… (tutte da cliccare per ingrandirle prima di salvarle)

.

Vediamo ora con un esempio come fare…

.

  1. Aprite un documento nuovo in Photofiltre: File – Nuovo (FILE – NEW). Io in questo caso l’ho aperto di 190 di larghezza per 40 di altezza (imm.1a).

  2. Se non lo avete aperto già colorato procedete a colorarlo come spiegato sopra nel punto 2. Io in questo caso ho scelto un bel azzurro.

  3. Procedete come prima (dal punto 3 al 9 incluso) a scrivere e decorarlo come volete tenendo solo conto di non avicinarvi troppo al bordo perché la maschera con l’animazione entra nell’immagine.…Io in questo caso ho scelto solo di scrivere dentro dato che sopra ci ho messo una ballerina piuttosto ingombrante 😀 ma potete vedere altri esempi con decorazioni, a seguire.

  4. Una volta che avete completato il vostro blinkie duplicatelo: Immagine – Duplica (IMAGE – DUPLICATE) (imm.2a).

  5. Cliccate ora nel Menù in Alto sull’Icona delle Maschere (punto 1 imm.3a) e, nella finestra che vi appare, sulla Cartellina Gialla (punto 2 imm.3a) e poi sfogliando trovate la Cartellina Blinkie (se le avete messe in una cartellina) e la maschera “righe 1” (punto 3 imm.3a) ed apritela (punto 4 imm.3a).

  6. Con Opacità 100 (punto 1 imm.4a), Modalità Colore (punto 2 imm.4a), mettete una tonalità di colore più scura del vostro bannerino (punto 3 imm.4a), selezionate Tira Maschera (STRETCH MASK) (punto 4 imm.4a) e controllate con l’anteprima (punto 5 imm.4a). Se vi pare che vada bene, confermate con Ok (punto 6 imm.4a).

  7. La vostra prima immagine è pronta. Logicamente potete lasciare le righine più chiare così come sono o colorarle in un altro colore col Barattolino con l’immagine ingrandita ed una buona dose di pazienza ed attenzione 🙂 Sia come sia, la vostra prima immagine è finita e potete ora salvarla come gif col numero 1.

  8. Andate ora sul vostro duplicato dove dovrete mettere la maschera. Procedete come sopra (punti 5 e 6) ma aprirete questa volta la maschera “righe 2”.

  9. Salvate anche questa seconda immagine come gif, fatele poi scivolare entrambe in Unfreez e sempre con velocità 10 avrete finalmente il vostro blinkie animato fatto con la maschera.

  10. Naturalmente potrete mettere sopra anche una gif se volete… Ed ecco il risultato 🙂

  11. Per oggi è tutto spero che riusciate a fare tanti bellissimi blinkies prendendo spunto da questo tutorial e come sempre, vi invito a visitare le nostre Gallery aggiornate continuamente con nuove immagini.

Published
Categorized as Grafica

14 comments

  1. Grazie Nadia 🙂 veramente adoro i blinkies, il difficile per me è non stare a farli in continuazione 😆

  2. sauuuu SOL!!!!!
    bellissimo pure qst!! qnt t invidiooo ^^
    sei unikaaa ^_^
    byE bYe
    -Nessina

  3. Cara Sol,
    sei stata come sempre, chiarissima, tanto che ho relizzato senza difficoltà più di un blinkie a bannerino.
    Incontro solo una difficoltà:quando metto la gif sopra o accanto al blinkie, l’animazione si perde.Cosa sbaglio?
    Seconda domanda: mi sapresti suggerire quanche sito in cui trovare le piccole gif da inserire nel bannerino?.
    Grazie per la tua eventuale risposta.
    Angela

  4. Ciao Angela 🙂 … Non vedendo come fai non so dirti con sicurezza quale sia il problema… Ricorda sempre che ogni gif che metti la devi mettere su ogni immagine componente la gif altrimenti non funzionerebbe, perciò mai si può aggiungere su una gif finale (il blinkie in movimento è questo)nulla, ma lo devi aggiungere sulle immagini con cui la fai in Unfreez… Aparte questo, una gif può non muoversi se la compongono troppe immagini o sono troppo grandi queste, cioè, in generale Unfreez ce la fa, ma quando il peso è troppo non riesce a fare muovere la gif, ma non è questo il caso con i blinkies a bannerino…

    Per trovare piccole gif io cerco sui soliti siti di gifs animate per quelle in movimento, altrimenti qua trovi tantissime icone di ogni tipo, ferme ma molto carine ed in misure anche picolissime 🙂

    http://www.iconarchive.com/

  5. Grazie, Sol!
    Lo sbaglio che facevo era di mettere la gif sopra il blinkie dopo averlo messo in unfreez; adesso funziona tutto.
    Ho provato però a rendere trasparente lo spazio bianco con la bacchetta magica e poi trasp. automatica, ma quando lo rendo trasparente l’animazione si ferma.
    ancora grazie molte per la tua disponibilità

  6. Ciao Angela, anche per la trasparenza vale lo stesso detto prima, ogni cosa che tu voglia fare su una gif la devi fare su ognuna dell’immagini che la compongono e mai sulla gif finale o l’animazione si fermerà, per cui importala come gif animata e rendi trasparente ogni sua componente dopo di che le fai scivolare in Unfreez e puoi fare la tua animazione trasparente sicura che funzionerà 🙂

  7. hai ragione, Sol, avrei dovuto arrivarci da sola!
    Tante grazie per la tua gentilezza e disponobilità, oltre che per la chiarezza dei tuoi tutorial.

  8. grazieeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!
    ci sono tanti siti online dove creare dei banner ma rimane sempre il nome del sito…
    invece grazie a te posso fare tutti i banner che volgio e dire che li ho fatti io (con l’aiuto dei tuoi tutorial)
    thank you
    thank you
    thank you
    thank you
    thank you
    thank you
    thank you

    (non ho fatto copia-incolla per scrivere)XD

    bacissimi!

  9. scusa sono sempre io…
    è solo che mi seriviva il tuo tutorial che spiegava come colorare solo una parte di un immagine in bianco e nero…ma non lo trovo
    saresti cos’ gentile da darmi il link?
    x favore!
    è urgente!
    grazie mille in anticipo!

  10. grazie Sol!
    non riuscivo a trovarlo perchè lo cercavo nella lista dei tutorial e non mi ricordavo che fosse lì =)
    ciao ciao

I commenti sono chiusi.