Дизайн на личен сайт с Photoshop

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

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


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

Заден фон:

2. Създайте нов слой в който ще поставим плавния тъмночервен фон(CTRL+Shift+N или директно от иконката за нов слой).

3. Изберете и заредете цветовете на задния и преден план със стойности: #801e1e и #000000.


4. изберете инструмента Gradient (като отидете върху иконката на кофата за боя и задържите).

5. След като сте готови натиснете няколко пъти ‘Ctrl и – ‘ за да намалите изображението така че да може да работите извън неговите очертания. Дръпнете една дълга линия от долу на горе върху слоя и пуснете.

Текстура на фона:

6. Изтеглете си текстура на автора calebkimbrough от и я поставете като нов слой в документа(можете да направите това директно чрез влачене на изображението към програмата)

7. След това добавете векторна маска като изберете слоя с текстурата и натиснете на бутона Add Vector mask.

Вземете една по-дебела и мека четка, изберете ново появилата се иконка с маската в най-дясно!(не текстурата) и започнете да
рисувате с черен цвят. Докато се получи нещо подобно, но разбира се доста по-тъмно:

Може да променяте свойството opacity на самата четка за да правите плавни преливания в краищата. Ако случайно прекалите използвайте белият цвят за да възстановите нарисуваното. Намалете свойството fill на слоя на 50%.
Следва създаването на радиален градиент за да изпъкне логото:

8. Създайте нов слой с градиент но този път radial, който да изпъква в горната лява част на документа и намалете fill на 50%: След като сте готови ще получите:


Лого
9. За логото изтеглете шрифт Artemon 60px, smooth от тук и го поставете в директория c:\windows\fonts, след което рестартирайте Photoshop. Като ефекти може да използвате Drop Shadow и Stroke 4px с
цвят: #6c0102


Меню – за мен, какво правя, контакти:
10. Използвайте шрифт Arial, bold, 18px, antialiasing(aa): none и напишете текста на
менюто си.

11. Мястото за съдържанието на страницата ще оформим с помощта на Rectangle tool, с цвят бял и fill 13%. Като ефект поставете Stroke 1px, white, Opacity 18%. Така се получава прозрачност не само на рамката, в която ще се помещава съдържанието, но и на самото и очертание.

Оразмерете така долната част на рамката, че текстурата да излиза точно под нея, за да се създаде ефект на изпъкване. За да я донастроите просто изберете маската слоя с текстурата и рисувайте с четка.


12. Следва поставянето на картинката, и текста до нея. За картинката използвайте отново ефект Stroke 1px white, 41%.

13. За текста на съдържанието използвайте шрифт Verdana.

Бутон за Виж още...


14. Напишете текста си, като на нов слой си изберете четка Spatter 14px, opacity 50% и с бял цвят украсете текста.

15. Поставете текста в долната част на екрана(всички права защитени) и сте готови!!!

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