Il blog di Graficolina

Bellissimo effetto in flash

noreply@blogger.com (Helga) — Mon, 19 Oct 2009 07:45:00 +0000

Come tradurre i sottotitoli su You Tube

noreply@blogger.com (Helga) — Sun, 04 Oct 2009 18:49:00 +0000

Eliminare la barra di navigazione di Blogger

noreply@blogger.com (Helga) — Sat, 02 May 2009 12:59:00 +0000

Eliminare la barra di navigazione di Blogger è molto semplice e richiede un minuto di tempo.

Entrate nel vostro account e andate in Modello -> Modifica HTML, individuate le righe che ho evidenziato in blu (si trovano quasi all'inizio e anche se il contenuto può essere un po' diverso le riconoscerete facilmente), e aggiungete il codice che ho scritto in rosso:

/* ************ START OF CSS STYLING ************ */

/* -------------------------------------------------------

Blogger Template Design: ilike

Designer: dzelque.blogspot.com

Date: 25 Jan 2008

------------------------------------------------------- */

#navbar-iframe {

display: none !important;

}

/* Variable definitions

========================

Per regolarvi basta sapere che bisogna mettere il codice in rosso prima della riga con "Variable definitions".

Salvate, visualizzate il blog... ed ecco fatto, sparita la barra di navigazione!

Rimuovere la barra di navigazione non comporta nessuna penalizzazione da parte di Blogger. Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!

Tutorial per creare un cursore animato

noreply@blogger.com (Helga) — Sun, 07 Sep 2008 19:53:00 +0000

Programma utilizzato: Real World Cursor Editor.

Aprire il programma e cliccare su Create New>New Animated Cursor>Ok

Scrivere il testo del colore che vogliamo, seguendo il tutorial su come creare un cursore qui

Cursor>Insert Frame>ok

Cliccare su drawing tool; cliccare sulla freccetta accanto alla matita:

si aprirà la finestra degli strumenti di disegno; scegliere il secchiello:

Impostare il colore che vogliamo, versare il colore nelle lettere (facendo attenzione che sia selezionata l'impostazione Replace (deve essere selezionato il quadratino centrale accanto al secchiello)

ed infine cliccare col tasto destro del mouse sul pallino che vi avrà seguito in questa operazione >Apply; se avete scritto il primo testo di un colore chiaro, potete cambiarlo cliccando su Effect>Shift Hue e far scorrere Angle per scegliere il colore che si desidera.

E' possibile aggiungere quanti fotogrammi vogliamo.

Nel caso in cui l'immagine dovesse sparire, basta cliccare in uno dei due fotogrammi in basso.

Per visualizzare il risultato che si sta ottenendo, basta cliccarei nella Test Area sulla sinistra dove sarà visualizzato il cursore animato.

Andare su File>Save

Sotto impostare se si vuole il nome e l'autore ed in Frame Duration la durata di ogni fotogramma che permette di aumentare o diminuire la velocità del cambiamento, in questo caso del lampeggiamento; visualizzare nella Test Area il risultato per impostarlo come preferiamo.

E' possibile spostare la disposizione dei fotogrammi (nel caso in cui i fotogrammi fossero più di due), cliccando in basso su quello che vogliamo spostare tenendo tenuto il tasto sinistro del mouse e trascinandolo nella nuova posizione.

Per salvare il cursore animato File>Save As>Ok

Per inserire il cursore nel blog od in un sito, seguire ancora una volta le indicazioni per il cursore statico qui.
Esempi di cursori animati (queste sono semplici immagini di esempio in formato .gif):

Tutorial per creare una mini-clip (o mini-video)

noreply@blogger.com (Helga) — Sun, 07 Sep 2008 18:00:00 +0000

Programmi utilizzati: Virtual Dub 1.7.7, Jasc Animation Shop 3

Procurarsi un video da cui estrapolare i fotogrammi che interessano.

Per scaricarli ad esempio da YouTube basta cercare il video che ci interessa, cliccare su "Ulteriori informazioni" e copiare l'URL.

Aprire il sito http://keepvid.com e nello spazio URL incollare il link appena copiato da YouTube.

Cliccare su download.

Cliccare col tasto destro del mouse su Download get_video.flv e nella finestra che si apre su Salva destinazione con nome>Salva

Dopo che il file è stato scaricato cliccarci sopra col destro del mouse e rinominarlo con l'estensione .flv ovvero get_video.flv

Adesso è necessario convertire il file nel formato .avi (io ad esempio uso il programma "FLV to AVI MPEG WMV 3GP MP4 iPod Converter")

Aprire Virtual Dub 1.7.7

File>Open video file>Apri

Video>Direct stream copy

Audio>Direct stream copy

Spostare il cursore da destra a sinistra e viceversa per cercare i fotogrammi che ci interessano.

Posizionarlo nel punto dove si vuole far iniziare il mini-video e cliccare su questo tasto

Spostare il cursore nel punto in cui si vuole far finire il mini-video e cliccare su questo tasto (freccettina che va verso destra)

Vedremo che è stata selezionata una parte del video con una striscia celeste: sono i fotogrammi che abbiamo appena scelto di estrapolare (conviene scegliere pochi fotogrammi perchè l'immagine finale non risulti troppo pesante)

File>save segmented AVI

Salvarlo col nome mini-clip.

Aprire il file con Jasc Animation Shop 3 (programma di animazione per gifs).

Ritagliare e/o ridimensionare nella grandezza che si vuole il mini-video e salvarlo nel formato .gif

Tutorial per estrapolare audio da un video su You Tube

noreply@blogger.com (Helga) — Sun, 07 Sep 2008 14:15:00 +0000

Programma utilizzato: Virtual Dub 1.7.7

Scaricare un video da You Tube e convertirlo nel formato .avi, seguendo il procedimento dal tutorial per creare una mini clip da qui, dopo di che aprirlo in Virtual Dub, cliccare su Audio>Source Audio e su Audio>Direct stream copy; infine salvarlo cliccando su File>Save WAV.

Tutorial immagine con scacchi a colori

noreply@blogger.com (Helga) — Wed, 20 Aug 2008 06:59:00 +0000

Programma utilizzato: Adobe Photoshop CS3

Aprire l'immagine da elaborare.

Sulla tavolozza dei livelli cliccare due volte sull'icona del lucchetto accanto all'immagine per sbloccarla.

File>Nuovo 200x200 px, traparente.

Visualizza>Righelli

Con lo Strumento pennello quadrato di colore nero, dimensione 4, durezza 100 cliccare sull'estremo bordo in alto al centro; scendere sul lato inferiore, rimanendo sullo stesso punto del righello orizzontale e tenendo premuto il tasto Maiusc cliccare un'altra volta; si avrà una perfetta linea retta verticale; proseguire allo stesso modo partendo da destra per creare una linea orizzontale così da avere una croce.

Modifica>Definisci Pattern e nominarla croce.

Chiudere questo file senza salvare.

Livello>Nuovo livello e nominarlo scacchi 1.

Modifica>Riempi>Pattern e cercare la croce. Ok.

Livello>Duplica livello

Riempire con i colori che si vuole come nell'immagine:

Nella tavolozza dei livelli scegliere come modalità di miscelatura Luce lineare e ridurre l'opacità a 35 o meno a seconda dei propri gusti.

Livelli>Unisci visibile>Salva.

Tutorial per creare una web band (o web ribbon)

noreply@blogger.com (Helga) — Mon, 11 Aug 2008 17:33:00 +0000

Programma utilizzato: Corel Paint Shop Pro X

La web band o web ribbon è quel nastro obliquo che vedete nell'angolo in alto a sinistra del mio blog.

Aprire un file 200x25 px, raster, trasparente e riempirlo con il colore di sfondo che si preferisce.

Immagine>Ruota per gradi>a sinistra 45°

Con lo

strumento

Taglierina impostare come segue:

immagine

Applica.

Con lo

strumento

Penna modalità Disegna linee e polilinee, colore primo piano che contrasti con il colore di sfondo, disegnare una linea guida sulla striscia che ne segua la pendenza (non importa quale sia il colore di sfondo o che sia diritta).

Scegliere il colore di sfondo per la scritta ed impostare come trasparente il colore di primo piano.

Con lo

strumento

Testo con queste impostazioni (font 20 CENTS MARKER):

immagine

posizionarsi sulla linea e quando appare una A inclinata, scrivere la frase che vogliamo. Applica.

Posizionarsi sulla scritta finchè appare il cursore con le quattro frecce e sistemarla in maniera centrata rispetto alla striscia colorata, facendo in modo che non fuoriesca dalla stessa.

Selezione>Innalza selezione a livello>Deseleziona

Effetti>Effetti 3D>Sfalsa ombra con queste impostazioni (scegliendo un colore della stessa tonalità, ma più scuro di quello della striscia):

Andare sul livello della striscia ed aggiungere l'ombreggiatura con le stesse impostazioni che abbiamo appena usato, cambiando solamente il colore che sarà il nero.

Eliminare il livello della riga guida.

Aggiungere eventuali piccole immagine od ornamenti sulla striscia.

Livello>Unisci>Unisci visibile

Salvare come .png

Per inserirlo nel blog in blogger (nel caso dovessero esserci problemi, seguire il procedimento di come inserirlo in un sito):

caricare l'immagine in un sito hosting (tipo Image Shack), copiare il codice dall'iframe (la finestrella) qua sotto ed incollarlo in un elemento pagina del blog (Bacheca>Layout, Aggiungi un elemento pagina HTML/JavaScript); inserire il link dell'immagine caricata al posto delle xxx

Salva.

Per inserirlo in un sito:

copiare il codice ed incollarlo sotto il tag body nella pagina dove si vuol fare apparire la web band; cambiare le solite xxx con il link dell'immagine caricata.

P.S.:

per posizionare la web band sull'angolo in alto a destra, aprire l'immagine in Corel Paint Shop Pro.

Immagine>rifletti. Salva come .png oppure all' inizio della realizzazione dell' immagine stessa ruotarla di 45° a destra invece che a sinistra.

Nel codice cambiare solamente i termini left con right.

Tutorial per creare un cursore ed inserirlo

noreply@blogger.com (Helga) — Fri, 08 Aug 2008 18:27:00 +0000

Programma utilizzato: RealWorldCursorEditor

Aprire il programma e cliccare su Create New>New Static Cursor ed ok sulla finestrella che si apre.

Cliccare sullo Strumento Pencil e scegliere come misura Single Pixel.

Sull'angolo in alto a sinistra disegnare una freccina, lasciando 1 px di spazio a sinistra ed 1 px di spazio in alto come nell'immagine:

Iniziare a scrivere la frase che vogliamo e per verificare il risultato che stiamo ottenendo, sulla destra cliccare su Text Area dove, se vi passiamo sopra, vedremo in anteprima il cursore che stiamo realizzando.

Contorniamo tutto di bianco.

Per aggiungere l’ombreggiatura andare su Effect>Drop Shadow ed impostare come segue:

Ok.

File>Save as e nella finestra che si apre in Files of type scegliere Cursor Files.

Caricare l'immagine in un sito hosting non per immagini ad esempio su http://boxstr.com/ e copiare il codice dall'iframe (la finestrella) qua sotto ed incollarlo nel tag del proprio codice (sia nel blog che nel sito) all'interno del tag body ; inserire il link diretto dell'immagine caricata al posto delle xxx.

P.S. : per inserire un cursore anche nel pc (per quanto riguarda Windows), andare su Risorse del Computer>Disco Locale>Windows>Cursors ed inserire qui tutti i cursori che vogliamo; per impostarli andare su Pannello di controllo>Mouse>Puntatori>Sfoglia e scegliere i cursori che vogliamo.

Visualizzazione elementi html in Firefox

noreply@blogger.com (Helga) — Fri, 08 Aug 2008 07:38:00 +0000

Ultimamente, mi sono imbattuta in diversi codici, tags, per cui non era possibile visualizzarne gli effetti in Mozilla Firefox, ovvero questo era possibile solo riguardo il broswer Internet Explorer (non ho mai provato riguardo gli altri broswer); riporto qui alcuni codici, tags da modificare affinchè possano essere visualizzati sia in FF che in IE:

il cursore:
sia per un sito che per un blog, per essere visualizzato in FF, deve essere aggiunta la parola auto nel tag body, per cui deve risultare così:

attributo alt:

affinchè questa finestrella descrittiva per immagini, links, ecc., possa visualizzarsi anche FF, questo tag deve essere cambiato in title.

sfondo fisso:
per far si che lo sfondo rimanga fermo e che scorrano solo le scritte, basta copiare ed incollare questa proprietà all'interno del tag body:

midi-player:
copiare il codice sottostante ed incollarlo in un nuovo elemento HTML/Javascript del blog; caricare il file .mid che vogliamo su di un sito hosting (non Altervista che non permette link al di fuori) ed inserire il link del midi caricato dove indicato nel codice .

Il tuo browser non supporta il tag embed per questo motivo che non senti alcuna musica

Tutorial colori sovrapposti

noreply@blogger.com (Helga) — Wed, 06 Aug 2008 13:50:00 +0000

Programma utilizzato: Corel Paint Shop Pro X

Aprire un nuovo file raster 640x240 pixel, con il colore dello sfondo bianco.

Per lavorare con precisione, sulla Barra dei menù cliccare su Visualizza>Righelli.

Per questa scritta conviene utilizzare il font Arial Narrow (dimensione: 150 px) perchè ha margini lisci ed è piuttosto corposo; “ingrandire” il font impostando come stile carattere: Accentuato, ovvero bold (B) ed aggiungendo la Larghezza pennellata dello stesso colore della Proprietà sfondo e riempimento in questo caso la larghezza pennellata è stata impostata a 10; colore: Nero

Digitare il tasto delle maiuscole sulla tastiera.

Per facilitare subito la centratura della scritta, con lo

strumento

Testo scrivere la lettera centrale H, seguendo le coordinate x:320 y:120 sul righello e sulla barra delle impostazioni scegliere l'allineamento al centro; la coordinata x è rappresentata dal righello orizzontale, mentre la coordinata y è rappresentata dal righello verticale (notare la barra in basso).

Cliccare sullo

strumento

Puntatore

Posizionarsi sulla lettera finchè appaiano le 4 frecce e cliccare leggermente sulla lettera con il tasto sinistro del mouse, (facendo attenzione a cliccare sul mouse senza muoverlo altrimenti la lettera viene spostata), che verrà in questo modo deselezionata.

Scrivere adesso la J sulle coordinate x:255 y:120 e deselezionarla allo stesso modo della H; Infine scrivere la S sulle coordinate x:380 y:120 e deselezionarla sempre con il solito sistema.

Nella Tavolozza Livelli selezionare il livello della H, ovvero il primo livello che abbiamo creato.

Andare su Immagine>Immagine negativa; la lettera risulterà bianca; tornare nella Tavolozza Livelli e spostare il livello della H sopra tutti gli altri livelli quindi scegliere come modalità di miscelatura: Differenza.

Livelli>Unisci>Unisci visibile

Tutorial per creare una usebar

noreply@blogger.com (Helga) — Wed, 06 Aug 2008 08:14:00 +0000

Programma utilizzato: Corel Paint Shop Pro X

Aprire un file 350 x 20 px con il colore di sfondo che vogliamo per la nostra usebar.

Cliccare sullo

strumento

Testo e scegliere come un pixel font, in questo caso BitDustOne con antialias: Disattivato; crea come: Mobile; nella tavolozza materiali scegliere come colore di primo piano trasparente e colore di sfondo bianco.

Applica.

Selezione>Innalza selezione a livello.

Selezione>Modifica>Espandi ed impostare 1 px

Nella tavolozza materiali impostare come colore di primo piano il nero.

Scegliere un pennello quadrato di dimensione 20, durezza 100 e Modalità di miscelatura: dipingi dietro.

Passare il pennello su tutta la scritta.

Selezione>Deseleziona

Spostare la scritta verso destra.

Aggiungere un'immagine sulla sinistra.

Livello>Nuovo livello Raster

Nella tavolozza materiali impostare il motivo Angolo:0; Scala:100

In questo nuovo livello va "versato" con lo

strumento

Riempimento il motivo della riga da scaricare qui

Nella tavolozza dei livelli scegliere la modalità di miscelatura: Sovrapponi. Questo livello deve essere spostato sotto il livello che contiene l'immagine a sinistra.

Immagine>Aggiungi bordatura (colore nero; simmetriche)

Scegliere il pennello da scaricare qui
Per salvare un pennello in formato .png andare su File>Esporta>Pennello personalizzato

Impostare come colore di primo piano il bianco.

Posizionarlo ad 1px dal lato sinistro e 0px dal lato in alto (il bianco in altro deve coprire la bordatura nera)

Ecco il risultato:

Tutorial immagine dither

noreply@blogger.com (Helga) — Tue, 05 Aug 2008 17:02:00 +0000

Programma utilizzato: Corel Paint Shop Pro X

Aprire l'immagine su cui si vuole realizzare l'effetto dither.

Copiarla ed incollarla come nuova immagine.

Andare su Immagine>Riduci profondità colore>Tavolozza a 2 colori

Copiarla ed incollarla sull'altra immagine non modificata.

Impostare su 25 la trasparenza.

Livello>unisci>unisci tutto.

Tutorial riportato da: http://wishable.net/PSPgrudgydots.php

Tutorial immagine cutted

noreply@blogger.com (Helga) — Tue, 05 Aug 2008 08:15:00 +0000

Programma usato: Corel Paint Shop Pro X

Aprire l'immagine da utilizzare ed un nuovo file con sfondo raster, poco più grande dell'immagine.

Impostare lo

strumento

selezione come in questa immagine

Selezionare intorno all'immagine come se si ritagliasse con le forbici.

Selezione>Inverti

Cliccare col tasto destro del mouse sull'immagine nella tavolozza dei livelli e nella finestra che si apre cliccare su Innalza livello di sfondo.

Sulla tastiera digitare Canc

Selezione>Deseleziona

Copiare l'immagine ed incollarla nel file vuoto.

Livelli>Duplica

Impostare lo

strumento

selezione bacchetta magica come nell'immagine:

CTRL + F

Selezione>Modifica>Espandi (numero di pixel: 2)

Impostare nella tavolozza materiali come colore di primo piano il bianco; scegliere lo

strumento

Riempimento con modalità corrispondenza: Nessuno.

Cliccare sull'immagine che nella tavolozza dei livelli diventerà tutta bianca.

Selezione>Deseleziona

Disattivare la visibilità del livello vuoto (Raster 1)

Andare sull'immagine in alto e su Livello>Unisci visibile

Effetti>Effetti 3D>Sfalsa Ombra con queste impostazioni:

Attivare la visibilità del livello Raster 1 e riempirlo con uno sfondo a piacere.

Livelli>Unisci>Unisci tutto (appiattisci)

Tutorial riportato da: http://farfalladisogno.altervista.org/