Векторные фигуры для фотошопа: Скачать бесплатно фигуры для Фотошопа

Добавить комментарий

Объединение и вычитание векторных фигур в Photoshop

Всем привет. В этом уроке я расскажу каким образом в Photoshop можно комбинировать две или более векторные фигуры стандартными методами компьютерной графики – это Объединение фигур, (Add Shape), Вычитание (Subtract), Пересечение (Intersect) и Исключение (Exclude).

Для начала я создал в Photoshop новый документ с фоном белого цвета, и использовал инструмент “Эллипс” (Ellipse Tool) для рисования векторной фигуры в виде правильного круга.

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

У меня по-прежнему выбран инструмент “Эллипс”, и я нарисую вторую аналогичную фигуру, частично перекрывающую первую.

По умолчанию, Photoshop предполагает, что каждый раз, когда мы рисуем новую фигуру, мы хотим создать отдельную, независимую форму, и поэтому он располагает новую фигуру на новом слое. Если мы снова посмотрим на панель слоёв, то увидим, что у меня теперь появился второй слой-фигура (автоматически именованный как “Эллипс 2”), расположенный над слоем с первой фигурой. Обе формы полностью отделены друг от друга:

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

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

Официально эти операции с контурами называются, как я указал выше – Объединить фигуры (Add to Shape Area), Вычесть переднюю фигуру (Subtract from Shape Area), Область пересечения фигур (Intersect Shape Areas) и Исключить перекрывающиеся фигуры (Exclude Overlapping Shape Areas), и они представлены в виде выражающего списка (в версиях ниже CS6 – в виде ряда значков в панели параметров), этот список отображается на панели параметров при выбранном одном из инструментов формы.

Кроме того, там же, вверху списка имеется пятый вариант “Новый слой” (Exclude Overlapping Shape Areas), создающий новую фигуру на новом слое, этот вариант выбран для нас по умолчанию:

Если вы выбрали на инструментальной панели один из инструментов векторных фигур, но не видите эти параметры в панели параметров, убедитесь, что у вас включён режим “Фигура” (Shape), а не “Контур” или “Пиксели”:

Объединение фигур (Add to Shape Area)

Как я уже говорил, вариант “Новый слой” выбран для нас по умолчанию, поэтому Photoshop всегда создаёт новую фигуру на новом слое.

Я удалить вторую фигуру, которую добавил минуту назад, путем перетаскивания слоя “Эллипс 2” в корзину.

Теперь в моём документе снова имеется только фоновый слой и один слой-фига с кругом:

Нажимаем на слой с фигурой для его выбора (если он не выбран), нажимаем на кнопку операций с контурами и выбираем опцию Объединение фигур (Add to Shape Area). Наводим курсор на документ. Обратите внимание, как теперь выглядит курсор. В правом нижнем углу курсора появился небольшой плюс (+), давая мне знать, что любая форма следующая нарисованная фигура будет добавлен к существующей, а не появится в собственном слое Shape.

Я нарисую еще один круг с помощью “Эллипса” (Ellipse Tool) так, чтобы он снова перекрыл первоначальную форму, как я делал ранее. Если теперь посмотреть на сам документ, то результат не сильно отличается от того, что было в прошлый раз, но в панели слоёв видно, что вместо двух отдельных слоёв имеется только один, который и был до добавления второй фигуры:

На данный момент мы можем увидеть тонкую линию контура фигур. Чтобы скрыть эту линию, нужно выбрать другой инструмент, либо, нажав Ctrl, кликнуть по слою, чтобы снять его выбор (при этом он не будет больше подсвечен) либо открыть панель контуров и, нажав Ctrl, кликнуть по контуру, подсветка контура так же пропадёт, но сам слой останется активным, последний вариант я показал на рисунке:

Помните, что операции с контурами работают только при активном контуре в панели контуров. Если я в данный момент добавлю новую фигуру, даже, если у меня включена операция “Объединение фигур”, новая фигура добавится на новый слой. Чтобы новая фигура добавилась на слой к имеющейся, сделайте активным (должен быть подсвечен) контур в панели контуров.

Вычитание фигуры (Subtract from Shape Area)

Я отменил свой ​​последний шаг и убрал вторую фигуру, нажав Ctrl+Z на клавиатуре. На этот раз я выберу операцию Вычесть переднюю фигуру (Subtract from Shape Area):

Теперь рядом с курсором мыши появился небольшой минус (-), который показывает, что мы находимся в режиме вычитания.

Инструментом “Эллипс” я нарисую новую круглую форму, чтобы она так же перекрывала первую форму, как и в случаях ранее. На этот раз, вместо того чтобы добавить новую форму к уже существующей, новая форма была использована для удаления (или вырезки) части начальной формы в месте, где две формы перекрываются. Как мы видим на рисунке, контуры фигур остались и отображаются, но видимой осталась только та часть начальной фигуры, которая не перекрыта новой фигурой

На этом у меня все. До скорого!

Подписывайтесь на канал @phtgr, чтоб не пропускать новые интересные уроки.

Как рисовать векторные фигуры в Photoshop CS6

Инструменты формы

Photoshop предоставляет нам шесть инструментов для создания фигур на выбор: Rectangle Tool , Rounded Rectangle Tool , Ellipse Tool , Polygon Tool , Line Tool и Custom Shape Tool . и все они вложены вместе в одном месте на панели инструментов . По умолчанию отображается инструмент «Прямоугольник», но если мы щелкнем и удерживаем значок инструмента, появится всплывающее меню, показывающее нам другие инструменты, которые мы можем выбрать:

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

Я начну с выбора первого в списке инструмента Rectangle Tool :

Выбор инструмента «Прямоугольник».

Фигуры, пиксели или пути

Перед тем, как мы нарисуем какие-либо фигуры, нам сначала нужно сообщить Photoshop, тип формы, которую мы хотим нарисовать. Это потому, что Photoshop фактически позволяет нам рисовать три очень разных типа фигур. Мы можем нарисовать векторных фигур , путей или пиксельных фигур . Мы более подробно рассмотрим различия между тремя в других учебниках, но, как мы уже узнали в учебнике «Рисование векторных и пиксельных фигур», в большинстве случаев вы захотите рисовать векторные фигуры. В отличие от пикселей, векторные фигуры являются гибкими , масштабируемыми и не зависящими от разрешения , что означает, что мы можем рисовать их любого размера, который нам нравится, редактировать и масштабировать их так, как мы хотим, и даже печатать их в любом размере без каких-либо ограничений. потеря качества! Просматриваем ли мы их на экране или распечатываем, края векторных фигур всегда остаются четкими и четкими.

Чтобы убедиться, что вы рисуете векторные фигуры, а не контуры или пиксели, выберите Форма в параметре Режим инструмента на панели параметров в верхней части экрана:

Установка для параметра «Режим инструмента» значения «Форма».

Заливка формы цветом

Следующее, что мы обычно хотим сделать, это выбрать цвет для фигуры, и в Photoshop CS6 мы делаем это, щелкнув образец цвета Fill на панели параметров:

Щелкните образец цвета заливки.

Это открывает окно, которое позволяет нам выбрать один из четырех различных способов заполнения фигуры, каждый из которых представлен одним из четырех значков вверху. Начиная слева, у нас есть значок No Color (тот, который перечеркнут красной диагональной линией), значок Solid Color , значок Gradient и значок Pattern :

Четыре варианта заливки фигуры (Без цвета, Сплошной цвет, Градиент и Узор).

Нет цвета

Как следует из названия, выбор No Color слева оставит форму полностью пустой. Почему вы хотите оставить форму пустой? Что ж, в некоторых случаях вы можете захотеть, чтобы ваша фигура содержала только контур штриха. Через несколько минут мы увидим, как добавить обводку, но если вы хотите, чтобы ваша фигура содержала только обводку без цвета заливки, выберите «Без цвета:

Параметр «Без цвета» оставит фигуру пустой.

Вот краткий пример того, как выглядит фигура без цвета заливки. Все, что мы видим, это основной контур фигуры, известной как 9.0031 путь . Путь виден только в Photoshop, поэтому, если вы распечатаете документ или сохраните свою работу в формате, таком как JPEG или PNG, путь не будет виден. Чтобы сделать его видимым, нам нужно добавить к нему обводку, что мы научимся делать после того, как рассмотрим параметры заливки:

Виден только контур фигуры (и только в Photoshop), когда для параметра «Заливка» задано значение «Без цвета».

сплошной цвет

Чтобы заполнить фигуру сплошным цветом, выберите Solid Color 9.Вариант 0006 (второй слева):

Выбор параметра заливки сплошным цветом.

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

Выбор цвета нажатием на образец.

Если нужный цвет не найден ни в одном из образцов, щелкните значок Color Picker в правом верхнем углу окна:

Щелкните значок палитры цветов.

Затем выберите нужный цвет в палитре цветов. Нажмите OK, чтобы закрыть палитру цветов, когда закончите:

Выбор цвета заливки фигуры в палитре цветов.

Вот та же фигура, что и раньше, но на этот раз залитая сплошным цветом:

Базовая фигура, заполненная сплошным цветом.

Градиент

Чтобы заполнить фигуру градиентом, выберите параметр Gradient . Затем нажмите на один из миниатюр , чтобы выбрать предустановленный градиент, или используйте параметры под миниатюрами, чтобы создать свой собственный. Мы узнаем все о создании и редактировании градиентов в отдельном уроке:

Выбор параметра «Градиент» вверху, затем выбор предустановленного градиента.

Вот та же фигура, залитая градиентом:

Фигура, заполненная одним из предустановленных градиентов Photoshop.

Узор

Наконец, выбор опции Pattern позволяет нам заполнить фигуру узором. Нажмите на одну из миниатюр, чтобы выбрать предустановленный шаблон. Первоначально Photoshop не дает нам много шаблонов на выбор, но если вы создали свои собственные или загрузили некоторые из Интернета, вы можете загрузить их, нажав на маленькую цифру 9.0005 значок шестеренки (под значком палитры цветов) и выбор Загрузить шаблоны в меню:

Выбор параметра «Шаблон», затем выбор предустановленного шаблона.

Вот как выглядит фигура, заполненная одним из предустановленных шаблонов Photoshop. Чтобы закрыть окно параметров цвета заливки, когда вы закончите, нажмите Enter (Win) / Return (Mac) на клавиатуре или щелкните пустое место на панели параметров. Если вы не уверены, какой цвет, градиент или рисунок вам нужен для вашей формы, не волнуйтесь. Как мы увидим, вы всегда можете вернуться и изменить его позже:

Форма, заполненная заданным шаблоном.

Добавление обводки вокруг фигуры

По умолчанию Photoshop не добавляет обводку по краям фигуры, но добавить ее так же просто, как добавить цвет заливки. На самом деле параметры Обводки и Заливки в Photoshop CS6 точно такие же, так что вы уже знаете, как их использовать!

Чтобы добавить обводку, щелкните образец цвета Обводка на панели параметров:

Щелкните образец цвета обводки.

Это открывает окно, предоставляющее нам точно такие же параметры, которые мы видели с цветом заливки, за исключением того, что на этот раз мы выбираем цвет для нашей обводки. Вверху у нас есть те же четыре значка для выбора между No Color , Solid Color , Gradient или Pattern . По умолчанию выбран параметр «Нет цвета». Я выберу «Сплошной цвет», затем установлю черный цвет в качестве цвета обводки, выбрав его из образцов. Как и в случае с цветом заливки, если цвет, который вам нужен для обводки, не найден в образцах, щелкните значок Color Picker иконка вверху справа для ручного выбора нужного вам цвета:

Выбор параметра «Сплошной цвет» для обводки, а затем выбор цвета из образцов.

Изменение ширины штриха

Чтобы изменить ширину обводки, используйте параметр Ширина обводки непосредственно справа от образца цвета обводки на панели параметров. По умолчанию установлено значение 3 pt. Чтобы изменить ширину, вы можете ввести конкретное значение прямо в поле (нажмите Введите (Win) / Верните (Mac) на клавиатуре, когда вы закончите, чтобы принять его), или щелкните маленькую стрелку справа от значения и перетащите ползунок:

Изменение ширины обводки.

Опция выравнивания краев

Если вы посмотрите дальше вправо на панели параметров, вы увидите параметр под названием Выровнять края . Если этот параметр включен (отмечен флажком), Photoshop позаботится о том, чтобы края вашей векторной фигуры были выровнены с пиксельной сеткой, благодаря чему они выглядят четкими и четкими:

Обычно нужно убедиться, что установлен флажок «Выровнять края».

Однако, чтобы функция «Выровнять края» работала, ее необходимо не только выбрать, но и установить ширину обводки в пикселей (px) , а не в точек (pt) . Поскольку моя ширина обводки в настоящее время использует пункты (тип измерения по умолчанию), я вернусь и введу новую ширину 10 пикселей:

Чтобы функция «Выровнять края» работала, задайте ширину обводки в пикселях (px).

Вот пример черной обводки 10 пикселей, примененной к фигуре:

Простая фигура с черной обводкой вокруг нее.

Теперь, когда я добавил обводку, если я вернусь и щелкну образец цвета Fill на панели параметров и изменю заливку на No Color , у меня останется только контур обводки. Внутри форма пуста. Похоже, что он заполнен белым только потому, что фон моего документа белый, поэтому на самом деле мы видим фон документа:

Та же фигура, теперь с заливкой без цвета.

Дополнительные параметры обводки

По умолчанию Photoshop рисует обводку в виде сплошной линии, но мы можем изменить это, нажав кнопку Параметры обводки на панели параметров:

Нажатие кнопки «Параметры обводки».

Откроется окно параметров обводки. Отсюда мы можем изменить штрих типа со сплошной линии на пунктирную линию или пунктирную линию . Опция Align позволяет нам выбрать, должен ли штрих падать на внутри контура пути, снаружи пути или быть центрированным на пути. Мы можем установить параметр Caps на Butt , Round или Square и изменить Corners на Mitre , Round или Bevel . Нажав кнопку More Options внизу, вы откроете более подробное окно, в котором вы можете установить конкретные значения dash и gap и даже сохранить свои настройки в качестве предустановки:

Параметры обводки.

Вот та же черта, что и раньше, на этот раз в виде пунктирной, а не сплошной линии:

Тип штриха изменен со сплошного на пунктирный.

Плагин Shortcodes, Actions and Filters: ошибка в шорткоде [ ads-basics-middle ]

Инструмент «Прямоугольник»

Теперь, когда мы знаем, как выбирать различные инструменты фигур Photoshop на панели инструментов, как выбирать цвет заливки и обводки и как изменять внешний вид обводки, давайте научимся рисовать векторные фигуры! Мы начнем с первого инструмента в списке, Инструмент «Прямоугольник» . Я выберу его на панели «Инструменты», как и раньше:

Ранее мы узнали, что для рисования векторных фигур в Photoshop необходимо убедиться, что для параметра «Режим инструмента» на панели параметров установлено значение 9.0005 Shapes (в отличие от Path или Pixels). Когда мы рисуем векторную фигуру, Photoshop автоматически помещает ее на слой особого типа, известный как слой формы . Если мы посмотрим на мою панель слоев , то увидим, что фигура, которую я нарисовал с помощью инструмента «Прямоугольник», находится на слое формы с именем «Прямоугольник 1». Имя слоя будет меняться в зависимости от того, какой инструмент формы использовался, поэтому, если бы я нарисовал фигуру, скажем, с помощью инструмента «Эллипс», он будет называться «Эллипс 1»:

Каждая новая нарисованная вами векторная фигура появляется на своем собственном слое Shape.

Простой способ определить разницу между слоем Shape и обычным пиксельным слоем состоит в том, что слои Shape имеют небольшой значок формы в правом нижнем углу миниатюры предварительного просмотра :

Значок на миниатюре предварительного просмотра говорит нам, что это слой Shape.

Основное различие между слоем Shape и обычным пиксельным слоем заключается в том, что слои Shape остаются полностью редактируемыми. Еще когда мы учились выбирать цвета заливки и обводки для наших фигур, я упомянул, что мы всегда можем вернуться и изменить цвета после того, как нарисовали фигуру. Все, что нам нужно сделать, это убедиться, что у нас есть Слой формы выбран на панели «Слои», и что у нас все еще есть инструмент формы , выбранный на панели «Инструменты». Затем просто щелкните образец цвета заливки или обводки на панели параметров, чтобы выбрать другой цвет. Вы также можете изменить ширину обводки, если это необходимо, наряду с другими параметрами обводки. Я нажму на образец цвета заливки:

Щелчок по образцу цвета заливки с выбранным слоем формы.

Затем я выберу другой цвет для своей формы из образцов:

Щелчок по образцу синего цвета.

Как только я нажму на образец, Photoshop мгновенно обновит фигуру новым цветом:

Цвет фигуры изменен без перерисовки.

И, если мы снова посмотрим на панель «Слои», мы увидим, что миниатюра предварительного просмотра для слоя «Форма» также была обновлена ​​​​с новым цветом:

Предварительный просмотр формы на панели «Слои» также обновляется при внесении изменений.

Инструмент «Прямоугольник со скругленными углами»

Давайте взглянем на второй из инструментов Photoshop, инструмент Rounded Rectangle Tool . Я выберу его на панели инструментов:

Выбор инструмента «Прямоугольник со скругленными углами».

Инструмент «Прямоугольник со скругленными углами» очень похож на стандартный инструмент «Прямоугольник», за исключением того, что он позволяет нам рисовать прямоугольники со скругленными углами. Мы контролируем округлость углов, используя параметр Radius на панели параметров. Чем выше значение, тем более закругленными будут углы. Вам нужно установить значение радиуса до рисует вашу фигуру, поэтому я установлю свою на 50 пикселей:

Используйте параметр «Радиус» для управления округлостью углов.

После того, как вы установили свой радиус, рисование прямоугольника со скругленными углами точно такое же, как рисование обычного прямоугольника. Начните с щелчка внутри документа, чтобы установить начальную точку для фигуры, затем, удерживая нажатой кнопку мыши, перетащите по диагонали, чтобы нарисовать остальную часть. Так же, как мы видели с инструментом «Прямоугольник», Photoshop будет отображать только контур контура фигуры при перетаскивании:

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

Когда вы отпустите кнопку мыши, Photoshop завершит фигуру и заполнит ее цветом:

Форма заполняется цветом, когда вы отпускаете кнопку мыши.

Вот еще один пример прямоугольника со скругленными углами, на этот раз со значением Радиуса, установленным на 150 пикселей, достаточно большим (во всяком случае, в данном случае), чтобы вся левая и правая стороны прямоугольника выглядели изогнутыми:

Чем выше значение радиуса, тем больше закругление углов.

А вот прямоугольник, но с гораздо меньшим значением Радиуса, всего 10 пикселей, что дает мне очень маленькие закругленные углы:

Меньшее значение радиуса дает нам менее закругленные углы.

К сожалению, в Photoshop CS6 нет возможности предварительно просмотреть, насколько закругленными будут углы с выбранным значением радиуса, до того, как мы на самом деле нарисуем прямоугольник. Кроме того, мы не можем корректировать значение радиуса на лету, пока рисуем фигуру, и Photoshop не позволяет нам вернуться и внести изменения в значение радиуса после того, как оно было нарисовано. Все это означает, что рисование прямоугольников со скругленными углами — это во многом ситуация «проб и ошибок».

Если вы нарисовали прямоугольник со скругленными углами и решили, что вас не устраивает округлость углов, все, что вы можете сделать, это открыть меню Edit в строке меню в верхней части экрана и выбрать Undo Rounded. Инструмент «Прямоугольник» (или нажмите Ctrl+Z (Win) / Command+Z (Mac) на клавиатуре), который удалит закругленный прямоугольник из документа. Затем введите другое значение радиуса на панели параметров и повторите попытку:

Перейдите в Редактирование > Отменить инструмент «Прямоугольник со скругленными углами».

Те же сочетания клавиш, о которых мы узнали для стандартного инструмента «Прямоугольник», также применимы к инструменту «Прямоугольник со скругленными углами». Чтобы превратить фигуру в идеальный квадрат (со скругленными углами), начните вытягивать фигуру, затем нажмите и удерживайте клавишу Shift . Отпустите клавишу Shift только 90 031 после того, как 90 032 вы отпустили кнопку мыши.

Чтобы нарисовать прямоугольник со скругленными углами из его центра , а не из угла, начните вытягивать фигуру, затем нажмите и удерживайте Alt (Win) / Option (Mac) ключ. Наконец, нажав и удерживая Shift+Alt (Win) / Shift+Option (Mac), фигура превратится в идеальный квадрат и вытянется из центра. Отпустите клавиши только после того, как вы отпустили кнопку мыши.

Инструмент «Эллипс»

Photoshop Ellipse Tool позволяет нам рисовать эллиптические или круглые формы. Я выберу его на панели инструментов:

Выбор инструмента «Эллипс».

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

Рисование эллиптической формы с помощью инструмента «Эллипс».

Отпустите кнопку мыши, чтобы завершить форму, и Photoshop заполнит ее выбранным цветом:

Залитая цветом фигура.

Чтобы нарисовать идеальный круг с помощью инструмента «Эллипс», начните растаскивать фигуру, затем нажмите и удерживайте Клавиша Shift . Чтобы нарисовать эллиптическую форму из ее центра , нажмите и удерживайте Alt (Win) / Option (Mac) после начала перетаскивания. Нажатие и удерживание Shift+Alt (Win) / Shift+Option (Mac) нарисует идеальный круг из его центра. Как всегда, отпустите клавиши только после того, как вы отпустили кнопку мыши:

Круг, нарисованный с помощью инструмента «Эллипс».

Инструмент «Многоугольник»

Polygon Tool — вот где все становится интереснее. Я выберу его на панели инструментов:

Выбор инструмента «Многоугольник».

В то время как инструмент «Прямоугольник» в Photoshop ограничен рисованием четырехсторонних многоугольников, инструмент «Многоугольник» позволяет нам рисовать многоугольные фигуры с любым количеством сторон! Он даже позволяет нам рисовать звезды, как мы сейчас увидим. Чтобы нарисовать фигуру с помощью инструмента «Многоугольник», сначала введите необходимое количество сторон в параметр Сторон на панели параметров. Вы можете ввести любое число от 3 до 100. Я пока оставлю свое значение по умолчанию 5:

Введите необходимое количество сторон в поле Стороны.

После того, как вы ввели количество сторон, щелкните в документе и перетащите фигуру. Photoshop всегда рисует многоугольники из их центра, поэтому нет необходимости удерживать клавишу Alt (Win) / Option (Mac). Удерживая клавишу Shift после начала перетаскивания, вы ограничите количество углов, под которыми может быть нарисована фигура, что может помочь расположить фигуру так, как вам нужно:

5-сторонняя фигура, нарисованная с помощью инструмента «Многоугольник».

Установка для параметра Стороны значения 3 на панели параметров дает нам простой способ нарисовать треугольник:

Простой треугольник, нарисованный с помощью инструмента «Многоугольник».

А вот форма многоугольника со сторонами, установленными на 12. Как и параметр «Радиус» для инструмента «Прямоугольник со скругленными углами», Photoshop не позволяет нам изменять количество сторон после того, как мы нарисовали нашу форму, поэтому, если вы допустили ошибку, вы нужно перейти в меню Edit в верхней части экрана и выбрать Undo Polygon Tool (или нажмите Ctrl+Z (Win) / Command+Z (Mac)), затем введите другое значение в параметр Стороны и перерисуйте фигуру:

Многоугольник с двенадцатью сторонами.

Рисование звезд с помощью инструмента «Многоугольник»

Чтобы нарисовать звезды с помощью инструмента «Многоугольник», щелкните значок шестеренки на панели параметров, затем выберите Звезда :

Щелкните значок шестеренки и выберите звездочку.

Затем просто щелкните внутри документа и вытащите звезду. Если выбрана звезда, параметр «Стороны» на панели параметров управляет количеством точек звезды, поэтому при значении по умолчанию, равном 5, мы получаем 5-конечную звезду: 9.0019

5-конечная звезда, нарисованная с помощью инструмента «Многоугольник».

Изменение значения сторон на 8 дает нам 8-конечную звезду:

Управляйте количеством точек с помощью параметра Стороны.

Мы можем создать форму звезды, увеличив значение параметра Indent Sides By по сравнению со значением по умолчанию 50%. Я увеличу его до 90%. Я также увеличу значение сторон до 16:

Создание звезды путем увеличения значения Indent Sides By.

И вот результат:

Звездообразование, нарисованное с помощью инструмента «Многоугольник».

По умолчанию звезды имеют острые углы на концах своих вершин, но мы можем сделать их закругленными, выбрав параметр Smooth Corners :

Включение сглаживания углов.

Вот стандартная 5-конечная звезда с включенной опцией «Сглаженные углы»:

Параметр «Сглаженные углы» придает звездам веселый и дружелюбный вид.

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

Включение сглаживания отступов.

Выбрав Smooth Corners и Smooth Indents, мы получим форму морской звезды:

Звезда с включенными сглаженными углами и сглаженными отступами.

Инструмент «Линия»

Последним из основных инструментов Photoshop для геометрической формы является Line Tool . Я выберу его на панели инструментов:

Выбор инструмента «Линия».

Инструмент «Линия» позволяет нам рисовать простые прямые линии, но мы также можем использовать его для рисования стрелок. Чтобы нарисовать прямую линию, сначала установите толщину линии, введя значение в пикселях в поле 9.0005 Поле Weight на панели параметров. Значение по умолчанию — 1 пиксель. Я увеличу его до 16 пикселей:

Параметр Вес определяет толщину или ширину линии.

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

Удерживайте клавишу Shift при перетаскивании, чтобы рисовать горизонтальные или вертикальные линии.

Стрелки направления рисования

Чтобы нарисовать стрелки, щелкните значок шестеренки на панели параметров, чтобы открыть параметры Arrowheads . Выберите, хотите ли вы, чтобы стрелка отображалась в начале линии, конце или в обоих случаях (если вы хотите, чтобы стрелка была направлена ​​в том же направлении, в котором рисуется линия, выберите Конец):

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

Вот линия, похожая на нарисованную ранее, на этот раз со стрелкой на конце:

Инструмент «Линия» упрощает рисование стрелок направления.

Если размер стрелки по умолчанию вам не подходит, вы можете настроить его, изменив параметры Ширина и Длина . Вы также можете сделать наконечник стрелки более вогнутым, увеличив параметр Вогнутость . Я увеличу его со значения по умолчанию 0% до 50%:

Изменить форму наконечника стрелы, увеличив ее вогнутость.

Вот как теперь выглядит наконечник стрелы. Убедитесь, что вы изменили параметры инструмента «Линия» до того, как нарисуете фигуру, так как их нельзя будет изменить впоследствии (если вам нужно внести изменения, вам нужно будет отменить форму и начать заново):

Наконечник со значением Вогнутости равным 50%.

Скрытие контура пути вокруг фигуры

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

Контур пути остается видимым даже после того, как фигура нарисована.

Чтобы скрыть контур контура в Photoshop CS6, просто нажмите Введите (Win) / Верните (Mac) на клавиатуре, и он исчезнет:

Нажмите Enter (Win)/Return (Mac), и контур исчезнет.

Создание векторной графики и работа с ней в Adobe Photoshop

Adobe Illustrator — стандартное приложение для графического дизайна. Это лучший инструмент для работы с векторными файлами.

К сожалению, не у всех есть Illustrator, но у многих есть Photoshop. И Photoshop имеет базовую поддержку векторных изображений. В этом руководстве мы рассмотрим, как создавать векторные изображения в Photoshop в качестве замены Illustrator.

Что такое векторное изображение?

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

Векторные изображения — это линии и кривые, сгенерированные математическими формулами. Это означает, что вы можете изменять их размер бесконечно, а размеры файлов часто очень малы. Векторы отлично подходят для графического дизайна, включая разработку логотипов и значков. Вы даже можете преобразовывать изображения в векторную графику в Adobe Illustrator.

Векторный рисунок состоит из нескольких объектов. Каждый объект представляет собой линию или фигуру, край которой определяется путем. В Photoshop путь отображается в виде тонкой синей линии (хотя технически он невидим).

К каждому объекту можно применить два типа цвета:

• A Обводка — это линия, следующая за контуром.
• Заливка добавляет сплошной цвет или узор в пространство, окруженное контуром.

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

В Photoshop вы рисуете векторные изображения с фигурами, линиями и текстом.

Рисование векторных фигур и линий

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

• Инструмент «Прямоугольник»
• Инструмент «Прямоугольник со скругленными углами»
• Инструмент «Эллипс»
• Инструмент «Многоугольник»
• Инструмент «Линия»
• Инструмент «Пользовательская форма»

Вы всегда можете выбрать выделенный инструмент, нажав U на клавиатуре. Либо нажмите Shift + U , чтобы переключаться между инструментами, пока не найдете нужный.

Чтобы работать быстрее, рекомендуется изучить дополнительные сочетания клавиш Photoshop.

Рисование основных векторных фигур

Выберите инструмент для фигуры, которую хотите нарисовать, затем добавьте цвета Fill и Stroke .

Теперь щелкните и перетащите на холсте. Фигура рисуется из угла в любом направлении, в котором вы перетаскиваете. Чтобы создать симметричную форму, например круг или квадрат, нажмите и удерживайте кнопку Клавиша Shift .

Чтобы нарисовать треугольник, выберите инструмент Polygon Tool . Щелкните один раз на холсте, чтобы открыть окно настроек Create Polygon . Установите Число сторон на 3 .

Изменение и редактирование векторных фигур

При создании векторной графики в Photoshop вы не ограничены базовыми фигурами. Их можно очень быстро модифицировать.

Сначала выберите форму. Это выделит фигуру и покажет опорные точки вдоль ее пути. Это точки, где форма имеет углы или кривые.

Выберите инструмент Direct Selection Tool на панели инструментов (нажмите и удерживайте значок Path Selection Tool , чтобы найти его, или нажмите Shift + A ). Теперь щелкните одну из опорных точек и перетащите ее в любом направлении, чтобы деформировать фигуру.

Для более сложных правок переместите две или более опорных точек одновременно.

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

Слияние и объединение векторных фигур

Для еще более сложных форм вы можете использовать Path Operations . Это позволяет вам объединять несколько фигур в одну новую.

Начните с рисования фигуры на холсте. Затем нажмите кнопку Path Operations на панели параметров в верхней части экрана. Обычно каждый новый путь или фигура помещаются в отдельный слой. Измените это, нажав Combine Shapes .

Теперь нарисуйте еще одну фигуру. Это будет на том же слое, что и ваша первая форма.

Если вам нужно переместить объекты по отдельности, используйте инструмент Path Selection Tool .

Перетащите вторую фигуру так, чтобы она перекрывала первую. Они сливаются в единую форму, хотя и остаются отдельными объектами. Нажмите Merge Shape Components в Path Operations , чтобы объединить их в один объект.

Используйте инструмент Path Selection Tool , чтобы выбрать вторую фигуру, которую вы нарисовали. Сейчас в Path Operations выберите Вычесть переднюю форму . Фигура будет удалена вместе с областью, в которой она перекрывается с первой фигурой.

Выделите обе формы. В Path Operations выберите Intersect Shape Areas . Это удалит обе фигуры, за исключением областей, где они перекрываются. Мы используем эту опцию, чтобы создать полукруг.

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

Эти инструменты являются эффективным способом создания новых фигур, а также разделения или вырезания частей из существующих. Они также работают с Pen Tool и Text .

Рисование векторных линий

Есть еще два инструмента, связанных с фигурами, о которых нужно знать. Во-первых, это Line Tool .

Выберите инструмент и установите Высота на панели параметров. Это устанавливает толщину линии. Затем щелкните и перетащите в документ, чтобы нарисовать его. Удерживайте Shift  ключ, чтобы привязать линию к нулю или 90 градусам.

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

Рисование произвольных векторных фигур

Наконец, Custom Shape Tool . Установите цвета заливки и обводки, затем щелкните параметр Shape на панели параметров. Здесь вы можете выбрать одну из бесчисленных предустановленных пользовательских форм, которые предоставляет Photoshop.

Чтобы добавить больше фигур помимо первоначального выбора, щелкните значок Настройки cog и выберите категорию для добавления. Существуют формы для любого использования — значки, речевые облачка, стрелки, текстуры и многое другое. Вы также можете загружать сторонние формы.

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

Рисование векторов с помощью инструмента «Перо»

Если у вас есть опыт работы с Illustrator, вы знаете, что используете инструмент «Кисть» для рисования от руки. В Photoshop есть инструмент «Кисть», который выполняет аналогичную работу. Но в фотошопе этот инструмент не векторный, поэтому для рисования его использовать не стоит. Вы должны использовать Pen Tool вместо него.

Инструмент «Перо» — одна из самых мощных функций Photoshop. Вы будете часто использовать его при редактировании фотографий в Photoshop, поскольку он позволяет создавать очень точные выделения. Он также отлично подходит для рисования и векторной графики.

Начало работы с инструментом «Перо»

Инструмент «Перо» рисует путь между опорными точками, которые вы создаете, когда нажимаете на холст. Добавьте обводку пути, и вы сможете нарисовать контур; добавьте заливку, и вы сможете нарисовать твердый объект.

Вот краткое руководство для начала:

1. Выберите Pen Tool (P) . Нажмите на холст изображения, чтобы поместить опорную точку.
2. Переместите курсор на несколько дюймов и щелкните еще раз, чтобы добавить еще одну опорную точку. Путь будет создан для соединения двух. Установите обводку на 5 пикселей, черного цвета, чтобы вам было лучше видно.
3. Щелкните еще несколько раз, чтобы развить путь. Нажмите и перетащите, чтобы создать изогнутый путь. Это также добавит руль к точке привязки. Перетащите их, чтобы контролировать угол и глубину кривой.
4. Щелкните Введите , чтобы создать открытый путь (линию), или щелкните первую опорную точку, чтобы создать замкнутый путь (форму).

Что делает Pen Tool таким полезным, так это то, что вы можете вернуться и отредактировать свою фигуру в любое время:

• Возьмите инструмент прямого выбора (A) . Выберите опорную точку на пути и перетащите ее в новое место. Используйте этот инструмент с манипуляторами опорной точки, чтобы также редактировать кривую.
• Выберите инструмент «Добавить опорную точку» , нажав и удерживая Pen Tool. Нажмите где-нибудь на пути, чтобы вручную добавить новую точку привязки, затем перетащите ее на место. Это позволяет вам корректировать свою фигуру.

Инструменты с тремя ручками

Photoshop предлагает три разных ручки для рисования:

• Инструмент «Перо» используется по умолчанию и является наиболее гибким вариантом. Начинающим мы рекомендуем использовать это в первую очередь для рисования прямых линий. По мере того, как вы становитесь более продвинутым, вы можете использовать его для всего.
• Инструмент Freeform Pen Tool позволяет рисовать от руки, аналогично инструменту «Кисть». Он по-прежнему создает путь, который вы можете настроить и отредактировать позже. Точки привязки создаются автоматически при рисовании. Это отличный инструмент, если вы используете графический планшет.
• Инструмент Curvature Pen Tool позволяет легко рисовать кривые без необходимости возиться с рукоятками, как это делается с основным инструментом Pen Tool.

Трассировка изображения как вектора в Photoshop

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

Откройте изображение в Photoshop и увеличьте масштаб. Теперь выберите Pen Tool и поместите первую опорную точку на границу объекта, который вы хотите обвести. Ваш новый рисунок автоматически переместится на собственный слой. Продолжайте щелкать по краям, чтобы создать свой путь.

Если объект, который вы трассируете, находится на простом фоне, попробуйте Инструмент «Перо произвольной формы» с активированным параметром Magnetic на панели параметров. Это привязывает ваш путь к краю объекта.

Работа с векторным текстом в Photoshop

Использование текста в Photoshop говорит само за себя. Выберите инструмент Horizontal Text Tool (T) , щелкните на холсте изображения, чтобы создать текстовое поле, затем введите текст. Вы можете настроить шрифт, размер, вес и все остальное, как и в любом другом приложении.

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

Когда вы закончите, вы можете преобразовать текст в векторный объект. Выделите текст и перейдите к Type > Convert to Shape . Это позволяет вам получить доступ к опорным точкам на каждом персонаже, чтобы вы могли настраивать их индивидуально. Это удобно для изменения цвета одной буквы или настройки внешнего вида шрифта.

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

Управление векторными объектами

Чтобы создать свое произведение искусства, вам нужно, чтобы все эти объекты были в правильном положении и в правильном размере. Вот как это сделать:

• Переместите объекты , выбрав их с помощью инструмента Path Selection Tool (A) и перетащив их на место.
• Измените размер объектов , выбрав их с помощью инструмента Path Selection Tool , затем нажав Ctrl + T в Windows или Cmd + T на Mac. Это показывает рамку вокруг объекта. Возьмитесь за руль вдоль края и перетащите его внутрь или наружу, чтобы изменить размер. Удерживайте клавишу Shift , чтобы сохранить исходное соотношение сторон.
• Поверните объект , удерживая мышь за одним из рулей, пока курсор не превратится в значок поворота. Теперь нажмите и перетащите.
• Измените порядок объектов , щелкнув слой и перетащив его выше или ниже другого слоя.
• Выравнивание объектов , выбрав их все с помощью Move Tool (V) (или удерживая Shift и щелкнув несколько слоев), а затем используя элементы управления выравниванием на панели параметров.

Векторная графика в Photoshop: все вместе

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

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

векторных фигур в Photoshop CS6

В Photoshop CS6 представлено множество замечательных изменений для веб-дизайнеров и дизайнеров приложений. В рамках обновления векторные инструменты были значительно переработаны.

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

Привязка пикселей #

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

При выключенной привязке к пикселям поведение смещения в Photoshop похоже на то, как оно было раньше — смещение связано с уровнем масштабирования. Если вы увеличили масштаб до 100%, то сдвиг сместит один пиксель. Если вы увеличили масштаб до 200%, сдвиг сместится на 0,5 пикселя. Продолжайте увеличивать масштаб, и приращения будут уменьшаться:

• 100% — 1 пикс.
• 200% — 0,5 пикселя или полпикселя.
• 300% — 0,33 пикселя или треть пикселя.
• 400% — 0,25 пикселя или четверть пикселя.
• 500% — 0,2 пикселя или одна пятая пикселя.
• 600% — 0,1667 пикселя или одна шестая пикселя.

… и так далее, вплоть до 3200%, что сдвигает 0,03125px.

При включенной привязке к пикселям смещение всегда перемещается на один пиксель. И под одним пикселем я имею в виду один пиксель относительно текущей позиции. Точка, расположенная на 50,5 пикселей, переместится на 51,5 пикселей, если ее сдвинуть, когда включена привязка к пикселям.

Если выбрано более одной точки, перетаскивание для перемещения точек также является относительным, как и перетаскивание с помощью инструмента перемещения. Однако, если вы перетащите одну точку, она привяжется к пиксельной сетке.

Мне нравится такое поведение, но стоит знать, как все это работает, на тот случай, если вам понадобится сдвинуть точную величину — вы можете создать прямоугольник шириной ровно 3 пикселя при просмотре на устройстве Retina, но ваш документ может быть настроить как не Retina и вдвое меньше. Это просто. Нарисуйте прямоугольник шириной 1 пиксель, отключите привязку к пикселям, увеличьте масштаб до 200 % и сдвиньте одну сторону прямоугольника (две опорные точки) ровно один раз. Тогда он будет иметь ширину ровно 1,5 пикселя, которая станет шириной 3 пикселя, когда вы масштабируете документ до размера Retina.

При масштабировании 66,7% с включенной привязкой кажется, что смещение смещается на 0,5 пикселя, а не на 1 пиксель. Похоже, это ошибка, и не так, как задумано.

Выровнять края #

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

Если вы немного сообразительны, вы можете использовать функцию «Выравнивание краев», чтобы расположить элементы на границе 0,5 пикселя, чтобы они отображались с привязкой к пикселям для размеров, отличных от Retina и Retina, без изменения документа после масштабирования. Я не сталкивался со многими ситуациями, когда я хотел бы это сделать, но это возможно.

Фигуры как слои #

Еще одно большое изменение в CS6 — векторные слои отображаются на панели слоев в виде векторных фигур, а не сплошных цветных слоев (или градиентных слоев, или слоев узоров) с векторной маской. Это изменило внешний вид панели слоев, но функциональность в основном такая же, как в CS5.

Чтобы скопировать и заменить векторную маску с одного слоя на другой В CS5, удерживая нажатой кнопку, перетащите маску с одного слоя на другой. То же самое работает в CS6, но ярлык теперь командно-параметрический (использование параметра само по себе дублирует слой). Просто убедитесь, что вы нажали команду-опция, прежде чем щелкнуть и перетащить, потому что иначе это не работает.

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

Этот метод можно использовать для применения векторной маски к группе. Или вы можете скопировать и вставить векторный путь, а затем использовать «Слой» → «Векторная маска» → «Текущий путь», чтобы применить путь в качестве маски. Снять маску немного сложнее. Самый быстрый способ, который я знаю, — это выбрать слой, скопировать стили слоя (если они существуют), создать новый слой того же типа, а затем вставить стили слоя. Пункт меню «Слой» → «Векторная маска» → «Удалить» существует, но, по моему опыту, он всегда отключен.

Выбор #

Точки, выбранные на векторных слоях, запоминаются, пока документ открыт. Это означает, что вы не потеряете свой тщательно выбранный фрагмент, если рискнете отредактировать другой слой и вернуться. Это и хорошо, и плохо. Использование Shape Layer через Copy (command-J) дублирует выбранные точки на новый слой, потенциально удаляя точки, которые вы хотели бы сохранить. Для векторных путей нет пункта меню отмены выбора, но щелчок внутри области пути делает ту же работу. Итак, прежде чем вы нажмете команду-J, нажмите на свой объект с помощью инструмента «Выбор контура» или «Прямой выбор» — оба отменяют выбор всех векторных точек.

Редактирование без отвлечения #

Command-shift-H скрывает целевой путь, что значительно упрощает редактирование таких эффектов, как внутренняя тень, расположенных рядом с краем векторной фигуры. Скрытие целевого контура работает почти всегда, даже когда открыто окно «Палитра цветов» или «Градиентная заливка» (но, что удивительно, не тогда, когда открыто окно «Редактор градиента»).

Если сделать векторный слой видимым или щелкнуть по холсту с помощью инструмента «Выбор контура» или «Прямой выбор», контур контура вернется обратно, как и повторное нажатие Command-shift-H. Возможность скрыть контур контура была возможна в Photoshop CS5, но она настолько удобна, что заслуживает упоминания здесь еще раз.

Другие советы #

Нажатие option-delete немедленно заполнит векторную фигуру цветом переднего плана, что дает дополнительное преимущество преобразования слоя градиента или слоя узора в слой сплошного цвета. Если вы хотите быстро изменить заливку на черный, вы можете нажать «d», а затем выбрать опцию-удалить. Если вы хотите быстро изменить заливку на белый, вы можете нажать «d», затем «x», затем «option-delete». CS5 сделал это, но это полезно знать.

Параметры логического пути были перемещены в CS6, но они по-прежнему работают по-прежнему. Обратите внимание, что порядок сортировки путей внутри слоя имеет значение — вы можете изменить порядок вещей, начиная со значка справа (значки: логическое значение, распределение, порядок).