Создаём в Фотошоп макет сайта с 3D эффектом
Создаём в Фотошоп макет сайта с 3D эффектом
В этом уроке Вы узнаете, как создать макет сайта с 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
урок хороший спасибо конечно,но мало объясняет :(