Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:


Дизайн автомобильного сайта


1. Создайте новый документ размером 900х1130 пикселей. Залейте фон цветом #343436. Вставьте изображение какой-нибудь машины (она не видна по причине авторских прав). Поместите картинку в правый верхний угол:


Дизайн автомобильного сайта


2. Инструментом Прямоугольное лассо (Polygonal Lasso Tool) сделайте выделение, как показано ниже:


Дизайн автомобильного сайта


3. Инструментом Свободное трансформирование (Free Transform) растяните этот край до левой стороны холста.


Дизайн автомобильного сайта


4. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру. Потом инструментом Свободное трансформирование (Free Transform) наклоните её:


Дизайн автомобильного сайта


5. Примените к прямоугольнику такие стили в меню Стилей слоя (Layer Style - Blending Options), чтобы он был таким, как мой:

Отбрасывание тени (Режим – Умножение):


Дизайн автомобильного сайта


Тиснение (Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение):


Дизайн автомобильного сайта

Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Дизайн автомобильного сайта


6. В новом слое инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже:


Дизайн автомобильного сайта


7. Залейте его белым цветом и понизьте Непрозрачность слоя до 10%. Сделайте выделение слоя с фигурой (Ctrl+Click), Инвертируйте выделение (Select – Inverse) и в слое с белым овалом нажмите Delete.


Дизайн автомобильного сайта


8. Создайте ещё одно выделение:


Дизайн автомобильного сайта


9. Установите Непрозрачность второго круга после заливки – 2%. Не забудьте очистить белую часть овала вне прямоугольника.


Дизайн автомобильного сайта


10. На этом прямоугольнике напишите название сайта и слоган. В каждом углу прямоугольника создайте маленькие круги и добавьте к ним такие стили:

Тиснение (Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение):


Дизайн автомобильного сайта


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Дизайн автомобильного сайта

Дизайн автомобильного сайта


11. В нижней части заголовка сайта создайте выделение, как показано ниже:


Дизайн автомобильного сайта


12. Залейте его в новом слое любым цветом и примените такие стили слоя:

Отбрасывание тени (Режим – Умножение):


Дизайн автомобильного сайта


Тиснение (Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение):


Дизайн автомобильного сайта


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Дизайн автомобильного сайта


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Зеркальный):


Дизайн автомобильного сайта


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


Дизайн автомобильного сайта


14. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру под навигационной панелью, оставив небольшое расстояние. Скопируйте стили слоя с навигационной панели на этот прямоугольник:


Дизайн автомобильного сайта


15. Создайте маленький круг на в углу прямоугольника, скопируйте на него те же стили, что и на прямоугольник. Создайте два свечения на нём и инструментом Произвольная фигура создайте иконку на круге:


Дизайн автомобильного сайта


16. Добавьте заголовок и текст:


Дизайн автомобильного сайта


17. Таким же образом создайте другие прямоугольники с контентом:


Дизайн автомобильного сайта


18. Скопируйте навигационную полоску вниз холста и добавьте туда текст футера:


Дизайн автомобильного сайта




Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: