Уроки Веб и приложения Андрей Капустин 31 июля 2014

Создаём в Фотошоп макет сайта с 3D эффектом

Сложность урока: Средний

В этом уроке Вы узнаете, как создать макет сайта с 3D эффектом, используя простые техники.

Финальный результат:

Для начала создайте новый документ 1100х1177px и залейте фон цветом #333333.

Убедитесь, что выбран фоновый слой, перейдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и используйте следующие параметры.

С помощью инструмента Прямоугольник (Rectangle Tool) нарисуйте фигуру в центре шаблона используя цвет #7f7f7f.

Затем примените фильтр Шум.

Возьмите инструмент Линия (Line Tool) и добавьте вертикальние линии как показано на скриншоте ниже.

Выделите все слои с вертикальными линиями и нажмите CTRL+E, чтобы объеденить их в один слой. Теперь нужно изменить перспективу у линий, для этого перейдите в меню Редактирование > Трансформирование > Перспектива (Edit > Transform > Perspective).

Инструментом Прямоугольник (Rectangle Tool) создайте шапку сайта.

Я использовал следующие стили слоя, чтобы создать тень под шапкой:

Дублируйте слой с шапкой и примените фильтр Шум (Фильтр > Шум > Добавить шум (Filter > Noise > Add noise).

Инструментом Линия (Line Tool) добавьте линию толщиной 6px.

Для этой линии я добавил стили слоя, указанные на скриншоте ниже. Сохраните эти стили, т.к. мы будем использовать их в дальнейшем.

Инструментом Линия (Line Tool) добавьте 1 пиксельную линию, как на скриншоте ниже.

Сейчас мы будем создавать слайд-шоу. Для этого возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), радиус установите на 10px, и создайте фигуру, как на скриншоте ниже.

Затем перейдите в меню Редактирование > Трансформирование > Деформация (Edit > Transform > Warp) и используйте параметры указанные ниже.

Ваше слайд-шоу должно выглядеть теперь примерно так:

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

Возьмите инструмент Эллипс (Ellipse Tool) и создайте фигуру. Трансформируйте эту фигуру так, чтобы получилось что-то вроде этого:

Чтобы сделать из фигуры реалистичную тень, Вам нужно перейти в меню Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur).

Затем создайте прямоугольник.

Примените фильтр Шум к этой фигуре и над ней нарисуйте две 1 пиксельных линий. Также, добавьте стиль Тень (Drop shadow).

Инструментом Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) создайте зелёную кнопку.

Под слоем с кнопкой создайте новый слой и инструментом Кисть (Brush tool), белого цвета, добавьте немного бликов.

Затем добавьте тень под кнопкой, используя ту технику, которую мы использовали в слайд-шоу.

Сейчас мы сделаем тень немного интереснее. Перейдите в меню Редактирование > Трансформирование > Деформация (Edit > Transform > Warp) и используйте следующие параметры:

Теперь, Ваша кнопка должна выглядеть так:

Создайте новый слой и инструментом Кисть (Brush Tool) добавьте блик в центре кнопки.

Инструментом Линия (Line tool) нарисуйте белую линию, как на скриншоте ниже.

Растрируйте слой с линией и инструментом Ластик (Eraser Tool), с мягкими краями, удалите правую и левую часть линии.

Дублируйте кнопку несколько раз и разместите их следующим образом:

Теперь нужно создать фон для контента. Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и создайте фигуру.

К этому прямоугольнику примените фильтр Шум и добавьте стили слоя указанные ниже.

Инструментом Кисть (Brush Tool ) добавьте блик в левом верхнем углу.

Затем заполните эту область каким-нибудь контентом. Ниже Вы можете увидеть, что получилось у меня.

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

В правой части добавьте социальные иконки.

Инструментом Текст (Type Tool) напишите название сайта и слоган.

Затем возьмите инструмент Эллипс (Ellipse Tool) и нарисуйте фигуру, как на скриншоте ниже.

Примените фильтр Размытие по Гауссу (Gaussian Blur) и удалите левую часть фигуры.

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и создайте прямоугольник. Удалите левую часть прямоугольника. Инструментом Текст (Type Tool) напишите текст : “Hire Us – We are available for work”.

Тем же способом создайте поисковое поле в правой части шапки.

Заполните слайд-шоу какими-нибудь изображениями и текстом. Это не так уж сложно, поэтому я не буду объяснять, как это сделать.

Финальный результат:

Автор: ultimatedesignertoolkit

Источник: ultimatedesignertoolkit.com

Комментарии 59

Хороший урок, но не очень подробный ( что минус, как для новичка). В целом получилось почерпнуть новое, особенно понравился 3D эффект. Буду применять в дальнейших работах.

После загрузки работы, заметила что не выравнен поиск и на первой кнопке слишком яркий блик и не спрятан в обтравочную маску.

Спасибо, хоть в этом уроке надо было многое допридумывать...

Очень интересный урок. Спасибо большое!

Спасибо большое! Трудоёмкий, но полезный урок!

Интересный урок. Спасибо

Спасибо за урок, правда получилось не очень)

Спасибо за идею.

Спасибо за перевод.

а как, пардон, сделать картинку интерактивной?

Познавательный урок. Спасибо

ой спасибо большое за урок!

Огромное спасибо за урок

Спасибо за урок! Было интересно над ним потрудиться.

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

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

Прикольно кнопки получились

У меня сложилось вот так. Спасибо за урок:)

Подскажите пожалуйста, как правильно сделать перспективу на шаге 7. У меня не получается.

Перспектива в плане без изгибов, то есть, основание всех планок в ровной плоскости.
Смотрим тень отбрасываемую низом кнопок - она закругленная. Что происходит с дощечками ?
Они приобретают в этих местах выпукло - вогнутую форму. Стоит низ кнопок спрямить, как и тень,
ими отбрасываемую. Это мое, и я никому его не навязываю.
Авторам спасибо за урок.

Спасибо за урок, вот мой результат

Спасибо за урок! Очень интересно и познавательно! Узнал много нового для себя :)

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

Спасибо за урок!
Bысокое качество скриншотa http://savepic.ru/5914116.htm

урок хороший спасибо конечно,но мало объясняет :(

Еще 6
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее