[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Форум по продуктам Adobe » Уроки Photoshop » Создаём в Фотошоп макет сайта с 3D эффектом
Создаём в Фотошоп макет сайта с 3D эффектом
tops88Дата: Суббота, 02.08.2014, 16:04 | Сообщение # 1
Постер
Группа: Пользователи
Сообщений: 25
Репутация: 0
В этом уроке Вы узнаете, как создать макет сайта с 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”.

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

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

Финальный результат:
р е к л а м а
 
Форум » Форум по продуктам Adobe » Уроки Photoshop » Создаём в Фотошоп макет сайта с 3D эффектом
Страница 1 из 11
Поиск: