Latest forum activity...
Adidas Tubular Nude Marrón Claro Comprar ...
Forum: Raster
(0 Replies) View latest post
awwLeopold7
prije 2 dana, 3h
Adidas Superstar 80s Gold Metallic Comfort
Forum: Raster
(0 Replies) View latest post
awwLeopold7
prije 2 dana, 3h
practice tests
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 3 dana, 0h:19min
practice tests
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 3 dana, 0h:25min
practice tests
Forum: DTP i print dizajn
(0 Replies) View latest post
Arunakila
prije 3 dana, 0h:35min
Adidas EQT Sub Vert Promo
Forum: Raster
(0 Replies) View latest post
aasBorg6
prije 9 dana, 3h
Nike Air Max 2016 Summit White Comfort
Forum: Raster
(0 Replies) View latest post
aasBorg6
prije 9 dana, 3h
New Balance 1600
Forum: Fotografija
(0 Replies) View latest post
guuranelyn
prije 11 dana, 2h
 
 To the forum... 
Pošalji ovu stranicu prijatelju


Flash (2)
Freehand (4)
HTML (4)
Photoshop (7)
Programiranje - PHP (3)


 
» Username:
» Password:
Autologin?

 
» Registrirajte se!
» Zaboravili ste password?
257 korisnika je trenutno online
 
19 @ 0.074652
x



Rezanje za web - Image Ready

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)

HTML
31.12.2003 13:17 31.12.2003 13:17 5    


printer friendly version

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.

Slika 1.

1. Prilikom crtanja gornje slike, na umu smo imali sljedeće zahtjeve:

  1. slika šalice mora konstantno biti u lijevom kutu.
  2. www.mi3dot.org mora biti skroz u desno
  3. e-mail takodjer
  4. natpis imageready tutorial mora biti u lijevo
  5. zastave moraju biti na desno
  6. 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.

Slika 2.

Zašto ovako? Idemo redom i pratimo zahtjeve/pravila koja smo si prije zadali:

  1. 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.

  2. 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.

  3. 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.

  4. ImageReady tutorial mora biti lijevo.
    Izdvojimo ga samog.

  5. 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.

  6. 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.

Slika 3.

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.

Slika 4.

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:

Slika 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.

Spušio 4 sata života na posao od 10 minuta: emptyhead
Čupao kosu zbog lošeg originalnog html-a:): che.UP

« povratak

Komentari

Fala
Emti popapaj pa idemo... :))
thx :)
 Komentar: Zeus 02.01.2004 00:26
re: Rezanje za web - Image Ready
go practice... lara :).
 Komentar: emptyhead 03.01.2004 14:48
re: Rezanje za web - Image Ready
kaj sam ja lud il vam linkovi na tutoriale ne rade?
 Komentar: četnikpo 27.03.2004 01:07
re: Rezanje za web - Image Ready
klikaj na naslov, ukoliko nisi do sada skuzio:)
 Komentar: che.UP 29.03.2004 19:51
re: Rezanje za web - Image Ready
super.
ajde sad jedan tut o prebacivanju ovoga u Dream
 Komentar: bobinjo 01.08.2007 22:11
** Trenutno niste ulogirani pa ne možete ni dodavati komentare **