Создаем в Photoshop тему магазина для товаров ручной работы

В этой статье мы будем создавать макет сайта магазина товаров ручной работы. Я объясню, как подбираются шрифты, цвета, пропорции и так далее:

Что вам понадобится

Чтобы следовать за моими действиями, вам понадобятся некоторые ресурсы:

• Фотографии с Unsplash;
• Фотографии с StockSnap.io;
• Шрифт Source Sans Pro;
• Шрифт Source Serif Pro.

Определение бизнес-целей

Сначала необходимо определить, в чем заключаются бизнес-цели этой работы. Начните со следующих вопросов:

• Что мы продаем?
• Кто может быть заинтересован в покупке нашей продукции?
• Почему потенциальные клиенты должны купить это у нас?

Для этого руководства по созданию psd макетов сайтов я решил сосредоточиться на имидже и активном использовании незаполненного пространства, чтобы создать ощущение свободы и ясности. Я хочу, чтобы дизайн выглядел стильно и обращался к людям, которые заботятся о своем имидже.

Подготовка

Перед тем как перейти в Adobe Photoshop и начать создавать визуальные элементы, давайте определимся с основными цветами, стилями и общим направлением.

Шаг 1

Начните со сбора изображений, которые вы хотите разместить на своем эскизе, и определения цветовой палитры:

Шаг 2

Далее сформируем цветовую схему дизайна для макета сайта в Фотошопе. Она должна иметь отношение к вашему бренду и обращаться к целевой аудитории. Для этого можно использовать генератор цветовой палитры, такой как Adobe Color CC (бывший Kuler). Это поможет сэкономить время при выборе цветов.

Загрузите изображение со своего черновика и посмотрите, какие цвета для него будут сгенерированы. Настройте палитру и сохраните цвета для дальнейшего использования:

Выбор шрифтов

Мы останавливаем свой выбор на семействе шрифтов Source Pro, включая версии шрифта sans и serif. Их сочетание обеспечит ощущение сбалансированности и выразительность заголовков.

Подготовка документа

Перед тем, как перейти к дизайну макета сайта, разберёмся с некоторыми техническими вопросами, касающимися Adobe Photoshop.

Шаг 1

Откройте Adobe Photoshop и создайте новый документ (Ctrl + N). Определите размеры документа, которые будут соответствовать вашим потребностям. В моем случае это 1400 на 3564 px.

Шаг 2

После этого установите направляющие так, чтобы макет имел достаточно свободного пространства и выглядел сбалансированным. Установка направляющих обеспечит аккуратность и поможет определить ширину сайта. Перейдите в Просмотр> Новая направляющая... и установите направляющую. Обычно в качестве отправной точки я выбираю 1000 пикселей и добавляю несколько направляющих перпендикулярно ей, чтобы на холсте было достаточно свободного пространства.

Примечание: В этом руководстве использованы следующие вертикальные направляющие: 200, 500, 550, 700, 850, 900 и 1200 px.

Приветствие новых клиентов

Мы начнем разработку дизайна макета сайта магазина с создания верхней области, которая будет обращать на себя внимание посетителей и давать им краткое представление, о чем этот сайт.

Шаг 1

Создайте новую группу слоев под названием "Navigation" и установите новую горизонтальную направляющую на уровне 130 px. Здесь будет размещаться логотип, а также ссылки навигации и панель поиска. Разместите логотип слева. Если у вас нет логотипа, создайте фигуру прямоугольника и поместите в ней текст:

Шаг 2

Теперь разместите элементы навигации, как простой текст. На этапе планирования необходимо определить, что нужно включить в панель навигации. С помощью инструмента «Горизонтальный текст» (T) добавьте заголовки ссылок и разместите их рядом с логотипом, оставив достаточно пространства между ними:

Шаг 3

В макете сайта панель поиска должна быть заметной и доступной, поэтому разместите ее справа в главной верхней панели навигации. Для ее создания используйте инструменты «Прямоугольник» (U) и «Горизонтальный текст» (T). Обратите внимание на то, какие цвета на основе изображения мы подобрали в Adobe Color CC:

Шаг 4

Теперь пришло время добавить выразительное изображение, которое должно приковывать к себе внимание посетителя. Чаще всего для этого используются изображения высокого качества с четким фокусом. Что позволяет наложить на них текст и элементы интерфейса. Мы поступим также.

С помощью инструмента «Прямоугольник» (U) создайте прямоугольник размером 1400 на 700 px (любого цвета) и поместите его прямо под верхней панелью навигации. Помните горизонтальную направляющую на отметке в 130 пикселей? Она для этой фигуры. Затем перетащите выбранное изображение и поместите его над слоем прямоугольника.

После этого, удерживая нажатыми клавишу Alt и кнопку мыши, наведите курсор на слой изображения, пока не появится маленькая стрелка, указывающая вниз. Затем отпустите левую кнопку мыши, чтобы создать обтравочную маску. Изображение в макете сайта будет видно только в пределах прямоугольника.

Нажмите Ctrl + T, чтобы изменить размер фотографии. Удерживая нажатой клавишу Shift, измените ее размер пропорционально:

Шаг 5

Чтобы привлечь внимание пользователя к горизонтальной центральной части фото, добавим градиент от прозрачного к черному в нижней части. Выберите инструмент «Градиент» (G) и задайте переход от черного #000000 к прозрачному. После этого, удерживая нажатой клавишу Shift, проведите мышью от нижней части изображения почти до середины.

Затем сделайте это для обтравочной маски и уменьшите непрозрачность до 50%, чтобы эффект не был таким интенсивным. Переименуйте слой в “Shadow”, чтобы его было легко идентифицировать:

Шаг 6

Пришло время создать для дизайна макета сайта броский заголовок. Используйте большой и жирный шрифт Source Sans Pro и напишите короткий заголовок. Я использовал Source Sans Pro (черный цвет), размер - 70, трекинг - 160:

Шаг 7

Вы привлекли внимание пользователя, теперь нужно добавить второе послание и призыв к действию. Чтобы сохранить последовательность дизайна, я использовал для подзаголовка и для второй кнопки поиска шрифт Source Serif Pro (обычный), размер 28.

Обратите внимание на отступ, который я использовал. Всегда оставляйте достаточно места вокруг элементов, чтобы они лучше воспринимались и выглядели более организованными. Если присмотреться внимательнее, то можно увидеть, что текстовые слои расположены ближе друг к другу. Это обусловлено законом распределения Гештальта.

Формирование доверия

Мы создали "приветствие новых клиентов" или область заголовка. После того, как мы привлекли внимание посетителей и заинтересовали их, пришло время показать им еще несколько преимуществ, которые может предложить наш магазин.

Шаг 1

Так как верхняя область нашего сайта выполнена в минималистичном стиле, мы сохраним ту же четкость и эстетику простоты для остальной части макета.

Ниже мы разместим заголовок, который должен заинтересовать посетителей, и краткое описание, которое еще больше будет стимулировать их. Я использовал шрифт Source Sans Pro (полужирный), размером 24 темно-серого цвета #282723. Не забудьте оставить достаточно свободного места над заголовком, чтобы это соответствовало верхней области.

Визуально описание должно быть менее насыщенным и сразу восприниматься как вторичный элемент. В макете сайта я использовал шрифт Source Serif Pro (обычный), размером 16 серого цвета #adadad:

Шаг 2

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

Выберите инструмент «Прямоугольник» (U) и нарисуйте фигуру. После этого перетащите фото товара в Photoshop, разместите его на прямоугольнике и создайте обтравочную маску. Измените размер изображения, если это необходимо, нажав Ctrl + T:

Шаг 3

Для простоты в HTML макете сайта мы будем предоставлять только основную информацию о товаре, включающую в себя название и цену.

Выберите шрифт Source Serif Pro, который использовался для раздела заголовка, и введите название более темным серым цветом. После этого используйте светло-серый оттенок для цены, так как она является вторичной информацией и для нее не требуется слишком сильный визуальный акцент. Не забывайте, что такие элементы магазина, как заголовки, кнопки призыва к действию и блоки описаний, должны быть выровнены по центру:

Шаг 4

Теперь поместите все слои товара в одну группу и продублируйте их, нажав Ctrl + J. Поместите копии между ранее определенными вертикальными направляющими, оставляя между ними свободное пространство:

Шаг 5

Мы закончили с разделом “Trending”, в котором представлены три товара. Теперь создадим небольшой разделитель, чтобы разбить макет на разделы. Я использовал инструмент «Линия» (U), ширина - 1 px, цвет - светло-серый #E6E6E6, чтобы линия не была слишком насыщенной.

Подсказка: Удерживая нажатой клавишу Shift, можно легко нарисовать идеально горизонтальную линию.

Шаг 6

Теперь создадим еще один раздел макета сайта, в котором будет представлено больше продуктов, и назовем его “Popular”. Люди всегда ищут популярные товары, которыми пользовались другие.

Продублируйте слой (CTRL+ J) и измените заголовок, описание и товары раздела “Trending”. Создайте дополнительные копии слоев товаров и составьте решетку 3 на 2 из популярных товаров:

Захват лидов

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

Шаг 1

Мы создадим простой раздел блога, используя тот же заголовок и формат описания. А также несколько выдержек из записей блога для перенаправления пользователей на контент, который может их заинтересовать.

Выберите инструмент «Прямоугольник» (U) и нарисуйте огромный прямоугольник, который будет служить фоном для нового раздела. Используйте светло-серый цвет, чтобы отделить блог от раздела товаров. Я использовал цвет #fbfafa. Теперь продублируйте название и описание предыдущего раздела и поместите их поверх нового фона:

Шаг 2

Для дальнейшего создания макета сайта в Фотошопе выберите инструмент «Горизонтальный текст» (T) и введите заголовок, дату и короткую выдержку из записи в блоге. Я снова использую шрифт Source Serif Pro для заголовка, а для описания и даты - Source Sans Pro.

В блоке блога должна прослеживаться четкая визуальная иерархия: название - тёмное и самое большое, другие элементы - меньше и светлее. Всегда используйте визуальную иерархию для создания логической последовательности:

Шаг 3

Теперь поместите все слои записей блога в группу и продублируйте ее дважды (Ctrl + J). Разместите копии между вертикальными направляющими, оставляя между блоками промежутки, как мы делали для товаров:

Шаг 4

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

Еще раз выберите инструмент «Прямоугольник» (U), задайте более темный цвет, например, #282723, и нарисуйте фон для формы подписки в макете сайта. Более темный фон создаст контраст, который будет привлекать внимание посетителей:

Шаг 5

Теперь напишите короткую аннотацию, объясняющую, почему люди должны подписаться; опишите преимущества, которые дает подписка. После этого перейдите к разделу навигации и продублируйте поле поиска.

Перетащите дублированные слои и поместите их поверх только что созданного фона, затем отредактируйте поле ввода запроса и кнопку призыва к действию:

Шаг 6

Каждый макет сайта в Фотошопе должен содержать подвал, чтобы люди могли найти там ссылки на ключевые страницы: поддержка клиентов, контактная информация, социальные медиа и многое другое.

Продублируйте текстовые слои записей блога и отредактируйте их, чтобы они соответствовали ссылкам. Разделите различные группы ссылок на столбцы, которые будут равномерно распределены.

Последний штрих: добавьте строку копирайта в самом низу макета.

Поздравляю!

Мы завершили создание дизайна магазина. Теперь просмотрите слои документа, удалите ненужные и передайте макет сайта веб-разработчику. Или, еще лучше, напишите код сами!

Пожалуйста, опубликуйте свои мнения по текущей теме статьи. За комментарии, дизлайки, отклики, лайки, подписки огромное вам спасибо!