Alati koji su na raspolaganju unutar Adobe Photoshop-a CS5, ne samo da vam omogućavaju stvaranje grafike, već vam pružaju kompletnu kontrolu za optimizaciju te grafike u slučaju da želite da je postavite na Web, kao i mogućnost da stvorite Web stranice, menije ili banere profesionalnog izgleda.
Unutar Adobe Photoshop-a možete kreirati grafiku Web strane, zatim je iseći na isečke, potom generisati HTML kod i slike, koje potom možete uvesti u program poput Dreamweaver-a radi dalje obrade.
U ovoj lekciji ćemo vas upoznati sa upotebom alata Slice, koji vam omogućava da podelite dokument u više delova, praveći njime isečke, a potom primenite različite načine optimizacije na te isečke, koja će zavisiti od grafike koja se nalazi na njima. Tu optimizaciju ćemo izvršiti u Save For Web & Devices dijalogu, čije ćemo opcije detaljnije objasniti.
Slice Tool deli sliku na više manjih slika, koje se ponovo sastavljaju u veću, uz pomoć HTML-a ili CSS-a, na Web strani. Upravo preko tog deljenja veće slike na manje delove, u stanju ste da svakom od tih delova dodate npr. URL na koji korisnik može da ode u slučaju da klikne na neku oblast koju definiše Slice (deo). Zahvaljujući Slice-ovima, u stanju ste da izvršite različite optimizacije za različite segmente vaše grafike, drugim rečima, Slice-ove koji sadrže oblasti u kojima se nalaze fotografije, možete da optimizujete u JPG format i da im stavite veći procenat kvaliteta, dok ćete delove, tj. Slice-ove koji sadrže oblasti sa manje detalja sačuvati npr. u GIF formatu i smanjiti im kvalitet. Bez Slice-ova, cela slika bi morala da bude optimizovana na isti način. Takođe, u Photoshop-u CS5, za razliku od ranijih verzija, više vam nije na raspolaganju program Image Ready, tako da se sva sečenja slika i njihova optimizacija direktno radi u Photoshop-u, a kasnije se dobijeni HTML i slike eksportuju obično u Dreamweaver radi finalizacije projekta.
Da biste iscrtali Slice, izaberite Slice Tool iz Toolbox-a, zatim klinite na mestu gde želite da Slice počne i iscrtajte Slice, slično kao da crtate selekciju sa Rectangular Marquee Tool. Pošto iscrtate Slice, oko njega će se pojaviti tamnonarandžasto uokvirenje sa plavim vođicama - ovo uokvirenje označava trenutno aktivan Slice. Kada iscrtate sledeći Slice, on će postati aktivan, a prethodni će kao rezultat toga preći iz tamnonarandžaste u plavu boju.
Postoji nekoliko vrsta Slice-ova:
Trenutno aktivan (tamno-narandžasti) Slice i isečci oko njega
Svaki Slice poseduje sledeće karakteristike:
Ako, dok imate izabran Slice Tool, pređete preko Slice-a koji je već iscrtan i pritisnete Ctrl, ovaj alat će se pretvoriti u Slice Selection Tool. Ovim alatom možete da izaberete iscrtani Slice, možete da mu pomerite granice, tako što ćete kursor pozicionirati na ručke koje se nalaze na toj granici, a zatim ih povući u željenom pravcu...
Ako dva puta kliknete na neki Slice dok je izabran alat Slice Selection Tool, otvoriće vam se prozor za Slice Options, u njemu možete definisati:
Ako poželite, možete da isključite vidljivost za Slice-ove, tako što ćete da odete na View > Show > Slice (isključite ovu opciju).
Pošto isečete stranicu na Slice-ove, možete ih optimizovati, tako što ćete otići na:
File > Save for Web & Devices... (otvoriće vam se novi prozor).
Postoje tri osnovna formata za web:
Levi deo prozora zauzimaju line alati za navigaciju, pipeta i dugme za skrivanje linija Slice-a, a sredinu zauzima Preview. Odmah ispod ovog prozora se nalaze podaci o veličini aktivnog Slice-a. Desni deo je rezervisan za opcije koje se ispisuju za svaki format ponaosob, a spomenućemo najvažnije:
Lossy (GIF) – Smanjuje veličinu fajla, tako što selektivno otpušta određene podatke. Često možete da primenite ovu opciju i do 30-ak posto, a da ne narušite izgled Slice-a ili slike.
Color Reduction Method and Colors:
Dithering Method and Dither – ova metoda služi za simuliranje boja koje nije moguće prikazati na vašem sistemu. Ako je ova vrednost veća, stvoriće se utisak da slika ima više boja i detalja, morate voditi računa da ipak ne preterate, jer to može rezultirati i većom veličinom fajlova.
Transparency and Matte - opcija Transparency omogućava prikaz providnih piksela kada je uključena. Opcija Mate stapa izabranu boju sa transparentim pikselima.
Transparency Dithering – U slučaju da je čekirana opcija Transparency, možete da izaberete Dithering metodu. Po predefinisanim vrednostima je na No Transparency Dither.
Interlace – ako je ova opcija čekirana, u Browser-u će se prvo prikazati slika lošije rezolucije, dok se ne učita slika u punoj rezoluciji.
Web Snap – ova opcija približava trenutnu boju najbližoj boji u Web paleti boja, na osnovu tolerancije koju ste zadali.
Opcije za PNG format su veom slične kao kod GIF formata, razlikuju se samo u kvalitetu kompresije. PNG je nešto savremeniji format.
Kada klinete na Save, otvoriće se novi prozor koji vam pruža mogućnost da sačuvate: