Прайс-лист в фотошоп

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

Оглавление:
  1. Создать прайс-лист для сайта в photoshop
  2. Шаг 1
  3. Шаг 2
  4. Шаг 3
  5. Шаг 4
  6. Шаг 5
  7. Шаг 6
  8. Шаг 7
  9. Шаг 8
  10. Шаг 9
  11. Шаг 10
  12. Шаг 11
  13. Шаг 12
  14. Шаг 13
  15. Шаг 14
  16. Шаг 15
  17. Шаг 16
  18. Шаг 17
  19. Шаг 18
  20. Шаг 19
  21. Шаг 20
  22. Шаг 21
  23. Шаг 22
  24. Шаг 23
  25. Шаг 24
  26. Шаг 25
  27. Шаг 26
  28. Шаг 27

Для того, чтобы заинтересовать клиентов насколько это возможно, таблицы цен должны быть четкими и последовательными. Покупатели должны иметь возможность быстро сравнить ваши варианты и понять сильные стороны каждого из них. Итак, сегодня мы собираемся достичь ясность цен, на совершенно новый уровень, создавая стильный прозрачный стол ценообразования в 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

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