Создание дизайна интернет магазина в Photoshop

От автора: помните халявный Fashion Store? Сегодня я покажу вам, как создать дизайн, этого интернет магазина в Adobe Photoshop. Этот учебник битком набит не только методами Photoshop’а, но и дизайнерскими концепциями, уходящими далеко за пределы практической области, чего, я уверен, вы не захотите пропустить. Итак, давайте начнём создавать дизайн нашего интернет магазина!

Детали учебника «Создание дизайна интернет магазина с нуля»

Конечный продукт, который мы создадим:

Прежде всего, хочу отдать должное Сунилу (Sunil), который фактически создал этот интерфейс. Я сделал несколько модификаций макета, таких как его реорганизацию согласно сетке.

Сделайте эскиз своей идеи

«Пусть ваши наброски будут свободными и примерными»

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

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

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

К сожалению, так как я не делал этот макет «с нуля», нет возможности показать вам скриншот с эскизом каркаса. Но скажу одно: пускай ваши наброски будут свободными и примерными. Им не нужно быть причудливыми или высокохудожественными.

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

Для дальнейшего чтения:

Создание каркаса в серых тонах

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

Вот как окончательно должен выглядеть чёрно-белый каркас:

Разметка: Композиция

Перед началом работы над каркасом в Adobe Photoshop’е нам нужно принять несколько решений.

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

Разметка: Сетка

Использование сетки облегчает выравнивание элементов и выбор их размера. В этом проекте мы применим Сетку базовых линий, созданную потрясающими ребятами из Teehan+Lax. Это сетка из 6px-ных базовых линий, соединенная с 960 grid system.

Для дальнейшего чтения:

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

Разметка: Белое пространство

Белое, или негативное пространство – это промежутки между элементами интерфейса. Пространство между основными элементами называют белым макропространством. Белое микропространство – это незаполненные промежутки между такими элементами, как пункты списка, пустое место между заголовком и изображением, или пространство между словами и символами.

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

Типографская разметка текста: Гарнитуры

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

Для дальнейшего чтения:

В своем интерфейсе мы используем три следующих гарнитуры: Helvetica – «чистую» и современную, этим всё сказано; Georgia – вызывающую королевские ассоциации и задающую серьёзный тон гарнитуру; Bebas – гарнитуру авторитетную и, подобно жирному шрифту, всегда уместную.

Типографская разметка текста: Иерархия

“Иерархия разметки текста” просто описывает, как различные шрифты, типы начертания и размеры структурируют документ.

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

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

Что касается типа начертания, то я возьму символы от строчного Roman до жирных строчных. Ничего сложного.

Типографская разметка текста: Межстрочные и межзнаковые интервалы и трекинг

Как я уже говорил, мы применим значения межстрочных интервалов в зависимости от сетки, что составит 18px и 21px.

Межзнаковые интервалы у нас будут Metrics (автоматические, по умолчанию) в основном тексте и Optical (свободно определяемые) в заголовках (смотрите статью для дальнейшего чтения). И наконец, для всего текста мы используем значения трекинга по умолчанию (0).

Для дальнейшего чтения:

Типографская разметка текста: Сглаживание

Вот действительно отличная статья. Вы обязаны ее прочесть! Я не скажу ничего, кроме того, что для основного текста (маленькие размеры точек) мы используем метод сглаживания Sharp, а для заголовков (большие размеры точек) применим Crisp.

Шаг 1: Создание документа

Когда уже приняты какие-либо решения, пора запустить Adobe Photoshop и фактически начать создавать каркас! Итак, откройте заранее скачанный документ сетки, который называется “grid2.psd”. Первое, что мы сделаем – выделим все слои документа, кроме папки с названием “Marks”, и избавимся от них, или сгруппируем их в папку и пока скроем. Прежде чем продолжить, давайте выберем папку “Marks” и нажмём в панели слоев кнопку Закрепить все (Lock All).

Теперь нужно изменить высоту документа, так как наш окончательный дизайн проекта выше существующего документа. Выберите Изображение (Image) > Размер холста (Canvas Size), измените высоту на 1540px и удостоверьтесь, что установили Точку привязки/узловую точку (Anchor) вверху по центру.

Затем откройте Просмотр (View) > Вспомогательные элементы (Extras), чтобы просмотреть направляющие, Линейки (Rulers), чтобы открыть для просмотра линейки, и Захват (Snap) для привязки создаваемых нами объектов к направляющим).

Шаг 2: Создание фона

Мы начнём с фона. Создайте новый слой, назовите его (например, “bg”), затем выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M). Выделите весь холст и нажмите Shift+Backspace для заливки, Применить: Цвет (Use: Color), затем сделайте заливку, установив значение цвета #f5f5f3. Обратите внимание, что значения применяемых нами в черно-белом каркасе цветов неокончательны, а использовать их мы станем для различения элементов страницы.

Шаг 3: Создание верхней панели

Теперь давайте создадим верхнюю панель. Снова выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M), сделайте выделение размером 1260x45px и залейте его цветом #2d2d2d.

Выберите Горизонтальный текст (Horizontal Type Tool) (T), напишите элементы навигации, затем примените к ним следующие настройки символов.

Чтобы убедиться, что наш текст выровнен относительно фона правильно, выберите оба слоя (слой с текстом и слой с фоном) и нажмите на панели параметров Выравнивание центров по вертикали (Align vertical centers).

Шаг 4: Создание поля входа

С помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напечатайте слово «Вход» (“Sign In”),примените к нему следующие настройки и обязательно выровняйте, как показано на изображении внизу.

Теперь давайте создадим поля ввода данных. Используя инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) (U), создайте две фигуры, каждая размером 127x26px, с радиусом угла 15px. Залейте их цветом #767676 и выровняйте, как на изображении внизу.

Внутри этих полей напишите слова: «Имя пользователя» (“User name”) и «Пароль» (“Password”), применив к ним следующие настройки шрифта, затем выровняйте их согласно изображению ниже.

Кнопку «Войти» (“Go”) мы создадим с помощью инструмента Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) (U), но теперь фигура будет размером 33x25px с радиусом углов в 25px. После этого внутри нее напечатайте слово «Войти» (“Go”), применив те же настройки, что на предыдущем изображении, но изменив начертание шрифта на 75 Bold (полужирный).

Выберите инструмент Линия (Line Tool), нарисуйте вертикальную линию 1x25px и залейте её белым цветом. Теперь напишите слово «Зарегистрироваться» (“Sign Up”), используя нижеуказанные настройки символов, затем выровняйте согласно изображению все созданные нами в этом шаге элементы.

Шаг 5: Создание рекламной области

Используя инструмент Прямоугольная область (Rectangular Marquee Tool) (M), создайте выделение 480x60px, залейте его цветом #767676 и выровняйте, как на изображении внизу. Оно станет местом для размещения рекламы.

Теперь назначим этому слою Обводку (Stroke). На изображении ниже показаны нужные нам настройки.

Шаг 6: Создание логотипа

Собственно, наш логотип не должен делаться в Adobe Photoshop, но пока что мы создадим его здесь. Так, выберите инструмент Эллипс (Ellipse Tool) (U), создайте круг размером 60x60px, залейте его цветом #2d2d2d, и выровняйте, как показано на следующем изображении.

Напечатайте букву “F”, назначьте следующие параметры и выровняйте ее так, как показано на изображении:

Затем напечатайте слово «Мода» (“Fashion”) со следующими настройками:

Убедитесь, что вы расположили их согласно изображению ниже:

Шаг 7: Создание панели навигации

На этом этапе мы создадим панель навигации. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M), выделите область размером 940x48px, залейте её цветом #c3c3c3 и опустите на 20px ниже области рекламы, как на изображении ниже.

Идём дальше. Выберите Горизонтальный текст (Horizontal Type Tool) (T) и напечатайте названия страниц-подразделов, используя следующие настройки:

Теперь давайте отделим созданные нами сейчас заголовки. Используя инструмент Линия (Line Tool) (U), проведите между заголовками по вертикальной линии, залейте их цветом #b4b4b4 и убедитесь, что оставили по 20px между каждым заголовком и линией.

Шаг 8: Создание выпадающего меню

А давайте теперь создадим выпадающее меню? Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M), выделите пространство между двумя линиями, окружающими слово «Женщины» (“WOMEN”), и залейте его цветом #2d2d2d. Затем создайте другое выделение размером 340x147px, залейте тем же цветом и отцентрируйте, как на изображении внизу. Оно послужит фоном нашего выпадающего меню.

Нажмите на клавиатуре кнопку (T), чтобы выбрать инструмент Горизонтальный текст (Horizontal Type Tool) (T) и начните печатать элементы подменю, используя следующие настройки символов:

Наконец, убедитесь, что всё выровнено как на следующем изображении.

Сейчас мы создадим рамку для изображения (где разместим женскую фотографию, чтобы дать понять пользователю, что он находится в разделе «Женщины» (“Women”)). Итак, создадим с помощью инструмента Прямоугольная область (Rectangular Marquee Tool) (M) область выделения размером 139x105px и зальём цветом #1f1f1f, затем создадим другое выделение размером 121x87px и зальём цветом #767676. Убедитесь, что центры обоих прямоугольников выровнены по вертикали и горизонтали.

Шаг 9: Создание области поиска

Идём дальше. Создаем поле ввода поисковой строки. Выберите Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) (U), создайте прямоугольник размером 123x26px с радиусом углов 15px и залейте его белым цветом. Не забудьте выровнять, как показано на изображении:

Используя инструмент Горизонтальный текст (Horizontal Type Tool) (T), напечатайте внутри прямоугольника слово «Поиск» (“Search”) и примените к нему следующие настройки шрифта:

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

Шаг 10: Создание области избранного контента

Давайте примемся за создание области избранного содержимого. Начнём с выделения прямоугольной области размером 640x315px с помощью инструмента Прямоугольная область (Rectangular Marquee Tool) (M) и заполним её цветом #c3c3c3.

Теперь создадим панель, где будет находиться сообщение о представленном продукте. С помощью инструмента Прямоугольная область (Rectangular Marquee Tool) (M) создайте выделение размером 480x33px, залейте его цветом #767676 и выровняйте, как показано на рисунке ниже.

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) (T) и напечатайте сообщение, используя следующие настройки шрифта:

Не забудьте выровнять текст и фон, как показано.

Пора написать вводный текст. Выберите Горизонтальный текст (Horizontal Type Tool) (T) и напечатайте слово «Коллекция» (“Collection”), используя следующие настройки:

Затем напишите слово «Лето» (“Summer”), используя эти настройки:

И, наконец, напечатайте «Поможем вам отлично выглядеть» (“Helping you look cool”) со следующими применёнными настройками:

Убедитесь, что выровняли текст, как показано на изображении внизу.

Шаг 11: Создание ярлыка распродажи

Теперь давайте создадим ярлычок распродажи. Используя инструмент Эллипс (Ellipse Tool) (U), создайте круг размером 80x80px, залейте его этим цветом: #2d2d2d, после чего разместите, как показано ниже.

Впишите в окружность текст (например, «Скидка 40%» (“40% off”)) и примените следующие настройки шрифта:

Шаг 12: Создание области основного содержимого

Давайте сделаем область основного содержимого. Начнём с заголовка. С помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напечатайте заголовок и примените к нему следующие настройки:

Не забудьте поместить его на 20px ниже области избранного контента.

С помощью выбранного ранее инструмента Горизонтальный текст (Horizontal Type Tool) (T) напишите короткое описание этого заголовка со следующими настройками:

И, конечно, его нужно выровнять по сетке базовых линий, как показано на изображении ниже.

Используя инструмент Линия (Line Tool) (U), создайте черту шириной 640px и окрасьте её в цвет #e5e5e5.

Шаг 13: Создание изображений продукта

Выбрав инструмент Прямоугольная область (Rectangular Marquee Tool) (M), выделите область размером 200x152px, заполните цветом #2d2d2d и выровняйте на 20px ниже только что созданной нами линии.

Создайте еще один ярлычок распродажи, такой, как в шаге 11, но на этот раз сделайте круг 45x45px белого цвета. А текст нужен размером 24px/14px и цветом #767676.

Чтобы напечатать название и стоимость товара, используйте Горизонтальный текст (Horizontal Type Tool) (T) со следующими настройками:

Если вам интересно знать – пустое пространство между текстом мы заполним иконкой.

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

Если иконка цветная, перейдите к Слой (Layer) > Новый корректирующий слой (New Adjustment Layer) > Черно-белый (Black & White) … чтобы сделать её чёрно-белой.

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

Шаг 14: Создание большого баннера для боковой панели

Теперь поработаем над боковой панелью. Начнём с большого баннера – инструментом Прямоугольник (Rectangle Tool) (U) создайте фигуру размером 280x314px и залейте ее цветом #2d2d2d. Затем создайте тем же инструментом другой прямоугольник размером 280x41px и залейте цветом #767676 и выровняйте их, как показано ниже.

Используя инструмент Горизонтальный текст (Horizontal Type Tool) (T), напечатайте название баннера, используя следующие параметры:

Выберите с помощью кнопки (U) инструмент Эллипс (Ellipse Tool) (U), создайте круг 210x210px, залейте его цветом #7676767 и постарайтесь выровнять, как на изображении.

Теперь, чтобы избавиться от части круга, выходящей за край фона баннера, откройте панель слоев, поместите слой с окружностью (“tag_bg”) прямо над слоем фона баннера (“box_bg”), затем щёлкните правой кнопкой мыши по слою с кругом и выберите > Создать обтравочную маску (Create Clipping Mask).

Теперь с помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напечатайте внутри круга текст, используя следующие настройки:

Также убедитесь, что на панели Символ (Character) выбран “Faux Bold”.

Шаг 15: Создание меньших баннеров боковой панели

С помощью инструмента Прямоугольник (Rectangle Tool) (U) создайте область размером 280x144px, залейте ее цветом #2d2d2d и расположите согласно изображению внизу.

Теперь давайте сделаем кнопку «Узнать больше» (“Know More”). Используйте инструмент Прямоугольная область (Rectangular Marquee Tool) (M) для выделения блока размером 120x30px и залейте его цветом #767676.

Затем выберите Горизонтальный текст (Horizontal Type Tool) (T), напечатайте «Узнать больше» (“Know More”) внутри прямоугольника, используя следующие настройки:

Напечатайте еще немного текста с помощью Горизонтальный текст (Horizontal Type Tool) (T), как на изображении внизу, применив следующие настройки:

На изображении внизу показано, как выровнять текст.

Сделайте копию этого баннера и оставьте между ними 20px вертикального пространства.

Шаг 16: Создание раздела «Новинки Twitter’а» (“Twitter Updates”)

Сделайте выделение размером 280x235px с помощью инструмента Прямоугольная область (Rectangular Marquee Tool) (M), заполните его белым цветом и поместите на 20px ниже баннера.

С помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напишите заголовок, используя следующие настройки:

Используя инструмент Линия (Line Tool) (U), создайте черту шириной 240px, и окрасьте в цвет #e5e5e5.

Найдите иконку/изображение птички Twitter’а и разместите, как указано ниже. Также убедитесь, что она чёрно-белая, как в шаге 13.

С помощью инструмента Горизонтальный текст (Horizontal Type Tool) (T) напишите текст – пример поста, затем примените к нему эти настройки:

Затем напечатайте «Прочие посты» (“More Tweets”), используя следующие настройки:

Не забудьте включить на панели Символ (Character) «Подчеркнуть» (“Underline”).

Шаг 17: Создание раздела «Другие товары» (“Other Products”)

Выберите инструмент Прямоугольник (Rectangle Tool) (U) и создайте фигуру размером 940x264px, залейте цветом #ffffff, и поместите на 20px ниже раздела «Новости Twitter”а» (“Twitter Updates”).

Создайте заголовок этого раздела, как в предыдущем шаге. Затем воспользуйтесь инструментом Линия (Line Tool) (U), чтобы создать черту шириной 898px, и залейте цветом #e5e5e5.

С помощью инструмента Прямоугольник (Rectangle Tool) (U) создайте фигуру размером 178x113px. Скопируйте ее трижды и выровняйте согласно показанному ниже.

Снова напишите информацию о товаре и примените к тексту следующие настройки:

Наконец, не забудьте подчеркнуть «Купить сейчас» (“Buy Now”).

Найдите иконку указателя-стрелки и разместите её, как на изображении ниже, постарайтесь изменить размер примерно до 28x28px и залейте цветом #2d2d2d. Сделайте еще одну копию иконки, и поместите с правой стороны.

Шаг 18: Создание области нижнего колонтитула

Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M) и выделите область размером 1260x122px, затем залейте её цветом #2d2d2d.

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

Наконец, поместите копию логотипа и убедитесь, что он выровнен, как указано ниже, вот и всё!

Сочетание цветов

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

На этом изображении демонстрируются базовый, основной и акцентный цвета.

Область просмотра

Так как в своем проекте мы применяем портреты, я считаю себя обязанным кратко рассказать об «области просмотра» (“Looking Room”). Обычно на портретном фото имеется предмет и пространство вокруг него. Зрительный интерес к портрету может быть взят из движения, именно так наши глаза перемещаются по снимку. Чтобы заставить взгляд двигаться, фотограф соответственно регулирует пространство вокруг предмета.

Так, например, как можно увидеть на изображении ниже, выравнивание предмета слева (1), с белым пространством (областью просмотра) справа, создаёт некое движение (3), которое заставляет наш взгляд перемещаться в том направлении, куда смотрит объект.

Для дальнейшего чтения:

Шаг 19: Цвета фона

Теперь давайте раскрасим свой интерфейс! Чтобы залить фоновый слой цветом, можно дважды щёлкнуть на его пиктограмму в панели слоев, удерживая при этом клавишу Cmd/Ctrl, чтобы выделить ее пиксели, а затем нажать Shift+Backspace > Цвет (Color)… > #f6f6f4. Или можно добавить к нему Наложение цвета (Color Overlay).

Шаг 20: Цвета верхней панели

Окрасьте слово «Вход» (“Sign In”) в цвет #ffffff, «Имя пользователя/Пароль» (“User name/Password”) – в #8e8e8e, поля ввода данных – в #8e8e8e, фон кнопки и «Зарегистрироваться» (“Sign Up”) – в #ea6a53, текст навигации – в #999999.

Заполните рекламную площадку изображением, как показано внизу, и создайте для него Обтравочную маску (Clipping mask), как в шаге 14.

Пора раскрасить логотип. Назначьте окружности и слову «Мода» (“Fashion”) цвет #2d2d2d, залейте букву “F” тем же цветом, что и фон – #f6f6f4, а слово «Магазин» (“store”) – #bc3726.

Шаг 21: Цвета навигационной панели

Мы зальём фон текста навигации этим цветом: #c3c3c3, текст – #2d2d2d, слово «Женщины» (“WOMEN”) – #f6f6f4 (представляющим состояния наведения мышью и выбора объекта), а вертикальные отделяющие линии – #b4b4b4.

Чтобы добавить навигационному тексту больше визуальной привлекательности, добавим эффект Падающей тени (Drop Shadow). Настройки – на изображении ниже…

Перейдя к строке поиска, зальём поле ввода белым #ffffff, слово «Поиск» (“Search”) – #a6a6a6, а значок поиска – #ea6a53.

Теперь давайте раскрасим субнавигационную панель… Заполните фон цветом #2d2d2d, текст – #c4c4c4, а границу изображения – #1f1f1f.

Края изображения можно сделать интереснее, добавив к ним эффекты Падающая тень (Drop Shadow) и Внутренняя тень (Inner Shadow). Все настройки показаны ниже.

Наконец, поместите изображение девушки-модели, как показано на рисунке.

Теперь пришло время создать пунктирные линии между элементами навигации. Откройте Adobe Illustrator, создайте новый документ, выберите инструмент Линейный сегмент (Line Segment Tool) (\), создайте линию шириной 135px и сделайте заливку Нет цвета (None) (/). Затем откройте панель Обводка (Stroke) и настройте, как указано ниже.

Скопируйте пунктирную линию и вставьте в Adobe Photoshop, сделайте с нее две копии и залейте цветом #484848.

Шаг 22: Цвета большого баннера боковой панели

На этом этапе мы начнем с размещения изображения в качестве фоне баннера. Выберите Файл (File) > Поместить… (Place) > Выбрать изображение (Select an image) > Поместить (Place).

Теперь движемся дальше. Раскрасим окружность с текстом внутри. Применяемые цвета показаны на изображении ниже.

Чтобы немного выделить число “50″, мы применим к содержащему его слою эффект Падающая тень (Drop Shadow). Настройки можно видеть ниже.

Пора поработать над заголовком… Залейте его фон цветом #000000, а текст – #c3c3c3. Затем создайте две пунктирные линии (как в шаге 21), залейте их цветом #414141 и поместите сверху и снизу заголовка, как показано ниже.

Давайте добавим фону заголовка визуальной привлекательности, назначив ему легкую текстуру «потертости». Загрузите удивительный набор кистей Function Subtle Grunge Brushes, созданный классными ребятами из WeFunction, или любой другой предпочтительный набор кистей. Выбрав слой фона заголовка, создайте прямо над ним новый слой, порисуйте поверх заголовка одной из кистей с помощью инструмента Кисть (Brush Tool) (B) (или вместо нее используйте один из включённых PNG’ов), залейте белым цветом, затем уменьшите непрозрачность слоя до 30%. Наконец, щёлкните на нем правой кнопкой мыши и выберите Создать обтравочную маску (Create clipping mask)…

Шаг 23: Цвета области избранного содержимого

Мы зальём фон области избранного контента градиентом, чтобы она смотрелась интереснее. Так что выберите инструмент Градиент (Gradient Tool) (G), откройте Редактор градиентов (Gradient Editor) на Панели параметров (Control panel) и установите значения цвета от #b6a397 до #9d8a83.

Нам нужно выделить область, которую следует залить градиентом, для этого мы делаем на ней выделение. Перейдём к панели слоев, щёлкнем на миниатюру фона слоя, удерживая клавишу Cmd/Ctrl, чтобы сделать выделение, при выбранном инструменте Градиент (Gradient Tool) (G), возьмем Радиальный градиент (Radial Gradient), и протащим, как показано внизу, удерживая при этом клавишу Shift, чтобы ограничить угол.

Значения цветов элементов этого раздела видны ниже.

Наконец, найдите фото девушки-модели, поместите в свой документ и выровняйте по сетке, как показано внизу.

Шаг 24: Цвета маленьких баннеров боковой панели

Снова поместим в качестве фона своего баннера изображение и используем цвета, показанные ниже, чтобы раскрасить элементы.

Для выделения текста добавим ему Тень (Drop Shadow). Настройки вы можете видеть внизу.

И сделаем то же самое с другим баннером…

Теперь добавим цвета разделу «Новинки Twitter’а» (“Twitter Updates”)… Изображение ниже содержит все используемые в этом разделе цвета.

Шаг 25: Цвета области основного контента

Начнём с заголовка. Залейте его цветом #2d2d2d, затем описание цветом #858585, и линию – #e5e5e5.

Перейдём к средствам предварительного просмотра товаров… Сначала поместите изображение продукта, затем окрасьте все элементы цветами, показанными на изображении ниже.

Элементы раздела «Прочие товары» (“Other Products”) будут окрашены в те же цвета, что и в предыдущем шаге, только убедитесь, что залили фон белым #ffffff, а иконку указателя-стрелки – #040707.

Цвета области нижнего колонтитула

Залейте фон нижнего колонтитула этим цветом: #2d2d2d, а текст – #a0a0a0 и #ffffff.

И, наконец, цвета логотипа показаны на картинке ниже…

Заключение статьи по созданию дизайн-макета интернет магазина

Ну, вот, собственно, и все! Надеюсь, вам понравилось читать этот учебник, и, что гораздо важнее, он оказался вам полезен. Если у вас есть вопросы по созданию дизайна для интернет магазинов, не колеблясь оставляйте комментарии, а я изо всех сил постараюсь вам помочь.

Автор: Mahmoud Khaled Deiab

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (2)