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

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

Оглавление:
  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

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

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

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