2 заметки с тегом

photoshop

Экструзия и псевдообъем в Иллюстраторе

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

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

В фотошопе экструзия делается быстро и легко:

Сверху лежит зеленый шейп, а под ним размещается такой же шейп с эффектом Bevel&Emboss:

Настройки эффекта фактически дефолтные.

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

Количество коричневого шейпа определяет толщину среза.

Очень удобно также менять быстро освещение: заходите в Layer → Layer Style → Global Light. Но здесь подразумевается, что изначально в настройках Bevel&Emboss галочка Use Global Lights была включена.

Хоп:

Далее можно на папку «пирога» накладывать Noise, Texture и другие любимые эффекты на свой вкус. Недостаток этого метода в фотошопе станет ясен позже, когда я покажу, как добиться такого же эффекта в Иллюстраторе.

* * *
В Иллюстаторе, к сожалению, не предусмотрен Bevel&Emboss. Зато это можно обойти через палитру Appearance. Тот же шейп получает собтвенные дубликаты заливки со смещением и применением Soft Light (для бликов) и Multiply (для теней). На картинке показан единичный шейп, укрупнение фрагмента, состав палитры Appearance при выделенном шейпе, окно настроек эффекта Transform и результат.

Результат представляет собой простую бленду нижнего и верхнего шейпа.

На заметку. Через палитру Appearance можно накладывать доступные эффекты в любом количестве к любому объекту (заливке или контуру).

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

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

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

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

* * *
В программе Affinity Designer можно спокойно применить Bevel&Emboss к вектору, но ребята пока не сделали функцию бленды (клятвенно обещают).

* * *
Вместо приведенного метода можно было бы использовать в Иллюстраторе функцию 3D. У нее есть существенные недостатки:
— невозможность менять нижнюю экструзию
— нельзя гибко настроить цвет среза
— нет выдавливания с сохранением формы лицевой грани (только изометрия или перспектива с двумя точками)
— отвратительный комплект кривых после Expand Appearance

Достоинства:
— множество источников света
— относительно простая настройка
— возможность натянуть графику на объем (это самое ценное)

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

Пересчет графики

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

Мелкие картинки (до 300 px по широкой стороне)

Попытка ретуши изображения в предполагаемом финальном размере является грубой ошибкой. Нужно работать в масштабе 200–300%. Если размер публикуемой картинки предполагается 200 px, то исходник должен быть не меньше 400 px. Часто и этого недостаточно, особенно при ручной ретуши.

Для примера я взял изображение с исходным размером 1920 px по ширине. Мне нужно получить вкусную и не тяжелую картинку для публикации на сайте. Сперва я попробовал уменьшить размер с включенным сэмплингом Bicubic Sharpen:

Пишут, что он хорош при уменьшении картинки. Это не так. Вот результат:

Картинка потеряла контраст в деталях

Далее попробуем уменьшить через Bicubic Smoother, а после применим эффект Smart Sharpen:

Стало лучше, но появился неприятный звенящий эффект. Я всегда использую следующие настройки для шарпа:

После чего применяю команду Fade ⌘+⇧+F.

Разумнее было бы откатиться на несколько шагов назад и вместо Bicubic Smoother применить Bicubic (smooth gradients). Он правильнее сэмплирует переходы в светотени. Затем применить фильтр Sharpen, Fade.

Контраст по-прежнему еще нуждается в доработке. Я применяю кривую и по темным участкам прохожусь кисточкой Sharpen:

Теперь картинка стала насыщенной и сохранились детали. Уровень резкости — дело вкуса.

Предлагаю сравнить все три изображения в одной сплошной линии:

Осталось правильно сохранить для публикации в вебе. Изображение должно быть в профиле sRGB. Заходим в Save for web, выставляем качество на 60%, убираем всю метадату, ставим Use Document Profile и смотрим на размер — 40 кб. Можно сделать меньше, понизив до 50%. Так как изображение изначально шумное по содержанию, то jpg-сжатие, повышенное на 10%, не сильно ему повредит, а размер файла упадет до 30 кб.

60%
50%

Сэмплирование границ

Вернемся к важности работы с исходником в 200%.
Чтобы показать разницу, один и тот же текст я положил на уменьшенную и исходную картинки. Второй вариант уменьшил и пересэмплировал описанным выше методом:

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

Вблизи разница видна лучше:

Одну и ту же картинку со звездой и текстом я сохранил двумя разными способами:

  1. Исходник размером 200 px по ширине:
  1. Вторую картинку я сохранил с размером в 600 px, пересэмплировав с Bicubic Sharper до 200 px через Image Resize:
  • Затем локально прошелся кисточкой Sharpen по краям звезды:

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

Вывод

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

Ссылки по теме:
работа с изображениями в «Техногрете» (методы уменьшения размера картинки без потери качества)
подробное объяснение методов персчета изображения (pdf)