т.к. это мой урок, который был выложен на сайте http://2dtutorials.ru хочу повторить его в своем блоге.
Сегодня, я хочу рассказать Вам, и наглядно показать, из чего складывается дизайн веб страницы.
С чего начать, на какие нюансы необходимо обратить внимание и др. вопросы, на которые начинающим веб мастерам очень трудно найти ответы.

В своем уроке я буду рассматривать реальный пример создания сайта для компании, занимающейся предоставлением бухгалтерских и юридических услуг.
Цветовая гамма была выбрана кремого-коричневая.

Меньше слов – больше дела. Итак, приступим!

1. Для начала, запускаем фотошоп (я использовал крайнюю версию Adobe Photoshop – CS4)
Создаем новый документ (CTRL+N) и выставляем размеры ширины и высоты окна в 1000 px. Resolution оставляем неизменным – 72px/inch!!!

2. Заливаем весь документ светло-кремого-коричневым цветом. Это будет наш бекграунд, на котором будет располагаться контент нашего будущего сайта. Поэтому цвет не должен резать глаза, не должен быть надоедливым и отвлекающим, и глаза не должны уставать от чтения информации на этом фоне.
Я использовал цвет #f8f1d9

3. Создадим шапку сайта, где будет размещаться логотип, слоган и контактный телефон компании.
Выделим область в 200px высоты, создадим новый слой и зальем его цветом #3e2d1d

Если Вы не умеете пользоваться направляющими, то проверьте включена ли у Вас линейка (CTRL+R) и, если включена, просто щелкните по ней левой кнопкой мыши и перетащите на нужную область сайта. У вас появится направляющая.
Спрятать направляющие можно простым сочетанием клавиш CTRL+H

4. Не снимайте пока выделение. т.к. Монотонная заливка весьма скудно, мы немного поработаем над нею. Для начала, добавим немного шума. Для этого идем во вкладку Filters –> noise –> add noise
Параметры выставляем как на картинке ниже

5. Дублируем слой с шапкой и применяем к нему фильтр Render –> Lighting effects с параметрами, как на картинке ниже:

Как видим, слой стал слишком светлый. Переводим его в режим Overlay, для того, чтобы сгладить переходы светлых участков с темными нижнего слоя.

При помощи инструмента Dodge tool (осветление) можно немного осветлить нужные нам участки. Результат должен быть примерно
как на картинке ниже:

6. Ставим логотип, пишем название организации и ее фирменный лозунг.
Я решил использовать герб города Санкт-Петербург. Скачать который, VIP пользователи могут с нашего сервера.
Цвет текста – #c3a06e

7. Указываем контактный телефон в шапке сайта. Я считаю, что контактный телефон в шапке сайта – является обязательной частью в корпоративных сайтах.

Обязательно используйте направляющие, чтобы все на сайте было как то связано между собой. Старайтесь избегать рванных краев, чтобы не получилось так, что цифры телефона были выше префикса и длиннее чем его поддекст.

8. С шапкой мы закончили. Теперь наведем немного порядок в наших слоях. Подпишем слои и определим их в одну папку.
Это делается для того, чтобы в дальнейшем не потеряться в наших слоях.

9. Переходим к отрисовке меню.
Меню у нас будет простым, т.к. бОльшую часть информации об услугах решено было размещать в левом сайдбаре.
Дабы не дублировать пункты меню слева и наверху, мы не будем прибегать к выпадающим менюшкам.
Выделим область под меню, высотой, примерно в 40px и шириной около 550px
Зальем цветом #765434 и выставляем прозрачность примерно до 60%

10. Пишем пункты меню 14 размером шрифта и цветом #FFF. Я использовал шрифт Tahoma.
Аккуратно размещаем их по всей доступной длине отведенного места под меню и рисуем разделители шириной в 1px


С меню покончено, как и с шапкой в целом. Поэтому еще раз упорядочим все слои, и со спокойной душой перейдем к сайдбару.

11. Отделим 300px под левый сайдбар.
Для заголовков услуг я использовал шрифт Tahoma, 14px, цвет шрифта #594029
для подпунктов – Arial, 12px, цвет текста #a28160
Цвет линии – #b7a891, толщина – 1px

По этому же принципу размещаем остальные пункты меню.

12. Осталось разместить контент сайта и информацию в подвале

Надеюсь этот урок будет Очень полезен как для начинающих веб дизайнеров, так и для тех, на счету которых уже имеются несколько работ.

Скачать полный исходник этой работы с фоном шапки и гербом Санкт-Петербурга
Скачать
Отдельное обращение к тем, кто хочет позаимствовать данный урок и выложить его на своем сайте:
Уважайте чужой труд, ставьте обратную ссылку и не коверкайте изображения!
Если Вы проделали данный урок – оставляйте ссылку на свой сайт в комментариях.

• Консультирую по созданию сайтов бесплатно
• Несколько интересных возможностей CSS редактирования текста
• Выпадающее меню на CSS
• Изменения в дизайне и юзабилити блога
• Дизайн “шапки” этого блога