Три способа разглаживания пиксельных лесенок в Фотошопе - TurboComputer.ru
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд (пока оценок нет)
Загрузка...

Три способа разглаживания пиксельных лесенок в Фотошопе

Настройка выделения пикселей

На этой странице

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Перемещение, скрытие или инверсия выделенной области

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

Чтобы переместить саму выделенную область, а не ее границы, воспользуйтесь инструментом «Перемещение». См. раздел «Перемещение выделенной области».

Перемещение границ выделенной области

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

Управление перемещением выделенной области

  • Чтобы направление перемещения было кратно 45°, удерживайте нажатой клавишу «Shift» во время перемещения.
  • Чтобы перемещать выделенную область по одному пикселу, воспользуйтесь клавишами со стрелками.
  • Чтобы перемещать выделенную область по 10 пикселей, воспользуйтесь клавишами со стрелками, удерживая нажатой клавишу «Shift».

Отображение или скрытие краев выделенной области

Выполните одно из следующих действий.

  • Выберите меню «Просмотр» > «Вспомогательные элементы». С помощью этой команды можно показать или скрыть границы выделенной области, сетки, направляющие, целевые контуры, фрагменты, комментарии, границы слоев, счетчик и «быструю» направляющую.
  • Выберите меню «Просмотр» > «Вспомогательные элементы». Этот параметр позволяет отобразить (или скрыть) границы выделенной области, при этом действие производится только с текущей выделенной областью. Границы выделенной области появятся снова при создании другого выделения.

Выделение невыделенных частей изображения

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

Настройка выделенных областей вручную

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

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

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

Выберите параметр «Добавление к выделенной области» на панели параметров, а затем перемещайте курсор при нажатой кнопке мыши для добавления к выделенной области.

Удерживайте нажатой клавишу «Shift» и нажмите и удерживайте кнопку мыши для добавления к выделенной области.

При добавлении к выделенной области рядом с курсором появится знак плюса.

Вычитание из выделенной области

Выберите параметр «Вычитание из выделенной области» на панели параметров, а затем перемещайте курсор при нажатой кнопке мыши для вычитания из выделенной области.

Удерживайте нажатой клавишу «Alt» (Windows) или «Option» (Mac OS) и нажмите и удерживайте кнопку мыши для вычитания из выделенной области.

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

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

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

Для выделения пересечения выделенных областей удерживайте сочетание клавиш «Alt» и «Shift» (Windows) или «Option» и «Shift» (Mac OS) и, нажав и удерживая кнопку мыши, проведите указателем над исходной выделенной областью, создав новую выделенную область, пересечение с которой нужно получить.

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

Расширение или сжатие выделенной области на определенное число пикселов

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

Создание выделенной области рядом с границей выделенной области

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

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

Расширение выделенной области для включения областей с похожим цветом

Выполните одно из следующих действий.

  • Выберите меню «Выделение» > «Смежные пикселы» для включения в выделенную область всех смежных пикселов, которые попадают в диапазон допуска, установленный в параметрах инструмента «Волшебная палочка».
  • Выберите меню «Выделение» > «Подобные оттенки» для включения из изображения в выделенную область пикселов, необязательно смежных, попадающих в диапазон допуска.

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

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

Удаление изолированных пикселов из выделенных областей на основе цвета

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

Уточнение края выделенной области

Видеопособие: Идеальное выделение

Параметр «Уточнить край» улучшает качество краев выделенной области, позволяя вам с легкостью извлекать объекты. Параметр «Уточнить край» можно использовать также для улучшения свойств слоя-маски. (См. раздел Коррекция непрозрачности и краев маски.)

  • Щелкните «Уточнить край» на панели параметров или выберите «Выделение» > «Уточнить край» . Затем задайте значения для следующих параметров.

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

Обнаружение краев

Инструменты «Уточнить радиус» и «Стереть уточнение»

Эти инструменты позволяют точно откорректировать область границы, в которой выполняется уточнение краев. Чтобы быстро переключиться от одного инструмента к другому, используйте клавиши «Shift+E». Чтобы изменить размер кисти, используйте клавиши квадратных скобок.

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

Инструмент «Умный радиус»

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

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

Коррекция края

сокращает искривленные области («выпуклости и впадины») в границе выделенной области, создавая более плавные очертания.

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

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

Инструмент «Сместить край»

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

Вывод

Инструмент «Очистить цвета»

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

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

изменяет уровень очистки и замены кромки.

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

Смягчение краев выделенных областей

Сгладить острые края выделенной области можно при помощи сглаживания и растушевки.

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

Сглаживание доступно для инструментов «Лассо», «Прямолинейное лассо», «Магнитное лассо», «Овальная область» и «Волшебная палочка». (Выберите инструмент для отображения его панели параметров.)

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

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

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

Растушевка заметна только при перемещении, вырезании, вставке, копировании и заливке выделенной области.

Выделение пикселов при помощи сглаживания

Определение растушеванного края для инструмента выделения

Определение растушеванного края для существующей выделенной области

Маленькая область выделения, созданная с большим радиусом растушевки, может быть настолько расплывчатой, что ее края будут невидимы, и, таким образом, это не будет являться выделенной областью. При появлении сообщения «Ни один пиксел не выделен более чем на 50 %» нужно либо уменьшить радиус растушевки, либо увеличить размер выделенной области, либо нажать кнопку «ОК» для принятия маски с текущими настройками и создать выделенную область, в которой не будут видны края.

Удаление пикселов каймы из выделенной области

При перемещении или вставке сглаженной выделенной области некоторые окружающие границу выделения пикселы попадают в выделенную область. Это может привести к появлению каймы или ореола вокруг краев вставленной выделенной области. Группа команд «Слой» > «Обработка краев» позволяет редактировать нежелательные пикселы на краях.

Команда «Очистка цвета» заменяет цвета фона в пикселях каймы на цвет полностью выделенных близлежащих пикселей.

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

Читайте также:  Возвращаем старый интерфейс Mozilla Firefox с помощью Classic Theme Restorer

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

Также можно удалить ореол при помощи ползунков дополнительных параметров наложения диалогового окна «Стили слоя», которые позволяют удалить области из слоя или сделать их прозрачными. В этом случае можно сделать прозрачными черные или белые области. Щелкните ползунки при нажатой клавише «Alt» (Windows) или «Option» (Mac OS) для их разделения, разделение ползунков позволяет удалять ореол и оставлять сглаженные края.

Три способа разглаживания пиксельных лесенок в Фотошопе

В этом уроке обсудим несколько способов, как убрать пиксели в Фотошопе.

Сглаживание пикселей

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

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

После увеличения получаем отличный исходник для тренировок:

Способ 1: функция «Уточнить край»

Для использования данной функции сначала нужно выделить персонажа. В нашем случае отлично подойдет «Быстрое выделение».


Выделяем Мерлина. Для удобства можно увеличить масштаб при помощи клавиш CTRL и +.


Ищем кнопку с надписью «Уточнить край» в верхней части интерфейса.


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

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

  • Настраиваем следующие параметры:
    • Радиус должен быть примерно равен 1;
    • Параметр «Сгладить»60 единиц;
    • Контрастность поднимаем до 40 – 50%;
    • Смещаем край влево на 50 – 60%.

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

    В нижней части окна, в выпадающем списке, выбираем вывод на новый слой со слоем-маской, и нажимаем OK, применяя параметры функции.


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

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

    Способ 2: инструмент «Палец»

    Поработаем с результатами, полученными ранее.

      Создадим копию всех видимых слоев в палитре сочетанием клавиш CTRL+ALT+SHIFT+E. Активированным при этом должен быть самый верхний слой.

    Выбираем «Палец» на левой панели.


    Настройки оставляем без изменений, размер можно менять квадратными скобками.


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

    При масштабе 100% результат выглядит вполне достойно:

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

    Способ 3: «Перо»

    Об инструменте «Перо» на нашем сайте имеется неплохой урок.

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


    Читаем урок, и обводим нужный участок изображения.


    Кликаем ПКМ в любом месте холста, и выбираем пункт «Образовать выделенную область».


    После того, как появятся «марширующие муравьи», просто удаляем ненужный участок с «плохими» пикселями клавишей DELETE. В том случае, если был обведен весь объект, то выделение необходимо будет инвертировать (CTRL+SHIFT+I).

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

    Идеальные пиксели при повороте, вставке и смещении в Photoshop

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

    Идеальные пиксели при вращении

    Если вы не будете осторожны, вращение слоев в Photoshop’е может привести к смазыванию всех пикселей.
    При вращении слоя с помощью Free Transform (и некоторых других инструментов) ровно на 90 или 270 ° качество результата определяется размер слоя. Если слой имеет четную ширину и четную высоту, то все будет в порядке. Если он имеет нечетную ширину и нечетную высоту, то все также будет в порядке. Но если он имеет нечетную ширину и четную высоту или четную ширину и нечетную высоту, то вы увидите нечто похожее на результат ниже:

    В этом случае, произведение на 20 × 9 пикселей: четное на нечетное. Результаты для растровых слоев и векторных слоев разные, но оба они представляют собой непригодные результаты, потому что вращение не совпадает с точными границами пикселей.

    Как исправить?

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

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

    Легкий способ

    Изменение начала вращения на верхний левый (или любой другой угол) будет означать, что оно находится на границе пикселей, гарантируя превосходные результаты. Для этого нажмите на начальный угол после выбора инструмента Free Transform, но перед поворотом. Работает блестяще, и к тому же это самое простое решение.

    Растровые и векторные маски тоже страдают от этой проблемы, и поэтому о них тоже следует позаботиться. Но проблема затрагивает только вращающиеся слои, либо через инструмент » Free Transform » или «Transform» в меню Edit. Со вращением всего холста через Image → Image Rotation нет никаких проблем.

    Чтобы еще больше упростить процесс, существуют несколько Photoshop-экшны, которые обо всем позаботятся за вас.

    Идеальные пиксели при векторной вставке

    Если вы нарисовали пиксельный рисунок в Illustrator и вставили его в Photoshop как shape layer, вы могли заметить, что результат не совсем тот, что вы ожидали, то есть не совершенно четкое изображение, а скорее размытое пятно. Вот как это исправить.

    Ниже приведен рисунок в Illustrator: идеальной формы, привязанный к пиксельной сетке, и в том размере, в котором мы намерены использовать его в Photoshop.

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

    Что пошло не так?

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

    Как исправить?

    Наш тестовый рисунок 32 пикселя в ширину и 12 пикселей в высоту. Выделив область 32 × 12, мы сделаем так, что рисунок вставится именно в это место. Это срабатывает каждый раз.

    Легкий способ

    Размер выделения не обязательно должен совпадать с размером рисунка. В нашем случае выделение области 2 × 2-пикселя сработает так же, потому что центр области выделения с четной высотой и шириной и центр содержимого буфера обмена с четной высотой и шириной совпадут, чего мы и добиваемся. Если рисунок будет нечетным в ширину и высоту, то нужно выделить область 1 × 1.

    Если вы не хотите утруждать себя измерением параметров рисунка, то для подборки правильного размера выделенной области можно нарисовать область 2 × 2-пикселя и вставить. Если изображение будет размыто только по оси х, нарисовать область 1 × 2 и вставить снова. Если изображение размыто только по оси у, нарисовать область 2 × 1 и вставить. Если изображение размыто по обеим осям, нарисовать область 1 × 1 и вставить.
    Это может показаться сложным, но на практике это очень быстро, вам придется только два раза вставить рисунок, чтобы получить резкие векторные контуры из Illustrator.

    Смарт-объекты

    Вставка элементов как смарт-объекты не тут может не подойти(по крайней мере, не в Photoshop CS5). Можно использовать Shape layers: этот способ позволяет лучше контролировать и редактировать.

    Идеальные пиксели при смещении

    При смещении векторных точек, Photoshop ведет себя очень странно, в зависимости от масштаба. При 100% масштабе, если смещени просиходит при помощи стрелок клавиатуры, векторные точки перемещаются ровно на 1 пиксель. При 200% — половину пикселя. При 300% — на треть пикселя.
    Такое поведение выглядит как специальная функция, но это не всегда удобно. Обычно я хочу сместить на пиксель. Вот как можно смещать всегда на 1px без работы с масштабом изображения 100%.
    Откройте документ, а затем создать второе окно, выбрав Window → Arrange → New Window. Затем вы можете изменить размер нового окна и сместить его в сторону.

    Изменяйте изображение в другом окне, как обычно, насколько вы хотите. Теперь вы можете нажать Ctrl + `, чтобы переключиться обратно в окно с масштабом 100%, сместить изображение, используя стрелки, и нажать Ctrl +`, чтобы вернуться обратно. В другом окне с масштабом 100%, смещение будет двигать выбранные точки ровно на 1 пиксель.

    Обратите внимание, что зажимая Shift при использовании клавиш со стрелками для смещения, вы получите сдвиг на 10 пикселей, независимо от масштаба. Кроме того, перетаскивание точки с помощью мышки будет привязано к пикселям в большинстве случаев — большинстве, но не всех.
    Хотя эта техника не является идеальной, она помогает избежать проблем при редактировании векторных контуров в Photoshop. Или, может быть, это просто еще одна причина для того, чтобы сначала рисовать сложные формы в Illustrator, а затем вставлять их как shape layers?

    Позаботьтесь о пикселях

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

    Хотите узнать больше о какой-то конкретной технике или функции Photoshop? Напишите об этом в комментариях.

    Сглаживаем края в Фотошопе после вырезки

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

    Как сгладить края в Photoshop

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

    Вариант 1: Инструмент «Уточнить край»

    Распространённый вариант сглаживания выделения. Инструкция по его применению выглядит так:

    1. Выделите и вырежьте объект, с которым будете работать далее. Рекомендуется проводить выделение максимально аккуратно, чтобы не вырезать чего-нибудь лишнего или не допустить проникновения большого количества ненужных деталей. Подробно останавливаться на вырезке объектов не будем, так как это уже тема отдельной статьи.
    2. В итоге у вас должен быть выделенный объект на отдельном слое. Сделайте повторное выделение этого объекта. Это очень просто. Нужно будет нажать по слою с зажатой клавишей Ctrl.

    У вас появится точное выделение по слою. Теперь в левой части программы выберите инструмент «Выделение». Там можно выбрать любой из доступных. Это не имеет весомого значения.

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

  • Откроется инструмент уточнения края. Рассмотрим его по элементам:
    • В блоке «Режим просмотра» вы можете выбрать, что будет показано – радиус или оригинал изображения;
    • «Обнаружение краёв». Этот блок отвечает за искусственную корректировку краёв. Его лучше настраивать непосредственно перед вырезкой изображения. В данном случае он практически бесполезен;
    • Параметр «Сглаживание» позволяет смягчить углы после выделения. Лучше всего справляется с острыми пиками и пиксельными лесенками, которые часто образуются при выделении;
    • Параметр «Растушёвка» создаст полупрозрачную границу у объекта. Чем выше вы значение установите, тем более видимой будет граница;
    • Параметр «Сместить край» отвечает за перемещение края в ту или иную сторону. С его помощью можно быстро удалить лишние элементы, попавшие в выделение.

  • Установите эти параметры на приемлемые для вас значения. Все изменения в выделении вы можете видеть в режиме реального времени без необходимости в применении этих параметров.
  • Получив нужный результат, выберите в параметре «Вывод», как должно отобразиться выделение в конечном итоге. Вы можете отобразить его отдельным выделением, маской, отдельным слоем. Нажмите «Ок» для окончательно применения изменений.
  • Если вы решили вывести изменения в виде выделения, то вам придётся сделать инвертирование выделения с помощью сочетания клавиш Ctrl+Shift+I и нажать Delete для удаление лишних элементов.
  • Выделение можно убрать с помощью сочетания Ctrl+D.
  • С помощью этого инструмента можно быстро выполнить сглаживание всех краёв у объекта. Напоследок хотелось бы написать несколько примечаний по работе с этим инструментом:

    • Не нужно устанавливать слишком большой размер для растушёвки изображения при работе с людьми. Лучше всего остановиться на параметрах, не превышающих 5 пикселей, хотя много зависит от размера изображения и выделяемой области;
    • Параметром «Сглаживание» тоже не рекомендуется злоупотреблять, так как таким образом есть риск потерять мелкие детали;
    • «Смещение края» лучше всего использовать, если на изображении присутствуют мелкие детали, которые не должны были попасть в выделение. Если этих деталей слишком много, то лучше всего выполнить выделение и вырезку заново.

    Вариант 2: Инструмент «Размытие»

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

    1. Сделайте дубликат слоя с вырезкой с помощью сочетания клавиш Ctrl+J. Это нужно для того случая, если в ходе сглаживания краёв вы допустите серьёзную ошибку. Первоначальный слой можно сделать невидимым, кликнув на иконку в виде глаза напротив его названия.
    2. Выберите продублированный недавно слой в соответствующей панели. Вся последующая работа будет вестись с ним.
    3. Теперь в левой панели с инструментами нужно будет выбрать «Размытие». Он отмечен в виде капли.
    4. Настройте кисть размытия с помощью панели в верхней части окна. Здесь можно выбрать тип кисти (по умолчанию стоит «Мягкая кругла», которую мы рекомендуем использовать), установить интенсивность от 1 до 100% и размер самой кисти.

  • Теперь пройдите этой кистью по наиболее резким краям. Можно пройтись несколько раз, чтобы увеличить эффект, но лучше сильно не усердствовать с этим, так как в итоге можно получить слишком размытые края.
  • Завершив работу с изображением, выполните его сохранение. Для этого нажмите на «Файл» и там перейдите в «Сохранить как».
  • С помощью рассмотренных инструментов вы можете без проблем исправить слишком резкое выделение объектов. Однако лучше изначально сделать корректное выделение, чтобы к описанным вариантам приходилось прибегать по минимуму.

    Векторные и пиксельные формы в Photoshop

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

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

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

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

    Сравнение двух типов фигур

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


    Векторная форма слева и пиксельное изображение справа.

    Если мы посмотрим на панель слоёв, то увидим каждую фигуру, расположенную на своем слое. Форма на основе пикселей находится на верхнем слое (для наглядности я переименовал этот слой в “пиксель”), под ним расположен слой с векторной фигурой (я переименовал слой в “вектор”)


    Слои с векторной и пиксельной формами на панели слоёв

    Вид миниатюр фигур на панели слоёв

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

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


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

    Масштабирование векторной фигуры

    Как я уже упоминал, оба круга на данный момент выглядят одинаково, но давайте посмотрим, что произойдёт, если мы будем их масштабировать. Я начну с векторной фигуры. Во-первых, мне нужно выбрать этот слой, поэтому я кликну по нему в панели слоёв.
    Затем нажимаю комбинацию клавиш Ctrl+T, что запускает команду “Свободное трансформирование” (Free Transform), после чего вокруг объекта появляется рамка транс формирования.


    Рамка свободного трансформирования вокруг векторной формы

    Чтобы точно сравнить результаты масштабирования, необходимо увеличивать/уменьшать фигуры со строго одинаковым масштабом, поэтому для трансформации я не буду использовать маркеры на рамке, а введу заданное значение в поля ввода ширины и высоты в панели параметров. Я введу 10%:


    Установка ширины и высоты векторной фигуры до 10%.

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


    Векторная форма теперь имеет размер 10% от первоначального.

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

    Так как вначале я уменьшил круг я до 10%, чтобы увеличить его обратно к исходному размеру, следует установить значение Ширины и Высоты в панели параметров на 1000%:


    Установка ширины и высоты векторной формы на 1000%.

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


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

    Масштабирование пиксельной фигуры

    Давайте попробуем сделать то же самое с кругом – пиксельной фигурой справа. Во-первых, я выберу его, нажав на слой “пиксель” в панели слоёв. Нажимаю комбинацию клавиш Ctrl+T для активации “Свободного трансформирования”.
    Так же, как я сделал ранее с векторной фигурой, я уменьшу круг до размера 10% от исходного:


    Пиксельная фигура после масштабирования её до 10%.

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

    Но теперь проведём более серьёзный тест. Что произойдет, если я масштабирую пиксельный круг обратно до исходного размера? Давайте попробуем. Я снова нажимаю Ctrl+T на клавиатуре для запуска команды “Свободное трансформирование” (Free Transform) и ввожу в поля ввода Ширины и Высоты на панели параметров значение 1000%, затем нажимаю Enter, чтобы принять изменения.

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


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

    Давайте увеличим полученную картинку для более тщательного рассмотрения.

    Причина низкого качества края пиксельного круга кроется в том, что, когда я масштабирую его до 10% от кго первоначального размера, Photoshop отбросил 90% пикселей, которые образовывали первоначальное изображение.
    Это было бы прекрасно, если бы мне не нужно былои масштабировать изображение обратно до первоначального размера. Photoshop не может волшебным образом воссоздать утраченные пиксели, поэтому, когда я масштабируется изображение в сторону увеличения, всё, что Photoshop может сделать, это взять имеющиеся пиксели и создать на их основе недостающие. Вот почему вдоль края пиксельной формы получается эффект размытой лесенки. Чем больше мы будем увеличивать изображение, тем больший эффект получится.
    Векторные формы лишены этого недостатка. Они состоят из математических кривых, образующих области, заполненные цветом. И как бы мы не увеличивали/уменьшали изображение, кривая всегда остаётся кривой с чёткими краями.


    Крупный план краёв векторной и пиксельной форм.

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

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

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

    Дизайн сайта с эффектом пикселизации в фотошопе

    Ресурсы

    Конечный результат:

    Шаг 1

    Создайте новый документ в Фотошопе (Ctrl + N) размером 1000х1000 пикселей. Создайте направляющие через главное меню Просмотр – Новая направляющая (View – New Guide): две вертикальные на отметках 50 и 950 пикселей и одну горизонтальную на отметке 500 пикселей.

    Шаг 2

    Создайте новый слой (Ctrl + Shift + N) и назовите его “header”. Инструментом Прямоугольная область (Rectangular Marquee Tool) (M) сделайте выделение верхних 500 пикселей холста. Выберите инструмент Градиент (Gradient Tool) (G), в настройках инструмента установите Стиль (Style) – Линейный (Linear), Цвет – от #ebeaeb к #f5f5f5. Сделайте заливку выделения, как показано ниже. Затем уберите выделение (Ctrl + D).


    Создайте новый слой (Ctrl + Shift + N) и назовите его “dark footer”. Сделайте выделение нижних 500 пикселей холста и залейте его цветом # 1c1c1c.

    Шаг 3

    Создайте новый слой (Ctrl + Shift + N) и назовите его “clouds pixelated”. Установите цвета по умолчанию (D). Сделайте выделение слоя “header” (удерживая Ctrl, кликните на иконке слоя в палитре слоёв). Находясь на слое “clouds pixilated”, перейдите в меню Фильтр – Рендерниг – Облака (Filter – Render – Clouds).


    Понизьте Непрозрачность (Opacity) слоя “clouds pixelated” – 20%.


    Теперь пройдите в меню Фильтр – Оформление – Мозаика (Filter – Pixelate – Mosaic) и введите значение Размера ячейки (Cell Size) 25 квадратов. Нажмите ОК и у Вас будет эффект пикселизации на шапке сайта.

    Шаг 4

    Выберите инструмент Лассо (Lasso Tool) (L) и в настройках сверху установите значение параметра Растушевка (Feather) – 50 пикселей. Сделайте выделение правой нижней части холста. Примените фильтр Облака (Фильтр – Рендерниг – Облака) (Filter – Render – Clouds) и повторите шаг 3 для создания эффекта пикселизации в футере.

    Шаг 5

    Теперь нам понадобится набор кистей облаков, предоставленный в начале урока.
    Создайте новый слой (Ctrl +Shift + N) и назовите его “clouds”. Выберите инструмент Кисть (Brush Tool) (B), загрузите кисти облаков и одной из них нарисуйте облака в области шапки сайта.


    Понизьте Непрозрачность (Opacity) слоя до 20%.

    Шаг 6

    Откройте фотографию девушки-танцора. Любым способом извлеките её из фона и вставьте в наш документ.
    Думаю, изучив наши прошлые уроки фотошопа это не станет для вас сложным, как например расплачиваться за ипотечный кредит на ремонт квартиры и дачи.
    Можно использовать метод извлечения при помощи инструмента Перо (Pen Tool) (P). Обрисуйте девушку этим инструментом в режиме Контуров (Paths). Закройте контур и преобразуйте его в выделение (Ctrl + Enter). Теперь выделение можно перенести в основной документ при помощи инструмента Move Tool (V), либо скопировать (Ctrl + C) и вставить (Ctrl + V).
    Если фон фотографии девушки белый, то используйте инструмент Волшебная палочка (Magic Wand Tool) (W). Кликните на фоне, чтобы его выделить. Потом инвертируйте выделение (Ctrl + Shift + I) и можно будет перетаскивать девушку в основной документ.
    В основном документе расположите её, как показано ниже.


    Сделайте копию слоя с девушкой (Ctrl + J) и расположите её под оригиналом. Инструментом Свободное трансформирование (Ctrl + T) уменьшите размер нижней копии и примените фильтр Мозаика (Фильтр – Оформление – Мозаика) (Filter – Pixelate – Mosaic).


    Понизьте Непрозрачность (Opacity) нижнего слоя с девушкой до 35%.

    Шаг 7

    Нужно сделать так, чтобы девушка сильно выделялась. Создайте новый слой под слоем с девушкой и назовите его “highlight”. Выберите инструмент Градиент (Gradient Tool) (G): Стиль (Style) – Радиальный (Radial), Цвет – от белого к прозрачному. Сделайте заливку, как показывают стрелки на изображении ниже.

    Шаг 8

    В верхней левой части холста напишите название сайта при помощи инструмента Горизонтальный текст (Horizontal Type Tool) (T) и направляющих. Настройки шрифта:

    Шрифт (Font Face): St Atmos Free
    Размер (Size): 72pt
    Цвет (Color): #000000
    Кернинг (Kerning): 0
    Стиль (Styling): Normal


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

    Внутренняя тень (Inner Shadow):

    Режим наложения (Blend Mode): Умножение (Multiply)
    Цвет (Color): #000000
    Непрозрачность (Opacity): 50%
    Угол (Angle): 120
    Смещение (Distance): 1px
    Стягивание (Choke): 0%
    Размер (Size): 1px

    Наложение градиента (Gradient Overlay):

    Режим наложения (Blend Mode): Нормальный (Normal)
    Непрозрачность (Opacity): 100%
    Градиент (Gradient): от #000000 к #444444


    Результат:

    Шаг 9

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

    Шрифт (Font Face): Georgia
    Размер (Size): 18pt
    Кернинг (Kerning): 50
    Цвет (Color): #000000

    Шрифт (Font Face): Georgia
    Размер (Size): 36pt
    Кернинг (Kerning): 50
    Цвет (Color): #515151

    Шрифт (Font Face): Georgia
    Размер (Size): 18pt
    Кернинг (Kerning): 0
    Цвет (Color): #505050

    Шаг 10

    Теперь добавим кнопку с надписью “want to work with me?”. Для этого инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) (U) создайте фигуру с радиусом 35 пикселей. Выберите инструмент Градиент (Gradient Tool) (G): Стиль (Style) – Линейный (Linear) и сделайте заливку прямоугольника градиентом от #24a9da к # 00729d. Потом текстовым инструментом напишите нужную фразу.


    Сделайте выделение слоя с прямоугольником (удерживая Ctrl, кликните на иконке слоя в палитре слоёв). Создайте новый слой (Ctrl + Shift + N) и назовите его “pixels button”.
    Повторите процесс создания эффекта пикселизации для кнопки: сначала создайте облака и потом примените фильтр мозаики. Затем установите Режим наложения (Blending Mode) на Перекрытие (Overlay).

    Шаг 11

    Создайте новый слой (Ctrl + Shift + N) и назовите его “arrow”. Инструментом Лассо (Lasso Tool) (L) создайте треугольное выделение в нижней части шапки сайта и залейте его тёмно-серым цветом.

    Шаг 12

    Сейчас мы создадим текст в стиле водяного знака. Над футером напишите текст.
    Параметры шрифта:

    Шрифт (Font Face): Georgia
    Размер (Size): 60pt
    Кернинг (Kerning): 50
    Цвет (Color): #313131

    Шаг 13

    Используя направляющие, добавьте три небольших изображения (примеры работ).

    Шаг 14

    Под каждым изображением напишите текст (подпишите примеры работ). Потом при помощи инструмента Линия (Line Tool) (L) добавьте 1-пиксельную горизонтальную линию в нижней части футера и под ней напишите текст о правах.


    Ищите еще уроки фотошопа cs5 на нашем сайте.

    Ссылка на основную публикацию
    Adblock
    detector