Создание визитки в Photoshop

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

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

Линейки появились. Ставим курсор на них и вытаскиваем вспомогательные линии. Расставляем их в соответствии с нужным размером ячейки по горизонтальной и вертикальной линейке.

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

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

Теперь выбираем инструмент «линия», делаем клик по рабочей области и протягиваем ее до нужной отметки. Дабы линия была ровной и не отклонялась, зажимаем клавишу shift.

Кстати говоря, толщина линии задается на верхней панели.

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

А теперь ставим курсор на появившуюся линию, зажимаем левую клавишу мыши и кнопку shift и тащим ее вниз. Проделываем это маневр несколько раз горизонтальными линиями.

После чего создаем новый слой:

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

Убираем вспомогательные линии. Ставим курсор на них и оттаскиваем к линейкам.

Рисовать таблицу в фотошопе мы научились, давайте же научимся ее заполнять. Поможет нам в этом инструмент «горизонтальный текст». Его цвет мы можем выбрать на палитре, как было описано выше.

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

Вот, что мы имеем теперь:

Как видите, совпала только первая ячейка. Остальные же строчки встали мимо. Это легко исправить. Выделяем текст, проводя от последней написанной буквы к первой и на панели инструментов «текст», вызвать которую вы можете на верхней панели, задаем нужный интерлиньяж.

Повторяем те же действия для других ячеек.

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

А теперь в окне слоев выбираем первый, фоновый слой. И только после этого создаем новый.

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

Появившуюся выделенную область мы заливаем цветом, при помощи инструмента «заливка». Выбираем его на панели инструментов и кликаем по выделенной области.

Комбинацией клавиш ctrl+d снимаем выделение.

Наша таблица готова! Как видите, нарисовать ее в photoshop оказалось довольно просто. Мы разобрали самый простой пример. Если вы расширите область своих познаний и задействуете фантазию, вы сможете сделать таблицу гораздо красивей. Но основные принципы останутся теми же.

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

Предварительно создайте папку "Исходники", в неё вы сохраните всё промежуточные и окончательные результаты. Подготовьте предварительно тексты с информацией на визитку, рекомендует текстовые редакторы с проверкой орфографии.

1. Шаг: Откройте программу.

2. Шаг: Создайте файл-макет визитки

3. Шаг: Введите все значения как на картинке:

4. Шаг: Теперь необходимо выставить направляющие. Направляющие - линии, которые помогут Вам, сориентировать текст на макете и не попасть под обрез при печати. Направляющие не печатаются.

Повторите процедуру 4 раза. Необходимы направляющие: Вертикальная 5 мм., Вертикальная 89 мм., Горизонтальная 5 мм., Горизонтальная 49 мм.;

Макет с направляющими должен выглядеть как на картинке ниже. Прямоугольник внутри направляющих это область для размещения текстов и логотипов (вся информация, которую нельзя обрезать).

При желании: Вы можете повернуть холст и получить вертикальный макет. (Команда: Изображение/Повернуть холст).

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

5. Шаг: Теперь выбираете инструмент "Горизонтальный текст":

Щелкаете в центре экрана и вводите текст, который Вас интересует.

Выбрать шрифт, установить стиль, размер и т.д. Вам поможет панель №1.

После того, как текст вставлен, нужно завершить ввод, нажав на кнопку в виде галки №2 .

Для дополнительно работы со свойствами шрифтов можно вызвать всплывающую панель шрифты №3.

6. Шаг: Обязательно! Посмотрите, какие шрифты Вы используете и скопируйте их в папку с исходниками. Ваши шрифты обычно находятся в папке Windows/Fonts/

Пример (простой способ перейдите по ссылке , скачайте понравившейся шаблон и просто измените текст на Ваш):

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

Перемечать текстовые блоки Вам поможет инструмент "Перемещение".

И так мы с Вами получили классическую визитки без графики.

7. Шаг: Теперь необходимо сохранить её в папке исходники. Для этого выберите команду "Файл/Сохранить как" и сохраните файл с названием "Исходник.psd " в папке Исходники.

8 . Шаг: Повторно сохраните файл в папке сняв галочку "Слои" в окне параметров сохранения. Название файла "На печать.psd "

Разница в двух файлах заключается в следующем: файл исходник нужен для внесения изменений (новый сотрудник), файл "на печать" сделан со слитыми слоями, то есть все данные на нём представлены в виде картинки и внести изменения в него простым редактированием уже не получится. Но в тоже время на всех компьютерах он откроется так же как и у Вас (за исключением настроек монитора).

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

Создание таблиц в различных программах, специально предназначенных для этого, дело достаточно простое, но, по каким-то причинам нам понадобилось нарисовать таблицу именно в программе Фотошоп.

Если такая необходимость возникла, то изучите этот урок и больше не будете иметь трудностей в создании таблиц в Фотошопе.

Вариантов создания таблицы немного, всего два. Первый – сделать все «на глаз», потратив при этом кучу времени и нервов (проверено на себе). Второй – немного автоматизировать процесс, тем самым сэкономив и то и другое.

Естественно, мы, как профессионалы пойдем по второму пути.

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

Для точной установки направляющей линии необходимо пройти в меню «Просмотр» , найти там пункт «Новая направляющая» , задать значение отступа и ориентацию…

И так для каждой линии. Это долго, так как направляющих нам может понадобиться очень, очень много.

Хорошо, не буду больше тянуть время. Нам нужно на данное действие назначить сочетание горячих клавиш.
Для этого идем в меню «Редактирование» и ищем внизу пункт «Клавиатурные сокращения» .

В открывшемся окне в выпадающем списке выбираем «Меню программы», ищем пункт «Новая направляющая» в меню «Просмотр» , кликаем по полю рядом с ним и зажимаем нужную комбинацию так, как если бы мы ее уже применили. То есть зажимаем, к примеру, CTRL , а затем «/ ». Именно такую комбинацию я и выбрал.

По завершению нажимаем «Принять» и ОК .

Затем нажимаем CTRL+/ , и в открывшемся окне прописываем значение для первой направляющей. Я хочу задать отступ в 10 пикселей от края документа.

Для удобства расчетов перетащите начало координат из угла, указанного на скрине, на пересечение первых направляющих, определяющих отступ:

Если у вас до сих пор не включены линейки, то активируйте их сочетанием клавиш CTRL+R .

У меня получилась вот такая сетка:

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

Рисовать (ну, ладно, чертить) таблицу мы будем инструментом «Линия» , он имеет наиболее гибкие настройки.

Настраиваем толщину линии.

Выбираем цвет заливки и штриха (штрих выключаем).

И теперь, на только что созданном слое рисуем таблицу.

Делается это так:

Зажимаем клавишу SHIFT (если не зажать, то каждая линия будет создаваться на новом слое), ставим курсор в нужное место (сами выберите, откуда начать) и проводим линию.

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

Таким же образом рисуем остальные линии. По завершению работы направляющие можно отключить сочетанием клавиш CTRL+H , а если они понадобятся, то снова включить этой же комбинацией.
Наша таблица:

Данный способ создания таблиц в Фотошопе поможет вам значительно сэкономить время.