lunedì, 18 agosto 2008


Rispondendo ad una richiesta di Nessina su l’effetto tratteggiato attorno alle immagini, approfitto per includere un effetto molto simile, praticamente quasi lo stesso ma animato, l’effetto selezione. Si potrebbe usare delle maschere per fare entrambi, io ho preferito usare dei patterns… modo che trovo molto semplice e di miglior resa grafica.

.

.

Un’ avvertenza però… questi tratteggi (mi riferisco solo a quelli attorno alle immagini) li vedete benissimo in Photofiltre ma una volta salvati se aprite l’immagine nel vostro pc i tratteggi, essendo proprio sul bordo dell’immagine, rimangono nascosti alla vista dal bordo stesso… Non vi preoccupate, se li avete salvati controllando in Photofiltre che siano come volevate che fossero, sono salvati così anche se non li vedete aprendoli…Basterà che postiate l’immagine e vedrete che sono tale e quali a come li avevate salvati. 🙂

.

Per fare questo tutorial serve:

  • Photofiltre che se non avete trovate nel sito ufficiale

  • l’immagine, scritta od immagini su cui volete fare l’ effetto tratteggiato al bordo e quello di selezione

  • per l’effetto tratteggio vi metto 3 misure diverse di patterns con lo sfondo trasparente ed in color nero. Più avanti nel tutorial vedrete come potete farli diventare di qualsiasi colore vogliate. (Cliccateci sopra per ingrandire e salvare, sono molto piccoli) . . .

  • Per l’effetto selezione due patterns per il tratteggio bianchi e resi trasparenti per poter animarlo con Unfreez. Per salvarli dovete cliccare qua e qua. Credetemi ci sono, ma sono trasparenti e molto piccoli, salvateli andando all’angolo superiore sinistro col tasto destro del mouse e salva immagine con nome, vedrete apparire il nome del file prima di salvarli, nel vostro pc vedrete il file col nome e in Photofiltre aprendoli li vedrete. 🙂
  • Unfreez per animare l’ effetto selezione che se non avete trovate qua

Ma vediamo ora come fare….

.

EFFETTO TRATTEGGIO ATTORNO ALLE IMMAGINI:

.

  1. Aprite in Photofiltre l’immagine il cui bordo volete tratteggiare: File – Apri (FILE – OPEN) (imm.1)

  2. La vostra immagine dovrà essere di una misura che possa vedersi intera dove la volete postare per cui non usate immagini enormi o riducetele cliccando su Immagine – Dimensione Immagine (IMAGE – IMAGE SIZE) e mettendo misure più piccole. La mia è 430 di larghezza e 320 di altezza pressapoco.

  3. Ora cliccate nel Menù in Alto su Selezione – Seleziona Tutto (SELECTION – SELECT ALL) (imm.2). Una selezione apparirà attorno alla vostra immagine.

  4. Col puntatore del mouse dentro la selezione cliccate col tasto destro del mouse e nella finestra che vi apparirà su Contorno e Riempimento (STROKE AND FILL) (imm.3).

  5. Nella finestra che appare selezionate Tratto (STROKE), mettete nel Colore una tinta che poi vediate bene e che non appaia nella vostra immagine. Io ho scelto un turchese molto vivo come potrete vedere nell’immagine ma potete scegliere fucsia o qualunque colore vediate bene nell’immagine e che non sia presente nella vostra immagine. Mettete 1 di larghezza e confermate con Ok (imm.4).

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

  7. Ora dovete ingrandire parecchio la vostra immagine 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 andrete al Menù in Alto e cliccherete sulla Lente d’Ingrandimento col segno “+” (quella a sinistra) (punto 1 imm.6). Ingranditela fino a 400 (o più se vi serve) (punto 2 imm.6) e scorretela con le freccette o la barra di scorrimento veloce che trovate in ogni lato della vostra immagine ingrandita (punto 3 imm.6) fino che vi appaia un pezzo del bordino colorato (punto 4 imm.6). Andate ora al Menù a Destra e cliccate sulla Bacchetta Magica con tolleranza 30 e deselezionata la casellina Colore (punto 5 imm.6) per, tornati alla vostra immagine, cliccare proprio centrando il bordino colorato soltanto su di esso. Vi appaiono due righe di selezione ai ladi del vostro bordino (punto 6 imm.6).

  8. Riducete di nuovo la grandezza della vostra immagine cliccando sulla Lente d’Ingrandimento di destra (quella col segno “-“) e guardate che solo la riga colorata sul bordo sia stata selezionata. Se non fosse così dovete cliccare su Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) e tornare ad ingrandire e selezionare la vostra riga centrando solo il bordino finché non ci riusciate ad avere selezionato soltanto questo. Fatto questo e con la selezione attiva cliccate una sola volta sulla Freccia Rossa che guarda a sinistra (avvicinando il puntatore alla freccia vi dovrebbe apparire questa scritta piccola: “Annulla Contorno e Riempimento”) (imm.7).Toglierete così il colore turchese dal bordo ma vi rimarrà sempre la selezione di quel bordo attiva per poterci applicare il tratteggio.

  9. Aprite ora il tratteggio che volete mettere a contorno dell’immagine. Io aprirò quello che ho fatto per primo e che ho chiamato pattern tratteggio trasparente. Dato che è già trasparente, lo apro come un’ immagine qualsiasi cliccando su File – Apri (FILE – OPEN) (imm.8).

  10. Cliccate su Modifica – Utilizza come Trama (EDIT – DEFINE PATTERN) (imm.9) e tornate alla vostra immagine, toccatela per attivarla e ritornate a cliccare in alto su Modifica – Riempi con la Trama (EDIT – FILL WITH PATTERN) (imm.10).

  11. Il vostro contorno tratteggiato è fatto e non vi rimane ora che cliccare su Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm.11) e lo vedrete.

  12. Potete salvare ora la vostra immagine File – Salva con Nome (FILE – SAVE AS) (imm.12) come immagine jpeg. Ovviamente se l’immagine che scegliete ha delle parti scure (come la mia nella parte inferiore sotto) essendo il tratteggio nero si vedrà poco o vi sparirà; per cui vi conviene, usando questo tratteggio, scegliere sempre immagini con lo sfondo chiaro, almeno vicino al bordo . Potete usare lo stesso procedimento sulle vostre scritte e farle così con un bordo tratteggiato che potrete anche rendere animato se seguite il procedimento dell’effetto selezione che trovate sotto.

  13. Ed ecco il risultato finale dell’immagine, una scritta e diversi esempi con tratteggi nelle tre misure che ho realizzato. (Cliccate per ingrandire per vedere le immagini finite)

.

TRATTEGGI COLORATI

.

Ovviamente i vostra bordi tratteggiati potrebbero essere colorati. Potrete farvi i vostri pattern del colore che volete usando quelli che vi ho fornito qua se non sapete o non volete farvi voi degli altri più personalizzati. Vi spiego come…

  1. Col “mio” pattern aperto in Photofiltre ed attivo procedete a duplicarlo cliccando su Immagine – Duplica (IMAGE – DUPLICATE) (imm.1a ).

  2. Ingrandite il duplicato in modo da poterlo vedere bene quando ci lavorate cliccando nel Menù in Alto sulla Lente d’Ingrandimento più a sinistra (punto 1 imm.2 a). Cliccate ora sull’Icona di Trasparenza (punto 2 imm.2 a) e nella finestra che vi appare selezionate Disabilita Trasparenza (DISABLE TRANSPARENCY) (punto 3 imm.2 a) e confermate con Ok (punto 4 imm.2 a).

  3. La terribile casellina Rgb Color che blocca tutto, in alto, vi apparirà colorata (imm.3 a). Dovete cliccarci sopra e farla diventare grigia per non aver problemi e rimaner bloccati.

  4. Andate ora al Menù a Destra, scegliete il Colore con cui volete fare il vostro tratteggio nel Menù Colori e cliccate sul Barattolino (punto 1 e 2 imm 4 a). Tornate al duplicato e colorate le caselline nere cliccandoci sopra col Barattolino (punto 3 imm.4 a).

  5. Tornate al Menù a Destra. Cliccate sulla Bacchetta Magica (punto 1 imm 5 a) e con tolleranza 30 e selezionando la casella Colore (punti 2 e 3 imm.5 a) tornate alla vostra immagine e cliccate su una delle caselline che non avete colorato prima (punto 4 imm.5 a). Vi appariranno selezionate entrambe le caselle che in origine erano trasparenti.

  6. Cliccate su Immagine – Trasparenza Automatica – Seleziona Esterno (IMAGE – AUTOMATIC TRANSPARENCY – OUTSIDE SELECTION) (imm.6a) e le caselline selezionate diventeranno nuovamente trasparenti (imm.7a). Il vostro nuovo pattern colorato è pronto. Potete ora salvarlo se volete ed usarlo per farne un contorno tratteggiato colorato usando lo stesso sistema di prima.

  7. Ecco il nostro contorno tratteggiato colorato ora in un altro colore ed altri esempi.

.

EFFETTO SELEZIONE:

.

Poche differenze fra ciò che abbiamo fatto finora e l’effetto selezione. Sostanzialmente è la stessa cosa solo che animato, bianco e perché per renderlo più visibile io non l’ho fatto proprio sul bordo esterno…Ovviamente se la vostra immagine è scura anche sul bordo si vedrà o se scegliete un nero od un altro colore potrete anche farlo sul bordo esterno d’immagini chiare. Io preferisco farlo nell’interno proprio perché mi piace di più come rimane l’effetto che se fosse sul bordo. Vediamo le principali differenze:

  1. Una volta aperta l’immagine su cui volete fare questo effetto col solito File – Apri (FILE –OPEN) (imm.1b) duplicatela : Immagine – Duplica (IMAGE – DUPLICATE) (imm.2b)

  2. Toccate la vostra prima immagine attivandola.

  3. Cliccate sulla Punta della Freccia nel Menù a Destra (punto 1 imm.3b) e poi sul Rettangolo di Selezione (punto 2 imm.3b) e tornati sulla vostra immagine fate la vostra selezione dove volete che appaia (punto 3 imm.3b). Una volta fatta la selezione cliccate su Selezione – Impostazioni Manuali (SELECTION – MANUAL SETTINGS) (punto 4 imm.3b).

  4. Nella finestra che vi appare mettete i valori della “x” e la “y” entrambi a 4 (imm.4b). Sia così o che la mettiate altrove, ed in conseguenza saranno altri i valori, dovete in entrambe le immagini avere gli stessi valori della “x” e la “y” o l’effetto salterebbe. Logicamente se la mettete sul bordo dovete solo procedere come il tutorial del tratteggio in entrambi le immagini e non c’è bisogno di controllare i valori dato che le selezioni sono nel bordo.

  5. Ora procedete come nel tutorial dell’effetto tratteggio dal punto 4 fino al punto 8 incluso. Vi troverete così l’immagine senza la riga colorata ma con la selezione ad entrambi i lati di questa riga

  6. Ora aprite in Photofiltre il primo pattern dell’effetto selezione che è già trasparente come vedete: File – Apri (FILE – OPEN) (imm.5b).

  7. Col pattern attivo cliccate su Modifica – Utilizza come Trama (EDTI – DEFINE PATTERNS) (imm.6b).

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

  9. Togliete ora la selezione: Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm.8b)

  10. La vostra selezione sulla prima immagine è pronta ed ora potete salvare come gif col numero 1: File – Salva con Nome (FILE – SAVE AS) (imm.9b).

  11. Procediamo ora con la seconda immagine come dal punto 2 al 5 . Aprite il secondo pattern della selezione e procedete come prima col secondo pattern e la vostra seconda immagine.

  12. Una volta che avete salvate entrambe le vostre immagini con la selezione le fate scivolare in Unfreez e fate la vostra gif animata con un tempo di 15 aprossimativamente. La vostra immagine con l’effetto selezione è pronta e si presenta così .

  13. Come detto prima, ogni qualvolta vogliate fare un tratteggio animato userete lo stesso sistema. Se avete solo un pattern di quel tratteggio, basterà che lo duplichiate e cliccando su Immagine – Simmetria Verticale (IMAGE – FLIP VERTICAL) salvate così un tratteggio numero 2 che sarà quello che applicherete sulla seconda immagine per fare l’animazione. Lo stesso discorso vale per il Colore : se volete fare selezioni colorate usate per colorare lo stesso sistema descritto sopra. : )

.

Ed ecco altri esempi di immagini con l’effetto selezione in bianco ed in nero ed una scritta con un tratteggio animato.

.

.

Per oggi è tutto e non mi resta che ricordarvi che : per ogni dubbio in TUTORIALS PER CASO. nell’introduzione e sotto l’elenco dei tutorials trovate tante spiegazioni utili per usare al meglio Photofiltre, così come il modo di scaricare e installare plugins, unfreez, caratteri nuovi e tante altre cose che vi possono aiutare per la realizzazione dei tutorials…. E se volete altri spunti come al solito l’invito è a guardare le nostre Gallery. 🙂