Создать прайс-лист для сайта в photoshop

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

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

Ресурсы:

Тканевая текстура
Grungy Texture
Фоновое изображение

Теперь, прежде чем мы начнем, давайте посмотрим на результат:

Создать прайс-лист для сайта в photoshop

Шаг 1:

Откройте Photoshop и создайте новый файл с 700px ширина и 800px высотой.

Создать прайс-лист для сайта в photoshop

Шаг 2:

Теперь откройте фоновое изображение и вставьте его в наш документ Photoshop. Затем нажмите на кнопку Filter> Blur> Gaussian Blur. Можно также сделать его ярче с помощью Image> Adjustments > Brightness / Contrast.

Создать прайс-лист для сайта в photoshop

Шаг 3:

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

Создать прайс-лист для сайта в photoshop

Шаг 4:

Теперь измените режим наложения на Soft Light и уменьшить прозрачность до 90%.

Создать прайс-лист для сайта в photoshop

Шаг 5:

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

Создать прайс-лист для сайта в photoshop
Создать прайс-лист для сайта в photoshop
Создать прайс-лист для сайта в photoshop
Создать прайс-лист для сайта в photoshop

Шаг 6:

Выберите инструмент прямоугольник и создайте маленький прямоугольник. Уменьшите прозрачность нового слоя до 30%.

Создать прайс-лист для сайта в photoshop

Шаг 7:

Теперь, нажмите на Layer > Layer Style > Pattern Overlay, и добавить шаблон для прямоугольника. Это сделает вашу таблицу похожим на рифление стекла.

Создать прайс-лист для сайта в photoshop

Шаг 8:

Нажмите на кнопку Layer > Layer style > Stroke, и добавим обводку, используя следующие параметры.

Создать прайс-лист для сайта в photoshop

Шаг 9:

Теперь мы начнем строительство названий области, поэтому выберите инструмент Rectangular Marquee Tool и выберите самую верхнюю часть прямоугольника. Затем залейте его цветом # 83b8cc.

Создать прайс-лист для сайта в photoshop

Шаг 10:

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

Создать прайс-лист для сайта в photoshop
Создать прайс-лист для сайта в photoshop

Шаг 11:

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

Создать прайс-лист для сайта в photoshop

Шаг 12:

Давайте начнем со знаменем, выберите инструмент Pen Tool и создайте форму, показанную ниже. Щелкните правой кнопкой мыши на пути и нажмите на кнопку Make selection. Затем залейте его цветом # c72424.

Создать прайс-лист для сайта в photoshop

Шаг 13:

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

Создать прайс-лист для сайта в photoshop

Шаг 14:

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

Создать прайс-лист для сайта в photoshop
Создать прайс-лист для сайта в photoshop
Создать прайс-лист для сайта в photoshop

Шаг 15:

Создайте новый слой, выберите инструмент Pen Tool и создайте маленький прямоугольник. Залейте его цветом # FFFFFF и уменьшите прозрачность до 25%.

Создать прайс-лист для сайта в photoshop

Шаг 16:

Теперь выберите инструмент текста и добавить нужный текст. Затем нажмите на Layer > Layer Style > Drop Shadow, и используйте следующие настройки.

Создать прайс-лист для сайта в photoshop

Шаг 17:

Опять же, выделите текст, инструмент и добавить название текста с помощью цвета # 003a58.

Создать прайс-лист для сайта в photoshop

Шаг 18:

Теперь, нажмите на Layer > Layer Styles > Drop Shadow, и использовать параметры приведены ниже.

Создать прайс-лист для сайта в photoshop

Шаг 19:

Повторите тот же процесс и добавить Зарегистрироваться в нижней части.

Создать прайс-лист для сайта в photoshop

Шаг 20:

Выберите инструмент линия и создать горизонтальную линию в 1px вес и цвет # 030303. Эта линия будет отделять наш текст так, что бы он казался, опрятным и организованным.

Создать прайс-лист для сайта в photoshop

Шаг 21:

Давайте добавим немного тени и Outer Glow к этой линии, откройте Layer Style окна и примените следующие стили слоя:

Создать прайс-лист для сайта в photoshop
Создать прайс-лист для сайта в photoshop

Шаг 22:

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

Создать прайс-лист для сайта в photoshop

Шаг 23:

Выделите текст инструментом и добавить текст, используя цвет # 464646. Затем нажмите на стили слоя и добавьте немного тени. Используйте следующие параметры:

Создать прайс-лист для сайта в photoshop

Шаг 24:

Добавить остальной текст с помощью того же процесса и стили слоя.

Создать прайс-лист для сайта в photoshop

Шаг 25:

Выберите круглую кисть и создать небольшую стрелку с помощью цвета # 464646. Затем нажмите на Layer Styles и добавить внутреннюю тень и тень от него. Используйте следующие параметры:

Создать прайс-лист для сайта в photoshop
Создать прайс-лист для сайта в photoshop

Шаг 26:

Добавить стрелки на остальной текст, дублируя работу от последнего шага.

Создать прайс-лист для сайта в photoshop

Шаг 27:

Наконец, давайте добавим блеска нашей таблице. Используйте инструмент Эллипс на правой стороне с цветом # FFFFFF.

Создать прайс-лист для сайта в photoshop

Щелкните правой кнопкой мыши на вновь созданном слое и выберите пункт Rasterize Layer. Затем измените режим смешивания на Overlay и уменьшите прозрачность до 25%. Используйте ластик, чтобы удалить нежелательные части этой прозрачной эллипса.

Создать прайс-лист для сайта в photoshop

Наш стильный прозрачный лист цен, сделан. Надеюсь, вы узнали что-то новое.

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

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

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>