Мы запустили Форум! (*beta)






Видеокурс «Photoshop Professional. От чайника до профи за один день» поможет Вам стать профессионалом в фотошопе всего за 24 часа! Курс специально построен так, чтобы Вы научились создавать работы профессионального качества уже на следующий день. МИНИМУМ ТЕОРИИ, МАКСИМУМ ПРАКТИКИ

Подробнее...




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

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


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

Подсказка

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

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

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


Web-дизайн с облаками


1. Создайте новый документ размером 1200х1200 пикселей с белым фоном и отведите две вертикальные направляющие на оси X в значениях 125 и 1025 пикселей. Это можно сделать в меню Просмотр»Новая направляющая (View > New Guide).


Web-дизайн с облаками


2. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение, как показано ниже. Высота выделения должна быть 113-115 пикселей.


Web-дизайн с облаками


3. Создайте новый слой (Create New Layer) и залейте выделение, используя инструмент Градиент (Gradient Tool). Тип – линейный градиент, цвета - #f9f9f9 и #f0f0f0. Назовите этот слой “header”.


Web-дизайн с облаками


4. Примените к этому слою стиль Обводка (Layer Style – Stroke):

Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет


Web-дизайн с облаками


5. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте ещё одно выделение под шапкой сайта на всю ширину холста. Высота выделения – 295 пикселей. В новом слое залейте выделение линейным градиентом, используя цвета #98c0e0 и #a4cff2.


Web-дизайн с облаками


6. Назовите этот слой “featured area” и примените стиль Обводка (Layer Style – Stroke):

Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет


Web-дизайн с облаками


7. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите название сайта слева и меню справа. Инструментом Прямоугольник с закруглёнными краями подсветите одну из кнопок меню.


Web-дизайн с облаками


8. Инструментом Овальная область (Elliptical Marquee Tool) создайте выделение в основании синей области возле левой направляющей.


Web-дизайн с облаками


9. Тем же инструментом дополните выделение, удерживая Shift.


Web-дизайн с облаками


10. Продолжайте делать это пока не получите такой результат:


Web-дизайн с облаками


11. Залейте выделение белым цветом в новом слое и перейдите в меню Стилей слоя (Layer Style - Blending Options), настройте так:

Внутренняя тень (Режим – Умножение):


Web-дизайн с облаками


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


Web-дизайн с облаками


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


Web-дизайн с облаками

Web-дизайн с облаками


12. Таким же образом создайте ещё одно облако:


Web-дизайн с облаками


13. Залейте выделение белым цветом в новом слое и примените следующие стили:

Внутренняя тень (Режим – Нормальный):


Web-дизайн с облаками


Внешнее свечение (Режим – Мягкий свет, Метод – Мягкий):


Web-дизайн с облаками


Внутреннее свечение (Режим – Мягкий свет, Метод – Мягкий):


Web-дизайн с облаками


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


Web-дизайн с облаками


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


Web-дизайн с облаками

Web-дизайн с облаками


14. Вставьте нужные изображение в документ под слои с облаком.


Web-дизайн с облаками


15. На левой стороне напишите заголовок и небольшое описание.


Web-дизайн с облаками


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


Web-дизайн с облаками


17. Примените к ней стиль Наложение градиента (Layer Style - Gradient Overlay):

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


Web-дизайн с облаками


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


Web-дизайн с облаками

Web-дизайн с облаками


18. Используя зелёные заголовки и серый текст, заполните область контента.


Web-дизайн с облаками


19. Далее создайте галерею. На серые прямоугольники можно наложить изображения и получить простую рамку. Напишите небольшие описания и добавьте кнопки.


Web-дизайн с облаками


20. Сделайте копию длинных облаков и перетащите её в нижнюю часть холста.


Web-дизайн с облаками


21. На синей области напишите информацию футера.


Web-дизайн с облаками


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


Web-дизайн с облаками




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

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

Ваше Имя

Ваш E-mail

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

Введите код: