В этом первом уроке из нашей серии, посвященном рисованию и работе с фигурами в Photoshop CS6, мы кратко рассмотрим важное различие между двумя основными типами фигур, которые мы можем нарисовать - векторные фигуры и формы пикселей .
Adobe Photoshop хорошо известен как пиксельный редактор изображений, используемый фотографами и другими специалистами по обработке изображений для ретуширования фотографий, восстановления и создания композиций. Но это также мощная программа векторного рисования, к которой веб-дизайнеры, графические дизайнеры и другие художники обращаются для создания макетов страниц, дизайна пользовательского интерфейса и других векторных иллюстраций.
Что значит «на основе вектора»? Ну, в отличие от цифровых изображений, которые состоят из (обычно) миллионов крошечных квадратов, известных как пиксели, векторные фигуры создаются из математических точек, соединенных вместе линиями и кривыми для создания различных форм. Поскольку они основаны на математике, а не на пикселях, векторные фигуры чрезвычайно гибки и не страдают от тех же ограничений, что и пиксели. Мы можем рисовать векторные фигуры в любом размере, который нам нужен, и независимо от того, сколько мы их редактируем и масштабируем, или какого размера мы их печатаем, они всегда остаются четкими и четкими! Прежде чем мы узнаем подробности о том, как рисовать векторные фигуры в Photoshop, и о том, как мы можем с ними работать, давайте подробнее рассмотрим этот важный способ отличия векторных фигур от пиксельных. И почему, когда предоставляется выбор между двумя, векторные фигуры, как правило, являются лучшим вариантом.
Это руководство предназначено для пользователей Photoshop CS6. Версия Photoshop CC также доступна для подписчиков Adobe Creative Cloud.
Сказка о двух формах
Поскольку в следующем уроке я расскажу обо всем, что нам нужно знать о рисовании векторных фигур, я сэкономлю немного времени, начав с документа, который я уже создал. Здесь мы видим простой документ, содержащий то, что выглядит как две одинаковые фигуры. Хотя в данный момент они выглядят одинаково, на самом деле они очень разные. Форма слева является векторной, а справа - с пикселями:
Векторная форма слева и пиксель справа.
Если мы посмотрим на мою панель «Слои», то увидим, что каждая фигура сидит на своем собственном слое. Я пошел дальше и переименовал слои, чтобы было проще. Пиксельная фигура находится в верхнем слое «Пиксельная форма», а векторная фигура - в умно названном слое «Векторная форма» под ним:
Панель «Слои», отображающая векторную и пиксельную формы на отдельных слоях.
Пятнистый слой формы
Даже если бы я не переименовал их, все равно можно было бы легко определить, какой слой содержит векторную форму, и найти маленькую иконку в правом нижнем углу миниатюры предварительного просмотра слоя. Этот значок говорит нам, что это слой Shape, а не обычный слой пикселей:
Слои фигур легко определяются по маленькому значку в правом нижнем углу эскиза предварительного просмотра.
Масштабирование векторной фигуры
Как я уже говорил, обе фигуры на данный момент выглядят одинаково, но давайте посмотрим, что произойдет, когда мы их масштабируем. Я начну с векторной формы. Сначала мне нужно выбрать его, поэтому я нажму на слой «Векторная фигура» на панели «Слои»:
Выбор формы вектора.
Чтобы масштабировать векторную форму, я зайду в меню « Правка» в строке меню в верхней части экрана и выберу « Свободный путь преобразования» :
Собираемся Править> Свободный Путь Преобразования.
Это помещает поле Free Transform и обрабатывает векторную форму слева:
Поле «Свободное преобразование» появляется вокруг векторной фигуры.
Я хочу убедиться, что масштабирую обе фигуры до одинакового размера, поэтому вместо того, чтобы перетаскивать маркеры Free Transform вручную, я поднимусь на панель параметров вдоль верхней части экрана и изменю ширину ( W ) и высоту. ( Н ) значения формы до 10%:
Установка ширины и высоты векторной фигуры на 10%.
Я нажму Enter (Win) / Return (Mac) на моей клавиатуре, чтобы принять новый размер, и теперь векторная форма слева намного меньше:
Векторная форма теперь составляет 10% от размера пиксельной формы.
Давайте посмотрим, что произойдет, если я уменьшу векторную фигуру до ее первоначального размера. Вместо того, чтобы вернуться в меню « Правка» в верхней части экрана и выбрать « Свободный путь преобразования», на этот раз я буду использовать более быстрое сочетание клавиш Ctrl + T (Win) / Command + T (Mac). Это помещает тот же блок Free Transform и обрабатывает векторную фигуру:
Нажмите Ctrl + T (Победа) / Command + T (Mac), чтобы быстро выбрать Free Transform Path.
Поскольку я уменьшил форму, уменьшив ее до 10%, я увеличу ее до первоначального размера, установив для значений ширины и высоты на панели параметров значение 1000% :
Установка ширины и высоты векторной фигуры на 1000%.
Я снова нажму Enter (Win) / Return (Mac) на моей клавиатуре, чтобы принять его, и теперь векторная форма вернется к своему первоначальному размеру. Обратите внимание, что, хотя я уменьшил его, а затем увеличил, векторная форма выглядит хорошо, как новая. Его края остаются такими же четкими и острыми, как и изначально:
Векторная форма слева сохраняет четкие острые края даже после масштабирования.
Плагин шорткодов, действий и фильтров: ошибка в шорткоде (ads-basics-middle)
Масштабирование Пиксельной Формы
Давайте попробуем то же самое с формой пикселя справа. Сначала я выберу его, нажав на слой «Pixel shape» на панели «Слои»:
Выбор формы пикселя.
С выбранным слоем формы пикселя, я зайду в меню Edit в верхней части экрана и выберу Free Transform:
Собираемся Правка> Свободное Преобразование.
Free Transform vs Free Transform Path
Обратите внимание, что на этот раз команда называется Free Transform, а не Free Transform Path . Мы рассмотрим пути в другом уроке, но, по сути, векторная форма состоит из двух частей; основной контур формы, известный как контур, и цвет, которым контур (контур) заполнен. Когда мы редактируем или масштабируем векторную фигуру, мы действительно редактируем и масштабируем контур контура. Вот почему, когда у меня был выбран слой с векторной формой, команда называлась Free Transform Path. Теперь, когда у меня выбран нормальный слой пикселей, мы редактируем пиксели, а не пути, и поэтому название команды изменилось на «Простое преобразование». Опять же, мы рассмотрим пути более подробно позже.
Это помещает поле Free Transform вокруг формы пикселя справа:
Поле «Свободное преобразование» появляется вокруг формы пикселя.
Как и в случае с векторной формой, я уменьшу форму пикселя, установив для параметра « Ширина» и « Высота» значение 10% на панели параметров:
Установка ширины и высоты формы пикселя на 10%.
Я нажму Enter (Win) / Return (Mac) на своей клавиатуре, чтобы принять его, и теперь форма пикселя намного меньше. Все идет нормально. Даже после уменьшения формы пикселя до 10% он выглядит таким же резким, как и изначально, и мы до сих пор не увидели никакой разницы между векторной формой и формой пикселя:
Форма пикселя после масштабирования до 10%.
Но теперь настоящее испытание. Что произойдет, когда я уменьшу форму пикселя до ее первоначального размера? Я нажму Ctrl + T (Победа) / Command + T (Mac) на своей клавиатуре, чтобы быстро выбрать команду « Свободное преобразование», и, чтобы снова масштабировать форму пикселя, я установлю ширину и высоту на панели параметров, чтобы 1000% :
Масштабирование формы пикселя до исходного размера.
Я нажму Enter (Win) / Return (Mac), чтобы принять его и закрыть из команды Free Transform. И теперь разница между векторными и пиксельными формами становится очевидной. Несмотря на то, что я масштабировал обе фигуры на одинаковую величину, и обе фигуры сохраняли свои четкие края при уменьшении, форма пикселя не выдерживала масштабирования вверх. Его когда-то острые края теперь кажутся мягкими, размытыми и блочными:
Векторная форма сохранилась нетронутой после увеличения. Форма пикселя? Не так много.
Давайте увеличим масштаб, чтобы рассмотреть поближе. Причина, по которой края формы пикселя теперь выглядят намного хуже, заключается в том, что когда я уменьшил ее до 10% от ее первоначального размера, Photoshop пришлось отбросить 90% пикселей, составляющих исходную форму. Это было бы хорошо, если бы мне не нужно было увеличивать масштаб. Photoshop не может волшебным образом воссоздать пиксели, поэтому, когда я увеличил его масштаб, все, что мог сделать Photoshop, это взял оставшиеся пиксели и увеличил их. Вот почему мы можем видеть эффект ступеньки по краю фигуры. Это края отдельных пикселей. Они выглядят мягкими и размытыми, потому что именно это и происходит с пикселями, когда мы их увеличиваем. Чем больше мы их увеличиваем, тем мягче они становятся. Векторные фигуры, с другой стороны, не имеют этой проблемы. Это просто точки, соединенные линиями и кривыми, и мы можем изменить их размер так, как нам хочется, без потери качества:
Крупный план краев векторной и пиксельной формы.
Как мы видели в этом уроке, векторные фигуры и формы пикселей могут выглядеть одинаково при первом их рисовании, и оба выглядят одинаково хорошо при уменьшении до меньших размеров. Но когда нам нужно масштабировать их больше, векторные фигуры буквально имеют преимущество. Это верно не только при просмотре их на экране, но и при печати. Точно так же, как цифровые фотографии, форма, нарисованная пикселями, зависит от разрешения, то есть ее можно напечатать только настолько большим, прежде чем она начнет выглядеть мягкой и тусклой, как мы видели в приведенном выше примере. Векторная форма, с другой стороны, не зависит от разрешения . Он может быть напечатан в любом размере, даже таком как рекламный щит, и всегда будет выглядеть свежим, чистым и хорошим, как новый.
Куда пойти дальше …
Векторные фигуры также имеют другие преимущества, которые делают их гораздо более гибкими для работы, чем пиксели, но прежде чем мы перейдем слишком далеко вперед, давайте научимся рисовать векторные фигуры в Photoshop CS6! Посетите наш раздел Основы Photoshop, чтобы узнать больше о Photoshop!