Как рисовать растровую графику в фотошопе
Рисование в Adobe Photoshop включает в себя создание векторных фигур и контуров. Photoshop позволяет рисовать с помощью любого из инструментов группы «Фигура», инструмента «Перо» или «Свободное перо». Режимы работы каждого инструмента можно изменить на панели параметров.
Перед началом рисования в Photoshop на панели параметров необходимо выбрать режим рисования. Выбранный режим рисования определяет, создается ли векторная фигура в отдельном слое, рабочий контур в существующем слое или растровая фигура в существующем слое.
Векторные фигуры представляют собой прямые и кривые линии, рисуемые с помощью групп инструментов «Фигура» или «Перо». (См. разделы Рисование фигур и Рисование с помощью группы инструментов «Перо».) Векторные фигуры не зависят от разрешения: их края остаются четкими при изменении размера, печати на принтере PostScript, сохранении в PDF-файле и импорте в векторные графические приложения. Существует возможность создания библиотек произвольных фигур, а также редактирования контура фигуры и атрибутов (например, типа обводки, цвета заливки и стиля).
Контуры — это замкнутые линии, которые можно использовать для выбора фрагмента изображения, а также залить или обвести произвольным цветом. Форму контура несложно изменить путем редактирования узловых точек.
Рабочий контур — это временный контур, который появляется на панели «Контуры» и определяет границы фигуры.
Контуры можно использовать несколькими способами.
- Контуры можно использовать в качестве векторной маски, чтобы скрыть отдельные области слоя. (См. раздел О слоях-масках и векторных масках.)
Контур можно преобразовать в выделенную область. (См. раздел Преобразование контуров в границы выделенной области.)
Контур можно залить или обвести произвольным цветом. (См. раздел Заливка контуров цветом.)
Сохраненный контур можно назначить обтравочным контуром, что позволит сделать часть изображения прозрачной при экспорте в программу верстки или векторный редактор. (См. раздел Создание эффекта прозрачности изображения с помощью обтравочных контуров.)
При работе с группами инструментов «Фигура» и «Перо» доступны три различных режима рисования. Режим может быть выбран с помощью значков на панели параметров, когда активны инструменты групп «Фигура» или «Перо».
Создание фигуры в отдельном слое. Для создания слоя-фигуры можно использовать либо группу инструментов «Фигура», либо группу инструментов «Перо». Слои-фигуры легко перемещать, масштабировать, выравнивать и распределять, благодаря чему они очень удобны при создании изображений для веб-страниц. В одном слое можно нарисовать несколько фигур. Слой-фигура состоит из слоя-заливки, определяющего цвет фигуры, и связанной с ним векторной маски, задающей границы фигуры. Границы фигуры представляют собой контур, который появляется на панели «Контуры».
Этот режим позволяет рисовать в текущем слое рабочий контур, который можно использовать для выбора фрагмента изображения, создания векторной маски, а также заливки или обводки произвольным цветом с целью создания растрового изображения (примерно так же, как это можно было сделать с помощью инструмента раскраски). Рабочий контур считается временным, пока не будет сохранен. Контуры отображаются на панели «Контуры».
Режим раскраски в слое напрямую — это примерно так же, как и с помощью инструментов окрашивания. При работе в этом режиме создаются не векторные, а растровые изображения. Создаваемые фигуры можно обрабатывать так же, как и любое растровое изображение. В этом режиме работают только инструменты группы «Фигура».
Чтобы стать уверенным и грамотным пользователем программы необходимо знать ее основы. В случае с Photoshop, основой считается понятие растровая графика.
Сложность: Низкая
Дата: 02.10.2011
Обновлено: 24.08.2017
Известно, что на компьютере изображения представляются в цифровом виде. Цифровое – значит, описано посредством чисел. Это позволяет хранить, просматривать и обрабатывать изображение в графических редакторах.
На практике это происходит следующим образом: изображение разбивается на квадратные элементы одинакового размера и каждый такой элемент описывается отдельно.
Этот квадратный графический элемент называют пикселом (picture element, pixel).
Описание пиксела – это описание его цвета.
Изображения, представленные посредством пикселей, называют растровыми, то есть разложенные на элементы.
Фотографии, произведения живописи, картинки с плавными переходами цветов обычно представляются в компьютере как растровые изображения.
Вот, например, обычная фотография белого медведя - это растровое изображение.
Создание растрового изображения можно представить следующим образом.
Возьмем прямоугольник, разбитый на клеточки. Чтобы что-то нарисовать, необходимо заполнить соответствующие клеточки требуемым цветом.
Кто знаком с техникой вышивания крестом – тому будет просто понять принцип растровой графики.
Здесь то же самое – есть лоскут материи разбитый на клеточки:
Вам требуется только выбирать нужный цвет нитки и вышивать крестики в определенных по рисунку местах.
Для редактирования растровых изображений существуют специальные программные средства.
Лидером среди редакторов растровых изображений является Adobe Photoshop.
Следует заметить, что рисование «с нуля» в редакторах растровой графики – довольно сложная задача.
Для рисования «на чистом» листе лучше подходят редакторы так называемой векторной графики. Лидер среди векторных редакторов – Corel Draw.
Главное отличие векторной графики, что здесь изображения описываются не пикселами, а другими графическими элементами – линиями, фигурами и т.д. Эти объекты еще называют векторами. В векторных редакторах удобно рисовать картинки, где нет плавных переходов цветов, например, схемы, чертежи, плакаты.
Но для ретуширования фотографий и создания спецэффектов этот редактор не подойдет.
Еще одно отличие векторной графики от растровой заключается в том, что векторы легко переносят масштабирование. Качество векторного изображения не зависит от изменения масштаба, а следовательно, изменение масштаба не влияет на объем занимаемого места на диске.
В то время как увеличение растрового изображения приводит к ухудшению качества (появляется зернистость).
В одном из следующих уроков в учебнике Фотошопа мы продолжим рассказ о пикселях и выясним, что же такое разрешение изображения.
В этом уроке мы рассмотрим процесс создания векторного рисунка в Фотошопе.
Сложность: Средняя
Дата: 24.08.2013
Обновлено: 18.06.2015
Финальный результат
Как известно, векторные иллюстрации в настоящее время очень популярны в веб-графике. Профессиональные дизайнеры могут создавать такие иллюстрации за считанные часы. Если Вы новичок или любитель, уроки веб-графики, безусловно, будут крайне полезны для Вас. Цель данного урока - пролить свет на процесс создания выбранного изображения. Шаг за шагом я продемонстрирую весь процесс и с помощью моих комментариев поясню все этапы.
Чтобы создать действительно классное изображение, Вы должны выбрать нужную программу и следовать определенным правилам. Если Вы хотите нарисовать векторную иллюстрацию, то должны иметь в виду, что для этого используются такие редакторы как Adobe Illustrator или CorelDraw. Вместе с тем, Photoshop располагает достаточными средствами для разработки векторных иллюстраций. Я наглядно покажу это в своем уроке, как перевести рисунок в вектор. Я выбрал скетч кота как основу для иллюстрации. Я решил изобразить синего кота с розовыми цветами в лапах.
Скетч кота, который я использовал в уроке.
Шаг 1
Начнем с создания фона. Нарисуем форму с помощью инструмента выделения Pen Tool («Перо» / Клавиша «P») (в режиме Shape Layers (Слой Фигура)). Настройки - Fill (Непрозрачность заливки) = 0%. Теперь используем наложение градиента: (Layer Style - Gradient Overlay (Стиль слоя - Наложение градиента)) для заполнения созданной фигуры. Все настройки по умолчанию, вам только нужно менять угол (я буду указывать степень) и градиент. Добавляем Stroke (Обводку) (Layer Style - Stroke (Стиль слоя - Обводка)). Используем все настройки по умолчанию, кроме ширины в 1 рх и цвета.
Итак. используем Pen Tool («Перо» / Клавиша «P»), в режиме Shape Layers (Слой Фигура). Выделяем весь холст, настройки Fill (Непрозрачность заливки) = 0%, и добавляем градиент (Layer Style - Gradient Overlay (Стиль слоя - Наложение градиента)).
Шаг 2
Шаг 3
Теперь уделим внимание основным элементам тела. Высветлим часть тела, используя тот же градиент, что и для всего тела, с углом 3 deg (Градус).
Шаг 4
Перейдем к деталям хвоста. Выделим весь хвост и заполним его градиентом (68 deg (Градус)). После этого выделим кончик хвоста (как показано на рисунке) и заполним тем же градиентом (75 deg (Градус)).
Шаг 5
Выделим нос, как показано на рисунке, и заполним градиентом (90 deg (Градус)).
Шаг 6
Осветлим кончик носа (-66 deg (Градус)). Используем более темные цвета, чтобы подчеркнуть границы носа.
Шаг 7
Пришло время поработать с общими контурами ушей. Используем угол градиента 66 deg (Градус) для нижнего и 4 deg (Градус) для верхнего уха.
Шаг 8
Придадим форму краю уха: используем угол градиента 16 deg (Градус) для нижнего уха и 34 deg (Градус) - для верхнего.
Шаг 9
Добавим деталей на лапах. Создадим овальную форму верхнего пальца (градиент с углом (35 deg (Градус)), затем для среднего пальца (68 deg (Градус)), и наконец для нижнего (58 deg (Градус)). Каждая последующая форма накладывается на предыдущую.
Шаг 10
Шаг 11
Добавим три круга сверху донизу (25 deg (Градус), 68 deg (Градус), 83 deg (Градус)) для каждого пальца, как и в шаге 9.
Шаг 12
Шаг 13
На верхней лапе 4 пальца. Скроем один из них. Создадим форму (50 deg (Градус)).
Шаг 14
Шаг 15
Шаг 16
Для верхнего пальца создаем форму (135 deg (Градус)), затем то же самое проделываем и для остальных пальцев (сверху вниз) - как и в шаге 9 (99 deg (Градус), 83 deg (Градус), 67 deg (Градус)).
Шаг 17
Закончили с основной частью кошачьего тела. Теперь перейдем к мордочке. Начнем с глаз. Создадим новую форму для нижнего века (-168 deg (Градус)), а затем светло-голубую форму - белок глаза (-22 deg (Градус)).
Шаг 18
Шаг 19
Сделаем овальную форму век (94 deg (Градус)), затем форму для ресниц (-173 deg (Градус)). Расположим их по границе века. Нажимаем «Ctrl+[» (Send Backward (Переложить назад)).
Шаг 20
Используя те же процедуры и те же параметры, но чуть меньшего размера по каждому из элементов, создадим второй глаз.
Шаг 21
Шаг 22
Создадим форму для нижнего зуба (-122 deg (Градус)). Далее создаем дубликаты слоя с зубом (Ctrl+J) и изменяем их размер, используя инструмент Path Selection Tool (Инструмент «Выделение контура» / Клавиша «A»).
Шаг 23
Создаем форму верхнего зуба (-135 deg (Градус)), и производим те же действия, что и в шаге 22.
Шаг 24
Кот практически готов. Добавим некоторые детали. Подготовим формы для роскошных кошачьих усов: (сверху вниз:-50 deg (Градус), 63 deg (Градус),-50 deg (Градус)).
Шаг 25
И еще 2 нижних уса:
Шаг 26
Теперь сделаем коту когти. Просто создаем небольшие формы в виде штрихов. в зависимости от направления когтя, указываем и угол наклона градиента, которым его заливаем. Градиент желательно выбрать: от темного к светло-голубому. Не бойтесь варьировать градиенты.
Шаг 27
Последний элемент - цветы в кошачьих лапах. Нарисуем форму стебелька цветка (173 deg (Градус)), как показано на скриншоте, жмем «Shift+Ctrl+[» (Send to Back (На задний план)). Далее создадим форму с лепестками (79 deg (Градус)).
Шаг 28
Создадим еще одну форму для лепестков (94 deg (Градус)), сделаем её чуть больше и разместим чуть выше исходной. Нарисуем сердцевину цветка (76 deg (Градус)), и еще такую же форму (99 deg (Градус)), сдвинув её вверх и вправо на 1 рх.
Вот и все. Наш Кот готов. Как видите, в Фотошопе можно создавать подобным образом векторные изображения чего угодно.
Финальный результат
3D-функции Photoshop будут удалены в будущих обновлениях. Пользователям, работающим с 3D-функциями, рекомендуется ознакомиться с новой коллекцией Adobe Substance 3D, которая представляет собой новое поколение 3D-инструментов от Adobe.
Дополнительную информацию о прекращении поддержки 3D-функций Photoshop можно найти здесь: Photoshop 3D | Распространенные вопросы об упраздненных 3D-функциях.
Узнайте о различиях растровых и векторных изображений и стандартных вариантах их использования.
Создавая различные типы композиций и графических объектов с использованием различного программного обеспечения, вы работаете с базовыми типами цифровых изображений — растровыми и векторными.
Растровые изображения
Общие сведения. Растровые изображения представляют собой прямоугольную сетку из элементов изображения (пикселей). Каждому пикселю соответствует определенное расположение и значение цвета. При работе с растровыми изображениями редактируются пиксели, а не объекты или фигуры.
Стандартные примеры использования. Растровые изображения — самый распространенный способ передачи таких нерастрированных изображений, как фотографии или цифровые рисунки, поскольку он позволяет наиболее эффективно передавать тонкие градации цвета и тонов.
Популярное программное обеспечение и типы файлов. Многие профессионалы для работы с растровыми изображениями используют Photoshop. Наиболее часто экспортируемыми типами файлов в Photoshop являются JPEG, GIF, PNG и TIFF.
Разрешение и размер файла. Растровые изображения зависят от разрешения, то есть содержат фиксированное количество пикселей.При изменении размера количество пикселей в растровом изображении уменьшается или увеличивается, что приводит к ухудшению качества изображения.Обычно у файлов растровых изображений большой размер, так как в них хранится информация о пикселях. Такие файлы обычно приходится сжимать, чтобы уменьшить их размер при использовании в определенных приложениях Creative Cloud.
Растровые изображения — изображения, основанные на пикселях, которые в основном используются для редактирования фотографий и создания цифровых графических объектов, которые легко использовать в Интернете.
Photoshop – это программа для работы с графикой, преимущественно растровой. У неподготовленных пользователей могут возникать некоторые «непонятки» в принципе работы программы и необходимости перевода одного вида изображений в другой (из вектора в растр и наоборот).
В данной статье постараемся разобраться в специфики терминов, зачем это нужно, а также в самом процессе перевода изображений из вектора в растр.
Что такое растровое и векторное изображения
Все изображения условно принято делить на две больших группы – растровые и векторные.
Первые, то есть растровые изображения, состоят из пикселей – отдельных точек. Каждой такой точке задаются определённые параметры – цвет, расположение и т.д. Все вмести эти точки образуют целостную картину. На качество изображения влияет количество пикселей и их плотность. Если картинку сильно увеличить, то будет ухудшение качества.
Вторые – растровые изображения, составляются из примитивных фигур – квадраты, линии, многоугольники и т.д. Всем им задаются определённые параметры, благодаря чему пользователи видят цельное изображение. К сожалению, таким образом передать сложные композиции очень сложно, поэтому векторная графика часто используется при создании иллюстраций, схем, логотипов и т.д. Векторные изображения можно увеличивать и уменьшать практически без серьёзной потери в качестве.
Перевод векторного изображения в растр может потребоваться для печати или выполнения каких-либо специфических операций, например, накладывать фильтры.
Как растрировать изображение в Adobe Photoshop
Выполнить растрирование означает перевести изображение из обычных геометрических фигур в пиксели. Процесс можно быстро выполнить в Фотошопе, особенно, если речь идёт о последних версиях программы.
- Итак, у нас есть какое-то векторное изображение. Вы могли нарисовать его самостоятельно в Фотошопе или экспортировать из других графических редакторов. Быстрый экспорт в Photoshop, например, поддерживает программа Adobe Illustrator.
- Выделите слой с векторным изображением в панели со слоями, что по умолчанию расположена в правом нижнем углу интерфейса программы.
- Кликните правой кнопкой мыши по этому слою. Из контекстного меню нажмите на пункт «Растрировать». В зависимости от типа векторного изображения, здесь может быть какая-нибудь приписка, например, «Растрировать текст».
В ходе этой статьи мы разобрались, на какие виды делиться изображение, чем они отличаются друг от друга, а также как переводить один тип в другой.
Читайте также: