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

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

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

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

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

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

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

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

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

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

Подготовка

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

Шаг 1

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

Создаем в Photoshop тему магазина для товаров ручной работы gomoodboard.com — это простой в использовании инструмент.

Шаг 2

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

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

Создаем в Photoshop тему магазина для товаров ручной работы 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.

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

Приветствие новых покупателей

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

Шаг 1

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

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

Шаг 2

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

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

Шаг 3

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

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

Шаг 4

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

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

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

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

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

Шаг 5

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

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

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

Шаг 6

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

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

Шаг 7

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

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

«В соответствии с законом распределения, элементы psd макета веб-сайта , которые находятся рядом друг с ином, кажутся сгруппированными«
Создаем в Photoshop тему магазина для товаров ручной работы

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

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

Шаг 1

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

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

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

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

Шаг 2

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

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

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

Шаг 3

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

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

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

Шаг 4

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

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

Шаг 5

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

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

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

Шаг 6

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

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

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

Захват лидов

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

Шаг 1

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

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

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

Шаг 2

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

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

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

Шаг 3

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

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

Шаг 4

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

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

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

Шаг 5

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

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

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

Шаг 6

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

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

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

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

Поздравляю!

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *