U ovom članku ćemo pogledati kako kreirati izgled web stranice koristeći Adobe Photoshop.

U članku ću koristiti rusku verziju CS6, ali sve navedeno je pogodno za bilo koju verziju Photoshopa do CS2, a sve komande na ruskom jeziku su duplirane na engleskom.

Ni za koga nije tajna da razvoj bilo koje stranice počinje sa izgledom. I već prema gotovom izgledu, layout je napravljen i PHP kod je prilagođen.

Ovde ćemo za primer uzeti kreiranje internet prodavnice, jer trenutno e-commerce stranice, i uklj. online prodavnice ne samo da dobijaju na popularnosti, već su i najsloženije i najzanimljivije za razvoj.

Ovo je ono što dobijamo kao rezultat:

Napomena. Za bolje razumijevanje materijala, možete preuzeti gotov PSD šablon za temu stranice sa linkova na dnu ove stranice.

Pa hajde da počnemo.

1. Kreiranje pozadine

Prvo što treba da uradite je da kreirate novi dokument (pritisnite Ctrl+N) dimenzija 1020 x 1200 piksela na beloj pozadini i popunite rezultujući pozadinski sloj pomoću alata "Fill" (Paint Bucket Tool) sa svijetlo sivom bojom D7D7D7.

2. Horizontalni meni za prijavu/registraciju

Za normalan rad online prodavnice važna je pogodna registracija za korisnike, ova tačka se mora uzeti u obzir pri razvoju stranice. Stoga ćemo napraviti poseban horizontalni podmeni za prijavu/registraciju koji se nalazi na vrhu stranice stranice.

Kreirajte novu grupu slojeva, nazovimo je "prijava/registracija" iu njoj novi sloj, to će biti pozadina za meni, ja sam je nazvao "nazad" .

Napomena. U budućnosti će se svi novi elementi kreirati na novim slojevima i grupirati po temama. Ubuduće ovo neću spominjati da uštedim vrijeme.

Upotrebom alata Rectangle Marquee Tool kreirajte selekciju visine oko 50px i širine cijelog platna, popunite ga crnom bojom (000000). Evo kako izgleda izgleda u cijelosti:

Poništi odabir pritiskom na Ctrl+D. Pozadina za meni je spremna.

Sada napravimo polja za unos i dugmad za prijavu i registraciju u gornjem desnom uglu sajta. U paleti Boje, postavite boju prednjeg plana na 313131, zatim uzmite alat zaobljeni pravougaonik, unesite radijus vrha od 3 piksela u traku sa opcijama i prebacite mod na "pikseli" :

Sada kreirajte pravougaonik širine 125 i visine 30 piksela. Ovaj pravougaonik će služiti kao obrazac za prijavu. Unesimo tu riječ "login" , boja za unos teksta je FBFCDD, veličina znakova se bira ovisno o fontu, koristio sam Arial font veličine 13 pt. Grupirajte ova dva sloja:

Ovako izgleda ovo polje za unos pune veličine:

Duplirajte ovu grupu, preimenujte je u "pass" i pomerite je malo udesno. Zamijenite slova u tekstualnom sloju kružićima (kao ovi: ????????). Ovo će biti polje za unos lozinke:

Sada kreirajmo dugmad za prijavu i registraciju.Na isti način na koji ste kreirali pravougaonik za polje za unos, kreirajte još jedan pravougaonik, ali ovaj put širine 70px. Primijenite stilove slojeva na njega Inner Shadow (Unutarnja sjena) i Gradient Overlay (Gradient Overlay) sa sljedećim parametrima:

Dodajte tekstualni sloj sa tekstom "Prijava" sa slovima iste veličine i boje kao u poljima za unos. Poravnajte riječ vodoravno koristeći opcije poravnanja.

Na isti način kreirajte još jedan pravougaonik, ali ovaj put širine 90 piksela, primijenite iste stilove sloja na njega, pozicionirajte ga desno od gumba za prijavu i kreirajte tekstualni sloj sa riječju "Registracija“. Trebalo bi da završite sa nečim poput ovoga:

3. Kreiranje zaglavlja web stranice

Upotrebom alata Rectangle Marquee Tool kreirajte selekciju visine 115 piksela i širine cijelog platna i popunite je crnom bojom (000000):

Sada dodajte stil preklapanja gradijenta ovom sloju sa sljedećim postavkama:


To je to sa pozadinom. Sada moramo odrediti mjesto na kojem će se postaviti logo web stranice i gdje će se nalaziti linkovi na odjeljke online trgovine. U logotipu ću koristiti bijeli Calibri font (FFFFFF) 40pt, a za linkove Helvetica Bold font F7F6F6 (Helvetica font sa podrškom za ćirilicu nalazi se u arhivi, koji možete preuzeti sa linkova na na dnu stranice). Rezultat je tako sladak šešir:

Da označimo aktivnu vezu, napravićemo podlogu ispod nje pomoću alata Rounded Rectangle Tool, samo će radijus zaokruživanja sada biti jednak polovini visine pravougaonika, 20 piksela, odnosno sam pravougaonik biti visok 40, a širina će se birati ovisno o dužini riječi u linku. Evo, negde ovako:

Sada dodajmo efekat uvlačenja ovom pravougaoniku, za ovo ćemo dodati stilove slojeva “Stamping” (Bevel and Emboss), “Inner shadow” (Inner Shadow) i
“Gradient Overlay” ( Gradient Overlay).Postavite stilove na sljedeće opcije:

Rezultat bi trebao izgledati ovako:

To je sve za sada sa šeširom.

Obrazac za pretragu

Upotrebom alata Rectangle Marquee Tool kreirajte selekciju visine 64 piksela i širine cijelog platna i ispunite je crnom bojom (000000):

Primijenite stilove Inner Shadow i Gradient Overlay na sloj sa sljedećim postavkama:

Sada kreirajmo formu za unos za upite za pretragu. Kao i obično, za ovo ćemo koristiti alat Rounded Rectangle, ali ovaj put sa radijusom od 10 px.Napravite pravougaonik visine 42px i širine 306px i primijenite iste stilove slojeva kao prošli put sa sljedećim postavkama:

Kao rezultat, dobićemo sledeći formular za pretragu:

Sada ostaje da dodate ikonicu-dugme da započnete pretragu i unesete podrazumevani tekst koji će nestati kada kliknete na formular (ikonicu možete preuzeti sa linkova ispod, nalazi se u arhivi zajedno sa gotova PSD datoteka šablona i fonta teme online trgovine):

Samo trebamo dodati padajući meni za listu kategorija proizvoda u ovaj odjeljak.

Uradimo ovo sa alatom Rectangle Marquee Tool, kreiramo selekciju 140 x 27 px i popunimo je crnom bojom:

Dodajte ovom sloju stilove Gradient Overlay (Gradient Overlay) i Stroke (Stroke) i postavite im sljedeće parametre:

Koristite Poligonalni laso alat da kreirate trougao sa strelicom sličan onom prikazanom ispod i popunite ga crnom 000000. Dodajte tekst "Kategorije" s bojom 323232:

Slider Show

Pod formom za pretragu postavićemo slajd šou sa opisima proizvoda i slikama.Za početak ćemo napraviti pozadinu-supstrat za promjenu slika. Koristeći Rectangular Marquee Tool, kreirajte odabir veličine 958 x 304 px, popunite ga bijelom bojom i stavite ispod područja pretraživanja. Poravnajte sloj horizontalno u odnosu na pozadinu koristeći opcije poravnanja sloja:

Dodajte sljedeće stilove svom sloju:

Sada moramo dodati slike koje će činiti klizač. To već ovisi o temi online trgovine. Neka naša radnja prodaje teme za izradu web stranica, ubacite odgovarajuću sliku:

Opšta tema

Kreirajte dva pravougaonika 958 x 158 px, primenite iste stilove kao za pozadinu slajdšoua i postavite ih kao što je prikazano. Ovo će biti pozadina za sadržaj:

Ubacite slike sa temama, tekstualnim oznakama i ikonama, koje možete preuzeti sa seta na linkovima na dnu stranice. Trebalo bi izgledati otprilike ovako:

Podnožje teme

Duplirajte pravougaonik pozadine zaglavlja web stranice, povećajte njegovu visinu na 152 piksela pomoću alata za slobodnu transformaciju (Ctrl+T) i stavite ga na samo dno šablona. Ovo će biti pozadina za podrum. Ovdje ćemo pisati autorska prava itd.

Prvo, napravimo separatore. Koristite alat Rectangular Marquee da kreirate selekciju širine 1 px i visine 120 px, a zatim je popunite sa 030508. Primijenite stil Drop Shadow na ovaj sloj sa sljedećim postavkama:

Unesite tekst, boju FFFFFF za naslove, BBC9D7 za opise i linkove.

Kada završite, rezultat bi trebao izgledati ovako:

Preuzmite arhivu sa gotovim PSD šablonom za online prodavnicu, ikonama i Helvetica fontom sa podrškom za ćirilicu:Preuzmite sa Depositfiles.com

Kategorija: