Самый простой способ нарисовать прямоугольник в Photoshop - воспользоваться инструментом «Rectangle Tool » (Прямоугольник). Инструмент «Rectangle Tool » принадлежит к группе инструментов для рисования фигур и занимает в ней почетное первое место.
Инструмент Rectangle Tool на палитре инструментов Photoshop
Конечно можно просто взять «Rectangle Tool » с палитры инструментов Photoshop. А можно активировать его при помощи горячих клавиш. По нажатию клавиши становится активным тот инструмент из группы инструментов для рисования фигур, который использовался последним. Если это был не «Прямоугольник », то следует употребить сочетание клавиш , которое позволяет переключаться между различными инструментами в пределах данной группы.
Режимы рисования
Прямоугольник, равно как и любая другая фигура в Photoshop, может быть нарисован в одном из следующих режимов:
- «Shape » (Фигура), когда создается векторный контур с растровой «начинкой ». Такой прямоугольник может быть залит чистым цветом, градиентом или узором. Каждая нарисованная в режиме «Shape » фигура помещается в отдельный слой, помеченный особым значком, который информирует пользователя о том, что в данном слое располагается векторный объект. В последствии можно вернуться к любой созданной фигуре и изменить ее форму, заливку и обводку;
- «Path » (Контур), когда создается векторный контур, выполняющий вспомогательные функции. Такой прямоугольник не является частью изображения, но может быть преобразован, к примеру, в область выделения или использован для получения векторной маски. Все нарисованные в режиме «Path » контуры являются элементами временными до тех пор, пока не будут сохранены. Для управления контурами в Photoshop имеется панель «Paths » (Контуры). Любой контур, как примитив векторный, всегда может быть отредактирован;
- «Pixels » (Пикселы), когда к документу добавляется энное количество пикселей заданного цвета. Такой прямоугольник сразу становится частью растровой картинки. При рисовании в режиме «Pixels » не создается никаких векторных контуров и не добавляется никаких дополнительных слоев. Нарисованный в нем четырехугольник займет отведенное ему место в текущем слое. В дальнейшем работать с ним можно точно так же, как и с любым другим растровым изображением.
Для выбора режима, в котором требуется нарисовать прямоугольник, следует обратиться к «Options Bar » (Панели опций), когда инструмент «Rectangle Tool » уже активен. Все возможные режимы представлены в раскрывающемся списке «Pick tool mode » (что в русской версии Photoshop переведено как «Режим инструмента выбора », хотя более верным был бы перевод «Выбор режима работы инструмента »).
Раскрывающийся список Pick tool mode для инструмента Rectangle Tool
От выбранного режима зависят не только свойства будущего объекта, но и те параметры, которые будут доступны на панели опций в процессе его создания. По большей части эти параметры абсолютно одинаковы для всех «Фигур», поэтому в рамках данной статьи они рассматриваться не будут. Далее речь пойдет лишь о тех уникальных параметрах инструмента «Rectangle Tool », которые определяют форму, размеры и место расположения прямоугольника.
Определение пропорций, размеров и расположения прямоугольника
В самом общем случае для того, чтобы нарисовать прямоугольник в Photoshop, необходимо:
- Взять инструмент «Rectangle Tool »;
- Выбрать режим рисования из выпадающего списка «Pick tool mode »;
- Нажать левую кнопку мыши в том месте окна документа, где должна будет расположиться одна из вершин прямоугольника;
- Удерживая левую кнопку мыши в нажатом положении, переместить курсор в точку, где должна будет находиться его противоположная вершина;
- Отпустить кнопку мыши.
Но это далеко не единственный способ нарисовать прямоугольник в Photoshop. Для определения необходимой формы и размеров будущей геометрической фигуры можно прибегнуть к помощи или воспользоваться . Кроме того, в процессе построения прямоугольника можно пользоваться .
Панель опций
В Photoshop для каждого инструмента из группы инструментов для создания фигур предлагается ряд специфических, свойственных лишь ему одному, параметров. Параметры эти представлены в выпадающем меню, которое вызывается кликом по иконке с изображением шестеренки на «Options bar » (Панели опций).
Выпадающее меню с параметрами инструмента Rectangle Tool
Для инструмента «Rectangle Tool » на панели опций доступны следующие параметры:
- «Unconstrained » (Произвольно), который активен по умолчанию. Его использование позволяет рисовать прямоугольники произвольных форм и размеров придерживаясь представленной чуть выше последовательности действий;
- «Square » (Квадрат), выбор которого приведет к тому, что все стороны и углы нарисованного четырехугольника будут равны между собой;
- «Fixed Size » (Заданный размер), при активации которого можно сразу определить точные размеры будущего прямоугольника. При его выборе становятся доступны два текстовых поля: «W » (Ш) и «H » (В), в которые можно ввести, соответственно, требуемую ширину и высоту прямоугольника. Тогда останется только указать место, где должна расположиться фигура;
- «Proportional » (Задать пропорции), при активации которого можно задать соотношение сторон будущего прямоугольника. При его выборе также становятся доступны два поля: «W » (Ш) и «H » (В), в которые можно ввести, соответственно, требуемое отношение ширины прямоугольника к его высоте. Тогда при рисовании четырехугольника он всегда будет иметь указанные пропорции;
- «From Center » (От центра), при включении которого начальной точкой при рисовании прямоугольника будут не одна из вершин, а его геометрический центр. Данная опция может быть использована совместно с любым из вышеперечисленных параметров.
Горячие клавиши
При работе с инструментом «Rectangle Tool » можно пользоваться горячими клавишами. Так, если в процессе рисования прямоугольника:
- Нажать и удерживать клавишу , то создаваемый прямоугольник будет иметь форму квадрата. Рисование прямоугольника с нажатой клавишей протекает точно так же, как если бы для инструмента «Rectangle Tool » был выбран параметр «Square »;
- Нажать и удерживать клавишу , то базовой точкой создаваемого прямоугольника будет его геометрический центр. То есть действие нажатой клавиши равносильно активации опции «From Center » для инструмента «Rectangle Tool »;
- Нажать и удерживать одновременно сразу две клавиши: и , то создаваемый прямоугольник будет квадратом, а его базовой точкой будет его геометрический центр. Иными словами, клавиши и имеют тот же эффект, что параметр «Square » в сочетании с опцией «From Center », установленные для инструмента «Rectangle Tool » на панели опций;
- Нажать и удерживать клавишу (Пробел), то можно изменить расположение создаваемого прямоугольника, а после отпуска клавиши продолжить рисование фигуры, но уже на новом месте.
В окошке этом имеется два текстовых поля: «Width » (Ширина) и «Height » (Высота), куда можно ввести желаемые габариты фигуры. Также в нем есть возможность активировать опцию «From Center » (От центра). Если опция «From Center » активна, то указанная для вызова диалогового окна точка, будет геометрическим центром прямоугольника, если нет - левой верхней его вершиной. После задания подходящих параметров необходимо нажать кнопку «OK », после чего прямоугольник сразу же появится в том самой месте, где был совершен клик для вызова диалогового окна «Create Rectangle ».
В приведенном ниже продемонстрированы все описанные в данной статье приемы, которые могут быть использованы при рисовании прямоугольника с помощью инструмента «Rectangle Tool » в Photoshop.
Видео к статье
При подготовке картинок к публикации в интернет, иногда требуется добавить простую прямоугольную рамку.
Просто нарисовать прямоугольник в Фотошоп.
Поэтому новички и задаются вопросом “Как нарисовать прямоугольник в Фотошоп”.
На самом деле процедура достаточно простая.
Рассмотрим рисование прямоугольника в Фотошоп по шагам.
Шаг 1. Открываем картинку, на которой нужно нарисовать прямоугольник
Шаг 2 . Создаем новый слой и уже на новом слое будем рисовать прямоугольник, чтобы создать новый слой просто нажмите на соответствующую иконку на панели Layers
Шаг 3 . Сделайте новый слой активным, просто щелкните по нему мышкой
Шаг 4 . На главной панели инструментов, выбирайте инструмент выделяющий прямоугольную область
Шаг 5 . Рисуете прямоугольник нужных размеров
Шаг 6 . Кликаете правой кнопкой мышки внутри выделенной области и в появившемся контекстном меню выбираете “Stroke… ” (Выполнить обводку)
Шаг 7 . В открывшемся окне “Stroke ” задайте параметры вашего прямоугольника: Width — толщину, Color – цвет и нажмите ОК .
Шаг 8 . Поздравляю! Вы нарисовали прямоугольник в Фотошоп!
Чтобы убрать пунктир, нажмите CTRL + D
Шаг 9 . При желании придать вашей рамке дополнительную выразительность, добавьте к ней тень. Наведите мышь на слой с рамкой, нажмите правую кнопку, в появившемся окне найдите “Blending Options… ”
В этом уроке я покажу Вам, как нарисовать квадрат в фотошопе или прямоугольник. Даже не знаю в каких ситуациях это может пригодиться. Но как минимум вы таким образом познакомитесь с некоторыми инструментами мощной программы Фотошоп.
Для начала откроем в фотошопе нужную нам картинку или фотографию, где мы хотим нарисовать прямоугольник. Для этого воспользуемся пунктами меню «Файл - Открыть ».
Вслед за этим выберем инструмент «Прямоугольник ».
Теперь рисуем прямоугольник или квадрат , кликаем левой кнопкой мыши по изображению и не отпуская кнопку тянем в сторону, в итоге получается выделение нужного нам объекта и размера.
Используя стрелки на клавиатуре можно подвинуть его в сторону. Теперь чтобы получился полноценный квадрат нужно сделать ему обводку. Переходим в меню «Выделение - Модификация - Граница ».
Указываем ширину 5 и жмем «ОК ».
Теперь берем инструмент «Кисть », нужный нам цвет и закрашиваем обводку.
Чтобы убрать выделение нужно нажать на клавиатуре сочетание клавиш «Ctr+D ».
Вот такой квадрат в Фотошопе в результате получился.
Кстати, можно также нарисовать прямоугольник в фотошопе полностью закрашенный. Это делается ещё проще. Нам достаточно выбрать инструмент «Прямоугольник ».
И таким же образом зажав кнопку мыши на изображении провести в сторону. Прямоугольник с заливкой, ну или квадрат, будет нарисован сразу.
Надеюсь эта тема вам понятна и теперь при необходимости вы легко сможете нарисовать в фотошопе прямоугольник или квадрат . А я на этом завершаю эту статью и напоминаю, что на сайте есть и другие уроки по этой программе.
Как нарисовать прямоугольник в фотошопе без заливки
В данном уроке я покажу, как нарисовать прямоугольник в фотошопе без однородной заливки, то есть будет очерчен только его периметр. Ведь обычный залитый прямоугольник рисуется достаточно просто, а вот с таким у некоторых возникают проблемы.
Открываем картинку в фотошопе, на которой необходимо нарисовать прямоугольник либо создаем новый документ.
Я открываю вот такую картинку:
Прямоугольник необходимо создавать на новом слое, на фоне его сделать не получится. Создаем новый слой:
Рисуем прямоугольник необходимых размеров на картинке, зажав левую кнопку мыши
Кликаем по выделенной области правой кнопкой мыши и из выпавшего меню выбираем пункт «Выполнить обводку».
В следующем окошке указываем ширину и цвет обводки и жмем «ОК».
Вот что у нас получается. Убираем выделение при помощи сочетания клавиш Ctrl+D.
Прямоугольник готов.
Смотрим видео по теме:
comp-profi.com
3 способа как в фотошопе нарисовать квадрат и прямоугольник
Хоть квадрат и прямоугольник это простейшие геометрические фигуры, но, чтобы их нарисовать в фотошопе, нужно приложить некоторые усилия и обладать базовыми знаниями. Новичок без должной подготовки, скорее всего, не справится с этой задачей.
В этой статье разберем 3 самых популярных способа как нарисовать прямоугольник или квадрат в фотошопе.
Но прежде, чем приступить к выбору способа рисования, нужно определиться с будущими параметрами. Прямоугольник/квадрат может быть:
- залит сплошным цветом или только с отрисовкой границ;
- произвольный или с точно заданными размерами;
- с возможностью в любое время менять его размеры без потери качества.
Способ 1. Инструмент произвольная фигура
В этом способе прямоугольник или квадрат будут нарисованы залитым сплошным цветом. Если вам нужна только граница, переходите к следующим двум способам.
На панели инструментов выберите инструмент Произвольная фигура. Дальше возможны два варианта развития событий:
Вариант 1. Квадрат или прямоугольник с дальнейшей возможностью изменять размеры без потери качества
Здесь, конечно, подразумевается использование векторной фигуры. Чтобы ее нарисовать нужно выбрать параметр Слой-фигура :
В дальнейшем вы можете без потери качества изменять размеры этой фигуры. Для этого используйте инструмент Свободное трансформирование - Ctrl+T, и с помощью угловых маркеров изменяйте размер.
Для тех кто не знает: векторные фигуры состоят не из пикселей, а из специальные математических формул. Поэтому изменение размера - это не процесс растягивания/сжатия пикселей, а сложный математический пересчет, за счет чего не происходит никакой потери качества.
Вариант 2. Стандартный (растровый) квадрат/прямоугольник
Чтобы нарисовать сразу растровую фигуру используйте на панели параметров настройку Выполнить заливку пикселов . Но прежде чем начать ее рисовать - создайте новый слой!
Но на самом деле можно рисовать сразу и векторный, а потом просто растрировать его. Тут уже выбирайте сами.
Как сделать прямоугольник квадратным
Обыкновенное правило с зажатой клавишей Shift с произвольными фигурами не работает. Поэтому нужно воспользоваться панелью параметров инструмента и выбрать настройку, чтобы фотошоп рисовал именно квадрат.
В этой же панели, обратите внимание, вы можете указать точный размер необходимого прямоугольника/квадрата или рисовать его по заранее определенным пропорциям.
По умолчанию размеры определяются пикселями. Если вы хотите изменить единицу измерения, сначала введите в поле какое-либо значение, а затем кликните по нему правой кнопкой мыши. Появится окно выбора единиц измерения. Доступно: пиксели, дюймы, сантиметры, миллиметры, пункты и пики.
Прямоугольник или квадрат со скругленными углами
Чтобы получить фигуру со скругленными углами, делайте все то же самое, что описано выше, но в самом начале выберите инструмент Прямоугольник со скругленными краями . На панели параметров инструмента нужно будет указать только радиус закругления.
Способ 2. Обводка выделенной области
Этот способ простой, как 5 копеек. выберите инструмент Прямоугольная область и нарисуйте прямоугольник пунктирной линией. Чтобы нарисовать квадрат удерживайте нажатой клавишу Shift.
Теперь нужно сделать обводку границ этой выделенной области. Для этого перейдите в Редактирование - Выполнить обводку .
Затем в новом окне настройте вид обводки: укажите толщину рамки, желаемый цвет и отметьте как будет проходить обводка:
- Внутри - значит рамка ляжет по внутренней стороне выделенной области;
- По центру - значит рамка разделится поровну на часть проходящую внутри выделения и на часть со внешней стороны;
- Снаружи - значит рамка будет огибать пунктир выделения.
Вот как может получиться:
На скриншоте выше я специально не убрал пунктирную линию, поскольку у вас она также не исчезнет. Чтобы окончательно от нее избавиться нажмите Ctrl+D.
В этом способе, чтобы нарисовать фигуру точного размера, нужно сперва на панели параметров инструмента Прямоугольная область указать Стиль - Заданный размер или Заданные пропорции. После этого станут активными поля, куда введите значения ширины и высоты в пикселях. Кликом правой кнопкой мыши по одному из этих полей вызовет меню изменения единиц измерения.
Способ 2.1 Закрашивание выделения
Самый банальный способ рисования прямоугольника - нарисовать рамку выделения (как описано выше) и просто закрасить ее любым цветом. Вот вам и прямоугольник или квадрат.
Способ 3. Модификация выделения
На самом деле этот способ мне меньше всего нравится из-за очевидного минуса - углы прямоугольника будут подрезанными, а сама граница рамки в состоянии растушевки и повлиять на эти факты не представляется возможным.
Итак, нужно вновь выбрать инструмент Прямоугольная область, нарисовать рамку будущего прямоугольника или квадрата (с клавишей Shift), а затем отправляемся в меню Выделение и выбираем команду Модификация - Граница .
Появится новое окно, в котором, в нашем случае, мы указываем ширину границы прямоугольника. Допустим, укажу 7 пикселей. Получим такой результат:
А теперь нужно просто закрасить получившуюся рамку. Для этого подойдет инструмент Кисть. Здесь, кстати, можно подойти к вопросу более творчески и закрасить, например, разными цветами. Результат:
Останется только снять выделение - Ctrl+D. Думаю этот способ подходит только для своих редких специфических задач, поскольку растушевка и подрезанные углы только все портят.
Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter. Спасибо!
psand.ru
Как в фотошопе нарисовать прямогульник прозрачный или цветной
Сделать прямоугольник в фотошопе довольно простая задача, которая по силам даже новичку. Советую вам научиться рисовать эту простейшую фигуру, так как данный навык может пригодиться вам для выполнения множества задач. Будь то дизайн сайта, рамка для фотографии или коррекция изображения. Несмотря на кажущуюся большую величину урока, вы справитесь с этой задачей всего за несколько минут.
Я продемонстрирую вам несколько способов рисования прямоугольника, и все они когда-либо вам понадобятся.
Начнем с фигур. Создаем новый документ. 1000 на 1000 пикселей будет вполне достаточно.
Теперь переходим к панели инструментов и ищем инструмент прямоугольник.
Удерживая правую кнопку мыши, проводим по рабочему полю.
Прямоугольник готов! Чтобы избавиться от тонкой черной рамки, растрируйте слой. Растрирование вы найдете в окне слоев.
Теперь второй способ. Выделенная область.
На верхней панели ищем вкладку «Слои» и создаем новый.
Теперь пришло ознакомиться с одним из самых популярных инструментов в фотошопе – выделенная область, которая находится вверху на боковой панели инструментов.
Проводим по рабочему полю, зажав правую клавишу мышки.
Образовалась выделенная область, которую мы должны заполнить. Поэтому перемещаемся к инструменту «Выберите основной цвет». Кликом по нему мы открываем карту цветов и выбираем любой оттенок, который нам заблагорассудится.
Ищем инструмент «Заливка», выбираем его и кликаем по выделенной области.
А теперь комбинация клавиш ctrl+d и выделение снято! Прямоугольник готов!
Третий способ научит нас рисовать прозрачный треугольник в фотошопе, который часто используется как рамка для фото. Рисовать его так же просто. Создаем новый слой, выбираем прямоугольную выделенную область и располагаем ее на рабочем поле. В общем, выполняем все вышеперечисленные действия.
А вот теперь мы выполним обводку выделенной области, для чего мы переходим к верхней панели и нажимаем вкладку «Редактирование». Нас интересует команда «Выполнить обводку».
Как видите, появилось диалоговое окно, предлагающее нам выбрать толщину линии, цвет обводки и расположение рамки. Устанавливаем параметры на свой вкус или выбираем мои.
Нажимаем комбинацию клавиш ctrl+d для снятия выделения и наслаждаемся результатом.
Как видите, у нас получилась полноценная рамка в виде прозрачного треугольника.
Делать прямоугольник в фотошопе мы уже научились. Давайте же научимся его редактировать! Например, попробуем изменить цвет и размер.
Как вы успели заметить, я порекомендовал вам создавать новый слой для рисования прямоугольника. И это неспроста. Ваш прямоугольник не привязан к рабочей области. Вы можете редактировать его сколько душе угодно, при этом рабочая область будет оставаться неизменной. Хочу предупредить, что эти способы применимы к прямоугольнику, созданному любым из вышеперечисленных методов.
Для начала попробуем изменить цвет. Опять же, существует несколько методов. Первый – инструмент заливка. Выбираете нужный цвет на панели инструментов. Затем кликаете по инструменту «заливка». А после уже по нашему прямоугольнику.
Был прямоугольник желтый, а стал зеленым. Очень просто, не находите?
Второй способ – параметры наложения. В коне слове ищем нужный и кликаем по нему левой клавишей мыши.
В появившемся диалоговом окне ставим галочку напротив «Наложение цвета». Кликаем по окошку, заполненному цветом и выбираем понравившийся.
Существует множество способов изменения цвета прямоугольника. Но вы вполне можете ограничиться двумя основными.
Теперь научимся меня размер прямоугольника.
Изменить размер прямоугольника в фотошопе крайне просто. Выбираем инструмент «Перемещение» и кликам по прямоугольнику.
Потянув за уголок мышкой, вы можете изменить его размер. А так же перевернуть по оси.
photoshop-work.ru
Как нарисовать прямоугольник в Фотошопе
Самой простой геометрической фигурой является прямоугольник (квадрат). Из прямоугольников могут состоять различные элементы сайтов, баннеров и других композиций.
Фотошоп дает нам возможность изобразить прямоугольник несколькими способами.
Первый способ – инструмент «Прямоугольник» .
Из названия ясно, что инструмент позволяет рисовать прямоугольники. При использовании данного инструмента создается векторная фигура, которая не искажается и не теряет качества при масштабировании.
Настройки инструмента находятся на верхней панели.
Существует возможность изобразить прямоугольник с заданными размерами. Размеры указываются в соответствующих ширине и высоте полях, а прямоугольник создается одним кликом с подтверждением.
Второй способ – инструмент «Прямоугольная область» .
При помощи данного инструмента создается выделенная область прямоугольной формы.
Так же как и в случае с предыдущим инструментом, работает клавиша SHIFT , создавая квадрат.
Прямоугольная область нуждается в заливке. Для этого можно нажать сочетание клавиш SHIFT+F5 и настроить тип заливки,
либо воспользоваться инструментом «Заливка» .
Выделение снимается клавишами CTRL+D .
Для прямоугольной области также можно задать размеры, либо пропорции (например, 3х4).
На сегодня все о прямоугольниках. Теперь Вы умеете их создавать, причем двумя способами.
Мы рады, что смогли помочь Вам в решении проблемы.Задайте свой вопрос в комментариях, подробно расписав суть проблемы. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
Да Нетlumpics.ru
Как нарисовать квадрат в фотошопе
Казалось бы в данной статье будем рассматривать совсем простой вопрос, на который все знают ответ, но, поверьте тут не все так просто и есть много нюансов, особенно во время рисования квадрата либо прямоугольника без заливки.
И так приступаем. Вначале рисуем квадрат с заливкой. Для этого я открываю в фотошопе вот такую картинку:
Выбираем в панели инструментов инструмент «Прямоугольник»
Теперь в верхней панели нажимаем на стрелочку, чтобы открылись параметры и задаем ширину, высоту либо выбираем произвольный квадрат:
Рисуем вот такой квадрат. Цвет заливки, естественно, можно менять.
Теперь решим задачу посложнее, это как нарисовать квадрат либо прямоугольник в фотошопе без заливки .
Такой прямоугольник необходимо рисовать на новом слое, поэтому создайте его. «Слои – Новый».
Выбираем инструмент «Прямоугольная область».
Рисуем при помощи данного инструмента прямоугольник на картинке. Чтобы нарисовать квадрат, зажмите shift и растягивайте до нужного размера.
Указываем ширину и цвет обводки и нажимаем «ОК».
Получился вот такой квадрат без заливки, как мы и хотели:
А также смотрим тематическое видео:
pc-knowledge.ru
Как рисовать в фотошопе - Урок 9. Рисование фигуры в photoshop
Инструменты рисования позволяют создавать и редактировать векторные фигуры. С ними легко создавать различные элементы для веб-страниц.Создайте новый файл для тренировки.
Нажмите левой клавишей мыши на инструмент -фигуры- на панели инструментов, откроется окно выбора инструмента:
Здесь представлены основные фигуры, которыми мы можем воспользоваться. Выберете любую и посмотрите на панель параметров:
Для любой фигуры можно выбрать:
- режим рисования:
- Слой-фигура . Фигура создается в отдельном слое. Слой-фигура состоит из слоя-заливки, определяющего цвет фигуры, и связанной с ним векторной маски, задающей границы фигуры. Границы фигуры представляют собой контур, который появляется на вкладке "Контуры" панели "Слои".
- Контуры . Этот режим позволяет рисовать контуры фигур, которые можно заливать или обводить произвольным цветом. Контуры отображаются на вкладке "Контуры" панели "Слои".
- Заливка пикселов . При работе в этом режиме создаются не векторные, а растровые изображения, которые можно обрабатывать так же, как и любое растровое изображение
- стиль и цвет фигуры
- задать параметры, характерные для этой фигуры
Выберем первую фигуру - прямоугольник. На панели выберем режим - слой-фигура. Выберем стиль, щелкнув по треугольнику справа.
Выберете любой, какой понравится. Кстати, если щелкнуть по треугольничку в кружочке (справа), то в открывшемся контекстном меню можно выбрать дополнительные стили. Если же вы не хотите использовать стиль, то выберите белый квадратик, перечеркнутый красной линией.
Теперь можно задать геометрические параметры:
- Произвольно - как нарисуете, так и будет.
- Квадрат - при растягивании мышкой фигуры, ширина и высота будут всегда одинаковы.
- Заданный размер - можно задать ширину и высоту прямоугольника (в см) и щелкнуть по холсту. Появится прямоугольник с заданными размерами.
- Задать пропорции - можно задать во сколько раз ширина будет меньше (или больше) высоты. При растягивании фигуры пропорция будет сохраняться.
- От центра - рисует прямоугольник от центра.
- Привязать к пикселам - края прямоугольника привязываются к границам пикселов.
Достаточно полезный инструмент для создания кнопочек и менюшек для ваших web-страниц, не правда ли?
Рисуем прямоугольники со скругленными углами
Выберем вторую фигуру - прямоугольник со скругленными углами. На панели выберем режим - слой-фигура, радиус скругления углов - например, 15 и цвет (можно стиль, как хотите).Геометрические параметры такие же, как у прямоугольника.
Вот, что получилось у меня при различных комбинациях радиуса и стиля.
Чем не блоки новостей и кнопочки меню?
Рисуем окружности
Выберем третью фигуру - эллипс. На панели выберем режим - слой-фигура, цвет и стиль. Геометрические параметры такие же, как у прямоугольника, с той лишь разницей, что вместо квадрата можно выбрать окружность. Выберите -произвольно- и растяните эллипс. Если хотите, чтобы был круг, то удерживайте нажатой клавишу Shift или выберите в геометрических параметрах -окружность-.
Вот, что получилось у меня:
Рисуем многоугольники
Выберем фигуру - многоугольник. На панели выберем режим - слой-фигура, количество сторон в диапазоне от 3 до 100 (например, 3 - для треугольника, 6 - для шестиугольника), цвет и стиль. Рассмотрим геометрические параметры:
- Радиус - радиус многоугольника.
- Сгладить внешние углы
- Звезда - со снятой галочкой многоугольник выпуклый, с поставленной галочкой многоугольник вогнутый.
- Глубина лучей - если многоугольник вогнутый, то его вершины как бы образуют лучи. Этот параметр показывает какая часть радиуса многоугольника будет занята лучами. Чем больше %, тем длиннее и острее лучи.
- Сгладить внешние углы - со снятой галочкой углы острые, с поставленной галочкой углы округлые.
Первый девятиугольник имеет радиус 3см, остальные галочки сняты.
Второй девятиугольник имеет радиус 3см, галочка у -звезда-, глубина лучей - 25%, остальные галочки сняты.
Третий девятиугольник имеет радиус 3см, глубина лучей - 50%, стоят все галочки.
Ко всем применен стиль.
Рисуем линии
Выберем фигуру - линии. На панели выберем режим - слой-фигура, толщину линии (в пикселах), цвет и стиль. Рассмотрим геометрические параметры:
Если все галочки сняты будет просто линия, параметры задают стрелки на концах этой линии.
- Начало - стрелка в начале линии.
- Конец - стрелка в конце линии.
- Ширина - пропорции стрелки в процентном отношении к толщине линии (от 10% до 1000%).
- Длина - пропорции стрелки в процентном отношении к толщине линии (от 10% до 5000%).
- Кривизна - определяет степень изогнутости самой широкой части стрелки в месте, где она встречается с линией (от -50% до +50%).
У первой линии все галочки сняты, ширина - 500%, длина - 1000%, толщина - 2 пиксела.
У второй линии все тоже самое, но стоит галочка у -начало- и кривизна - 5%.
У третьей линии все тоже самое, но стоит галочка у -конец- и снята галочка у -начало-.
У четвертой линии стоят обе галочки, ширина - 500%, длина - 1000%, кривизна - 15%, толщина - 5 пикселов.
Ко всем применен стиль.
Рисуем произвольные фигуры
Выберем фигуру - произвольная фигура. На панели выберем режим - слой-фигура, цвет и стиль. Геометрические параметры такие же как у прямоугольника. Зато здесь есть выбор самой фигуры:
Если щелкнуть по треугольничку в кружочке (справа), то в открывшемся контекстном меню можно выбрать дополнительные фигуры.
Рисуем несколько фигур в одном слое
Принцип здесь такой же, как и с инструментами прямоугольного выделения (на первом уроке мы делали нестандартную область выделения, применяя инструменты на панели параметров: добавить к выделению, вычесть из выделения и т.д.). Такие же инструменты есть и на панели параметров фигур.
Например, создайте фигуру прямоугольник, теперь на панели параметров щелкните по иконке "добавить к области фигуры", а теперь выберите фигуру эллипс. Подведите курсор мыши к верхней границе нашего прямоугольника, нажмите левую клавишу мыши и, не отпуская, растяните эллипс. Должно получится примерно так:
Если эллипс растянулся не так, как хотелось, можно это поправить. Для этого возьмите на панели инструментов инструмент -выделение контура-:
Подведите курсор к границе эллипса и, удерживая нажатой левую кнопку мыши, перетащите эллипс куда следует. Используя все эти инструменты, можно рисовать фигуры различной сложности.
Сохраняем фигуры
Предположим нам понравилась последняя фигура, которую мы создали и мы хотим использовать ее в дальнейшем. Для этого ее нужно сохранить. Для этого меню Редактирование -> Определить произвольную фигуру. Задайте имя для новой фигуры.
Теперь наша фигура появилась в раскрывающейся панели выбора произвольных фигур.
На этом урок закончен. В следующей раз займемся контурами и растровыми изображениями.
Предыдущий урок Вернуться в раздел Следующий урок
www.site-do.ru
Как рисовать векторные фигуры в Photoshop, опции Заливка и Обводка
В абсолютном большинстве случаев вы будете рисовать векторные фигуры. В отличие от пиксельных форм, векторные фигуры являются гибкими, масштабируемыми и не зависят от разрешения изображения, что означает, что мы можем задать им любой желаемый размер, редактировать и масштабировать их столько, сколько нам потребуется, не теряя качества и даже распечатать их в любом размере также без потери качества!
Вне зависимости от того, показаны они фигуры на экране или в печати, края векторных фигур всегда остаются четкими и резкими.
Чтобы убедиться, что вы рисуете векторные фигуры, а не контуры или пиксели, выберите опцию "Фигура" (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) работает только в случае, если мы выбрали пунктирную обводку. Мы можем изменить вид концов отрезков.
- штрих заканчивается на границе своей заданной длины и конец имеет прямоугольную форму
- конец имеет полукруглую форму и выступает на половину ширины за границу заданно длины штриха с каждой стороны
- конец имеет прямоугольную форму и выступает на половину ширины за границу заданной длины штриха с каждой стороны
"Углы" (Corners) позволяют изменить вид угла при стыке линий обводки. Угля могут быть острыми (по умолчанию), закруглёнными или скошенными. Эта опция работает, если обводка расположена снаружи или посередине контура. Если обводка внутри контура, углы всегда остаются острыми.
Нажатие на кнопку внизу окна "Другие параметры..." (More Options...) открывает ещё одно окно, где мы можем задать длину штрихов и разрывов между штрихами. Вот пример прямоугольной фигуры с заливкой и пунктирной обводкой с разными длинами штрихов:
Обводка внутри фигуры, в которой используется два типа штриха - отрезок и точка.
.
Инструменты рисования позволяют создавать и редактировать векторные фигуры. С ними легко создавать различные элементы для веб-страниц.
Создайте новый файл для тренировки.
Нажмите левой клавишей мыши на инструмент -фигуры- на панели инструментов, откроется окно выбора инструмента:
Здесь представлены основные фигуры, которыми мы можем воспользоваться. Выберете любую и посмотрите на панель параметров:
Для любой фигуры можно выбрать:
- режим рисования:
- Слой-фигура . Фигура создается в отдельном слое. Слой-фигура состоит из слоя-заливки, определяющего цвет фигуры, и связанной с ним векторной маски, задающей границы фигуры. Границы фигуры представляют собой контур, который появляется на вкладке "Контуры" панели "Слои".
- Контуры . Этот режим позволяет рисовать контуры фигур, которые можно заливать или обводить произвольным цветом. Контуры отображаются на вкладке "Контуры" панели "Слои".
- Заливка пикселов . При работе в этом режиме создаются не векторные, а растровые изображения, которые можно обрабатывать так же, как и любое растровое изображение
- стиль и цвет фигуры
- задать параметры, характерные для этой фигуры
Выберем первую фигуру - прямоугольник. На панели выберем режим - слой-фигура. Выберем стиль, щелкнув по треугольнику справа.
Выберете любой, какой понравится. Кстати, если щелкнуть по треугольничку в кружочке (справа), то в открывшемся контекстном меню можно выбрать дополнительные стили. Если же вы не хотите использовать стиль, то выберите белый квадратик, перечеркнутый красной линией.
Теперь можно задать геометрические параметры:
- Произвольно - как нарисуете, так и будет.
- Квадрат - при растягивании мышкой фигуры, ширина и высота будут всегда одинаковы.
- Заданный размер - можно задать ширину и высоту прямоугольника (в см) и щелкнуть по холсту. Появится прямоугольник с заданными размерами.
- Задать пропорции - можно задать во сколько раз ширина будет меньше (или больше) высоты. При растягивании фигуры пропорция будет сохраняться.
- От центра - рисует прямоугольник от центра.
- Привязать к пикселам - края прямоугольника привязываются к границам пикселов.
Достаточно полезный инструмент для создания кнопочек и менюшек для ваших web-страниц, не правда ли?
Рисуем прямоугольники со скругленными углами
Выберем вторую фигуру - прямоугольник со скругленными углами. На панели выберем режим - слой-фигура, радиус скругления углов - например, 15 и цвет (можно стиль, как хотите).Геометрические параметры такие же, как у прямоугольника.
Вот, что получилось у меня при различных комбинациях радиуса и стиля.
Чем не блоки новостей и кнопочки меню?
Рисуем окружности
Выберем третью фигуру - эллипс. На панели выберем режим - слой-фигура, цвет и стиль. Геометрические параметры такие же, как у прямоугольника, с той лишь разницей, что вместо квадрата можно выбрать окружность. Выберите -произвольно- и растяните эллипс. Если хотите, чтобы был круг, то удерживайте нажатой клавишу Shift или выберите в геометрических параметрах -окружность-.
Вот, что получилось у меня:
Рисуем многоугольники
Выберем фигуру - многоугольник. На панели выберем режим - слой-фигура, количество сторон в диапазоне от 3 до 100 (например, 3 - для треугольника, 6 - для шестиугольника), цвет и стиль. Рассмотрим геометрические параметры:
- Радиус - радиус многоугольника.
- Сгладить внешние углы
- Звезда - со снятой галочкой многоугольник выпуклый, с поставленной галочкой многоугольник вогнутый.
- Глубина лучей - если многоугольник вогнутый, то его вершины как бы образуют лучи. Этот параметр показывает какая часть радиуса многоугольника будет занята лучами. Чем больше %, тем длиннее и острее лучи.
- Сгладить внешние углы - со снятой галочкой углы острые, с поставленной галочкой углы округлые.
Первый девятиугольник имеет радиус 3см, остальные галочки сняты.
Второй девятиугольник имеет радиус 3см, галочка у -звезда-, глубина лучей - 25%, остальные галочки сняты.
Третий девятиугольник имеет радиус 3см, глубина лучей - 50%, стоят все галочки.
Ко всем применен стиль.
Рисуем линии
Выберем фигуру - линии. На панели выберем режим - слой-фигура, толщину линии (в пикселах), цвет и стиль. Рассмотрим геометрические параметры:
Если все галочки сняты будет просто линия, параметры задают стрелки на концах этой линии.
- Начало - стрелка в начале линии.
- Конец - стрелка в конце линии.
- Ширина - пропорции стрелки в процентном отношении к толщине линии (от 10% до 1000%).
- Длина - пропорции стрелки в процентном отношении к толщине линии (от 10% до 5000%).
- Кривизна - определяет степень изогнутости самой широкой части стрелки в месте, где она встречается с линией (от -50% до +50%).
У первой линии все галочки сняты, ширина - 500%, длина - 1000%, толщина - 2 пиксела.
У второй линии все тоже самое, но стоит галочка у -начало- и кривизна - 5%.
У третьей линии все тоже самое, но стоит галочка у -конец- и снята галочка у -начало-.
У четвертой линии стоят обе галочки, ширина - 500%, длина - 1000%, кривизна - 15%, толщина - 5 пикселов.
Ко всем применен стиль.
Рисуем произвольные фигуры
Выберем фигуру - произвольная фигура. На панели выберем режим - слой-фигура, цвет и стиль. Геометрические параметры такие же как у прямоугольника. Зато здесь есть выбор самой фигуры:
Если щелкнуть по треугольничку в кружочке (справа), то в открывшемся контекстном меню можно выбрать дополнительные фигуры.
Рисуем несколько фигур в одном слое
Принцип здесь такой же, как и с инструментами прямоугольного выделения (на первом уроке мы делали нестандартную область выделения, применяя инструменты на панели параметров: добавить к выделению, вычесть из выделения и т.д.). Такие же инструменты есть и на панели параметров фигур.
Например, создайте фигуру прямоугольник, теперь на панели параметров щелкните по иконке "добавить к области фигуры", а теперь выберите фигуру эллипс. Подведите курсор мыши к верхней границе нашего прямоугольника, нажмите левую клавишу мыши и, не отпуская, растяните эллипс. Должно получится примерно так:
Если эллипс растянулся не так, как хотелось, можно это поправить. Для этого возьмите на панели инструментов инструмент -выделение контура-:
Подведите курсор к границе эллипса и, удерживая нажатой левую кнопку мыши, перетащите эллипс куда следует. Используя все эти инструменты, можно рисовать фигуры различной сложности.
Сохраняем фигуры
Предположим нам понравилась последняя фигура, которую мы создали и мы хотим использовать ее в дальнейшем. Для этого ее нужно сохранить. Для этого меню Редактирование -> Определить произвольную фигуру. Задайте имя для новой фигуры.
Теперь наша фигура появилась в раскрывающейся панели выбора произвольных фигур.
На этом урок закончен. В следующей раз займемся контурами и растровыми изображениями.