Рисуем дизайн онлайн-магазина в Photoshop

Финальный результат:

 

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

Откройте Photoshop, зайдите в меню File>New и введите размеры сайта (в примере 1500x1000px), нажмите Ok.

Возьмите инструмент Rectangular Marquee Tool (M), чтобы создать выделение размером 1000x50px (используйте направляющие, чтобы было проще). Создайте новую группу слоев и назовите ее top. Создайте новый слой и назовите его backround. Залейте выделение черным цветом (используйте инструмент PaintBucketTool (G)).

Зайдите в меню Layer> Layer Style> Gradient overlay и введите настройки, как на картинке ниже.

Теперь используйте инструмент Horizontal Type Tool (T), чтобы добавить приветственное сообщение (используйте шрифт Arial размера в 12px). Выберите слой текста и в меню найдите Layer> Layer Style> Drop shadow. Повторите настройки с картинки ниже:

В правой части страницы добавьте выпадающее меню для валют. Чтобы создать выпадающий список, используйте инструмент Rounded rectangle.

Теперь импортируйте несколько флагов, чтобы кликая по ним пользователь мог менять язык. Снизьте непрозрачность слоев с неактивными флагами до 60%.

Посмотрите что вышло.

Шаг 2. Создаем хедер

Создаем новую группу слоев для хедера и называем ее the header. Создайте новый слой, назовите его background. Затем создайте выделение размером 1000×50px и залейте его серым цветом: #d8d8e8.

Используйте Horizontal Type Tool, чтобы создать логотип. Нам понадобятся два шрифта: TitilliumText14L Bold, TizaNegra. Добавьте слоям со шрифтами внутреннюю тень.

Поле поиска будет располагаться в правой части страницы. Используйте RectangularMarqueeTool (U), чтобы нарисовать поле и добавьте три стиля слоя (layer styles): Drop shadow, Innershadow& Stroke.



Чтобы нарисовать кнопочку поиска в виде лупы, используйте инструмент Custom Shape Tool (U) и выберите фигуру “Search” .


Добавьте ссылки, используя Horizontal Type Tool (T), после добавьте тень тексту.


Посмотрите как выглядит хедер.

Шаг 3. Рисуем слайдер типа «карусель»

Создайте новую группу слоев и назовите его carousel. Инструментом Rounded RectangularTool (U) нарисуйте прямоугольник размером 960x460px. Проиллюстрируйте его фотографией продукции.

Создайте новую группу слоев для переключателя между страницами. Назовите группу pagenumbering. Нарисуйте 6 кружочков инструментом EllispeTool (U) и залейте пять из них серым цветом (#4c4f5e), а один — сиреневым (#9842d4).

Шаг 4. Рисуем первую колонку

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

Создайте новую группу слоев и назовите ее column1. Затем инструментом Rounded Rectangle Tool (U) нарисуйте прямоугольник размером 180x33px. Задайте ему три стиля слоя: Innershadow, Gradient Overlay & Stroke.

Снова используйте инструмент Rectangular Type Tool (T), чтобы добавить заголовок для меню Sections. Укажите этому слою тень.


Теперь добавим тень под заголовком меню. Для этого создайте новый слой и поместите его под прямоугольником заголовка меню. Используйте инструмент Gradient Tool (G) чтобы создать градиентную заливку сверху вниз (выберите в качестве первого цвета цвет, а градиент — от черного к прозрачному). Теперь зайдите в меню Layer> Layer Mask>Reveal All и тем же градиентом выполните заливку слева к центру и справа к центру. Этот метод нужен для того, чтобы смягчить начальную тень.

Инструментом Rectangular Type Tool (T) создайте список ссылок. Используйте серый цвет: #9b9ba3.

Шаг 5. Специальные предложения

Первая колонка заканчивается блоком со специальными предложениями. Для того, чтобы нарисовать его, создайте новую группу слоев и назовите ее box2. Инструментом Rounded Rectangle (U) нарисуйте прямоугольник размера 180x300px. В меню выберите Layer> Layer Style> Drop shadow и укажите два стиля слоя: Drop shadow & Stroke.



Еще раз используйте инструмент Rounded Rectangle (U), чтобы нарисовать прямоугольник размером 174x30px. Затем в меню выберите Layer> Layer Style> Gradient overlay и укажите градиент, как показано на картинке ниже. Затем добавьте заголовок меню с тенью.

Параметры градиента:

Параметры тени для текста — заголовка меню:

Добавьте фото продукта из специального предложения.

При помощи инструмента Rectangular Type Tool (T) добавьте описание товара. Чтобы нарисовать кнопку «добавить в корзину» используйте инструмент Rounded Rectangle Tool (U) с радиусом в 60px. Цвет кнопки такой же, как и заголовка блока предложений. Эффекты для текста — те же, что и для заголовка блока.

Теперь нам нужно добавить серый градиент внизу блока. Для этого создайте новый слой поверх слоя с прямоугольником для блока и назовите слой gradient. Теперь создайте выделение по контуру прямоугольника (удерживая Ctrl кликните по слою в меню Layers). Зайдите в меню Select>Modify>Contract и введите значение 2px. Выберите в качестве первого цвета  #bbbbbb и инструментом Gradient Tool (G) (от серого к прозрачному) залейте выделение снизу вверх.


Вот как выглядит первая колонка:

Шаг 6. Контентное поле

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

Для начала создайте новую группу слоев и назовите ее content. Создайте заголовок меню (как в левой колонке, только длиннее).


Теперь создайте товары из магазина. Начните с одной группы слоев, содержащей фото продукта, название, описание, стоимость и кнопки покупки. После дублируйте группу так, чтобы получилось 6 товаров на странице. Можете отдельно отредактировать каждый товар, чтобы было разнообразие.

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

Теперь инструментом Rectangular Type Tool (T) добавьте цифры: 1 2 3 4 5… и, чтобы указать активную страницу, нарисуйте круг инструментом Ellipse tool (U) под цифрой “1”. Укажите слою с кругом стили слоя: Inner shadow и Stroke.



Вот как выглядят две колонки:

Шаг 7. Последняя колонка

Нам осталась последняя колонка. В ней находятся корзина, меню сортировки продуктов по брендам и предложение о бесплатной доставке.

Рисуем корзину. Создайте новую группу слоев и назовите ее basket. Теперь инструментом Rounded Rectangle Tool (U) рисуйте прямоугольник размером 180x170px. Залейте прямоугольник сиреневым градиентом, который мы использовали для кнопок. Теперь копируйте тень из-под заголовка меню и вставьте ее под сиреневый блок корзины.

Теперь добавьте содержимое корзины, используя инструмент Rectangular Type Tool (T).

Снова используйте инструмент Rounded RectangularTool (U) с радиусом в 60px, чтобы нарисовать два прямоугольника для кнопок в корзине. Примените к ним два стиля слоя: Drop shadow & Gradient overlay.


Теперь добавьте текст поверх кнопок. Используйте цвет: #595959. Добавьте тексту теней (меню Layer> Layer style> Drop shadow).


Копируйте из предыдущих колонок заголовок меню вместе с подложкой и вставьте ее в третью колонку для меню фильтрации по брендам.

Создайте новый выпадающий список, используя инструмент Rounded Rectangle Tool (U) и серый цвет (#e5e5e5). Добавьте тень этому прямоугольнику.


Для блока доставки создайте новую группу слоев и назовите ее shipping. Копируйте кнопку из блока корзины, добавьте текст и фотографию коробки.

Вот что у нас получилось на данном этапе:

Шаг 8. Рисуем футер

Футер состоит из трех частей: 1. полоса с сообщением о скидках; 2. важные ссылки и форма подписки; 3. копирайт-информация.

Начнем с первой части. Создайте группу слоев под названием footer. Создайте еще одну группу внутри этой группы и назовите ее part1. Копируйте серый прямоугольник, который мы рисовали для верхней части страницы и вставьте его вниз страницы в группе part1.

Инструментом Rectangular Type Tool (T) напишите рекламный слоган о скидках. Добавьте тень тексту.


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

Шаг 9. Вторая часть футера

Создайте новую группу слоев и назовите ее part2. Инструментом RectangularMarqueeTool (M) создайте выделение под серой полосой размером во всю оставшуюся площадь страницы. Создайте новый слой, назовите его background и залейте в нем выделение цветом #343844 (используйте инструмент PaintBucketTool (G)).

Нарисуйте прямоугольник со сглаженными краями (радиус 60px) серого цвета (#202326). Добавьте прямоугольнику внутреннюю тень. Инструментом Rectangular Type Tool (T) создайте заголовок и список ссылок.


Тем же способом создайте еще два списка ссылок.

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

Теперь создайте форму для ввода электронной почты. Используйте те же стили что и при создании заголовка.

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

Со второй частью футера разобрались.

Шаг 10. Последняя часть футера

Создайте новую группу слоев и назовите ее part3. Используйте инструмент RectangularMarqueeTool (M), чтобы создать выделение в нижней части документа размером 1000x50px. Создайте новый слой, назовите его background и залейте цветом #060708. Задайте слою внутреннюю тень.


Инструментом Rectangular Type Tool (T) добавьте данные о копирайте. Используйте цвет #3d4151.

В правой части добавьте иконки обозначающие допустимые варианты оплаты. Это важно для онлайн-магазина. Используйте  Rectangular Type Tool (T), но на этот раз сделайте текст цвета #d8d8e8. Также добавьте логотипы сервисов, предоставляющих варианты оплаты.

Финальный результат

Вот и все!

.

They approach the notebook www.writemyessay4me.org/ as an art form, using it as a sort of creative journal and devoting an hour or so at the end of the day to ruminating therein!
Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©