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


В този урок ще направим лек дизайн на личен сайт в помощта на 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:windowsfonts, след което рестартирайте Photoshop. Като ефекти може да използвате Drop Shadow и Stroke 4px с
цвят: #6c0102

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

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

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

4мин. и 42сек.
време за четене


Коментари за Дизайн на личен сайт с Photoshop


Теми, подобни на Дизайн на личен сайт с Photoshop
01 Създаване на дизайн на сайт с Photoshop
02 от Photoshop в HTML
Още теми
Мост с топка или как да заздравите кръста си
Витамин Д
Градинарство за здраво тяло
Увертюра към “Играта на срещи” (2)