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 Tools

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:

  • User Slice (korisnički isečci) - Slice-ovi koje ste sami napravili.
  • Layer-based Slices – isečci koji su kreirani iz sloja (Layer-a). Da biste to učinili, idite na Layer > New Layer Based Slice.
  • Auto Slices – kreira sam program, jer mora da iscrta Slice-ove preko oblasti slike koje vi niste obuhvatili ni jednim svojim User Slice-om. Pošto se automatski generišu svaki put kada stvorite novi User Slice, oni vam mogu uštedeti poprilično vreme, jer tokom kasnijeg rada kada budete shvatili po kom principu se generišu, ovaj proces možete okrenuti u svoju korist. Važno je da znate da su svi Auto Slice-ovi povezani i da kao takvi sadrže ista podešavanja za optimizaciju, onog trenutka kada promenite neko od tih podešavanja, vi pretvarate taj Auto u User Slice.

 

 

Trenutno aktivan (tamno-narandžasti) Slice i isečci oko njega

 

Svaki Slice poseduje sledeće karakteristike:

  • Liniju - koja definiše granice Slice-a. Ako su te linije neprozirne, to znači da je u pitanju User ili Layer Based Slice. Ako je u pitanju isprekidana, tačkasta linija, to znači da je u pitanju Auto Slice.
  • Boju – po predefinisanim vrednostima User Based i Layer Slice-ovi imaju plave simbole, dok Auto Slice-ovi imaju sive simbole
  • Broj Slice-a – svaki Slice koji stvorite ima svoj broj. Broj jedan je uvek u levom gornjem uglu, a od njega brojevi idu s leva na desno i od vrha ka dnu slike, tj. dokumenta. Ako rearanžirate položaj Slice-ova, brojevi će biti automatski ponovo ispisani, kako bi reflektovali novo stanje.
  • Slice Badges, odnosno simbol koji se nalazi pored broja – ova ikonica označava određeno stanje:
    • User Slice ima slikani sadržaj.
    • User Slice nema slikani sadržaj.
    • Slice je zasnovan na sloju (Layer-u).

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:

  • Name – u ovo polje možete da upišete ime Slice-a, kojim će da bude nazvan Slice, odnosno slika koja nastane iz njega.
  • URL (Uniform Resource Locator) – unesite adresu Web stranice, ako želite da se ona otvori pošto korisnik bude kliknuo na dati Slice. Da biste uneli apsolutnu, a ne relativnu adresu, pre www, morate da upišete http://. Npr. adresa bi trebalo da glasi http://www.google.com.
  • Target – ovo polje definiše način na koji će se povezana stranica pojaviti, postoji više mogućnosti:
    • _blank – nova stranica će se otvoriti u novom prozoru vašeg Browser-a.
    • _self – nova stranica će se otovriti u istom prozoru, i time će zamenti postojeću stranicu u vašem Browser-u.
    • _parent – u slučaju da vaša stranica sadrži Frameset, možete iskoristiti ovu opciju.
    • _top – zamenjuje ceo prozor vašeg Browser-a sa fajlom koji je povezan.
  • Message Text – u ovo polje, možete da unesete opis stranice do koje vodi link koji ste napravili, tekst će se pojaviti u status baru vašeg Browser-a.
  • Alt TAG – unesite tekst koji će se pojaviti u starijim čitačima ukoliko ne mogu da prikažu grafiku, ili će iskočiti u vidu Pop up prozora, ako korisnik zadrži kursor miša nekoliko sekundi iznad Slice-a koji ima ispisan tekst za ovu opciju.


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:

  • Compu Serve GIF – ovaj format zahteva konvertovanje i Indexed Color režim (mod od 256 boja). Takođe, ovaj format omogućava transparentost. U njega konvertujete Slice-ove koji nemaju veliki broj boja i prelaza između boja...
  • JPEG – iako ovaj format ne podržava transparentnost, idealan je za optimizaciju fotografija i drugih slika sa velikim brojem detalja.
  • PNG – podržava transparenciju i nudi vam mogućnost da redukujete boje ili kontrolišete Dither...

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:


GIF

 

 

 

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:

  • Perceptual – pravi paletu od boja koje se nalaze unutar Slice-a, dajući prednost bojama koje ljudsko oko bolje opaža.
  • Selective – ovo je predefinisano podešavanje, daje slične rezultate kao Perceptual.
  • Adaptive – stvara paletu, tako što koristi najdominantnije boje u spektru Slice-a.
  • (Restrictive) Web - ako želite da izbegnete Dithering u prozoru vašeg Browser-a, onda koristite ovu opciju, jer daje najlošije rezultate.
  • Custom – koristi paletu koju je korisnik stvorio.


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.

  • Diffusion - primenjuje šablon koji je zasnovan na slučajnom uzorku, ova metoda je manje primetna nego sledeća.
  • Pattern - koristi šablon da bi popunila prelaze u bojama i nadomestila boje koje se ne mogu prikazati.
  • Noise - dodaje šum slici da bi nadomestio boje koje je nemoguće prikazati.


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.


JPG

 

 

 

  • Quality - određuje nivo kompresije. Što je kvalitet veći, više detalja unutar slike će biti sačuvano, ali će veličina fajla biti veća.
  • Optimized – čekiranje ove opcije dodatno će smanjiti veličinu fajla.
  • Progressive – kod učitavanja u Browser-u prikazuje sliku progresivno. Prvo se prikazuje najlošija verzija, pa postepeno sve bolja i bolja. Ovo omogućava korisniku da vidi kako će slika izgledati, pre nego što se ona u potpunosti učita.
  • Blur – dodaje zamućenost slici.
  • ICC Profile – ako ste čekirali ovu opciju, sačuvaćete ICC profil.
  • Matte – pošto ovaj format ne podržava transparentne piksele, svi pikseli koji su to bili biće stopljeni sa bojom koju izaberete u ovom dijalogu.


Kada klinete na Save, otvoriće se novi prozor koji vam pruža mogućnost da sačuvate:

  • HTML and Images – HTML kod (koji će Photoshop generisati) i slike (svaka slika je jedan isečak). Kada otvorite ovaj HTML dokument, slike koje su u posebnom folderu će biti učitane i raspoređene na svoja mesta.
  • Images ony – čuva samo slike.
  • HTML only – čuva samo HTML kod.

 

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Stvaranje sadržaja za Web 1
  • Stvaranje sadržaja za Web 2
  • Stvaranje sadržaja za Web 3