Урок создания дизайна для комерческого сайта

Всем привет! Пользуясь случаем, поздравляю всех мужчин с нашим праздником - 23 февраля :)
И, продолжаем серию уроков по созданию дизайна сайта. Предыдущие уроки, Вы можете найти на страницах этого сайта в разделе техдизайн!

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

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

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

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. Осталось разместить контент сайта и информацию в подвале


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

Пользователи группы VIP могут скачать полный исходник этой работы с фоном шапки и гербом Санкт-Петербурга

Только пользователи группы VIP могут скачивать файлы с нашего сервера. Пожалуйста, пополните Ваш баланс на 15 DM


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

Автор урока - Азат Хайрикенов
2Dtutorials.ru

Если наш сайт был полезен Вам, НЕ ПОЛЕНИТЕСЬ, нажмите на любую из кнопок ниже, для того, чтобы поделиться с другими людьми полезной ссылкой!
Нравится
!!! Спасибо !!!


Эта новость называется - Урок создания дизайна для комерческого сайта. Не забудьте добавить в закладки, чтобы не потерять.


Распечатать
1

Очень классный урок! Все так просто и так гармонично.
Только я не пойму где ты привязывался к направляющим в шапке? оно как-то все отдельно.
22 февраля 2010 14:14
2

в шапке я связал только между собой слово 2дтуториалс и лозунг, и телефон с контекстом. Хотел сначала с самим логотипом привязать, но смотрелось ужасно.
Сейчас заметил, что можно было логотип сдвинуть левее, на один уровень с сайдбаром. Ну да ладно.
22 февраля 2010 17:06
3

Есть разница куда привязывать направляющие?
Я обычно отделяю горизонталью 150-200 пикселей под шапку, слева 300 под кнопки. Это правильно?
23 февраля 2010 04:59
4

разницы никакой нет. Все, как твоей душе угодно.
23 февраля 2010 06:53

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости. Только для зарегистрированных пользователей
теги 2дтуториалс
фотошоп скачать клипарт Кисти шрифтов коллекция скачать иконки набор Обои для рабочего стола иконок Тонкости и секреты Часть шаблоны Новогодние фоторамки разные шаблоны исходники фотошопа кистей Wallpapers текстуры Иконки стилей Стили для фотошоп обоев Подборка скачать обои стиле текстур Скачать текстуры бесплатно текстуры для фотошоп Рамки для фотографий psd исходники фотошоп Клипарт скачать clipart бесплатно бекграундов фоторамок скачать иконки для windows Кисти для фотошопа скачать кисти фотошоп
{slin}
2дтуториалс.ру - проект компании ООО "Российские Интернет Технологии", 2011г.
Офис расположен по адресу - Россия, г. Москва, ул. Обуховской обороны, д. 12, оф.5.

счетчик рамблер   Рейтинг SIMPLETOP.NET   [Valid RSS]   Здесь находится аттестат нашего WM идентификатора 194801541119