Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

наш канал

стать автором

Фотошоп-макет для сайта

10 октября 2007 182 761 просмотр | Сложность:

В этом Фотошоп уроке будем учиться рисовать лицо вашему сайту.

Вот такой макет получится в конце урока.

Начните с создания нового документа размером 650 * 550 px.
Залейте его таким цветом #e6f2e6

Создайте новый слой. Нарисуйте прямоугольник внутри, отступив примерно по 30 px с каждой стороны. Также залейте каким-нибудь цветом.

Нажмите на кнопку внизу палитры слоев и добавьте стили:

Обводка, ширина 5 px, внутри, цвет #296750

Промежуточный результат:

Приступим к рисованию навигации сайта.

С помощью , нарисуйте прямоугольное выделение в правом верхнем углу нашего макета.
Перейдите в меню Select >> Modify >> Smooth selection (Выделение - Модификация - Оптимизировать) , чтобы сгладить края.

Создайте новый слой, залейте выделение цветом #3b9710.

А теперь примените стили:

1) Внутренняя тень:

Используйте цвет #184702 для тени

2) Обводка, размер 3 px, внутри, цвет #FFFFFF, то есть белый.

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

Создайте новый слой.

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

Примените стиль Тень:

И сделайте белую обводку размером 3 px.

Теперь найдите фото с пейзажем... что-нибудь нейтральное, например такое:

Перетащите фото с пейзажем на ваш рабочий документ.
Расположите слой под кнопками и голубым прямоугольником. Удалите ненужные части.

Вот, к чему вам нужно стремиться...

Возьмите то же самое фото, сделайте его меньше, разместите в левой стороне хедера.

Используя ластик с мягкими краями, пройдитесь по краю изображения, чтобы сделать переход мягче.

Возьмите инструмент Текст, шрифт Arial, цвет белый, размер 11-12 px, и напишите названия ссылок.

На данный момент, вот что у нас получилось.

На пустом голубом пространстве напишите название вашего сайта.

Логотипу сайта можно добавить легкий эффект объема.

Создайте еще один слой. Нарисуйте прямоугольное выделение в основном окне макета под хедером (заголовком)

Добавьте белую обводку снаружи.

И градиент: от #68b13a (сверху) к #2c7e0e (внизу)

Прямо поверх зеленого прямоугольника нарисуйте еще один с помощью нашего любимого выделения и нажмите "Delete".

Таким образом, вы вырежете дырку в зеленом квадрате.

Добавьте текст в этот прямоугольник...

То же самое повторите и сделайте второе окно в зеленом квадрате. Это будет основное текстовое окно.

И вот ваш результат!

До встречи на www.photoshop-master.ru!

Понравилось? Поделитесь с друзьями!
Источник: www.loreleiweb.com Переводчик: Зинаида Лукьянова
Прикрепить работу или скриншот Максимально-допустимый вес для загрузки изображения (jpg): 5 MB
Размещение ссылок внутри комментария допустимо только на этот список сайтов.
GOLDLEGION09 января 20178

попробовал переработать в некий интерес к дизайном в нашем 2017. Хотя я все еще работаю на уровне 2014. Знаю много ляпов, которые можно поправить. Спс за перевод.

spectre_mdt02 марта 201610

Спасибо

Серёга Мосийчук01 декабря 20152

Спасибо)

Павел12 ноября 20153

Спасибо за урок!

PhotoWeb06 мая 20154

Спасибо=)

ГайкА1318 марта 20151

Спасибо за урок )

Mentos9402 октября 20141

Спасибо большое :)

maikl989122 июня 20141

Это мой первый макет в этой жизни )

helena_todorova27 апреля 20142

Спасибо за интересный урок!

ZZZx77713 марта 20142

Очень полезный урок - спасибо!

zagoranskayadi27 июня 20134

Огромное спасибо за урок! Очень интересно=)

qwe13302 июня 20135

спасибо

kosshechka10 апреля 20132

В самом конце поняла, что слишком много рисунка на месте, где будет текст...Это моя первая работа такого масштаба...СПАСИБО!!!

si270285msr29 января 20137

Спасибо еще раз )

veneraina23 января 20137

какой лутше. голосуем)

si270285msr18 января 20133

Спасибо!

Morticia29 ноября 20122

Спасибо!

TARAS7197616 августа 20125

спасибо за урок!

korant16 августа 2012

Подскажите пожалуйста, а каким именно шрифтом написано название сайта (логотип) в данном примере

клотти27 июня 20123

Вот что получилось у меня.

Meraya Redfern09 марта 2012

Спасибо большое за урок. Я в этом деле новичок, так что не судите строго)

Arez28 февраля 20129

Спасибо!

Красивоглазая23 февраля 201214

моя работа, вроде неплохо получилось.........

viktor.first23 февраля 20126

норм

Mega_Otaku_1427 декабря 2011

ничего не понял почти. а слабо было рассказать как перетаскивать слои. как картинку загружать а?!

Администратор
Вам нужно в раздел Учебник Фотошоп.

ceedkaa19 декабря 20119

Ах Карибы...)

DemonOrk12 декабря 20119

вот еще одна

DemonOrk12 декабря 20119

спасибо за работу

22zzzzz06 ноября 20117

спасибо!

йевел11 октября 20114

спасибо

Авторизация


Регистрация

Наверх