El teu blog de Linux en català

Creació d'un bàner senzill amb The Gimp

Crear un bàner de forma senzilla amb «The Gimp» és una tasca molt senzilla que explicarem a continuació pas a pas.

Primer pas

El que farem serà crear un bàner senzill tipus web. Comencem obrint el Gimp, anem a Fitxer » Nou… i al desplegable on posa «Plantilla» seleccionem «Web banner common 468×60» i el creem directament sense tocar res més.

Imatge nova «Web banner common»

Ara hem de crear una capa transparent nova. Anem a Capes » Nova capa i s’obrirà un diàleg que ja tindrà marcat els valors per defecte com ens interessen. Posem el nom com a «Capa 1» i premem «D’acord». Veureu que al diàleg de capes ja apareix la nova capa.

Inserció d'una capa nova

Ara haurem de seleccionar tota la imatge amb Selecciona » Selecciona-ho tot i l’omplirem de negre prement la combinació de tecles «Ctrl + ,» i encongirem la imatge 1px Selecciona » Encongeix (per defecte ja apareix 1px) i premem «D’acord». Finalment esborrem la selecció amb la combinació «Ctrl + x».

Ara podem posar, per exemple, el nostre logo a l’esquerra del bàner. Simplement cal cercar una imatge, millor si és transparent, i enganxar-la. Quan ho hàgiu fet i esteu contents amb com ha quedat la base, aneu a Imatge » Aplana la imatge.

Bàner amb el logo de fons

Segon pas

Ara que ja tenim la base, podem continuar amb allò que serà realment crear l’animació. Bàsicament crearem un bàner que tindrà tres línies de text animat. Cada marc estarà format pel fons que hem creat i una de les frases. Llavors, ara el que farem serà duplicar la capa dos cops més anant a Capes » Duplica la capa dues vegades.

Ara haurem de posar el text que portarà cada una de les capes. Farem servir l’eina estàndard de text (la icona «T» de la barra d’eines) i farem clic allà on volem posar el text. Tingueu en compte que és important posar el text de les tres capes a la mateixa posició per tal que la transició no siga estranya (bé, això també depèn de cada u). Per tant, ara, ens anem movent per les capes posant el text que anirà en cada una d’elles. Cada cop que afegim el text, haurem de fusionar-lo amb la capa a la qual estem. Finalment haurem de tindre tres capes que consistiran en el fons inicial més el text creat per cada una d’elles.

Capes de text

Tercer pas

Ara cal establir el temps que es mostrarà cada una de les capes a l’animació. Ara provarem a crear una animació d’uns 12 segons. El temps de durada de cada animació s’estableix posant un comentari amb el temps de durada en milisegons).

Per tant, al diàleg de capes, fem doble clic sobre qualsevol capa i s’obrirà una finestra amb el nom de la capa (o ens permetrà editar el nom allà directament). Simplement hem d’afegir el temps de durada de la transició en milisegons entre parèntesi. Per exemple: (2000ms):

Temps de visualització de les capes

Per comprovar que tot funciona correctament, podem anar a Filtres » Animació » Reprodueix i s’obrirà una finestreta des d’on podrem veure l’animació. En aquest punt ja tindríem l’animació més senzilla possible: una transició entre capes.

Últim pas

Finalment indexem la imatge anant a Imatge » Mode » Indexat… S’obrirà un nou diàleg, acceptem directament.

Ara ja podeu previsualitzar l’animació com ho hem fet abans o bé desar la imatge en format GIF. En fer-ho, s’obrirà un diàleg que ens demanarà si volem fusionar les capes o bé crear l’animació, marcarem la casella de Anomena i desa com a animació… i al següent diàleg no caldrà tocar res més (recordeu deixat marcat el bucle infinit). Ara ja tindrem l’animació feta. La podreu obrir amb el vostre navegador.

1 comment

    • Guillem on 31 de gener de 2011 at 21:44

    Reply

    Molt bon tutorial Pau, quan tingui temps el crearé i ficaré un banner a la meva web del ffffuuuuuuuuuu, alies rage guy per a qui no el conegui 😉

    http://4.bp.blogspot.com/_37t_qXLKwws/TCwYvLQde4I/AAAAAAAAA0w/qSRhkeOH4Os/s400/pizza.fuuu.jpg

Deixa un comentari

Your email address will not be published.