Создайте дизайн  сайта за 15 минут! К этому уроку веб дизайна прилагается бесплатный макет с готовыми элементами для сайта.

сложность: средняя

Время: до 30 минут

Навыки для "прокачки":

- создание макета на основе готовых элементов
- работа с многослойным документом
- создание векторных фигур
- копирование элементов между документами Фотошоп

Для уроков от среднего уровня и выше: если возникают вопросы по используемым в уроках инструментам, рекомендуем пройти курс "Фотошоп с нуля".

 Файл PSD для повторения урока

Шаг 1

Перейдите в меню Файл> Новый File> New, чтобы создать документ. Введите значения и нажмите кнопку ОК.



Шаг 2

Для создания меню мы откроем файл Радуга-UI-Kit-pro.psd и перетянем в файл  Черное меню. Возьмите инструмент Перемещение (Move Tool), чтобы передвинуть его в верхний левый угол макета.



Если у вас меню не на всю ширину макета, увеличьте его ширину с помощью инструмента Свободная трансформация (Free transform = Ctrl+T). Добавьте одну или несколько значков, которые будут ссылками на социальные сети.





Шаг 3

В этом шаге мы займемся  созданием "карусели" (слайдера).  Создайте новую группу с именем "карусель" через меню Слой> Группа (Layer> New> Group). Создайте в группе слой при помощи Прямоугольной форры (Rectangle Tool (U)). Размер прямойгольника (1000x290px) цвета # f2f6f7. С помощью Перемещения (Move Tool (V)), поместите прямоугольник в меню.



Используйте Инструмент текст Text Tool (T), чтобы добавить на ваш сайт заголовок. Например, шрифтом Helvetica Bold размером 61px. Можно найти его в файле Rainbow UI Kit.



Из этого же файла можно взять другие элементы. Вы можете легко редактировать их под свои задачи.



Возьмите Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) с радиусом 3 пикселя. Создайте новый прямоугольник (200px X 50px) цвета # 2a6db4. Создайте второй прямоугольник цвета # a2a6ab. Используйте Инструмент текст (Text Tool (T)), чтобы добавить названия для двух кнопок. С помощью Перемещения (Move Tool) поместите их по центру документа.



Скопируйте и вставьте кнопку стилей из файла Rainbow UI Kit, а также стили текста и примените по своему усмотрению к кнопками.



Чтобы создать стрелки слева и справа от "карусели", сделайте новую группу "Arrow left". Используйте инструмент Эллипс (Ellipse Tool (U)), чтобы создать круг (50x50px) черного цвета.



Сами стрелки можно скопировать в скачанном файле. Уменьшите их размер, если это необходимо.



Теперь выберите группу “Arrow Left” уменьшите ее Непрозрачность (Opacity) до 10%.



Дублируйте эту группу и переименуйте "Arrow right". Затем перейдите в меню Редактирование> Трансформация> Трансформировать по горизонтали (Edit> Transform> Flip Horisontal). С помощью Перемещения (Move Tool) поместите стрелку на правой стороне карусели.



Шаг 4

Создадим блок для размещения информации о некоторых услугах вашего сайта. Это легко сделать, используя файл Rainbow.
Создайте группу "Services". Используйте инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), чтобы создать серый прямоугольник # d6dde1  размером 770px X 300px.



Перетащите из  файла ленту а затем увеличьте ее его ширину до ширины серого прямоугольника.



Создайте три новых группы с названиями box1, box2 и box3, и 3 круга в них используя инструмент Овал (Ellipse Tool (U)). Переместите их равномерно по всей ширине серого прямоугольника.



Добавьте иконки в каждом круге (вы можете скачать некоторые из них на сайте iconfinder.com) и добавьте текстовые описания.



Шаг 5

Создадим галерею, где вы можете отобразить некоторые из ваших лучших работ. Просто переместим ее из файла Rainbow и изменим размер блоков, как это нужно.



Шаг 6

Импортируем нижний колонтитул из файла Rainbow.



Также импортируем правую колонку новостей в Rainbow UI Kit.



Вы создали веб дизайн портфолио всего за 10-15 минут! Многие элементы, скопированные в рабочий файл, мы рекомендуем изучить самостоятельно (все стили слоя для них сохранены в оригинальном виде - это поможет понять, на основе каких стилей они созданы).



Оставляйте свои комментарии и лайки!