Un dels elements més característics
de les webs són les imatges. Abans d´inserir una imatge
en una pàgina, s´ha de gravar a la carpeta de la web
i s'ha de veure si té la mida correcta: tot el que pasi de
300-400 píxels és problemàtic, perquè
desconfigura la pàgina.
A més , a les webs només
podem penjar imatges en format jpg., jpeg., gif.,o png. Els bitmaps
(.bmp ), i altres tipus d'arxius, no es veuen.
QUÈ
CAL FER PER INSERIR UNA IMATGE AL DREAMWEAVER?
Des del Dream, anar a
la finestra flotant Objetos-Común-i clicar el dibuixet de
l'arbret. Llavors s'obre una finestra de selecció de l'arxiu
i cal buscar-lo en la nostra carpeta web (sobretot, que estigui allà!)
. Per exemple:
Si
mantenim la imatge seleccionada, veurem que surt a la finestra PROPIEDADES
. I s'hi poden fer algunes coses: estirar-la o encongir-la (en tots
dos casos perdrà qualitat, és clar), alinear-la , posar-li
"borde",i altres coses que farem més endavant.
Si,
en comptes de la imatge, ens surt una icona grisa, vol dir que no
ho hem fet bé. Potser hem copiat el nom amb majúscules
on hi havia minúscules, o té un format que la web no
accepta...etc.
Les
imatges poden anar a l´esquerra, la dreta o al mig, però
només hi pot anar una línia de text a la seva vora,
perquè s´alineen les dues coses (el text a dalt,
a baix, al centre, etc.) Si es vol fer millor, cal fer servir taules,
la qual cosa veurem dins de dues lliçons.
Una
imatge no hauria de ser més gran de 200 kb per no dificultar
la càrrega de la pàgina. És
millor posar-la petita . Per reduir-la de mida, en comptes de fer-ho
directament, quan ja està sobre el Dreamweaver, ésmillor
usar un programa de dibuix , que , a més ens permetrà
manipular-la, escriure-hi coses al damunt, fer fotomuntatges, etc.
Per exemple, podem fer servir el Paint Shop Pro, com us explico més
avall.
COM
CREAR UN LOGO PER LA NOSTRA PÀGINA
Hi
ha algunes pàgines, a Internet, que ens permeten crear un logo
o títol ben vistós, amb format d'imatge . Fixeu-vos:
|
http://www.grsites.com/logo/
Mireu quins
exemples n'he fet jo, sobre aquesta web, i en un moment!:
Recordeu sempre
de gravar-vos la imatge que us ha fet aquesta pàgina,
només si ja us sembla bé! Si no, continueu fent
provatures
|
Consell
: Una pàgina
web s'assembla molt a una pintura. I els webmasters ens sentim gairebé
com artistes. Penseu que allò que estem creant pot ser vist
per tota mena de persones, de totes les edats, sexes, cultures, ideologies...i
d'arreu del món! Ho dic perquè convé utilitzar
la nostra sensibilitat a l'hora d'usar els colors en el fons, en els
títols, en les imatges, en tot! Ja sabeu que hi ha colors que
fereixen el nostre bon gust : groc llimona+fúcsia, lila+marró...De
vegades, canviant el to, matisant el color, millorem molt l'estètica.
Jo, per exemple, sóc persona de colors vius, i no de tons "pastel"
(el color marró dels quadres d'aquesta pàgina, per exemple,
no és sant de la meva devoció , però he d'apaivagar
una mica el groc vistós de la columna...), i no m'agraden gens
els fons de pantalla blancs... Tots teniu una personalitat que mostrareu
a través de la vostra web...no sigueu "horteres".
INSERIR
UNA BARRA SEPARADORA
Algunes webs tenen
barres separadores dels continguts. El Dreamweaver permet posar-ne
una, que està a la finestra flotant OBJETOS-COMÚN
i és una icona amb una línea blava horitzontal entre
pespuntejats que simulen les línies de text. Surt així:
Però a altres llocs haureu
vist barres molt decoratives. Evidentment, ja sabeu on anar-les a
buscar:
MANIPULACIÓ
D'IMATGES
EL
PAINT SHOP PRO 5.O
Les imatges que volem
posar en una web s'han de tractar fora, amb un altre programa. Les
explicacions que segueixen es basen en el el PAINT SHOP PRO 5,
un programa que el Dep. D'Ensenyament també facilita als instituts
gratuïtament.
La pantalla d'inici
del Paint Shop Pro ha de tenir la paleta de colors a la dreta I les
barres d'eines a dalt i a l'esquerra. Si no surten, cal clicar-les
a VER-BARRA DE HERRAMIENTAS.
Quan hi ha una imatge sobre l'escriptori, s'obre la paleta esquerra.
La paleta dreta, de colors, serveix per a seleccionar els colors de
la imatge: si ens situem sobre el gradat de color i fem clic amb el
ratolí esquerre agafem el color del primer pla; el ratolí,
clic dret, selecciona el color del segon pla.
Per saber com funciona cada icona, podeu clicar ?
i arrossegar-lo a la icona de l´eina.
OBRIR
UNA IMATGE
Cal
fer el següent: Archivo-Abrir-selecció del fitxer-Obre.
També es pot fer directament des de la icona de la carpeta
que s'obre, a dalt.
El tamany de la imatge apareix a baix, a la cantonada inferior dreta
de la barra de sota, quan posem el cursor sobre la imatge .
Per tant, la imatge que veiem a l'escriptori NO TÉ LA MIDA
REAL DE LA IMATGE, sinó que pot arribar a ser molt més
petita, del que medeix en realitat.
La
lupa de l'esquerra permet augmentar (clic esquerre) o disminuir (clic
dret), però no modifica els valors de la imatge.
PER
CANVIAR EL FORMAT D'UNA IMATGE
Si
tenim una imatge en BMP (mapa de bits), treta d'Internet, podem OBRIR-LA
amb el Paint Shop Pro i anar a Archivo-Guardar copia como:
i seleccionar (si és que ja no surt seleccionat des
del principi) el format "compatible con jpg,jpeg,gif,png..."
I guardar-la a la nostra carpeta. Recorda't després
d'eliminar la del bmp, per no confondre't entre les dues!
OBTENIR
IMATGES MITJANÇANT UNA CAPTURA DEL PAINT SHOP PRO
De vegades, les
imatges de les web d'Internet no es deixen copiar ni guardar. Per
a poder-ho fer, hi ha una eina del Paint Shop Pro que és molt
útil. Cliqueu, a dalt de tot, Captura-Iniciar .
Llavors desapareix el Paint i s´obre la pantalla d' Internet
que ja teníem oberta prèviament, amb la imatge que volem
agafar. Clicant el botó dret ratolí apareix una creu,
llavors s'ha de clicar l'esquerre, i quan es deixa anar apareixen
uns números (els píxels que ocupa la captura) i el cursor
adopta la forma quadrada que necessitem per fer la selecció.Quan
tenim el quadre que volem, es deixa anar i la imatge ens apareix integrada
a l'escriptori del Paint.
LA
SELECCIÓ PRÈVIA A LA MANIPULACIÓ DE PARTS DE
LA IMATGE
Si volem manipular una imatge
cal fer una selecció de la zona que ens interessa. Gràcies
a això, es pot esborrar aquesta zona, copiar-la i enganxar-la
a una altra banda, buidar-la i repintar-la d'un altre color, fer fotomuntatges...
el que volguem!
Les formes de seleccionar són:
Amb el rectangle
pespuntejat de la paleta de l'esquerra, selecciones zones de la
imatge (a la segona barra de dalt hi ha una icona que sembla una harmònica,
que quan es clica, permet canviar la forma de la selecció:
quadrada,rodona, el.líptica).
Amb el globus
pespuntejat de la paleta de l'esquerra, fas la selecció
amb el ratolí, amb petites línies que segueixin el contorn,
clicant diversos cops, fins arrribar al final de la zona que selecciones.
És la forma més difícil!
Amb la vareta
màgica de la paleta de l'esquerra, et poses sobre una zona
i te la selecciona per colors pròxims, excepte les vores, segons
els colors RVA (rojo,verde,azul). No és massa fina...
Selecció
inversa: a la barra de dalt , cliqueu Selecciones-Invertir
(primer selecciones una àrea que no t'interessa, perquè
t'interessa la contrària , i en clicar aquest menú s'inverteix
la selecció)
MANIPULACIÓ
DE L'ÀREA SELECCIONADA
Les coses que es
poden fer amb la zona seleccionada són:
Retallar :CTRL+X
o bé Editar-Cortar
Copiar : CTRL+C
o bé Editar-Copiar
Esborrar : SUPR
o bé Editar-Borrar
Retallar-la i
moure-la amb el cursor: fletxes nord-sud-est-oest.
Enganxar
el tros en una altra banda : CTRL+ V o bé Editar-Pegar.
L'opció de PEGAR té diverses formes: como nueva
imagen, como nueva selección, como selección transparente...
La primera opció te l'enganxa com una nova imatge, que
ja pots guardar a la carpeta. Les altres opcions són per enganxar
aquell tros sobre una altra imatge, PER A LA QUAL COSA HAS DE TENIR
SELECCIONADA AMB EL CURSOR LA IMATGE DE DESTÍ, (i saps si la
tens seleccionada perquè s'activa el color blau del voltant
de la imatge) SI NO, NO S'ENGANXA.
Retallar
i que es col.loqui sobre una imatge de fons transparent : has de crear
una imatge amb fons transparent i després : Pegar como nueva
capa (no es mou del centre) o Pegar como nueva selección
(la pots moure). Si no crees la imatge, s'enganxa sobre la
mateixa imatge d'on l´has retallat o copiat.
Si
fas Selección transparente, t´esborra el fons
de la imatge que has retallat o copiat.
Orientar:
A la barra de dalt, clica Imagen-Reflejar (mirall), Invertir (cap
per avall), Rotar (girar i triant quants graus i en quina direcció).
Es pot fer amb tota la imatge o només amb la part seleccionada.
Canviar
de tamany: A la barra de dalt, cliques Imagen-Modificar tamaño-porcentaje.
Si voleu reduir-la , trieu el 50% (si voleu la meitat de la mida)
o el percentatge que volgueu. Que estigui activat "tamaño
inteligente" i "mantener relación de aspecto",
si no, la imatge es veurà malament. Si voleu ampliar el tamany
de la imatge, perdrà qualitat. Fixeu-vos amb el que passa amb
una imatge que té, originàriament 32 x 32 ( 3 Kb) quan
s'amplia a 128 x 128 (48 Kb)...lletja, oi?:
INCLOURE
TEXT EN UNA IMATGE
Heu
de clicar la lletra "A" que apareix a la paleta de l'esquerra.
En el quadre de la finestra, cal escriure el que volguem i amb el
format que volguem, acceptar, i el text se'ns col.locarà al
lloc on tinguem el cursor sobre la imatge, però el podrem moure
mentre estigui pespuntejat -seleccionat-. Ens apareixerà també
del color que tinguem seleccionat en primer pla a la paleta de colors
de la dreta, però podem posar-hi el color que volguem (amb
l'eina d' inundació -el pot de pintura que bolca, de l'esquerra-o
l'esprai -el pot d'esprai de l'esquerra-) i després CLIC DRET
i queda fixa.
Mentre
estigui seleccionat el text PODREM ESBORRAR-LO, si no ens agrada.
Si ens hem despistat i queda fixat, però no ens agrada, cal
anar a Deshacer...
PINTAR
O TAPAR TAQUES
Amb l'eina del comptagotes de l'esquerra, clicant sobre la zona que
volem esbrinar quin color -codi hexadecimal- té, se selecciona
el 1r pla.
Amb la lupa de
l'esquerra amplies la zona a repintar.
Amb el pinzell
de l'esquerra, pintes la zona, píxel a píxel, si vols
que quedi bé. Si no queda bé : Editar-Deshacer...o
CTRL+Z
També es
pot treballar amb altres eines de l'esquerra:la goma, el pot de pintura
o l´eina retocar...
Si
es clica "l'harmònica" de la barra de dalt,es pot
modificar alguna de les eines:Per exemple, la del pinzell. L'harmònica
permet decidir el Control i la Punta (+ gran o + petita, direcció
de la pinzellada...). Això és molt útil per retocar
imatges, canviar el color de zones concretes, etc.
CANVIAR
COLORS DE LA IMATGE
Si voleu canviar totalment els
colors, tonalitat, brillantor, ombres, etc.de la imatge, fins que
no la reconegui ningú, podeu anar al menú de la barra
de dalt, on diu COLORES :
Colores-Ajustar
(brillo/contraste, Corrección/Gama; Resalte/Tono medio/Sombra;
Tonalidad/Saturación/Claridad; Mapa de tonalidad, Rojo/Verde/Azul).
Colores- Colorear...etc.
...i tot el que ve a sota. Seria
molt llarg explicar-ho tot, però podeu anar fent provatures
i APRENDRE-HO solets/es.
I recordeu! Si
no us agrada: Editar-Deshacer o CTRL+Z
Un petit exemple del que es pot
fer:
FONS
TRANSPARENT
De
vegades, volem crear una imatge que no tingui fons de cap color, perquè,
quan la posem sobre la nostra pàgina, agafi aquell fons. Com
fer-ho?
Obrim
la imatge. Seleccionem com a color de fons o 2n pla, el del fons
de la imatge (fent ús del comptagotes, clic dret sobre
el color de la imatge, però com que surt com a primer pla,
mirem el codi hexadecimal, cliquem botó dret, escrivim el mateix
codi hexadecimal)
Després:
Colores-Configurar el valor de transp. Según el color actual
de 2º plano i provar i la imatge surt amb el fons transparent.
(abans pot demanar si la posem en profunditat de 256 colors o mostrar
2n pla:hem de dir que sí i estàndard)
Si és un
gif, quan guardem la nova imatge, fem Guardar cuadro como-Opciones
i marquem Versión 89ª. No entrelazados.
Si
no us surt, sempre hi ha una altra opció: apuntar-vos el codi
hexadecimal que té el fons de la vostra pàgina i pintar,
retallar i inundar, etc. el fons de la vostra imatge del Paint Shop
Pro, amb el mateix codi hexadecimal com a primer pla.
TUB
D´IMATGES
L'eina de tinter i el pinzell són imatges predissenyades (peixos,
cotxes, boles, aranyes...) que es poden incloure en la imatge, al
lloc on posem el cursor, clicant una cada cop.És un tub d'imatges
perquè n'hi ha moltes d'aquell tema i van sortint aleatòriament,
a mida que cliquem cada vegada, en cada zona. La pàgina d'inici
de la meva web, feta amb papallones, està creada amb aquest
tub d'imatges. I aquí en teniu un altre exemple, ara amb boletes
i escarabats (totes dues imatges tenen el "fons transparent"
amb trampeta: els he posat el codi de la meva web: ffff9C):
EINES
DE POT DE PINTURA I D'ESPRAI
Aquestes
dues eines permeten pintar el fons d'una imatge amb efectes ben atractius.
Per a fer-ho, cal clicar l'eina de l'esquerra (pot o esprai)i després
l'harmònica de dalt, i triar algun dels efectes que es proposen
en el quadre. Si a això afegiu la tria il.limitada del color,
veureu coses com aquestes:
 |
 |
|
Eina de
pot de pintura, "gradiente radial", blau en segon
pla i negre en primer pla.
|
Eina de
l'esprai, textura "letras", amb els mateixos dos colors
anteriors
|
ÀLBUM
DE FOTOS
Haureu vist en algunes webs, que
hi ha una pàgina feta amb fotos en miniatura que, en clicar-les,
es poden veure al seu tamany normal, molt més grans. Això
permet tenir una visió general del reportatge fotogràfic.
El problema és que, per fabricar un àlbum de fotos,
cal tenir un altre programa de dibuix i fotografia, el FIREWORKS,
de Macromedia. Si el teniu, continueu endavant.
Primer
cal agafar totes les fotos i, amb el Paint Shop Pro, reduir-les
de tamany, fins que tinguin 300 o 400 píxels. Els heu de
donar un títol ben explícit o divertit, perquè
aquest títol sortirà a l'àlbum. Després
s'han de guardar, sempre en format jpeg... (etc) en una carpeta
que digui el tema+origen (per exemple "Nadal-origen")
i posar-la en el lloc de la carpeta-web que estem fent. Al
seu costat, heu de crear una altra carpeta que digui el tema+destí
("Nadal-destí), que és on el Fireworks us gravarà
les imatges en miniatura.
Després,
obriu el Dreamweaver i cerqueu Comandos>Crear àlbum de
fotos web. Se us obrirà una finestra on hi posareu el títol
de la pàgina,els subtítols que volgueu, i
després us demanarà que seleccioneu la carpeta-origen,
i la carpeta-destí, dins del vostre ordinador. Cliqueu
Acceptar, i el fireworks us farà la transformació,
foto a foto. Quan us mostri la pàgina de les miniatures, només
haureu de donar-li color de fons, manipular la taula si és
massa gran, al vostre gust, canviar les lletres dels peus de les fotos
a la lletra que preferiu, etc. I ja està! Comproveu-ho clicant
F12.
Recordeu!
Moltes imatges poden tenir copyright, especialment
si són obres d'art, fotografies artístiques,
etc. Convé citar les fonts.
