web-design
В творчестве, как и любви, легче остановить мгновение, чем самого себя. (Леонид С.Сухоруков)


Шаг 1
Создаём новый документ 800x600 с белым фоном. Заливаем всё зоброжене цветом #131313 и спомощью Rectangular marquee tool, отделяем нужное вам место, для шапки. Заливаем его цветом #222222 и делаем Stroke 1px. Черным цветом.


Шаг 2
Создайте новый слой, назовите его "полоса", залейте его градиентом и сделайте его 1 px. Stroke, черным цветом.
У вас должно получится что то вроде этого:


Шаг 3
Напиште на вашей "полосе" что нибудь важное, например:


Шаг 4
Теперь, нам нужно чем нибуднь заполнить нашу шапку, возьмём какую нибудь "картинку в тему". Вашу картинку нужно поместить справой стороны шапки и обрезать всё лишнее. Это всё можно сделать спомошью Mask, но я думаю что удобнее будет сделать "традиционным" способом, с помощью славиш: Ctrl, Ctr+T и любимого Ластика.
У вас должно получится что то вроде этого:


Шаг 5
Теперь, поискав другие рисунки, автор нарыл 3D модели из игры CSS и решил поместить их на шапку. У него получилось вот так:


Шаг 6
Теперь слевой стороны шапки, надо написать названия сайта, какое нибудь лого клана и т. д. Автор сделал всё удобно и понятно, то есть: Адрес сайта, название, титул и на заднем фоне лого. Смотрите сами:


Шаг 7
Теперь снизу шапки выделим область для новой "полосы", с другими функциями. Сделаем градиент из серого в тёмно-серый и естественно черный 1 px. Stroke
И напишем там что нибудь более важное, чем на первой полосе.


Также, можно приукрасить её


Шаг 8
Финальная стадия: Вам осталось только заполнить оставшиеся места всем необходимым для сайта. Если вы не знаете чем, то посмотрите на результат автора:


Вы можете сделать два дизайна на сайт и поставить их на выбор, перед будущими юзерами:


Автор: hv-designs
Перевод: Di-Flyer
Источник

@темы: Web-дизайн, Уроки