Photoshop vodič vam opiše vse postopke in priskrbi slikovni material, ki ga potrebujete za izdelavo dizajna. Dizajn je narejen tako, da lahko iz njega naredite predlogo za CMS sisteme, kot so Joomla, WordPress in PHP nuke. Prijetno Photoshopanje!

Kliknite za predogled dizajna!

1. V Photoshopu ustvarite nov dokument. Priporočena je velikost 800x800.

2. S Paint Bucket Toolom pobarvajte ozadje na svetlo sivo barvo ( #f4f4f4 ).

3. Ustvarite nov Layer. Z Marquee Toolom na sredini označite velik pravokotnik (730x714). S Paint Bucket Toolom ga pobarvajte na belo ( #ffffff ). Nato mu dodajte Stroke (1px, #e0e0e0).

Barvni okvirji

Okvirji so od zgornjega roba belega pravokotnika odmaknjeni za 94px.

1. Ustvarite skupino Layerjev z imenom okvirji. Znotraj te skupine ustvarite še eno skupino z imenom moder. Sedaj ustvarite še prazen Layer.

2. Z Marquee Toolom zopet razpotegnite pravokotnik (140x115). Pobarvajte ga na modro ( #00add4 ). Dodajte mu Stroke (1px, #00748e ).

3. V dokument nato povlecite sliko sveta oz. kakšno drugo slikico.

Postavite jo na pravo mesto (desno spodaj)

Držite tipko Ctrl in na seznamu Layerjev kliknite na ikono Layerja z okvirčkom. Nato pojdite v meni: Select > Inverse in pritisnite tipko Delete. Opacity znižajte na 45%.

4. Ustvarite nov Layer. S Polygonal Lasso Toolom označite del okvirja, ki bo služil za preliv. Označba je lahko prevelika.

Pobarvajte jo z belo barvo. Držite tipko Ctrl in kliknite na ikono Layerja z modrim okvirčkom. Meni: Select > Inverse. Pritisnite tipko Delete.

Znižajte Opacity na 54%. V orodjarni izberite radirko (mehki čopič, velikost 200) in pobrišite del belega preliva in sicer od sredine proti zunanjem robu, tako, da ne bo nikakršnih ostrih robov.

5. Dodajte še besedilo (Tahoma, bold, 16px, Sharp).

6. Sedaj pridejo na vrsto ostali okvirčki.

Na seznamu Layerjev desno kliknite na ime skupine moder in izberite Duplicate Group. To skupino poimenujte oranzen. Celotno skupino sedaj premaknite na desno od modrega okvirčka. Med okvirčki mora biti 3px prostora (najbolj levi okvirček je od roba odmaknjen 4px, najbolj desen okvirček je od roba odmaknjen 4px).

Okvirček sedaj pobarvajte na oranžno ( #f6783d ). Pri Stroke določite temno oranžno barvo ( #d14300 ). Zamenjajte sliko sveta s sliko računalnikov.

Spremenite besedilo in že imate oranžen okvirček.

7. S postopkom, ki je podan v točki 6 sedaj naredite še preostale tri okvirčke.

Rumen okvirček

• barva: #f9dd2f
• Stroke: #f1d000
• slika:

Zelen okvirček

• barva: #aee233
• Stroke: #8cc700
• slika:

Siv okvirček

• barva: #a2a2a2
• Stroke: #8f8f8f
• slika:

8. Okvirčke razvrstite po vrsti, med njimi pa naj bo 3px prostora.

Kliknite za pravo velikost!

Zgornji del dizajna

1. Najprej naredimo logo. Za logo bom uporabil sliko dveh kolesc.

2. Ustvarite nov Layer. Držite tipko Ctrl in kliknite na ikono Layerja s kolescema, da se vam označita (Izbran mora biti nov Layer).
Pojdite v meni: Select > Modify > Expand. Za vrednost nastavite 2 piksla.

S Paint Bucket Toolom pobarvajte označbo. Dodajte ji Outer Glow.

3. Pripišite ime spletne strani (Trebuchet MS, Regular, 18px, Sharp, #000000)
in vaš slogan (isto, kot zgoraj le: 12px, #c6c6c6).

4. Dodajte slikico hiše za povezavo Domov in slikico pisma za Kontakt.

 

5. Pripišite še besedilo, ki bo služilo, kot povezava (Domov, Kontakt: Tahoma, Regular, 11px, Sharp, #c4c4c4).

In s tem je zgornji del končan:

Kliknite za povečavo!

Levi stolpec

Ustvarite nov Layer. Z Marquee Toolom razvlecite nov pravokotnik in ga pobarvajte s sivo barvo ( #ededed ). Pravokotnik naj bo širok 250px, višina pa bo seveda odvisna od vsebine.

Ikone

1. V skupini moder na seznamu Layerjev izberite Layer z modrim okvirčkom in Layer z belim prelivom. Desno kliknite na ime enega od teh dveh Layerjev in izberite Duplicate Layers. Naredita se vam dve kopiji teh dveh Layerjev. Pritisnite Ctrl+E, da se Layerja združiva v en Layer.

2. Pritisnite Ctrl+T in pomanjšajte ta Layer na velikost 30x30 pikslov.

3. Sedaj v orodjarni izberite Custom Shape Tool . Sledeče oblike nato razpotegnite čez to modro ikono. Barva ospredja mora biti bela!

Če se simbol ne vidi dovolj dobro na tipkovnici pritisnite Ctrl+J (s tem naredite kopijo).

Črte

1. Polne črte sem naredil s pomočjo Pencil Toola oz. svinčnika (velikost 1px). Med vlečenjem s svinčnikom držite tipko Shift, da bo črta ravna. Barva: #d4d4d4.

Najprej sem naredil eno črto, nato sem pritisnil Ctrl+J in s tem naredil kopijo črte. Z Move Toolom sem nato premaknil črto na pravo mesto. Znova naredil kopijo in jo premaknil na pravo mesto itd. dokler nisem namestil vseh črt.

2. Črtkane črte sem prav tako naredil s svinčnikom, le da sem šel v dodatne nastavitve in nastavil razmik na 350%.

Kliknite za povečavo!

Besedilo

Pozor: Besedilo v Photoshopu izgleda drugače, kot bo izgledalo besedilo na spletni strani!!!

Navadno besedilo: Tahoma, 12px, #606060
Oranžen naslov: Tahoma, 14px, #fe5100
Črn naslov: Tahoma, 14px, #000000
Preberi več: Tahoma, 12px, #fe5100

Manjše slikice

Slikice, ki naj bi bile del vsebine so visoke 55px, široke pa 100px ali pa 200px.

Za obrobo imajo nastavljen Stroke: 1px, #00add4

Slikici sem našel tako, da sem v Googlu iskal slike pod ključno besedo business face.

In po eni uri ustvarjanja imamo dokončan dizajn, ki ga lahko, če znate, pretvorite v predlogo za Joomlo, Wordpress ali PHP-nuke.

Upam, da ste razumeli vse postopke tega vodiče, čeprav so bili površno slikovno podkrepljeni; če se vam je kje zataknilo le vprašajte v svojem komentarju.