Фигура звезда для фотошопа: Скачать фигуры для фотошопа » Страница 9

Разное 

Содержание

Фигуры в фотошопе: как нарисовать или вставить

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

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

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

  • Режим инструмента выбора. Здесь можно выбрать одно из трёх.
  1. Фигура. Значение установлено по умолчанию, и при нём создаётся векторная геометрическая фигура на отдельном слое, то есть происходит то, чего вы от инструмента и ждёте.
  2. Контур. Рисуется контур фигуры без заливки.
  3. Пикселы. Создаётся не векторная, а растровая фигура.
  • Заливка. Позволяет настроить цвет и тип (градиент, штриховку) нарисованной фигуры.
  • Обводка. Настройки контура фигуры: толщина, тип, цвет.
  • Ширина и высота. Позволяют уточнить размер фигуры, когда непозволительно делать это «на глаз».

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

Прямоугольник

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

На панели параметров нажмите значок . Откроется окно геометрических настроек.

По умолчанию переключатель установлен в положение Прямоугольник. Если вы установите его в положение Квадрат, то при рисовании всегда будете получать фигуру с одинаковой длиной сторон. Аналогичного эффекта можно добиться и не нажимая флажок: для получения квадрата в процессе рисования прямоугольника достаточно удерживать нажатой клавишу Shift .

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

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

Флажок От центра позволяет рисовать прямоугольник от центра, а не из крайней точки.

Прямоугольник со скруглёнными углами

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

Эллипс

Параметры совпадают с прямоугольником, только вместо квадрата можно рисовать круг. Для этого в окне настроек геометрии установите флажок в положение Окружность либо во время рисования удерживайте нажатой клавишу Shift .

Многоугольник

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

Окно геометрических настроек от предыдущих фигур заметно отличается.

  • Радиус. В этом поле задаётся радиус будущего многоугольника.
  • Сгладить внешние углы. Если флажок установлен, то углы скруглены, если нет — углы острые, как в классическом многоугольнике.
  • Звезда. Установите флажок, если на выходе хотите получить звезду.
  • Глубина лучей. Это поле ввода задаёт, насколько длинными будут лучи.
  • Сгладить внутренние углы. Установите этот флажок если хотите, чтобы внутренние углы были скруглены, как показано на рисунке ниже.

Линия

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

  • Начало. Если флажок установлен, вместо линии вы получите стрелку, которая будет нарисована в месте, где вы щёлкнули кнопкой мыши.
  • Конец. Установите флажок, чтобы стрелка добавлялась в конец линии.
  • Ширина. Указывается в процентах по отношению к толщине (её можно задать на панели параметров в одноимённом поле).
  • Длина. Считается так же, как и ширина — по отношению к толщине, в процентах.
  • Кривизна. Значение указывается в диапазоне от -50% до 50% и определяет, насколько будет изогнута самая широкая часть стрелки. На рисунке изображены стрелки кривизной 0%, 30% и 50% (сверху вниз).

Произвольная фигура

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

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

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

Программа Adobe Photoshop широко используется для работы с изображениями , предоставляя действительно широкий спектр возможностей. Большинство пользователей применяют Фотошоп для ретуши фото , но, помимо этого, программа позволяет создавать: рисунки, картины, графику — разной степени сложности. В Photoshop имеется несколько инструментов, предназначенных для создания рисунков. Первым делом необходимо научиться рисовать простейшие элементы вроде треугольников, линий, эллипсов и прочего, так как они используются очень часто при создании разного рода рисунков. В этой статье подробно рассмотрим, как нарисовать в Фотошопе простейшие фигуры. Давайте разбираться.

Поехали!

Постигаем азы компьютерной графики

Открыв Adobe Photoshop, обратите внимание на панель инструментов. Чтобы перейти к фигурам, кликните мышкой по иконке в виде прямоугольника. В выплывающем окне вы увидите следующие инструменты:

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


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

Всего существует три режима рисования:

  1. Создаётся новая фигура, для которой можно сделать слой-заливку или векторную маску.
  2. Создаётся контур фигуры и закрашивается каким-либо цветом.
  3. Пиксельный режим. В этом случае изображения получаются растровыми, а не векторными.

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

Нет ничего проще, чем провести линию . Для этого применяется одноимённый инструмент.


Для круга используйте клавишу Shift либо меню дополнительных настроек

Перейдём к тому, как нарисовать круг в Фотошопе. Здесь всё происходит аналогичным образом. Выберите инструмент «Эллипс», определитесь с цветом и толщиной контура. Если вы хотите получить круг, а не эллипс, зажмите на клавиатуре клавишу «Shift» либо установите «окружность» в разделе геометрических параметров.


Рисуем красивую композицию стандартными средствами

Теперь давайте разберёмся, как нарисовать треугольник в Фотошопе. В этом случае всё не так очевидно, но при этом нисколько не сложнее. Всё, что нужно — выбрать «Многоугольники» и в маленьком окошке «Sides» задайте количество углов. Соответственно, чтобы получить треугольник, впишите цифру «3».

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


Стрелки в начале или конце можно задать в свойствах инструмента

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


Шаблоны, идущие в обычной комплектации приложения

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

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

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

В действительности, программа Photoshop работает со всеми этими и другими фигурами и позволяет нам добавлять их на изображение с той же легкостью, с какой мы добавляли круги и квадраты. В программе все эти фигуры более сложной формы называются произвольными фигурами, и мы можем их нарисовать, используя инструмент «Произвольная фигура» (Custom Shape Tool), с которым мы познакомимся в этом уроке.

Инструмент «Произвольная фигура»

Инструмент «Произвольная фигура» расположен на панели инструментов в одном разделе с другими инструментами группы «Фигуры». По умолчанию, на экране отображается инструмент «Прямоугольник» (Rectangle Tool), но если вы нажмете на него и удержите кнопку мыши нажатой несколько секунд, то появится всплывающее меню с перечнем других инструментов, которые также доступны в этом разделе. Инструмент «Произвольная фигура» находится в самом низу списка:

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

Если у вас уже выбран один из инструментов группы «Фигуры», то вы можете быстро переключиться на инструмент «Произвольная фигура» на панели настроек, где представлены шесть значков, отображающих инструменты группы «Фигуры». Значок инструмента «Произвольная фигура» — последний справа (он выглядит как клякса):

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

Выбор формы произвольной фигуры

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

Окошко предварительно просмотра отображает выбранную нами произвольную фигуру

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

Для открытия палитры «Произвольные фигуры» нажмите на окошко предварительного просмотра

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

Выбираем фигуру в форме сердца из палитры «Произвольные фигуры»

Выбор цвета для фигуры

После выбора формы фигуры, вам нужно выбрать цвет для нее. Это можно сделать, нажав на значок образца цвета, расположенный справа от слова «Цвет» (Color) на панели настроек:

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

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


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

Выбор параметра «Слой-фигура»

Как я уже упоминал в прошлом уроке, программа Photoshop позволяет нам рисовать фигуры трех типов с помощью инструментов группы «Фигуры». Мы можем рисовать векторные фигуры, которые не зависят от разрешения и могут быть масштабируемы без потери качества (такой тип фигур мы бы рисовали в программе Illustrator). Мы можем также рисовать контуры, которые являются лишь очертаниями фигур, или мы можем рисовать пиксельные формы, которые программа заполняет цветными пикселями. В большинстве случаев, мы рисуем векторные фигуры, и чтобы иметь возможность это сделать, нам необходимо выбрать параметр «Слой-фигура» (Shape Layers) на панели настроек. Это первый значок в группе из трех значков, расположенных ближе к левому краю на панели настроек:

Для рисования векторных фигур выбираем параметр «Слой-фигура» на панели настроек

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


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

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


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

Рисование фигуры с правильными пропорциями

Обратите внимание, что моя фигура в форме сердца выглядит немного искаженной. Она шире и короче, чем я ожидал увидеть. Это случилось из-за того, что по умолчанию программа Photoshop не старается сохранить правильные пропорции (или по-другому форматное соотношение) фигуры в процессе ее изображения. Я нажму сочетание клавиш Ctrl+Z (Win) / Command+Z (Mac) для отмены действия и попробую нарисовать фигуру снова.

Для того чтобы нарисовать фигуру с правильными пропорциями, установите курсор в окне документа и, удерживая кнопку мыши нажатой, начните протягивать курсор и рисовать фигуру, как обычно. При этом нажмите клавишу Shift и продолжайте ее удерживать нажатой по мере перемещения курсора. Как только вы нажмете (и удержите) клавишу Shift, вы увидите, что контур фигуры приобрел правильные пропорции:


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

Когда размер нарисованной фигуры вас устроит, отпустите кнопку мыши, а затем отпустите клавишу Shift (убедитесь, что вы отпускаете клавишу Shift последней). Программа снова заполнит фигуру выбранным цветом:

Отпускайте клавишу Shift только после того, как вы отпустите кнопку мыши

Я снова нажму сочетание клавиш Ctrl+Z (Win) / Command+Z (Mac) для отмены действия, а затем выберу фигуру другой формы, нажав на окошко предварительного просмотра фигуры на панели настроек для открытия палитры фигур. На этот раз я остановлюсь на изображении музыкальных нот:

Нажимаем на миниатюру музыкальных нот для выбора фигуры

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

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

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

Новая фигура заполнится тем же цветом, что и предыдущая

Изменение цвета заливки нарисованной фигуры

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

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

Программа Photoshop повторно откроет цветовую палитру, где мы сможем выбрать новый цвет. Я выберу фиолетовый цвет:


Из цветовой палитры выбираем новый цвет для фигуры

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

Мы можем в любой момент изменить цвет векторной фигуры

Загрузка дополнительных наборов фигур

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

Нажимаем на маленькую стрелку в в правом верхнем углу палитры фигур

Это действие приведет к открытию меню с различными параметрами, в самом низу которого будет расположен перечень дополнительных наборов фигур, установленных в программе Photoshop. Каждый из этих наборов является собранием фигур, объединенных общей тематикой, например, «Животные» (Animals), «Музыка» (Music), «Природа» (Nature) и т.д. Некоторые из наборов появились только в версии программы Photoshop CS5 (именно эту версию используя я), но большинство наборов доступны в любых недавних версиях программы:

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

Если вы знаете, какой набор фигур вам нужно, вы можете его выбрать, нажав на соответствующее название набора в перечне. Однако проще — загрузить все наборы фигур за раз. Мы можем это сделать, выбрав название «Все» (All) в верхней части списка наборов:

Выбираем название «Все» (All) для загрузки всех дополнительных наборов форм

После этого появится диалоговое окно, и вам нужно будет решить — заменить текущие произвольные фигуры новыми или добавить фигуры к имеющимся. Выберите в окне пункт «Добавить» (Append), что позволит вам сохранить изначальные фигуры и добавить к ним новые:


Для загрузки новых фигур при сохранении в палитре изначальных фигур выбираем «Добавить» (Append)

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

В палитру фигур теперь загружены все дополнительные фигуры, доступные в программе Photoshop

Ниже представлено несколько примеров фигур, которые мы теперь можем нарисовать в программе:


В палитре фигур теперь отражены все дополнительные фигуры, доступные в программе Photoshop

Несмотря на все разнообразие готовых произвольных фигур, предоставленных в программе, может случиться так, что даже после загрузки всех наборов, мы не сможем найти нужное нам изображение для особого дизайна, над которым работаем. И в таком случае программа Photoshop окажется для нас незаменимым помощником, потому что она позволяет нам самим создавать любую фигуру. Чтобы узнать, как создать собственную коллекцию произвольных фигур, сохранить и в дальнейшем использовать ее, изучите наш урок «Создание собственных произвольных фигур»!

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

Перевод: Ксения Руденко

Из этого урока вы узнаете обо всех тонкостях, что касается создания произвольных фигур в Фотошоп. Так как материала много, то мы разделим его на 2 части. В первой части вы узнаете, как создается фигура, как превратить её в произвольную фигуру, как вывести её на экран и использовать в нужных целях. Во второй части мы рассмотрим объединение разнообразных фигур в отдельные наборы и их сохранение.

Идея создания урока пришла ко мне в процессе просмотра журнала по скрапбукингу, на страницах которого были готовые шаблоны простых форм. Все эти фигуры были разделены по разным темам и стоили они довольно дорого. Тогда я предположил: «А ведь их можно создать самим в программе Фотошоп и совершенно бесплатно»! Ко всему прочему, вам не обязательно увлекаться скрапбукингом для того, чтобы извлечь пользу из создания собственных произвольных фигур.

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

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

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

Прежде чем мы начнем, я хочу сделать еще одно отступление. Произвольная фигура создается при помощи инструмента Перо (P), так же их можно создавать, используя инструменты из группы Фигура, например «Эллипс» или «Прямоугольник». Но если вам требуется создать фигуру определенной формы, к примеру, ящики или шины от велосипеда, в этом случае следует использовать Перо (P).

Из этого урока вы узнаете, как создать произвольную фигуру, предварительно обведя предмет на фотографии. Если у вас имеется талант красиво рисовать, это очень хорошо, тогда вы сможете без особого труда нарисовать любую фигуру от руки, не прибегая к обводке предмета. Что же касается меня, то я предпочитаю обводить поскольку таким даром не обладаю.

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

1. Выбираем инструмент Перо (P)

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

Выбрать его также можно нажатием клавиши P на клавиатуре.

2. Параметр «Слой-фигура» в панели настроек

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

Они показывают, что можно сделать при помощи пера. Значок, расположенный справа, на данный момент окрашен серым цветом. Это говорит о том, что он доступен только тогда, когда мы работаем с инструментами группы «Фигуры» (у пера и инструментов, относящихся к группе «Фигуры», схожи параметры на панели настроек). Иконка, расположенная в середине, необходима для рисования контуров, но в данном случае нам это не нужно. Для рисования фигуры выберите значок слева, отвечающий за параметр Shape Layers (Слой-фигура).

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

Следует отметить, что нет никакой разницы между рисованием фигур и контуров с помощью пера. И в работе имеются сходства: создание опорных точек, перемещение направляющих линий для создания прямых или изогнутых линий. Независимо от того, что вы создаете контур или фигуру – вначале вы всё равно рисуете контуры. Разница лишь в том, что создавая фигуру, Фотошоп автоматически заполняет контур выбранным цветом в процессе рисования, это позволяет видеть создаваемую фигуру.

На самом деле данная функция немного затрудняет работу. Мы рассмотрим это ниже.

3. Рисуем фигуру

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

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


В следующем шаге мы решим эту проблему.

4. Уменьшение непрозрачности

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

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

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


5. Продолжаем выделять объект

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

Обратите внимание на маску слоя с фигурой, на ней появилась четкая фигурка.

В обведенный силуэт мы добавим рот, глазки, две пуговицы, галстук в виде бабочки. Здесь возникает вопрос — как добавить дополнительные детали в обведенный силуэт?

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

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

7. Параметр «Вычесть из области фигуры»

После выбора эллипса, посмотрите на панель настроек. Слева расположена группа значков в виде маленьких квадратиков. Они позволяют совершать с фигурами различные действия: добавить к области фигуры, пересечение областей нескольких фигур и вычесть из области. Нас интересует третий значок Subtract from shape area (Вычесть из области фигуры).

8. Извлечение фигур из обведенного силуэта

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


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

Пряничного человечка, расположенный на нижнем слое.


Повторите те же действия для правого глаза. Для начала нарисуйте овал вокруг правого глаза.


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


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

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

То же самое проделайте со второй пуговицей. Эллипсом обведите область вокруг неё.

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

Обратите внимание на панель слоев. На маске слоя Shape 1 появились по два отверстия для глаз и пуговиц, которые были вырезаны из обведенной формы.

9. Вырезаем оставшиеся детали при помощи пера

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

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

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

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

Обратите внимание на маску слоя Shape 1, здесь показаны вырезанные формы: галстук в виде бабочки, рот, 4 волнистых формы сахарной пудры.

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

10. Увеличение непрозрачности фигуры до 100%

Теперь, когда мы закончили делать обводку отдельных фигур, нет необходимости видеть исходное изображение под обведенным силуэтом. Верните значение непрозрачности до 100%.

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

Вот, как должна выглядеть фигура Пряничного человечка:

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

11. Определяем форму человечка в произвольную фигуру

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

Примечание: если вам нужно скрыть конур самой фигуры, то кликните по миниатюрке ещё раз, чтобы убрать контур.

После того, как выбран нужный слой, зайдите в меню Edit > Define Custom Shape (Редактирование – Определить произвольную фигуру).

В результате откроется окно, в котором будет запрашиваться «имя» для фигуры. Назовем её Gingerbread Man (Пряничный человечек).


После нажатия OK, вы можете использовать произвольную фигуру человечка. Теперь документ, в котором мы создавали нашу фигурку, нам не нужен, можно его закрыть. Далее рассмотрим, где её найти и как применить.

12. Создание нового документа

Создайте новый документ в Фотошоп с параметрами, указанными ниже на скриншоте.


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

Выберите инструмент Произвольная фигура. По умолчанию всегда отображается инструмент Прямоугольник. Поэтому нажмите и удерживайте на нем кнопку мышки, пока не откроется всплывающее меню. Из списка инструментов выберите Custom Shape Tool (U) (Произвольная фигура).

14. Выбираем нашу фигуру

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

15. Рисуем фигуру

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

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

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

В двух оставшихся шагах вы узнаете, как изменить размер и цвет фигур, а так же, как развернуть её в нужном направлении.

16. Изменяем цвет

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

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


После нажатия OK, фигура сразу же окрасится в выбранный вами цвет.

Изменять цвет вы можете, сколько захотите и когда захотите.

17. Изменение размера и местоположения фигуры

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

Если вы решили изменить размер фигуры, просто выберите на панели слоёв слой с фигурой и нажмите Ctrl + T. Этими действиями откроется рамка трансформации где вы, потянув за любой угловой маркер, сможете изменить размер. Для сохранения пропорций при изменении размера зажимайте Shift. При зажатой клавише Alt размер фигуры будет изменяться от центра.

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

Если вы довольны результатом нажмите Enter, чтобы применить все проделанные изменения.

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


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

Вне зависимости от того, показаны они фигуры на экране или в печати, края векторных фигур всегда остаются четкими и резкими.

Чтобы убедиться, что вы рисуете векторные фигуры, а не контуры или пиксели, выберите опцию «Фигура» (Shape) из видов режимов инструмента в панели параметров:

Выбор опции «Фигура» (Shape) на панели параметров

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

Следующее действие, которое мы, как правило, выполняем после выбора опции «Фигура», это выбор цвета, заполняющего форму, в версии Photoshop CS6 и выше, это делается с помощью клика по полю «Заливка» (Fill) в панели параметров:


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

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

  • Нет цвета (No Color) — белый прямоугольник с красной диагональной линией, заливка отсутствует
  • Чистый цвет (Solid Color) — заливка сплошным цветом
  • Градиент (Gradient) — заливка градиентом
  • Узор (Pattern) — залива Photoshop-узором (паттерном)


Различные методы заливки формы

Нет цвета (No Color)

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

Ниже показан простой пример того, как выглядит форма без заливки цветом. Все, что мы видим — это основной контур формы, который так и называется — «Контур» (Path). Контур отображается только в документе Photoshop, так что при сохранении вашей работы в формате JPEG или PNG, или при печати, контур виден не будет. Чтобы сделать его видимым, мы должны добавить к нему обводку, способы добавления которой мы рассмотрим далее:


Фигура «Прямоугольник» без заливки и обводки.

Чистый цвет (Solid Color)

Чтобы заполнить вашу форму однотонным цветом, выбирайте опцию «Чистый цвет» (Solid Color) вторая иконка слева:


Опция «Чистый цвет» (Solid Color) для заливки фигуры сплошным однотонным цветом

При активной опции, выберите цвет для фигуры, нажав на один из цветовых образцов. Цвета, которые при работе в Photoshop вы недавно использовали, будут отображены выше основных образцов:


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

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


Клик на значок Color Picker для выбора собственного цвета.

Откроется диалоговое окно палитры цветов, выберите в неё цвет и нажмите OK, чтобы закрыть Color Picker после выбора нужного цвета.

Как видно на рисунке ниже, после этих действий мы имеем такую же форму, только теперь форма имеет цвет:


Фигура, залитая цветом.

Заливка градиентом

Чтобы заполнить вашу форму градиентом, выберите опцию «Градиент» (Gradient). Затем нажмите на одну из миниатюр для выбора предустановленного градиента, или используйте миниатюру полосы градиента, расположенную ниже, для создания своего собственного варианта градиента.


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

Вот тот же форма, только теперь она заполнена градиентом:


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

Заливка узором (Patterns)

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

Ниже показана та же форма, на этот раз заполненная узором:


Та же форма, только на этот раз залитая стандартным узором Photoshop.

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

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

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

Для добавления обводки, нажмите на соответствующую опцию в панели параметров:


Опция добавления обводки.

Это открывает окно с параметрами, где мы можем выбрать цвет обводки, а также, задать многие другие параметры.

В верхней части окна у нас есть те же самые четыре иконы для выбора типа заливки линии обводки, это «Нет цвета» (No Color), «Чистый цвет» (Solid Color), Градиент (Gradient) и «Узор» (Pattern). По умолчанию выбран вариант «Нет цвета». Я выберу тип «Чистый цвет» (Solid Color). Выбирать и назначать цвет обводки точно таким же образом, как и цвет заливки, о чем рассказано выше.

Изменение толщины обводки

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


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

Опция выравнивания краёв (Align Edges)

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

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

По умолчанию, Photoshop рисует обводку в виде сплошной линии, но мы можем изменить это, нажав кнопку «Задать тип штриха фигуры» (Stroke Options) на панели параметров:


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

Это открывает окно «Параметры обводки» (Stroke Options). В этом окне мы можем изменить тип линии со сплошной на пунктирную или состоящую из точек. Кроме этого, имеется три дополнительные опции обводки:


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

Опция «Выровнять» (Align) позволяет нам выбрать, будет ли обводка расположена внутри контура, снаружи или посередине.
Следующая опция «Концы» (Caps) работает только в случае, если мы выбрали пунктирную обводку. Мы можем изменить вид концов отрезков.

  1. штрих заканчивается на границе своей заданной длины и конец имеет прямоугольную форму
  2. конец имеет полукруглую форму и выступает на половину ширины за границу заданно длины штриха с каждой стороны
  3. конец имеет прямоугольную форму и выступает на половину ширины за границу заданной длины штриха с каждой стороны

«Углы» (Corners) позволяют изменить вид угла при стыке линий обводки. Угля могут быть острыми (по умолчанию), закруглёнными или скошенными. Эта опция работает, если обводка расположена снаружи или посередине контура. Если обводка внутри контура, углы всегда остаются острыми.

Нажатие на кнопку внизу окна «Другие параметры…» (More Options…) открывает ещё одно окно, где мы можем задать длину штрихов и разрывов между штрихами. Вот пример прямоугольной фигуры с заливкой и пунктирной обводкой с разными длинами штрихов:


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

Рекомендуем также

Как в фотошопе вставить фигуру


Как добавить фигуры в фотошоп и пользоваться ими

Автор Дмитрий Костин На чтение 12 мин. Опубликовано

Всем привет, уважаемые читатели блога koskomp и мои дорогие друзья. Сегодня я расскажу вам, как добавить фигуры в фотошоп, как ими пользоваться и для чего они нужны. А также в конце статьи мы нарисуем симпатичный стакан в векторном стиле. Многие считают, что от этого инструмента толка нет, но я вас уверяю, что в веб-дизайне — это чуть ли не основная функция. Посмотрите на дизайн в моем паблике. Он буквально построен на фигурах. Поэтому знать это нужно. При этом дело не ограничится простым рисованием квадратов. Тут всё гораздо интереснее.

Как рисовать фигуры

Начнем с простого, а именно рисования. Сама по себе группа инструментов состоит из шести видов:

  • Прямоугольник
  • Прямоугольник с закругленными углами
  • Эллипс
  • Многоугольник
  • Линия (подробнее здесь)
  • Произвольная фигура

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

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

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

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

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

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

Здесь нет какой-то четкой формы (отсюда и название), но зато существует много уже готовых вариантов. Для того, чтобы рассмотреть их все, в свойствах элемент «Фигура», а точнее раскройте его. Как видите, у нас тут присутствуют разные контуры, с помощью которых мы можем нарисовать стрелку, сердечко, запрещающий знак и многое другое.

Давайте попробуем добавить в фотошоп произвольную фигуру в виде галочки. Я задам ей цвет, обводку и нарисую ее стандартным способом, то есть зажав левую кнопку мыши и потянув немного в другую сторону. Не забываем зажимать клавишу Shift, чтобы соблюдать все пропорции. Таким образом можно рисовать прикольные нестандартные объекты. Примечателен и тот факт, что какого бы размера объект мы не рисовали, он всегда будет ровным и гладким. Всё это потому, что фигура изначально векторный объект. А векторные объекты состоят не из пикселей, как обычное изображение, а формируются исходя из формул.

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

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

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

После этого откроется фотошоп и новые произвольные элементы уже появятся в вашей коллекции. Берите и пользуйтесь.

Возможности фигур

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

Свойства

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

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

Давайте ради интереса нарисуем прямоугольник и поставим радиус 35 только в двух углах (правом верхнем и левом нижнем). Только перед этим обязательно отключите связь углов, нажав на значок скрепочки между ними, иначе значения будут меняться для всех.

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

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

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

Вырезание и добавление

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

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

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

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

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

Как выравнивать фигуры относительно других элементов

Еще немаловажным свойством при рисовании фигур является их выравнивание. Например, нам нужно сделать несколько фигур с одинаковым расстоянием друг от друга, а также на одной линии. Допустим я возьму инструмент «Эллипс» и с помощью зажатого Shift нарисую несколько кругов.

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

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

Когда мы всё выделили, идем в меню «Выравнивание контура» и выбираем те параметры, которые нам нужны. В моем случае я должен выбрать «Центры по вертикали» и «Распределить по ширине». В этом случае фигуры будут выравнены по центру, а расстояние между ними будет одинаковым. Точно также эта функция работает и в случае с вертикальной расстановкой.

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

Деформация фигур

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

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

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

Рисование объектов с помощью фигур (практика)

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

  1. Выбираем «Прямоугольник с закругленными углами» и рисуем заготовку нашего стакана. Сразу выберите подходящий цвет для стакана, например коричневый. Для этого измените его в свойствах сверху. Обводку можно не ставить. 
  2. Теперь, выберем инструмент «Выделение узла» и выделим левый угол заготовки полностью (у вас должно быть задействовано две точки, а не одна). 
  3. Теперь зажмите SHIFT и нажмите на стрелочку влево на клавиатуре, после чего у вас выскочит окно, где будет говориться то, что данная операция превратит фигуру в контур. Соглашайтесь. После этого еще раз нажмите на стрелку влево с зажатым шифтом. Надписи уже не будет. После это манипуляции левый угол должен будет оттопыриться. 
  4. То же самое теперь проделываем и с правым углом, то есть выделяем с помощью белого курсора и делаем пару нажатий на стрелку вправо, чтобы оттопырить другую сторону. Если надпись снова появится, соглашайтесь.  
  5. Далее создадим крышку. Для этого снова берем многоугольник с закругленными краями, только на сей раз выбрать пункт «Объединить фигуры» не получится, так как на одном слое нельзя менять цвет заливки разных контуров.
  6. Далее рисуем прямоугольник сверху нашей получившейся трапеции. И если у вас она получилась не черного цвета, то поставьте его в свойствах. 
  7. Сейчас я вижу, что крышка сильно выпирает с обоих сторон. Надо бы ее слегка уменьшить по бокам. Для этого жмем комбинацию клавиш CTRL+T, чтобы активировать «Свободное трансформирование», после чего зажимаем клавишу ALT и тянем чуть-чуть за боковую область. Это позволит уменьшить нам крышку по бокам пропорционально. 
  8. Далее, снова берем «Выделение узла» и также как и в предыдущем случае немного загибаем углы, по очереди выделив сначала один, а затем второй. Получиться в итоге должно примерно так. 
  9. Остается только выровнять всё это дело. Для этого выделяем оба слоя в панели слоев с помощью зажатой клавиши CTRL, а затем берем инструмент «Перемещение» и в свойствах под главным меню ставим «Выравнивание центров по горизонтали».  

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

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

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

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

С уважением, Дмитрий Костин

Как установить новые фигуры в Photoshop / Creativo.one

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

Примечание: скриншоты операционной системы Windows 10, Photoshop CC 2017. Для других версий Photoshop алгоритм будет тот же.

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

Для начала скачайте из Интернета файл с новыми фигурами и распакуйте его, если он заархивирован.

Далее, откройте программу Photoshop СS6 и перейдите в главном меню в верхней части экрана во вкладку Редактирование – Наборы – Управление наборами (Edit — Preset Manager). Появится вот такое окошко:

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

Кнопка под цифрой 2 ( в виде шестерёнки) показывает разновидности дополнения.

Загружаем фигуры в Photoshop

Кликаем по маленькой черной стрелке и из появившегося списка, путем нажатия левой кнопки мышки, выбираем вид дополнения – Заказные фигуры (Custom Shapes):

Далее, нажимаем кнопку Загрузить (Load)

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

Снова нажимаем Загрузить (Load)

Теперь, в диалоговом окне «Управление наборами» вы сможете увидеть в конце набора фигур новые, только что загруженные нами фигуры:

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

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

До встречи на creativo.one!

Примечание: статья обновлена 20.03.2019.

Как нарисовать прямоугольник и другие фигуры в фотошопе?

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

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

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

  • Режим инструмента выбора. Здесь можно выбрать одно из трёх.
  1. Фигура. Значение установлено по умолчанию, и при нём создаётся векторная геометрическая фигура на отдельном слое, то есть происходит то, чего вы от инструмента и ждёте.
  2. Контур. Рисуется контур фигуры без заливки.
  3. Пикселы. Создаётся не векторная, а растровая фигура.
  • Заливка. Позволяет настроить цвет и тип (градиент, штриховку) нарисованной фигуры.
  • Обводка. Настройки контура фигуры: толщина, тип, цвет.
  • Ширина и высота. Позволяют уточнить размер фигуры, когда непозволительно делать это «на глаз».

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

Прямоугольник

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

На панели параметров нажмите значок . Откроется окно геометрических настроек.

По умолчанию переключатель установлен в положение Прямоугольник. Если вы установите его в положение Квадрат, то при рисовании всегда будете получать фигуру с одинаковой длиной сторон. Аналогичного эффекта можно добиться и не нажимая флажок: для получения квадрата в процессе рисования прямоугольника достаточно удерживать нажатой клавишу Shift.

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

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

Флажок От центра позволяет рисовать прямоугольник от центра, а не из крайней точки.

Прямоугольник со скруглёнными углами

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

Эллипс

Параметры совпадают с прямоугольником, только вместо квадрата можно рисовать круг. Для этого в окне настроек геометрии установите флажок в положение Окружность либо во время рисования удерживайте нажатой клавишу Shift.

Многоугольник

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

Окно геометрических настроек от предыдущих фигур заметно отличается.

  • Радиус. В этом поле задаётся радиус будущего многоугольника.
  • Сгладить внешние углы. Если флажок установлен, то углы скруглены, если нет — углы острые, как в классическом многоугольнике.
  • Звезда. Установите флажок, если на выходе хотите получить звезду.
  • Глубина лучей. Это поле ввода задаёт, насколько длинными будут лучи.
  • Сгладить внутренние углы. Установите этот флажок если хотите, чтобы внутренние углы были скруглены, как показано на рисунке ниже.

Линия

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

  • Начало. Если флажок установлен, вместо линии вы получите стрелку, которая будет нарисована в месте, где вы щёлкнули кнопкой мыши.
  • Конец. Установите флажок, чтобы стрелка добавлялась в конец линии.
  • Ширина. Указывается в процентах по отношению к толщине (её можно задать на панели параметров в одноимённом поле).
  • Длина. Считается так же, как и ширина — по отношению к толщине, в процентах.
  • Кривизна. Значение указывается в диапазоне от -50% до 50% и определяет, насколько будет изогнута самая широкая часть стрелки. На рисунке изображены стрелки кривизной 0%, 30% и 50% (сверху вниз).

Произвольная фигура

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

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

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

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

Полезные ссылки:

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

Для начала выясним, что же такое фигура (Shape). В Фотошопе основными изображениями являются растровые, т.е состоящие из отдельных пикселей. В отличие от них, фигура представляют собой совокупность векторных данных (векторное изображение). Это значит, что фигура всегда имеет точные границы, то есть качество фигуры не зависит от разрешения. Фигура представляет собой геометрический объект или область определенной формы.
Итак, Вы скачали файл с векторными фигурами для Фотошопа. Этот файл имеет разрешение csh. Чтобы Фотошоп «увидел» его, необходимо разместить данный файл в соответствующей папке программы.

Варианты установки фигур в папки Фотошопа.

Вариант 1
Загрузить в папку Custom Shapes. Эта папка является скрытой, поэтому в проводнике Windows в свойствах папки необходимо включить пункт «Показывать скрытые файлы и папки». После этого, открываем папку по адресу
● для Windows XP
C:\Documents and Settings\Ваше имя пользователя\Application Data\Adobe\Adobe Photoshop CS5\Presets\Custom Shapes
● а для Vista и Windows 7 адрес будет следующим: C:\Users\Ваше имя пользователя\AppData\Roaming\Adobe\Adobe Photoshop CS5\Presets\Custom Shapes
и загружаем в неё файл с фигурами csh.
После чего на панели инструментов активируем «Инструмент Произвольная фигура» (Custom Shape Tool)

Затем вверху рабочего окна Фотошопа, под главным меню, кликаем по стрелкам-треугольничкам и выбираем строку «Загрузить фигуры» (Load Shapes), можно также выбрать «заменить фигуры» (Replase Shapes), если вы хотите, чтоб фигуры, установленные на данный момент в Фотошопе, удалились и заменились на новые.

После клика по одной из этих строк откроется папка Custom Shapes с Вашим файлом csh, остаётся только дважды кликнуть по нему левой клавишей мыши.

Вариант 2
Способ гораздо проще, и не надо искать папку Custom Shapes в проводнике.
Открываем папку с нашим файлом фигур, копируем его в буфер обмена. Как и в первом варианте, выбираем «Инструмент Произвольная фигура», затем выполняем действия 1, 2, 3 на рисунке вверху, открывается окно с папкой Custom Shapes, и просто вставляем туда файл csh.

Вариант 3
Через управление наборами.
Копируем файл с фигурами в буфер обмена.
Идём по вкладке главного меню Редактирование —> управление наборами (Edit —> Preset Manager), в открывшемся окне в поле выбора вверху выбираем пункт «Заказные фигуры» (Custom Shapes) и кликаем по кнопке «Загрузить» (Load), расположенному справа от поля с этой строкой. Также открывается окно с папкой Custom Shapes и вставляем туда файл.

Произвольные фигуры в фотошопе. Как установить дополнительные наборы фигур

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

На панели инструментов есть группа однородных инструментов (быстрая клавиша U). Туда входят: прямоугольник, прямоугольник со скругленными краями, эллипс, многоугольник, линия и произвольная фигура.

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

Что такое произвольная фигура?

Она представляет из себя векторное изображение, а значит не имеет ограничений по размерам. Поэтому ее можно растягивать сколько угодно без потери качества.

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

Как использовать?

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

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

Совет

Чтобы в дальнейшем вы могли ее редактировать, вращать и изменять размер, рекомендую для каждой фигуры создать новый слой Ctrl+Shift+N. Подробнее как создать слой.

Как установить свои фигуры в фотошоп?

Вы можете самостоятельно установить набор фигур себе в программу. Здесь работают те же принципы, что и, например, с кистями или стилями слоя. Чтобы их установить, во-первых, скачайте себе на компьютер набор с фигурами. Такие наборы имеют расширение csh.

После этого, откройте меню фигур. Вы увидите такие 4 команды:

Выбрав «Загрузить…», откроется диалоговое окно, в котором нужно указать путь до файла с расширением csh, например, так:

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

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

А если вы загрузили несколько наборов, удалили какие-либо отдельные фигуры, использовав команду «Удалить…», вообщем, сделали набор под себя, то можете его сохранить командой «Сохранить произвольные…». В будущем его можно будет загрузить в том же виде или передать кому-нибудь через интернет.

Последняя команда «Восстановить произвольные…» позволяет все вернуть по умолчанию.

Обратите внимание, что в этом же меню есть огромный список: Животные, Стрелки, Природа, Объекты и т. д.  Это стандартные наборы, которые нам любезно предоставили разработчики фотошопа.

Второй способ установки с дополнительным преимуществом

Произвольные фигуры еще можно установить непосредственно в системные файлы фотошопа.

Сделать это немного сложнее, но главный плюс такого способа в том, что ваш набор появится в списке, что я описал выше (Животные, Стрелки, Природа, Объекты и т.д.). В случае, если вы намерены часто пользоваться этим инструментом, то такой способ установки сократит время, и вы сможете выбрать нужный набор в два клика.

Для этого необходимо скопировать файл с расширением csh в системную папку фотошопа «Custom Shapes», обычно у нее такой адрес: C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Custom Shapes.