Творческий дизайн

1. Создайте новый документ размером 900 x 1430 пикселей. Выберите инструмент Заливка
(Paint Bucket Tool) и залейте фон цветом #eae5cf. Потом установите цвет заливки — #443825, а цвет фона — #2c2518. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и сделайте большое выделение поперёк холста, как показано ниже. Высота прямоугольника примерно 300 пикселей. Выберите инструмент Градиент (Gradient Tool), тип – радиальный градиент, протяните градиент от середины к верху. У вас должно получиться такое изображение:


Творческий дизайн



2. Добавьте стиль Обводка (Layer Style — Stroke) к прямоугольнику и настройте, как показано ниже:


Творческий дизайн


3. Теперь загрузите этот набор картинок. Выберите любой рисунок из этого набора и вставьте его в документ. Я выбрал того, который указывает наверх. Название сайта слева сверху, а человек под ним, указывающий на это название. Вы можете обрезать ноги и оставить только часть человека.


Творческий дизайн


4. Добавьте стиль Отбрасывание тени (Layer Style — Drop Shadow) к вашему человеку, чтобы добавить ощущение глубины. Справа добавьте заголовки инструментом Горизонтальный текст (Horizontal Type Tool). Я использовал для этого белый цвет и цвет #8e9b08, шрифт – Impact, размер — 30pt.


Творческий дизайн


5. Создайте небольшую область белого цвета над вашими заголовками и уменьшите Непрозрачность слоя с ними до 5%. Инструментом Свободное трансформирование
(Free Transform) измените их наклон. Под вашими заголовками напишите текст, описывающий вас сайт.


Творческий дизайн


6. Верхняя часть готова. В нижней напишите текст, содержащий то, что будет объяснено на вашем сайте. Я использовал шрифт Impact, размер – разный.


Творческий дизайн


7. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и нарисуйте фигуру белого цвета, содержащую ваш заголовок. Добавьте стиль Отбрасывание тени (Layer Style — Drop Shadow) к этой фигуре и настройте, как показано ниже.


Творческий дизайн

Творческий дизайн



8. Создайте ещё 2 такие же области.


Творческий дизайн


9. Добавьте содержание к каждой области. Я добавил картинки и немного текста под ними, как показано ниже:


Творческий дизайн


10. Изображения, которые я добавил, сделаны не мной, это обои. Добавьте такие же маленькие области справа:


Творческий дизайн


11. Первая область будет содержать информаию RSS. Я добавил туда иконку на фон. Также я добавил красивый заголовок и ещё несколько иконок RSS.


Творческий дизайн


12. Из набора персонажей, который мы загрузили раньше, выберите человека, который машет руками, поместите его позади области RSS и инструментом Свободное трансформирование
(Free Transform) поверните немного:


Творческий дизайн


13. Продолжайте создавать области с информацией:


Творческий дизайн


Творческий дизайн



14. Осталось сделать нижний колонтитул. Сделайте копию всего верхнего заголовка и навигации. Поместите его вниз документа и добавьте текст об авторских правах.


Творческий дизайн


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


Творческий дизайн







Делаем Web-дизайн

Вас может также заинтересовать:

21 августа 2018

21 августа 2018

21 августа 2018