| tops88 | Дата: Суббота, 02.08.2014, 16:04 | Сообщение # 1 |
 Постер
Группа: Пользователи
Сообщений: 25
| В этом уроке Вы узнаете, как создать макет сайта с 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”.
Тем же способом создайте поисковое поле в правой части шапки.
Заполните слайд-шоу какими-нибудь изображениями и текстом. Это не так уж сложно, поэтому я не буду объяснять, как это сделать.
Финальный результат:
р е к л а м а
|
| |
| |
Последние коментарии