Създаване на дизайн на сайт с Photoshop

01	Как да си направите сайт - безплатно
02	от Photoshop в HTML
03	Дизайн на личен сайт с Photoshop
04	Как да си направите сайт с Photoshop - видео урок
05	Редизайн в детайли

Ще Ви покажа как може да направите следният дизайн за уеб сайт с помощта на PhotoShop.
Ето и неговия финален резултат:


1. За целта създайте нов документ с големина: 1200х1200px (Ctrl+N)


Фон
2. Нека направим фона: Изберете за цвят на предния фон(foreground color) #e3f3f2 и използвайте инструмента Paint Bucket( клавиша G) за да запълните фона.

Горна лента за меню
3. Следва горната лента, в която ще се разположи менюто: На нов слой(Shift+Ctrl+N), изберете дълъг правоъгълник от горната част на екрана чрез инструмента Marquee Selection Tool(натиснете М), който да обхваща от началото до края на документа. Запълнете го с цвят #d2e0df.


След това кликнете бързо 2 пъти върху иконката на този слой за да Ви се покажат Blending Options и включете Drop Shadow


Лого
4. Лого - фон: Изберете цвят на предния план: #883888, и цвят на фона: #e1bdd5.
Изберете Round rectangle и направете малък правоъгълник – той ще съдържа текста на логото. От стиловете на слоя, включете Gradient Overlay и изберете първият Gradient.


Текст на логото:
С помощта на Type Tool (T) напишете текста на логото на сайта си и го поставете в току-що създадения правоъгълник.
За настройки на шрифта може да използвате:
Verdana, bold, sharp
Ако мястото не стига изберете правоъгълника и натиснете CTRL+T за да го оразмерите.
Ето и ефектите, които се използват за текста: Gradient Overlay и Drop Shadow със следните стойности:


Дотук се получава следният резултат:


Съдържание
5. Създаване на основното съдържание:
Изберете Round Rectangle Tool и направете голям правоъгълник – той ще помества основното съдържание (текст и картинки) на сайта. Като ефект включете stroke.


Текст на менюто
6.Като използвате Type Tool(T) с цвят: #797b7b направете 2 отделни слоя и създайте горното меню с шрифт Arial, Sharp, и текста под логото с шрифт Verdana, Smooth.

Място за картинката
С избран сив цвят и Round Rectangle Tool (U) създайте нов правоъгълник, в който ще се помести картинката. Задайте му ефект Stroke 1px, 12%.


Заглавна и крайна лента
7. След като поставите Вашето изображение и текст:

Направете 2 нови слоя: За заглавието изберете тънка линия с Rectangular Marquee Tool(M) и я запълнете с цвят #70376e.
За крайната лента: отново изберете малко по-дебела линия и я запълнете с черен цвят.

От ефектите на слоя изберете Stroke: 1px white, и Gradient Overlay със следните 3 цвята на Color Stop: #262626, #444444, и #333333


Напишете свой текст в крайната лента с цвят #dedede и дизайна на сайта е готов!


от Невян Нейков