Google


gràfics per la web

Formats de gràfics per al web.
Programes de gràfics aconsellats.
Animacions i Flash.
Optimització de les imatges.
Ús d'imatges com a fons de pàgines i taules.

Elements de navegació: Mapes d'imatges i rollovers.

 

Imatges de fons: com utilitzar una imatge com a fons de la pàgina.
Una imatge de fons pot ser un element distintiu de les nostres pàgines web; és molt fàcil indicar al programa editor de HTM que utilitzi una imatge de fons. S'indica dins del tag <BODY>, però amb un editor visual no cal que ho cerqueu: basta triar l'opció "Imatge de fons"... i escollir el fitxer desitjat. Aquest ha de ser en format GIF o JPG, i es col.loca al fons de la pàgina en forma de mosaic, repetit tantes vegades com calgui, horitzontal i verticalment.

Les imatges de fons també es poden aplicar selectivament a una o més cel.les d'una taula, per crear efectes més interessants. Per exemple, aquesta taula té una imatge de fons a manera de quadrícula de quadern. Si la imatge no té tamany prou gran per omplir completament la pàgina o la taula, es repeteix les vegades que calgui, horitzontalment i verticalment.

Al principi, hi havia una tendència a utilitzar imatges minúscules per al fons de les pàgines, amb la idea de que així seria molt més ràpid mostrar-les en pantalla. Però en realitat, si la imatge està formada per colors plans, i ben optimitzada, pot utilitzar-se una imatge de grans dimensions, sense que s'hagi de repetir tantes vegades, i amb un tamany de fitxer modest. Amb aquest criteri ens és possible crear una imatge que no es repeteix horitzontalment, per tal de crear alguns efectes molt vistosos.

Convé seguir el principi bàsic d'utilitzar el format GIF per imatges de fons amb colors plans, i JPG per imatges fotogràfiques o amb gradacions més complexes de colors o textures. I, sobre tot, hem de tenir cura de que el fons elegit no dificulta la lectura del text. Certs fons texturats i algunes combinacions de colors dificulten la lectura i no s'han d'utilitzar per a blocs llargs de text. De fet, per a textos llargs la recomanació és el text en negre sobre fons blanc (o d'un color o textura molt clars.)

En escollir un color de fons per una taula, si hi ha d'anar text a sobre, avui en dia ja no és imprescindible restringir el color a la paleta segura (paleta per a la web.) Tanmateix, si optam per un d'aquests colors tenim assegurat que el color de fons es veurà perfectament llis i serà fàcilment legible, encara que el visitant utilitzi un ordinador limitat a mostrar només color de 8 bits (256 colors com a màxim en pantalla.) Com que, realment, hi ha molt per triar just amb aquesta "limitada" paleta, és una bona idea utilitzar-la, al menys per quadres que hagin de contenir text.

 

Idees interessants per utilitzar imatges de fons:
...dins d'una pàgina o una taula (encara que algunes ja estan molt vistes...)
  Una quadrícula.
  Un full d'un quadern d'anelles o espiral.
  El logo de la empresa o institució, convenientment passat a uns colors adients.
  Una franja de color o amb diferents formes, en vertical o en horitzontal.
  Una textura suau de paper o material natural (fusta, suro...)

Aquestes textures han estat creades amb el programa Reptile. Només uns pocs exemples entre les infinites possibilitats del programa (gratuït).

 

 

Col.locar amb èxit una imatge de fons exigeix planejar bé la posició dels elements de la pàgina respecte de la imatge de fons.

 

 

Com obtenir o crear imatges per al fons.
Molts programes inclouen exemples de textures, llestes per usar, en formats estàndard (GIF o JPG) o bé en altres formats, però és fàcil convertir-los al format que ens convengui més. Per un altre costat, es poden conseguir gratuïtament imatges de fons de diferents servidors de fitxers d'internet. Si cercau a un servidor en anglès, aquest tipus d'imatges es diuen background images.


Existeixen diferents maneres de generar textures que s'acoplen sense que es vegin els costats de les peces del mosaic. Podem fer servir qualsevol programa de gràfics, tenint present que les formes a la part inferior d'un mòdul han de continuar a la part superior del mòdul que tengui davall; de la mateixa forma, les formes de l'extrem dret d'un mòdul han de seguir a l'extrem esquerre de la peça adjacent. Vegeu-ne un exemple a les il.lustracions que acompanyen aquest article.

Els programes de dibuix vectorial són molt aptes per crear determinats tipus de textures, perquè els elements es poden manipular amb total llibertat, i col.locar-se amb precissió per tal de crear la il.lusió d'una superfície homogènia, sense que es vegin els límits entre mòduls.

Ara bé, si el que volem és una textura més realista, a l'estil de les que tenim com a exemples a aquesta pàgina, cal utilitzar un programa de pintura, o bé convertir a bitmap el mòdul vectorial i aplicar-li alguns filtres per crear una imatge més fotogràfica. Existeix una utilitat gratuïta, el Reptile de Sausage Software, que genera automàticament una infinitat d'imatges i animacions aptes per utilitzar com a fons. El programa és molt entretingut: a partir d'una sèrie de paràmetres, opera per crear aquestes imatges, amb resultats sorprenents. Les textures que us mostram aquí han estat creades amb Reptile.

 

Un exemple de petita taula, utilitzant la primera textura de la columna esquerra, amb un aspecte d'arena. Fixeu-vos que es va repetint tantes vegades com cal, sense que es notin les "juntes" entre les imatges adjacents... però el text no és massa legible a tamany normal!

Trucs.
Si volem un efecte de quadern, (amb un marge que semblin anelles, forats o una espiral) el truc essencial és crear una imatge prou ampla perquè, fins i tot amb les màximes ressolucions que alguns usuaris fan servir, la imatge de fons no es repeteixi horitzontalment; per exemple, fer-la d'uns 1050 píxels d'ample i unes desenes d'alt. Per col.locar els elements de la pàgina correctament (a una certa distància constant del marge esquerre) podem fer-ho de dues maneres:
  Amb posicionament absolut de capes de text i imatges (layers), emprant fulls d'estil CSS.
  Amb taules, utilitzant mesures absolutes per controlar l'amplària.

A la pàgina inicial de Vigital hi ha una imatge de fons (només una doble franja blava i blanca) que crea un espai blau continu a la part superior de la pàgina; a sobre hi ha col.locada la taula amb les icones per accedir a les diferents seccions. Per gran que sigui la ressolució del monitor, aquesta franja sempre es veu constant de part a part de pantalla; a aquestes ressolucions apareix una altra vegada la imatge repetida a la base de la pantalla, però sense superposar-se al text.

Naturalment, l'ús d'aquestes imatges texturades o trames no està limitada a pàgines web! Els programes de dibuix i pintura us permetran omplir-hi objectes o formes, amb moltes possibilitats creatives.


    [ Vigital ] [ Manual de diseño digital, en castellano ] [ Contactar ]

idees i suggerències programes per al web Gràfics per al web CSS HTML

Pàgina inicial pàgina inicial