Реклама на сайте

вход на сайт

Имя пользователя :
Пароль :

Восстановление пароля Регистрация
Создаем макет для коммерческого сайта
Создаем макет для коммерческого сайта

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

Создаем макет для коммерческого сайта
\


Автор: Азат Хайрикенов

 (голосов: 0)
Новость опубликована 3-02-2011, 01:57, её прочитали 427 раз(а).
Понравилась тема? Посмотрите эти:
Комментарий #1 написал: NetJeoseavasy (18 февраля 2012 11:36)
Публикаций: 0, комментариев: 0, группа: Гости
Фото
Комментарий #3 написал: baksizhtes (21 мая 2012 01:20)
Публикаций: 0, комментариев: 22, группа: Посетители
Фото
Комментарий #4 написал: karguferti (4 сентября 2012 01:19)
Публикаций: 0, комментариев: 14, группа: Посетители
Фото
Комментарий #5 написал: ylizeda (27 мая 2016 19:18)
Публикаций: 0, комментариев: 1, группа: Посетители
Фото
Написать комментарий
Ваше Имя:


Ваш E-Mail:



Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Введите код: