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

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

eshop-cropped

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

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

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

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

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

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

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

Подготовка

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

Шаг 1

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

gomoodboard

gomoodboard.com — это очень простой в использовании инструмент.

Шаг 2

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

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

adobe-color-cc

Adobe Color CC позволяет создавать цветовую палитру на основе изображения.

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

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

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

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

Шаг 1

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

Шаг 2

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

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

set-vertical-guides

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

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

Шаг 1

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

place-logo

Шаг 2

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

place-navigation-items

Шаг 3

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

create-search-form

Шаг 4

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

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

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

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

place-an-image-to-create-a-clipping-mask

Шаг 5

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

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

add-gradient-call-it-shadow

Шаг 6

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

write-strong-headline

Шаг 7

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

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

«В соответствии с законом распределения, элементы psd макета сайта, которые находятся рядом друг с другом, кажутся сгруппированными«
write-sub-headline-and-place-a-cta

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

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

Шаг 1

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

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

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

write-trending-headline

Шаг 2

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

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

draw-a-rectangle-and-place-an-image-on-top

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

Шаг 3

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

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

write-down-product-title-and-price

Шаг 4

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

duplicate-product-group

Шаг 5

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

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

draw-a-horizontal-line

Шаг 6

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

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

create-popular-section-by-duplicating-previous-elements

Захват лидов

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

Шаг 1

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

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

draw-a-light-grey-rectangle

Шаг 2

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

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

write-down-blog-post-details

Шаг 3

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

duplicate-blog-block-group

Шаг 4

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

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

draw-dark-rectangle-shape

Шаг 5

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

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

write-a-short-blurb-for-subscribers
customize-duplicated-form-and-cta

Шаг 6

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

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

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

place-footer-links

Поздравляю!

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

eshop-final

Перевод статьи «Design a Shopify Theme for Handcrafted Goods in Photoshop» был подготовлен дружной командой проекта Сайтостроение от А до Я.