Создание прайс листа в фотошопе. Создание в фотошопе лаконичного и современного прайс-листа. Как сделают простую табличку начинающие

Примечание переводчика: шрифты Calibri и С orbel - системные. Если этих шрифтов в вашей системе нет, то можете их взять из архива .

Шаг 1

Создайте новый документCtrl+N со следующими данными, которые показаны на скриншоте ниже. Включите сетку View > Show > Grid (Просмотр-Показать-Сетка), а так же включите привязку к сетке View > Snap To > Grid (Просмотр-Привязать к-Сетка).

Нам нужна сетка в 5 рх. Для этого пройдите в Edit > Preferences > Guides, Grid & Slices (Редактирование-Установки-Направляющие, Сетка и Фрагменты). В пункте Grid (Сетка) в поле Gridline Every (Линия через каждые) введите значение 5 и в поле Subdivision (Внутреннее деление) введите 1. Установите цвет сетки #a7a7a7.

Шаг 2

#205d7a. Выберите инструмент Rounded Rectangle Tool (Прямоугольник со скруглёнными углами) радиус скругления угла 5 рх и нарисуйте фигуру размером 145 х 420 рх. На панели слоёв щёлкните два раза по слою с фигурой, чтобы открыть окно Стилей Слоя.

Активируйте Drop Shadow (Тень), Inner Shadow (Внутренняя Тень), Outer Glow (Внешнее Свечение), Inner Glow (Внутреннее Свечение) и Stroke (Обводка). Установите для этих стилей параметры, показанные ниже.В итоге должна получиться фигура, как на втором изображении. Вы можете временно отключить сетку, чтобы посмотреть, как выглядит фигура на данном этапе.

Шаг 3

Установите цвет переднего плана на чёрный. Выберите инструмент Rectangle Tool (Прямоугольник). Создайте фигуру с размером 145 х 70 рх и поместите её, как показано на первом изображении.
На панели слоёв откройте Окно Стилей для этой фигуры и введите параметры, показанные ниже.

Примечание переводчика: некоторые поправки в стилях - Стиль Inner Shadow (Внутренняя Тень)- Distanse (Дистанция)-2 рх., Стиль Stroke (Обводка)- Position (Позиция)- Inside (Внутри), Fill Type (Тип)- Color (Цвет)- примерный цвет- #60b9fb. Стили Тиснение и Внешнее Свечение - не нужно.

Шаг 4

Дублируйте слой с прямоугольником, созданным в предыдущем шаге (Ctrl+J). Щёлкните правой кнопкой мыши по дубликату и выберите Clear Layer Style (Очистить Стили Слоя). Установите Fill (Заливка) на 0%. Откройте Окно Стилей и введите параметры, показанные ниже.

Шаг 5

Для этого шага нам понадобится сетка в 1 рх. Пройдите в Edit > Preferences > Guides, Grid & Slices (Редактирование-Установки-Направляющие, Сетка и Фрагменты) и введите 1 в поле Gridline Every (Линия через каждые).

Установите цвет переднего плана на #ed1c24 и выберите инструмент Rectangle Tool (Прямоугольник). Создайте фигуру с размером 145 х 1 рх. Поместите фигуру, как показано на первом изображении. Дублируйте фигуру (Ctrl+J).
Сдвиньте копию на 1 рх вниз и смените её цвет на #fed700.

Шаг 6

Выберите слой с красной фигурой.УменьшитеFill (Заливка)до 0%. Откройте окно Стилей и введите параметры, показанные ниже.

Шаг 7

Выберите слой с жёлтой фигурой. УменьшитеFill (Заливка)до 0%. Добавьте стиль с параметрами, показанными ниже.

Шаг 8

Снова пройдите в Edit > Preferences > Guides, Grid & (Редактирование-Установки-Направляющие, Сетка и Фрагменты) и в поле Gridline Every (Линия через каждые) установите значение 5.

Выделите слои с тонкими прямоугольниками и сгруппируйте их (Ctrl + G). Дублируйте созданную группу и переместите её вниз, как показано на изображении ниже.

Шаг 9

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

Шаг 10

Установите цвет переднего плана на #a1d8ff. Выберите Rounded Rectangle Tool (Прямоугольник со скруглёнными углами) радиус 3 рх. Создайте фигуру с размером 95 х 25 рх и поместите её, как на изображении ниже.
Откройте окно Стилей и введите параметры, показанные ниже.

Шаг 11

Отключите сетку View > Show > Grid (Просмотр-Показать-Сетка).
Откройте панель Символ (Window - Character). Выберите инструмент Текст, установите цвет на #ddf1ff и напишите слово BASIC. Используйте шрифт Sakkal Majalla Bold с размером в 20 пт. Добавьте для текста стиль с параметрами, показанными ниже.

Шаг 12

Выберите шрифт Calibry Вold размер 35 пт цвет #205d7a и напишите цену. Для этого текста добавьте стили с параметрами, указанными ниже.

View > Show > Grid (Просмотр-Показать-Сетка). Выберите инструмент Rectangle Tool (Прямоугольник). Создайте два квадрата с размером 5 х 5 рх и поместите их, как показано ниже.

Шаг 17

Установите цвет переднего плана на#282828. Выберите инструмент Rectangle Tool (Прямоугольник) и создайте фигуру с размером 600 х 600 рх. Поместите слой с этой фигурой ниже всех групп в панели слоёв (Shift + Ctrl + [). Примените к фигуре стиль слоя с параметрами, показанными ниже. Выберите узор, созданный ранее.

Детали урока
Использованное ПО: Adobe Photoshop CS6
Сложность: средняя
Примерное время выполнения: 1 час

То, что мы будем создавать

Фотошоп часто используется для создания графики и макетов при веб-дизайне. Данный урок по фотошопу описывает процесс создания при помощи комбинирования векторных фигур и стилей слоя, прайс-листа для хостинговой компании. Итак, приступим!

Шаг 1: Подготовка
Начнем с создания нового документа (Command/Ctrl + N) размером 800x600 пикселей.

Ша2
Добавьте слой коррекции Цвет (Solid Color), который будет использован в качестве фона. Задайте цвет #f7f8eb.

Шаг 3
Скачайте бесплатный пиксельный узор. Затем дважды кликните по корректирующему слою, чтобы применить к нему стиль слоя Наложение узора (Pattern Overlay).

Шаг 4
Создайте новый слой и залейте его черным цветом. Пройдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise).

Шаг 5
Задайте на палитре слоев Режим наложения (Blend mode) – Экран (Screen).

Шаг 6: Основа
Приступаем к созданию основы. Начертите скругленный прямоугольник радиусом 10 пикселей. Залейте его очень светлым синим цветом, без обводки.

Шаг 7
Дважды кликните по данному слою, чтобы открыть окно стилей слоя. Примените стили слоя Обводка (Stroke) и Внутренняя тень (Inner Shadow) с приведенными ниже настройками.

Шаг 8: Панель заголовка
Продублируйте эту фигуру и измените цвет копии. Создайте в ее нижней части еще один прямоугольник, задав режим рисования “Вычесть из области фигуры” (Subtract). У нас получилась вот такая небольшая панель.

Шаг 9
Примените к ней стили слоя Обводка (Stroke), Внутреннее свечение (Inner Glow) и Наложение градиента (Gradient Overlay) с приведенными ниже настройками.

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

Шаг 10
Добавьте текстовый заголовок прайс листа. Придайте ему эффект тиснения за счет применения стиля слоя Тень (Inner Shadow).

Шаг 11: Информация о ценах
Теперь, задав больший шрифт, добавьте саму цену. Используйте серый цвет средней насыщенности. Примените к этому слою стили слоя Внутренняя тень (Inner Shadow), Тень (Inner Shadow) и Тиснение (Bevel and Emboss).

Ниже вы можете увидеть разницу до и после применения стилей слоя.

Шаг 12
Добавьте к цене какую-либо дополнительную информацию.

Шаг 13: Перечень (Позиции)
Продублируйте слой с основой и измените ее цвет на #f0f0f0. Начертите поверх дубликата вот такие круг и прямоугольник в режиме Вычесть из области фигуры (Subtract).

Шаг 14
Примените стили слоя Обводка (Stroke), Внутреннее свечение (Inner Glow) и Наложение градиента (Gradient Overlay).

Шаг 15
Создайте поверх этой фигуры новый слой. Прокрасьте верхнюю часть фигуры белым цветом. Нажатием Command/Ctrl + Alt + G преобразуйте этот слой в обтравочную маску. Теперь создайте еще один новый слой под этой фигурой и черными цветом добавьте ей тень.

Вот результат в масштабе 100%.

Шаг 17
Разделите каждую позицию в списке 1-пиксельной черной линией.

Шаг 18
Убедитесь, что линии все еще активны, затем кликните по вот этой кнопке Другие параметры (More Options) и выберите пунктирную линию.

Шаг 19
Создайте для слоя с линиями слой-маску и прокрасьте правые и левые концы линий черными цветом.

Шаг 20: Кнопка
Начертите скругленный прямоугольник цвета #a7bed5.

Шаг 21
Примените к фигуре стили слоя Обводка (Stroke), Внутреннее свечение (Inner Glow) и Наложение градиента (Gradient Overlay).

Шаг 22
Продублируйте кнопку, расположите копию под оригиналом и сдвиньте ее на несколько пикселей вниз.

Шаг 23
Примените к этой фигуре такие же стили слоя, как и к первой, только увеличьте Непрозрачность (Opacity) стиля слоя Наложение градиента (Gradient Overlay), чтобы сделать ее темнее.

Так же, чтобы добавить мягкую тень вокруг кнопки, мы применим стиль слоя Тень (Inner Shadow).

Вот как она должна выглядеть в итоге.

Шаг 24
Нанесите на поверхность кнопки текст. Примените к нему Тень (Inner Shadow), чтобы придать ему эффект тиснения.

Шаг 25
Выделите все слои, относящиеся к созданному прайс-листу, и нажатием Command/Ctrl + G объедините их в одну группу. Теперь, удерживая Alt, перетащите группу в сторону, создавая ее копию. Создайте, таким образом, 3 таблицы.

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

Шаг 27
Теперь давайте как-нибудь выделим один из созданных тарифных планов. Для этого выдвиньте второй по счету план немного вверх. Выровняйте нижний край панели его заголовка по верхним краям двух других панелей.

Шаг 28
Нам следует позаботиться о том, что бы позиции в списке цен так же были выровнены. Выделите строку текста и линию под ним, и сметите их, выравнивая по соседним. У вас должно оставаться немного свободного пространства, куда будет добавлена дополнительная информация.

Шаг 29
Так же измените положение кнопки.

Шаг 30
Подкорректируйте фигуру основы, сделав ее чуть выше.

Шаг 31
Добавьте дополнительную информацию.

Шаг 32
Натяните правую грань второй таблицы с ценами поверх левой грани первой таблицы.

Шаг 33
Ниже вы можете увидеть результат до и после модификации фигур.

Шаг 34
Далее еще немного приподнимем выделенный тарифный план, придав ему чуть более удлиненный вид за счет добавления тени. Сначала, удерживая Command/Ctrl, кликните по иконке слоя с основой выделенного тарифного плана на палитре слоев, чтобы образовать выделенную область.