29/03/2011

Gimp: l'open source che ti aiuta a fare l'Header

Carissimi MyBlogger è giunto il momento di dare un tocco di carattere al vostro Blog, perché, come tutti sappiamo, il contenuto è fondamentale, ma anche l'occhio vuole la sua parte.

Iniziamo dunque questa serie di tutorial che vi guiderà nella personalizzazione del vostro spazio digitale per renderlo più accogliente e accattivante, più facile e piacevole da navigare.

Come prima cosa, se pensiamo al nostro blog come a un salotto dove ci incontriamo con i nostri amici per svolgere piacevoli conversazioni, dobbiamo decidere la forma della stanza la disposizione dell'arredo: per imparare a "customizzare" i vari elementi della pagina vi consigliamo di seguire i nostri tutorial nella sezione tips & tricks.

Ora, in questa prima puntata ci concentreremo sostanzialmente su come creare un bel cartello di benvenuto, ossia l'header che si trova in cima alla pagina, utilizzando un programma di grafica Open Source che possiamo scaricare gratuitamente dal web: stiamo parlando di Gimp.

Come prima cosa è necessario impostare correttamente le dimensioni del file immagine che vogliamo utilizzare come header (a proposito vi consigliamo di seguire il tutorial su come personalizzare l'header del blog)

Per farlo apriamo Gimp, creiamo un nuovo file e inseriamo altezza e larghezza in pixel dell'header...

imposta_immagineHeader_gimp.jpg

Clickando su OK si apre il nostro nuovo foglio e possiamo iniziare a sperimentare...proviamo a importare un'immagine o una nostra foto da utilizzare come sfondo dell'header. In questo esempio utilizzeremo una immagine presa dal sito http://www.freestockimages.org/ un'ottima fonte di immagini di qualità completamente free. Ecco un link all'immagine che abbiamo scelto: una interessante foto di un vecchio tronco d'albero.

Una volta che abbiamo deciso quale suggestione visiva vogliamo utilizzare per rappresentarci salviamola sul computer. Per modificarla in Gimp è sufficiente trascinare il file sull'area di lavoro che avevamo in precedenza impostato. Sulla destra possiamo verificare che nella finestra layer si è creato un nuovo livello contenente l'immagine che abbiamo importato.

layer_immagineHeader_gimp.jpg

Come potrete notare, dato che l'immagine è più grande dell'area del documento che abbiamo creato, una parte risulta nascosta perché eccede i limiti della pagina: a questo punto possiamo decidere di ridimensionare l'immagine per adattarla al nostro spazio utilizzando gli strumenti ruota, inclina, scala, ecc. presenti nella palette Strumenti oppure nella voce Immagine del menù a tendina in alto (tip: tenendo premuto CTRL mentre usiamo lo strumento Scala attiviamo l'opzione di scalatura proporzionale, per evitare distorsioni nell'immagine), oppure possiamo provare semplicemente a muovere l'immagine con lo strumento sposta (click e drag oppure freccette direzionali) per inquadrare una porzione specifica e dare un taglio più accattivante all'immagine. Vediamo i progressi fatti finora...

albero1_immagineHeader_gimp.jpg

Ora proviamo ad aggiungere una scritta. Possiamo farlo utilizzando lo strumento testo: comparirà la finestra dell'editor di testo di Gimp, scriviamo il testo desiderato e clicchiamo chiudi. Dopodiché potremo impostare il font, la dimensione e il colore del testo nel pannello strumenti.

textEditor_immagineHeader_gimp.jpg

 

Come tocco finale possiamo creare un nuovo livello cliccando sull'icona con la pagina bianca nella scheda Livelli confermare i parametri del nuovo livello e con lo strumento sfumatura (short-cut: L) sperimentare diverse possibilità per aggiungere profondità e appeal all'immagine. Se la sfumatura compromette la leggibilità della scritta sarà sufficiente trascinare il layer contenente la sfumatura sotto quello contenente il testo per invertire l'ordine di sovrapposizione e possiamo anche provare a giocare con la modalità di sovrapposizione dei livelli (che di default è impostata su normale) e la trasparenza.

Ultimo passaggio: salviamo con nome il file in formato Gimp per poterlo modificare in seguito, mentre per la pubblicazione sul web sceglieremo di salvarne una copia selezionando il "tipo file per estensione" e scegliendo JPG o PNG.

 

Ecco una semplice composizione realizzata utilizzando esclusivamente questi strumenti:

 

albero2_immagineHeader_gimp.jpg

 

Facile e d'impatto ;)

E voi cosa aspettate? Divertitevi a personalizzare il vostro blog per renderlo sempre più cool !!

 

11:16 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (0) | Trackback (0) | Segnala | Tag: gimp, tutorial, open source, header, personalizza blog | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook

25/05/2010

Le immagini digitali: consigli utili

avatar lucaok.jpgQuanto ci tenete al vostro blog? Moltissimo immaginiamo, è come un cucciolo, un bambino che giorno dopo giorno ha bisogno di cure, amore e passione...  ma quante soddisfazioni alla fine vero?

Oggi vi diamo qualche dritta in più per rendere il vostro blog bello e veloce :-)

E' importante non appesantire il blog  con immagini troppo grandi, bastano piccoli accorgimenti per ottenere un blog leggero e scattante.

Sarà capitato anche a voi di cercare di aprire una pagina web che ci mette troppo tempo a caricare? Spesso si ha l'impressione che un  blog è più bello se stra carico di video, e foto e musica e altri elementi che in realtà lo rendono  talmente  pesante che la maggior parte dei vostri lettori, spazientiti per non riuscire  a caricare velocemente la home page, abbandono la "missione" per visitare altri lidi :-)

E' molto importante, specie se vuoi diventare editore on line, valutare il tempo con cui i lettori riescono a caricare le pagine del tuo blog, nessuno aspetta più di 10 secondi per leggere una notizia di un blog (a meno che non si tratti di un tuo fedelissimo amico).

Nello schema qui di seguito abbiamo elencato quanto tempo ci mettono in media i vari tipi di connessione a scaricare 1MB di dati.

tipi-di-connessione-myblog.jpg

Un blog è fatto per quasi i due terzi di immagini e quindi è importante avere delle attenzioni a riguardo.

Impariamo ad ottimizzare le immagini per il nostro blog! Un'immagine digitale ha un'estensione e un determinato peso. Queste due informazioni ci vengono subito fornite dal nostro sistema operativo, selezionando il file. Una  foto online di media grandezza non dovrebbe pesare mai più di 40/60kb per garantire al nostro browser di scaricarla con serenità :-) Se l'immagine che dobbiamo caricare nel nostro blog supera di molto le dimensioni suggerite, vi conviene ottimizzare l'immagine scegliendo il formato appropriato attraverso un programmino di fotoritocco.

finesttra-per-ved-i-jpg1.jpgLe immagini digitali hanno  una dimensione espressa in pixel, e una risoluzione espressa in dpi. Inoltre con il "salva per il web" hai sottomano la situazione: puoi controllare subito quanto peserà il tuo file a seconda del livello di compressione selezionato; con il "salva col nome" tutta l'operazione è più macchinosa e meno comoda.  Ci sono tantissimi software di editing/fotoritocco  e Il più diffuso è Photoshop, (a  pagamento) in alternativa ci sono programmini free e leggeri come IrfanView , PaintShop e Gimp oppure puoi provare questo programmino on line (quindi non si istalla sul pc) che si chiama resizeyourimage, che in pochi clic ti permetterà di ridurre e ritagliare le foto senza grosse perdite di risoluzione, in pochissimi click!