U poslednjih nekoliko tekstova iz kategorije Photoshop uputstva, bavili smo se kreiranjem fontova, ikonica i animacija. U ovom tekstu bavićemo se izradom cenovnika koji možete postaviti na svoj sajt, blog, prodavnicu ili tamo gde vi smatrate da je pravo mesto za to.

Cilj ove kategorije nije da se učenje i korist koju možete dobiti uz pomoć ovih tekstova završi na kraju svake stranice. Cilje je da svako može da kombinuje znanje i veštine stečene tokom praćenja naših uputstava i primeni ih u radu za sebe ili za druge.

Photoshop uputstvo za izradu cenovnika za veb-sajt

Pokrenite Photoshop i otvorite novi dokument koristeći izbornik File-New ili kombinaciju tastera Ctrl+N.

Unesite sledeće mere kao veličinu novog dokumenta, Width 900px i Height 720px. Kliknite na dugme OK za kreiranje novog konvasa, dokumenta.

Pokrenite alat pod nazivom Rounded Rectangle klikom na ikonicu za taj alat ili koristeći taster U. Postavite Foreground boju na #f98508. Kliknite na novi dokument i u prozor za postavku zaobljenog pravougaonika unesite mere sa slike ispod. Da bi pravougaonik bio pravilno zaobljen potrebno je u sva polja Radius uneti veličinu 5px. Da dodate pravougaonik kliknite na dugme OK nakon unošenja svih mera.

Nakon kreiranja zaobljenog pravougaonika u paleti slojeva (engl. Layers Palete) stajaće novi oblik (engl. Shape). Radi lakšeg snalaženja možete ga preimenovati u Osnova. Svaki sloj možete preimenovati duplim klikom na postojeći naziv i unošenjem novog imena:

Sada ćemo dodati malo stila ovom našem pravougaoniku. Dok ste još u paleti slojeva kliknite duplim klikom na sloj Osnova kako biste otvorili prozor Layer Style. Aktivirajte stil Stroke i unesite veličine sa slika ispod, odnosno unesite sledeće vrednosti:

• Size: 1 px
• Position: Outside
• Blend Mode: Normal
• Opacity: 60%

Kliknite na dugme OK da izvršite zadavenje stila sloju.

Dodaćemo još jedan stil i to Inner Glow i to na isti način kao i prethodni koristeći sledeće vrednosti sa slike, odnosno tačno ove:

• Blend Mode: Multiply
• Opacity: 12%
• Noise: 0
• Postavite crnu boju (ako već nije tako)
• Technique: softer
• Choke: 0
• Size: 98%

Kliknite na dugme OK da izvršite zadavenje i ovog stila sloju Osnova. Naravno, u svim postavkama možete eksperimentisati i isprobavati razne druge vrednosti jednom kada ovladate tehnikom.

Naš oblik sada izgleda ovako sa svim dodatim stilovima.

Duplirajte sada sloj Osnova koristeći kombinaciju tastera Ctrl+J i novi sloj preimenujte u Tekstura. Razlog za to je što ćemo sada dodati malo teksture obliku koji kreiramo.

Nakon toga pretvorite sloj Tekstura u Smart Object desnim klikom na sloj i biranjem opcije Convert to Smart Object.

Pokrenite dodavanje “šuma” ili “buke” (vizuelno) koristeći izbornik Filter – Noise – Add Noise…. Bitno je da to uradite dok je odabran sloj Tekstura.

U prozoru koji se otvorio postavite sledeće vrednosti za dodavanje efekta:

• Amount: 7
• Distribution: Uniform
• Odaberite Monochromatic opciju.

Za dodavanje efekta kliknite na dugme OK. Izgled možete videti u direktnom pregledu ako ste označili opciju Preview.

Konkretno, to treba da izgleda ovako:

Međutim, tekstura još uvek nije gotova. Dok je i dalje odabran sloj Tekstura, idite na Filter – Filter Gallery.

U Artistic grupi odaberite opciju Underpainting i unesite sledeće vrednosti:

• Brush size: 0
• Texture Coverage: 40
• Texture: Convas
• Scaling: 50%
• Releif: 20
• Light: Top.

Za primenu ovih vrednosti kliknite na dugme OK.

Na istom mestu u grupi Brush Strokes odaberite opciju Spatter i unesite sledeće vrednosti:

• Spray Radius: 10
• Smoothness: 5

Za primenu ovih vrednosti kliknite na dugme OK.

Nakon toga, sloju Tekstura promeni Blending Mode u Soft Light.

Opacity ovog sloja postavite na 10%:

Na slici ispod možete videti efekat koji treba da dobijete. Pokrenite sada i alat za dodavanje teksta klikom na ikonicu u paleti alata ili koristeći prečicu preko tastera T.

U ovom uputstvu korišćen je font Bebas i možete ga preuzeti ovde: Bebas Font. 

Dodajte naslov cenovnika koristeći ovaj font ili vaš omiljeni font. Da bismo se lakše razumeli, mi smo koristili primer naših hosting paketa. Basic je naš najmanji hosting paket i koristićemo ga u daljim koracima.

Možete koristiti primer postavki fontova sa slike koju vidite ispod, ali je najbolje da probate da uklopite neku svoju zamisao i smisao za izgled i postavku cele ideje. Koristeći Character palatu možete podešavati fontove baš onako kako biste želeli da izgledaju. Možete postaviti veličinu fonta, visinu, dužinu, širinu, razmak između redova, razmak između fontova, boju i još po nešto. Ostavite sebi vremena da istražite ove opcije.

Dodaćemo sada senku ispod naslova pa kliknite duplik klikom na sloj u kome se nalazi naslov. Aktivirajte stil Drop Shadow i unesite sledeće vrednosti:

• Blend Mode: Multiply
• Opacity: 80%
• Angle: 90
• Distrance: 1
• Spread: 0
• Size: 1

Da primenite ove vrednosti i dodate senku kliknite na dugme OK.

Izmeni sada Foreground boju u sledeću: #0a0a0a.

Pokrenite ponovo Shape alat klikom na taster U ili biranjem alata iz palete alata. Kliknite u gornji deo postojećeg pravougaonika i dodajte sledeće vrednosti koje vidite na slici ispod.

Na ovaj način dodaćemo jedan manji zaobljeni pravougaonik odmah ispod naslova. Sloj u kome se nalazi ovaj novi pravougaonik možete preimenovati u Kutija.

Dodaćemo malo stila ovoj kutiji pa pokrenite Layer Style duplim klikom na sloj Kutija. Uključite stil Stroke i unesite sledeće vrednosti:

• Size: 1px
• Positon: Outside
• Blend Mode: Normal
• Opacity: 100%

Za primenu ovih vrednosti kliknite na dugme OK.

Dodaćemo još jedan stil – Drop Shadow. Za dodavanje senke unesite sledeće vrednosti nakon aktivacije ovog stila:

• Blend Mode: Multiply (postavite crnu boju ukoliko već nije postavljena)
• Opacity: 75%
• Angle: 90
• Distance: 1px
• Spread: 12%
• Size: 11px

Za primenu ovih vrednosti kliknite na dugme OK.

Naša kutija sada izgleda ovako:

Promenite sada Foreground boju u #222222.

Pri dnu kutije koju smo upravo napravili dodajte jedan pravilni pravougaonik uz pomoć Shape alata. Dakle, ovo nije zaobljeni pravougaonik i on će predstavljati dno veće, prethodno napravljene kutije.

Nakon kreiranja novog pravougaonika treba mu izmeniti perspektivu kako bi zaista izgledao kao dno kutije. Idite na Edit – Transform – Perspective.

Povucite jedan od gornjih uglova pravougaonika ka unutra (ne brinite, automatski se pomera i drugi ugao). Kada pogodite pravu perspektivu dovoljno je da pritisnete taster Enter da sačuvate postavku.

I ovom pravouganiku koji će predstavljati dno kutije dodaćemo stilove. Kliknite dva puta na sloj pod imenom Dno kutije i aktivirajte stil Inner Glow. Unesite sledeće vrednosti:

• Blend Mode: Multiply
• Opacity: 38%
• Noise: 0
• Postavite crnu boju ukoliko to već nije slučaj
• Technique: Softer
• Choke: 0%
• Size: 24px

Za primenu vrednosti na ovaj stil, kliknite na dugme OK.

Na slici ispod možete videti efekat ovog stila. Dodajte sada i levu i desnu stranu kutije koristeći isti način. Oba sloja postavite ispod sloja Dno kutije kako se ne biste puno mučili oko postavki perspektive.

Sada ćemo dodati malo svetla ovoj našoj već previše tamnoj kutiji. Kliknite na sloj Kutija, direktno na oblik koji se vidi u levom kraju sloja držeći pritom taster Ctrl. Na ovaj način izršićete odabir sloja koji se može videti direktno u dokumentu.

Nakon toga, dodajte novi sloj klikom na dugme Add New Layer ili prečicom na tastaturi Shift+Ctrl+N. Novi sloj preimenujte u Svetlo.

Odaberite alat četkice koristeći taster B na tastaturi. Aktivirajte Soft Round četkicu.

Samu veličinu četkice postavite da izgleda približno slično kao na slici ispod, bitno je da četkicu treba primeniti dok je odabran sloj Svetlo.

Opacity ovog sloja postavite na 50%.

Celu ovu kutiju pripremali smo da bismo u nju upisali cenu našeg proizvoda. Pokrenite alat za dodavanje teksta i upišite cenu. Podesite veličinu, oblik i nemojte žuriti.

U zavisnosti od ideje isprobajte više varijanti:

Ispod samog sloja sada treba dodati senku koji će dati osećaj da cenovnik lebdi. Ispod sloja osnova dodajte pravougaonik u crnoj boji koristeći Shape alat (taster U).

Koristite Perspective alat kao u primerima iznad da postavite pravaougaonik baš kao na slici ispod.

Pretvorićemo ovaj sloj u Smart Object desnim klikom na sloj i biranjem opcije Convert to Smart Object.

Dok je i dalje odabran ovaj isti sloj pokrenite zamućenje iz izbornika Filter – Blur – Gaussian Blur. Unesite sledeće vrednosti zamućenja:

• Radius: 4,7 px

Kliknite na dugme OK da primenite efekat.

Iz istog izbornika pokrenite i Motion Blur sa unetim sledećim vrednostima:

• Angle: 0
• Distance: 70px

Za primenu efekata kliknite na dugme OK.

Nakon dodavanja senke dodajte i opis proizvoda. Evo kako to izgleda u primeru našeg hosting paketa:

Ispod svakog opisa možete dodati i simpatičnu liniju koju vidite na slici ispod. Liniju takođe možete izvući koristeći Shape alat (taster U) i podmeni Line tool.

Da bi linija izgleda još lepše dodaćemo joj malo stila uz pomoć Layer Style opcije(dupli klik na sloj sa linijom). Aktivirajte Drop Shadow i unesite sledeće vrednosti:

• Blend Mode: Screen (postavite belu boju)
• Opacity: 40%
• Angle: 90
• Distance: 1
• Spread: 0
• Size: 0

Za primenu ovih vrednosti i dodavanje senke kliknite na dugme OK.

Liniju iskopirajte (Ctrl+J) onoliko puta koliko redova teksta imate i postavite po jednu liniju ispod svakog reda.

Pokrenite ponovo Shape alat i iz njegovog izbornika odaberite Rounded Rectangle. Kliknite u donji deo osnovne slike, negde ispod teksta. Unesite sledeće vrednosti koje vidite na slici ispod:

Preimenujte ovaj sloj u Dugme.

Dodaćemo stil uz pomoć opcije Layer Style. Aktivirajte Stroke efekat i unesite sledeće vrednosti:

• Size: 1px
• Position: Outside
• Blend Mode: Normal
• Opacity: 100%
• postavite crnu boju ukoliko već nije tako

Za primenu ovog efekta kliknite na dugme OK.

Dodaćemo i stil Inner Shadow. Aktivirajte ga najpre i unesite sledeće vrednosti:

• Blend mode: Screen (postavite belu boju ukoliko već nije tako)
• Opacity: 26%
• Angle: 90
• distance: 1px
• Choke: 0
• Size: 0

Za dodavanje ovog stila kliknite na dugme OK.

Dodaćemo i malo senke. Aktivirajte stil Drop Shadow. Unesite sledeće vrednosti:

• Blend Mode: Multiply (postavite crnu boju ukoliko već nije tako)
• Opacity 46%
• Angle: 90
• Distance: 7
• Spread: 0
• Size: 9

Kao i do sada, za primenu je dovoljno kliknuti na taster OK.

Naše dugme sa svim dodatim stilovima izgleda ovako:

Napravite kopiju sloja Dugme koristeći kombinaciju tastera Ctrl+J. Postavite kopiju sloja ispod sloja Dugme u paleti slojeva, ali u konvasu povucite taj sloj na gore. Vidite sliku:

Koristeći Perspective alat postavite perspektivu baš kao na slici ispod:

Dodaćemo malo stila i ovom sloju. Kao i do sada, koristićemo Layer Style. Aktivirajte Inner Glow i unesite sledeće vrednosti:

• Blend Mode: Multiply
• Opacity: 53%
• Noise: 0
• Postavite crnu boju ukoliko već nije tako postavljeno
• Technique: Softer
• Source: Edge
• Choke: 0
• Size: 16px

Za primenu kliknite na dugme OK.

Po završetku dugmeta (možete videti na slici ispod kako treba da izgleda) dodajte natpis, odnosno, Call-to-Action. Naravno, za dodavanje teksta koristiti Text alat (taster T).

Dodaćemo još jednu dimenziju kompletnom cenovniku. Iskpirajte sloj Dugme koristeći kombinaciju tastera Ctrl+J. Koristeći Move alat u konvasu postavite dugme iznad osnove:

U paleti slojeva, ovaj sloj postavite pri samom dnu ispod sloja Osnova:

Koristeći Perspective alat napravite iluziju prostora. Dodajte novi sloj i uz pomoć četkice dodajte malo osveteljenja. Što se tiče izrade cenovnika proces je završen i naš cenovnik izgleda baš kao na slici ispod:

Za kreiranje više kompleta, odaberite sve slojeve. Slojeve možete odabrati dok držite taster Ctrl i kliknete na svaki sloj. Nakon odabira iskoristite kombinaciju tastera Ctrl+G da ih grupišete. Svaku grupu možete kopirati kako biste cenovnik umnožili.

Naziv svake grupe možete menjati u zavisnosti od cenovnika koji izrađujete:

Evo kako to može da izgleda:

Mali trik koji vam može pomoći u vizuelno lepšem predstavljanju je da srednju kutiju cenovnika ostavite u pravoj veličini, dok levu i desnu umanjite na 95%. Ako dodate uske pravougaonike sa leve i desne strane srednje kutije i uradite Blur možete postići zanimljiv efekat.

Evo kako to može da izgleda:

Bonus fajl za preuzimanje

Kao što smo rekli, cilj naših uputstava nije da se interakcija sa čitaocima završi na kraju svake stranice. Upravo ispod možete preuzeti PSD radni fajl koji možete prepravljati i korigovati po sopstvenom izboru i željama. Naravno, možete ga koristiti za bilo koju svrhu, hobi ili posao.

Kliknite na sledeći link za preuzimanje: PSD Cenovnik po Adriahost uputstvu

Ukoliko vršite prepravku fajla postavljenog iznad ne zaboravite da instalirate Bebas font koji možete preuzeti ovde: Bebas font.