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

Детали урока
Использованное ПО: 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, кликните по иконке слоя с основой выделенного тарифного плана на палитре слоев, чтобы образовать выделенную область.

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

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

Ресурсы:

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

Шаг 1:

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

Шаг 2:

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

Шаг 3:

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

Шаг 4:

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

Шаг 5:

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

Шаг 6:

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

Шаг 7:

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

Шаг 8:

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

Шаг 9:

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

Шаг 10:

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

Шаг 11:

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

Шаг 12:

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

Шаг 13:

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

Шаг 14:

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

Шаг 15:

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

Шаг 16:

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

Шаг 17:

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

Шаг 18:

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

Шаг 19:

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

Шаг 20:

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

Шаг 21:

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

Шаг 22:

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

Шаг 23:

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

Шаг 24:

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

Шаг 25:

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

Шаг 26:

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

Шаг 27:

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

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

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

Примечание переводчика: шрифты 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 + [). Примените к фигуре стиль слоя с параметрами, показанными ниже. Выберите узор, созданный ранее.

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5

Шаг 6

Шаг 7

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

Шаг 8

Шаг 9

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

Шаг 10

Шаг 11

Шаг 12

Шаг 17

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

Даже если таблица не очень большая, то ее шаблонный вид просто убивает:

Согласитесь, что этот вариант все-таки смотрится лучше:

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

Для начала откроем изображение фона с надписью (для тренировки вы можете скопировать его прямо отсюда):

Затем расставим направляющие так, чтобы они образовали сетку будущей таблицы. Для этого надо сначала включить отображение линеек (Ctrl - R ), затем выбрать инструмент Move tool (перемещение) указать на верхнюю линейку, нажать и удерживать левую клавишу мыши, переместить маркер мыши вместе с направляющей в нужную позицию на изображении.

Для постановки вертикальных направляющих линий то же самое нужно проделать с левой вертикальной линейкой:

Затем, когда мы получили сетку из направляющих нужной конфигурации, надо выбрать инструмент Line tool (линия) и настроить ее параметры:

1. в панели инструментов выбрать инструмент Line tool (Линия) . Имейте в виду, что на этом месте панели инструментов может быть прямоугольник или овал. В этом случае укажите маркером мыши на инструмент, нажмите и удерживайте левую клавишу мыши. В появившемся списке фигур выберите Line tool (2 ),

3. выберите толщину линии в точках (толщина зависит от вашего желания),

4. выберите цвет линии (в нашем примере будет использоваться белый).

укажите маркером мыши в любой угол будущей таблицы (ориентируйтесь на направляющие линии),

нажмите и удерживайте левую клавишу мыши,

нажмите и удерживайте клавишу Shift (ее придется держать до тех пор, пока вся таблица не будет построена),

проведите первую линию обрамления, затем, не отпуская клавишу Shift - вторую, третью и т.д. (если толщина или цвет линии покажется вам неудовлетворительными, отмените действие комбинацией Ctrl - Alt - Z , выберите другие параметры инструмента Line Tool (Линия) и снова приступайте к черчению таблицы).

В результате получилась готовая таблица:

Теперь можно удалить направляющие линии (Ctrl - ; ), а к слою, содержащему таблицу, применить какие-нибудь эффекты, например, тень:

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

Как добавить в таблицу изображения?

Для начала скачайте к себе в компьютер эти изображения:

Выберите инструмент Move tool (перемещение) , укажите маркером мыши на кленовый лист, нажмите и удерживайте левую клавишу мыши, переместите маркер мыши в окно с таблицей:

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

Выберите инструмент Magic Eraser Tool (волшебный ластик) :

Кликните по белому фону в слое с кленовым листом, после этого при помощи инструмента Move tool (перемещение) поместите кленовый лист в первую ячейку таблицы.

Как изменить размера слоя

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

Для этого выберите слой с кленовым листом как активный, затем нажмите комбинацию клавиш Ctrl - T . Вокруг слоя с кленовым листом появится рамка с размерными маркерами (квадратиками):

Далее можно изменять размер слоя, однако лучше при этом пользоваться угловыми размерными маркерами (квадратиками), удерживая при этом клавишу Shift . В этом случае сохраняется пропорция изображения, то есть оно пропорционально растягивается или уменьшается и по ширине и по высоте.

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

Для фиксации изменений нужно нажать клавишу Enter .

Когда слой будет приведен к нужному размеру, можно применить к нему эффекты (например, тень и обрамление).

Таким же образом необходимо поместить в таблицу дубовый и березовый листья: