Создание сайта-портфолио или сайта услуг фотографа и дизайнера

Создайте дизайн сайта за 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 минут! Многие элементы, скопированные в рабочий файл, мы рекомендуем изучить самостоятельно (все стили слоя для них сохранены в оригинальном виде - это поможет понять, на основе каких стилей они созданы).

Создание сайта-портфолио или сайта услуг фотографа и дизайнера - уроки фотошоп

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

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика