Vigital: Disseny gràfic digital

galeria d'idees

Com acolorir amb el pc. Acolorir una pàgina de còmic.
Una il.lustració digital feta pas a pas.
Idees per a il.lustracions. científiques i tècniques
Taller de Flash.
SVG: els gràfics del futur.
Icones.
Taller de dibuix vectorial (I)

Les icones. Quantes en veiem al dia, treballant amb l'ordinador, navegant per la web, indicant-nos les funcions dels electrodomèstics, guiant-nos en un espai públic... Aquestes petites imatges són molt útils per orientar-nos en totes aquestes situacions. Dirigeixen la vista als punts clau.
Es tracta, per tant, d'imatges amb una funció de discreta atracció visual. Sense distreure, i tampoc sense augmentar a penes el tamany dels documents, ja que sol tractar-se de petites imatges; suposen un accent visual que ens guia.

On utilitzar les icones.
Les icones s'usen per a dos comesos principals:
1. En la interfície dels programes, identifiquen les carpetes, aplicacions, arxius o eines. Són les habituals icones de l'escriptori o dels programes en Windows o al Mac.
2. Com elements gràfics en els documents i en les pàgines web. Les icones aquí serveixen per a identificar seccions, separar paràgrafs, com accent gràfic o petita il·lustració.

Com crear icones.
Ja que parlam de coses molt diferents en el cas de les icones del propi sistema i en el cas dels elements gràfics, devem separar ambdós casos.

Icones per als programes.
Una icona del sistema no té gens d'especial; habitualment es tracta d'una imatge en mapa de bits, encara que estigui guardada en un format concret. Algunes aplicacions utilitzen fonts de símbols (dingbats) per a generar les seves pròpies icones de grandària variable. Les icones individuals solen ser fitxers amb una extensió .*ico, però poden estar continguts dintre de fitxers .*dll o .*exe, a vegades a dolls. Per exemple, quan volem canviar la icona que representa un document o programa, i veiem que n'hi ha molts per a elegir, es tracta d'un fitxer d'aquest tipus que els conté en forma de biblioteca d'icones. (per a canviar la icona d'un programa o un document, basta fer clic sobre la seva icona amb el botó dret, elegir Propietats, i en el quadre que sorgeix anem a Accés Directe | Canviar icona...)
La forma més fàcil de crear una icona és crear la imatge en un programa qualsevol de pintura, tal com el propi Paint, i després retallar un quadrat de 16 x 16 píxels (icones petites) o de 32 x 32 (icones grans.) Si vam guardar el fitxer amb l'extensió .*ICO ja tindrem una icona llesta.
De totes maneres, existeixen aplicacions especials per a la creació d'icones per al sistema; vegem algunes d'aquestes.
MicroAngelo, o Icon Collector són coneguts editors shareware.

Icon Snatcher és un interessant programa --freeware-- capaç d'extreure icones d'unes col·leccions amb l'extensió .icl, a més dels dipòsits habituals d'icones (els fitxers .exe o .dll.) Pot guardar les icones com bmp, ico, o també GIF, el que ho fa molt útil per a la creació d'icones per a les pàgines web. Fins i tot pot generar automàticament una pàgina html amb les icones seleccionats. Molt recomanat.

Els sistemes Mac utilitzen icones més vistoses; i a més existeix molta més varietat d'icones disponibles, més llocs en la web on descarregar col·leccions, etc. No obstant això, el seu format és diferent del de les icones per a PC. La solució està en una aplicació que es diu MacIco, capaç de convertir les icones de Mac en el seu equivalent per a PC. Pot obtenir-se de http://www.xemico.com/

Icones per als favorits.
Les noves versions d'Internet Explorer (5 o posterior) han suposat una nova aplicació per a les icones. Els favorits poden ser identificats amb una icona que podem elegir lliurement. Però això no és tot. Si vam col·locar en el servidor un icona (nombre-icono.ico) aquest apareixerà ja en els navegadors de tots els visitants en la barra d'adreça i en la llista de favorits, en totes les pàgines que incloguin dintre de les etiquetes de <head> el següent: <LINK REL="SHORTCUT ICON" HREF="http://www.mipagina.com/nombre-icono.ico">
La icona pot crear-se amb qualsevol aplicació, i fins i tot hi ha serveis online per a crear-los, com en http://www.favicon.com/applet.html; l'aconsellable és crear-lo petit --16 colors, 16 x 16 píxels-- i deixar que el navegador o el sistema ho ampliï si cal.
Altra variant de l'ús de les icones, que no tractarem aquí, és la creació d'icones animats per al sistema: apuntadors de ratolí, rellotges...

Per crear icones bàsiques però atractives, vénen molt bé uns simples dingbats o lletres de símbols, amb uns efectes de color i transparència.

Icones com il·lustracions.
Una segona accepció del terme icona està en les petites imatges que acompanyen els documents i pàgines web. Normalment la seva funció és senyalitzar, encara que també poden funcionar menjo simple il·lustració. Podem utilitzar imatges monocromes o bé optar per icones a tot color, segons les necessitats del treball.

Aquestes icones són normalment imatges corrents. Per exemple, per a una pàgina web, es tractarà d'un fitxer GIF. Donades les petites dimensions de les icones, fins i tot un tractament fotogràfic no suposarà una grandària excessiva del fitxer.

Exemples d'icones a les pàgines web de Yahoo i de MSDN. Aquestes icones tenen menys de 20 píxels d'altària, i així i tot suposen un ric accent visual a la pàgina que els conté.

Per crear aquestes imatge, els programes de dibuix vectorial són perfectes: podem treballar a l'escala que desitgem, o canviar la grandària de les imatges sense pèrdua alguna de qualitat, i manipular lliurement les formes. En tenir tot llest, exportam la imatge en el format que deguem.

La font d'imatges més versàtil que hi ha per a les icones --i per a tants altres treballs de disseny gràfic-- són els Dingbats o Tipografies d'il·lustracions. Disponibles en qualsevol programa, són una font variada i abundant d'imatges per a crear les icones. Una combinació perfecta: un programa d'il·lustració vectorial i els dingbats. La nostra aportació: les sèries de Deskspace, Fazzes i Antypepatics, disponibles gratis en les nostres pàgines de tipografia.

En les barres de navegació de les pàgines web, les petites icones troben una aplicació molt important. Petits gràfics, de 20 a 30 píxels de costat o fins i tot menys, poden complir perfectament aquesta missió. Pel que fa a icones per a capçaleres de pàgines, poden afegir-se efectes de "rollover" i també utilitzar diferents colors per a donar informació addicional d'on es troba el visitant. Per exemple, és freqüent que s'utilitzi la convenció que la secció actual està ressaltada d'alguna manera, mentre que les seccions relacionades apareixen en color més pàl·lid, més fosc o desenfocades, com a aquest exemple:

Finalment, les icones no tenen per què quelcom estàtic. Una discreta animació pot ser una solució ideal per a assenyalar alguna cosa en una pantalla. Les animacions no tenen massa secrets. Ja sabem que podem generar-les com a GIF, o també utilitzar Flash (segons vam comentar en les nostres pàgines de gràfics per a la web.) Per a les icones animades és preferible optar per un gif animat. El tamany del fitxer serà reduït, i de segur que es veurà en qualsevol navegador.

[ Nota: Aquest text s'ha traduit del castellà amb l'ajut del programa pilot de la Universitat d'Alacant. Han calgut just unes poques correccions. ]

{ A dalt }

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