Rezanje
za web - Image Ready
0. go!
Prije nego što uopće počnete rad na nekim web stranicama, dogovorite
sami sa sobom (najbolje na papiru - ne vjerujte si) da li će one biti
100%-tne širine (neovisne o rezoluciji) ili fixne širine
(npr. 760 pixela)
Razlike u pristupu prema 1. ili 2. se dosta razlikuju. Na
Slici 1. se nalazi primjer koj je namjenjen za rad u 100% tablici.
Radi lakšeg praćenja tutoriala, u glavi si sliku postavite kao header
stranice (primjer: http://www.gamer.hr
-> logo). Ispod te slike ide glavni prozor sa sadržajem.
1. Prilikom crtanja gornje slike, na umu smo imali sljedeće zahtjeve:
- slika šalice mora konstantno biti u lijevom kutu.
- www.mi3dot.org mora biti skroz u desno
- e-mail takodjer
- natpis imageready tutorial mora biti u lijevo
- zastave moraju biti na desno
- ovaj kvazimeni ce biti na sredini ove žute trake
Dakle, ova pravila MORAMO odrediti još prilikom kreiranja slike/stranice,
još u photoshopu.
NAPOMENA: Ono na što posebno moramo paziti u slučaju 100%-tne
tablice je na to da postoji ponavljajući dio, pattern, uzorak, koji će
popuniti prazna mjesta nastala zbog širenja "slike".
2. "Guide line"-ovima odijelimo sliku u cjeline (plave crte
na donjoj slici, jel').
NAPOMENA: Moramo gledati lokalno i "četverokutno".
Ako je u pitanju npr. šalica (polje 1), ignorirajmo činjenicu da je horizontalno
podijeljena u 3 dijela. To nama nije bitno. Bitno da je dobro "označena"
vertikalno. To isto vrijedi i za www.midot.org i e-mail. Gledamo samo
dio koj nas zanima i da li ima svoj pravilan izrez.
Konkretno, www.mi3dot.org i e-mail -> pratimo povrsinu koja se nalazi
izmedju vodilice ISPRED www.mi3dotorg i IZNAD vodilice ispod e-maila.
Ostala 2 ruba, nama zanimljive površine su rubovi slike. To što jedna
od vodilica presjeca tu površinu - ponavljam - nije bitno - ona je potrebna
drugdje i nije povezana s www.mi3dot.org niti s e-mailom.
Zašto ovako? Idemo redom i pratimo zahtjeve/pravila koja smo si prije
zadali:
- Slika šalice mora biti u lijevom kutu.
Izrezimo samo šalicu.
Logika: napravit ćemo tablicu 100%-tne širine s 2 columne ->
u lijevoj slika šalice -> u desnoj ostalo. Zato se šalica odreže
sama. Visina tablice odredimo po visini slike šalice. Širinu prvog cella
odredimo, također, po širini slike šalice.
- Uzorak (pozadina)
Promotrimo li pažljivo sliku, uočit ćemo da se horizontalne linije protežu
cijelom slikom. Zato smo odvojili i odrezali komadiće uzoraka (3 komada,
za 3 cjeline -> www + mail, zastave i menu) koje ćemo ubaciti kao
background odgovarajućih tablica.
- www.mi3dot.org i email moraju biti skroz desno.
Grupirajmo i odrežimo www.mi3dot.org i e-mail kao 1 sliku, a prostor
između njih i šalice lijevo će popunit ćemo prvim uzorkom iz drugog
polja. U ovom slučaju ih možemo zajedno odrezati jer nećemo dobiti nikakvu
(dobit ćemo zanemarivu) uštedu kilobajta.
Logika: u desnoj columni glavne tablice napravit cemo novu tablicu
sa sirinom 100%, postavit kao pozadinu iste 1 dio uzorka 2 i ubacit
sliku broj 3 + align right. Također, visinu tablice moramo definirati
u pixelima -> a visina tablice mora odgovarati visini slike 3.
- ImageReady tutorial mora biti lijevo.
Izdvojimo ga samog.
- Zastave moraju biti desno.
Izdvojimo i njih.
Ovdje smo mogli grupirati zastave sa brojem 3 (skoro nikakva ušteda
u kilobajtima), ali radi tutoriala nastavimo ovako.
Logika (4 i 5): ispod tablice za broj 3, postavit ćemo novu
tablicu s 2 kolone -> 1 za broj 4 + align left i jednu za broj 5
+ align right.
- Meni mora bit u sredini.
Ok. Izrežimo samo meni.
Logika: I kao zadnje, napraviti ćemo treću tablicu koja će ispod
zastava sadržavati centrirani menu.
Ovo je bila teorija, idemo na praksu. Via ImageReady aka FILE
-> JUMP TO -> IMAGE READY aka CTRL + SHIFT + M
iz Photoshopa. SAD!
NAPOMENA: Teoretski, sve ovo možemo izrezati i u Photoshopu "ručno"
ali je puno lakše i brže to napraviti "automatski" u ImageReadyu.
3. Ulazak u ImageReady
U slučaju da ste prvi put ovdje - primjetit ćete da je sve skoro identično
kao i u Photoshopu. I imat ćete pravo. Pod uvjetom da imate optimiziran
PC kao i pisac ovih redaka, nakon samo 2 sata čekanja, učitati će Vam
se i materijal za rad. Dakle, pred Vama je opet slika broj 1 + gudelines.
Iz menua SLICES izaberite CREATE SLICES FROM GUIDES. Ukoliko
vam je SLICES VISIBILITY na ON, vidjet ćete sliku 3.
Ukoliko nije, stisnite Q u ImageReady-u.
Odabirom CREATE SLICES FROM GUIDES, ImageReady nam je virtualno
izrezao slike po zadanim vodilicama. Bijeli brojevi na plavoj povrsini
nalaze se u kutevima SLICEova i označavaju istog. U slučaju da
broj 02 ne postoji ovdje, slice bi se protezao od oznake 01 do oznake
03.
Super, peri dalje? Jok. Pošto vodilce ne možemo postavljati ili lomiti,
ImageReady nam je izrezao i prepilio neke slike koje mi želimo kao cjele
(menu, slika šalice, www.mi3dot.org, itd.). Kako kompjuter nikad ne radi
ono što mi želimo nego ono što mu kažemo, na nama je da mu objasnimo detaljnije
gdje i kako -> spajajući sliceove.
Iz Toolbara izaberite SLICE SELECT TOOL.
NAPOMENA: SLICE SELECT TOOL i SLICE TOOL nisu isti. Na slici
4. je označen SLICE SELECT TOOL. Kao što mu i samo ime govori, pomoću
njega označavamo izreze/SLICEOVE. Pomoću SLICE TOOLa režemo. Trenutno
nam on nije potreban, stoga za sad zaboravite da postoji.
Prisjetimo se pravila: ŠALICA IDE CIJELA. Ok, nema beda. Stisnimo SHIFT
i s izabranim SLICE SELECT TOOL- om kliknimo na SLICE-ove 1,7 i 13. Selektirani
sliceovi će biti tamniji od ostalih (tj. biti će originalne boje, ostali
su svjetliji). Da bi spojili izreze, iz SLICE menua izaberimo COMBINE
SLICES. Dobili smo samo jedan izrez iznad šalice. Mrak.
Krenimo dalje. Gornji postupak ponovimo na layerima 4, 5, 6. Ne zaboravite
prije svega deselektirati SLICE 01.
NAPOMENA: tablice su četverokutnici - ne možemo izrezati višekutnu
sliku ili trokut (teoretski možemo, ali nije poželjno) - IZBJEGAVATI.
Mozak u glavu, SLICE SELECT TOOL u ruke, prisjetimo se pravila i idemo
dalje. Spojimo 11 sa 12 te 15 sa 16 i 17. Sliceovi 3 i 10 i 18 nisu bitni,
neće se pojavljivati na našoj stranici, dok 2,8, 9 i 14 želimo BAŠ takve
(gledati SLIKU 3 kao referencu).
Ako ste radili pravilno, na ekranu Vas gleda slika identična slici
5:
4. Optimizacija
Ostala nam je još optimizacija sliceova aka malih izrezanih sličica koje
ćemo dobiti na dar od ImageReadya. Iz taba na vrhu, ispod menija, izaberimo
OPTIMISED - sacekamo da nam iscrta sliku i provjerimo u status
baru koliko nam megabajta ista zauzima. Zadovoljava li nas iznos ili ne
- svejedno je mudro otići na WINDOWS -> SHOW OPTIMISED,
izabrati SLICE SELECT TOOL i provjeriti da li koju slikicu možemo
još više optimizirati. Na ovom primjeru je dovoljno ostaviti settingse
na GIF - 32 boje, dithered, seletive, diffusion (sve skupa 5 kb).
5. Teh end
Ako smo zadovoljni dobivenim, iz FILE menija odaberimo SAVE
OPTIMISED AS. Odredimo da želimo snimit samo slike bez htmla (IMAGES
ONLY) - pokažemo direktorij i vozi. Sve što nam ostaje je upalit Dreamweaver
i posložit naše lego kockice. Pošto bi to bio drugi tutorial, ovdje ću
pejstat samo gotov kod.
Link na stranicu:> 100%tna širina
<html>
<head>
<title>100%-tna sirina</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1250">
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0"
cellpadding="0" height="87">
<tr>
<td width="149"><img src="buc/riviera_01.gif"
width="149" height="87"></td>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0"
cellpadding="0" background="/modules/tutorials/content/57/"buc/riviera_02.gif">
<tr>
<td>
<div align="right"><img src="buc/riviera_04.gif"
width="154" height="38"></div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="0" height="21" background="/modules/tutorials/content/57/"buc/riviera_05.gif">
<tr>
<td width="132"><img src="buc/riviera_06.gif"
width="132" height="21"></td>
<td>
<div align="right"><img src="buc/riviera_08.gif"
width="114" height="21"></div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="0" height="28" background="/modules/tutorials/content/57/"buc/riviera_09.gif">
<tr>
<td align="center">
<div align="center"><img src="buc/riviera_10.gif"
width="273" height="28"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sva pitanja u vezi ovog tutoriala, sve nejasnoće i ostalo vezano uz Dreamweaver,
Photoshop ili ImageReady, molim, pitajte na našem forumu
- ne mene u e-mail. Em nemam vremena, em nemam volje svakome ponaosob
odgovarati na pitanja. Na forumu će Vam biti odgovoreno ili od strane
mene ili od strane nekog drugog tko zna, a također će ostati kao odgovor
drugome s istim problemom. Hvala na razumjevanju.
|