?

Log in

No account? Create an account
Фотокузница [entries|archive|friends|userinfo]
Фотокузница

[ userinfo | информация о сообществе ]
[ archive | архив публикаций ]

Links
[Links:| Правила Теги Избранное Полезное Сокращения ]

Трансформация убивает! [Sep. 28th, 2010|12:17 pm]
Фотокузница

fotoforge

[dmitry_novak]
[Tags|]



    В один из тихих сентябрьских вечеров, какими полнится ранняя московская осень, сидел я за рюмкой чаю и с упоением наблюдал за работой подруги-дизайнера. Как водится, эскиз делался в фотошопе, слои мелькали там и тут, перо игриво порхало над планшетом, и, надо было отдать должное, понемногу складывалась неплохая композиция.
    Пока я в очередной раз ходил за кипятком, на сцене появилось новое действующее лицо, пусть и эпизодическое, но вполне себе самостоятельное. Маленький ёжик родом из клипартов сперва несмело, а потом уже более уверенно высунул нос из-под линейки и занял свое место. Но очень скоро хищное жало стрелки прицелилось, где-то слева щелкнуло Ctrl+T... и понеслась. Крутило зверька так и сяк, пока наконец он не занял положенное и гармоничное место. «Умер ёжик...» — подумал я. Вслух же задал вопрос:
    — Ты же потом, после утверждения макета заменишь ёжика из исходника, положив его в макет за одну трансформацию?
    Удивленный взгляд был мне ответом:
    — Зачем?
    — Ну так ведь при каждой трансформации ты теряешь качество. А тут у тебя не смарт-объект, которому пофиг, сколько раз его крутят и меняют размер (он все равно каждый раз трансформит из исходника).
    — Ммм... Но я ведь несильно трансформлю — так, немного туда, немного сюда, там на 10 процентов, тут на 10 градусов, разве из-за этого может что-то принципиально поменяться?

Это было началом долгой беседы.


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



Повернем изображение на 15 градусов.

На фрагменте Б зеленым контуром показано, как исходная форма буквы ложится на имеющуюся матрицу пикселей.
При повороте каждый пиксель оказывается на границе между двумя, и его приходится либо поместить на ту ячейку, на которую приходится бОльшая часть площади пикселя (и это нам даст изображение В), либо разделить между всеми ячейками (вариант Г). Поворот без интерполяции дает резкую в плане границ, но неприемлемую по содержанию картинку В.
И в том, и в другом случае теряется часть исходной формы. В картинке без интерполяции легкую рваность градиента еще можно простить (на выходе под web или при печати ее почти не будет заметно), то форму буквы трудно назвать приемлемой. Поэтому трансформация без интерполяции в графических редакторах не применяется, а в Фотошопе ее можно выбрать лишь опционально в диалоге Image Size (режим nearest neighbor).

В изображении с интерполяцией форма буквы читается легче, а градиент ровный и плавный. И именно этот алгоритм обработки используется в Фотошопе по умолчанию. Но совершенно очевидно, что при каждом его использовании детализация падает. Кроме того, отчетливо виден темный контур, который появляется из-за того, что, по всей вероятности, Фотошоп пытается компенсировать потерю резкости.
Давайте повернем изображение еще на 15 градусов, но уже против часовой стрелки, в исходную позицию (фрагмент Д). Если сравнить его с первоначальной картинкой, то видно, что мы потеряли половину детализации на 2-х простых операциях. А темные артефакты стали еще более заметны. Любые дальнейшие манипуляции еще более ухудшат изображение. На фрагменте Е я дополнительно повернул букву вместе с фоном на 45 градусов и вернул обратно — в результате катастрофически потерялась четкость контуров, а точка вообще перестала быть различима. А ведь здесь мы применили к исходнику всего 4 трансформации — на 15 градусов туда и обратно и на 45 градусов — тоже с возвратом в исходную позицию.

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

Посмотрим, как масштабирование туда и обратно проявляет себя на все том же изначально резком изображении.
Фрагмент Ж на той же иллюстрации получен уменьшением исходника на 10%. Эффект равносилен повороту — налицо потери резкости в сочетании с появляющимися ореолами от шарпа. Теперь увеличим изображение обратно, на 10% и увидим, что детализация потерялась еще сильнее (фрагмент З).
Многие считают, что можно безболезненно увеличить картинку и потом уменьшить ее до исходных размеров. Такое утверждение будет справедливо, если применяется масштабирование без интерполяции и в четное число раз, когда 1 пиксель превращается в 2, 4, 6 и т.д. Понятно, что простое умножение на два и последующее деление на два вернет нас к исходному результату. Но это лишь редкий частный случай, не имеющий никакого отношения к реальной жизни. При работе дизайнеру приходится менять размер слоя и всего макета совершенно произвольно, что производится внутри Фотошопа с использованием бикубической интерполяции. И на каждом шаге происходит потеря детализации и появляются артефакты.

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






Вот так чудовищно, почти до неузнаваемости искажается исходное изображение (вверху) после 360-кратного поворота на 1 градус.
Можно возразить, что это сугубо синтетический тест. Но давайте повернем изображение не 360 раз, а хотя бы 36 раз по 10 градусов — это будет на самом деле не такой большой цифрой для количества манипуляций, которые производит с отдельно взятым слоем среднестатистический дизайнер.




Если кому-то и этого покажется много, посмотрим на изображение всего лишь после поворота на 45 градусов и обратно:




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

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

Buy for 1 000 tokens
Buy promo for minimal price.

Comments:
Page 1 of 2
<<[1] [2] >>
[User Picture]From: plexip_88
2010-09-28 08:50 am (UTC)
Так Косенко уже вроде писал здеь на ту же самую тему, только там не было порхавших перьев и высовывающихся ежиков..
(Reply) (Thread)
[User Picture]From: mamiy
2010-09-28 09:05 am (UTC)
а я не читал

а это хоть и очевидно, но полезно обновить в мозгу

правда с байкой слегка перебор
(Reply) (Parent) (Thread)
[User Picture]From: master_nemo
2010-09-28 09:00 am (UTC)
>>Поэтому, опираясь на свой десятилетний опыт технического дизайнера

хм... на основании совершенно базовых знаний про растровое изображение всегда считал что это очевидно.

впрочем спасибо, иногда бывает и очевидное надо так красиво расписать.
(Reply) (Thread)
[User Picture]From: fenoborbital
2010-09-28 09:06 am (UTC)
+1
(Reply) (Parent) (Thread)
[User Picture]From: lesnoyskitalets
2010-09-28 09:09 am (UTC)
Наглядный пример! Спасибо!
(Reply) (Thread)
[User Picture]From: dr_sartorius
2010-09-28 09:09 am (UTC)
Оптимизирую: как ни крути - становится только хуже.
(Reply) (Thread)
From: alt_r_lj
2010-09-28 09:26 am (UTC)
Большое спасибо за статью. Просто, доступно, наглядно. Теперь буду иметь ввиду при работе с растром.
(Reply) (Thread)
[User Picture]From: geo_photo
2010-09-28 09:44 am (UTC)
Очень наглядно и доходчиво, спасибо за материал!
(Reply) (Thread)
[User Picture]From: scutfromhare
2010-09-28 09:52 am (UTC)
Ни хочу ни кого обидеть, но у нас в Алма-Ате похоже гордое звание дизайнера присваивает себе любой кто нарисовал хоть одну полосочку в кореле или хоть раз открыл фотошоп.
Грустно это.

Но среди этого болота есть и дествительно отличные специ, и очень приятно понимать, что некоторых из них знаешь :)
(Reply) (Thread)
[User Picture]From: modest_ossipoff
2010-09-28 09:52 am (UTC)
Хорошая статья, мучо респекто!
Одно небольшое добавление. Несколько версий назад в Шопе появился метод трансформации Warp, а начиная с CS5 — Puppet Warp. Оба они дают возможность более или менее свободно раскорячивать объект. Однако любое изменение формы какого-то куска потребует от Шопа достроить недостающие пикселы. Если объект не векторный (или не смарт с боо-о-о-ольшим запасом по разрешению), очень легко вылезти за пределы допустимой интерполяции и получить переход от сравнительно резких участков изображения, которые не трансформировались, к мутной размазне в зоне трансформации. Скажем, какой-нибудь большой боцманский загиб .)) с применением Puppet Warp'a может потребовать на каких-то участках интерполяционное увеличение раз этак в десять. Со всеми вытекающими.
(Reply) (Thread)
[User Picture]From: dmitry_novak
2010-09-28 10:03 am (UTC)
ну то, что сильное растягиваение ведет к сильной деградации - это-то как раз более очевидно и наглядно, чем небольшие потери при каждом повороте-масштабировании, которые, складываясь, приводят к плачевным результатам.
(Reply) (Parent) (Thread) (Expand)
[User Picture]From: crazymuzzle
2010-09-28 10:34 am (UTC)
да, давно пора начинать работать со смарт-объектами :)

А еще где-то читал, что если очень хочется увеличить изображение раза в 2, то нужно делать это постепенно, в несколько этапов по 10%.
и как-то совсем запутался, почему с технической стороны это должно быть лучше, нежели однократного увеличение картинки в 2 раза.
(Reply) (Thread)
[User Picture]From: dmitry_novak
2010-09-28 12:35 pm (UTC)
а ступенчатое увеличение никогда не будет лучше если по-честному. Просто у вас шарп внутренний будет применяться не один раз, а десять и типа будет резче контурно. На самом же деле детализация будет даже несколько меньше, чем при увеличении за один заход.
Юзайте бисплайн или фрактальную интерполяцию, вот там контурная резкость математически честная.
(Reply) (Parent) (Thread) (Expand)
[User Picture]From: zmeygor
2010-09-28 11:14 am (UTC)
Спасибо за иллюстрации. Качественно проблема очевидна, а вот насколько она серьёзна (количественно) - только через такие отличные картинки.
(Reply) (Thread)
[User Picture]From: michael_perlov
2010-09-28 11:36 am (UTC)
хорошо, спасибо!
(Reply) (Thread)
[User Picture]From: nasstep
2010-09-28 11:47 am (UTC)
Спасибо за статью. Мне это было понятно только интуитивно, а тут хоть обоснования появились. Особенно пример про 360 поворотов :)
(Reply) (Thread)
[User Picture]From: m1gel
2010-09-28 01:49 pm (UTC)
к слову, если меряться не градиентами, отрисованными линиями и прочей компьютерной графикой, а фотоизображением, то с поворотом на 45 градусов и обратно не всё так плохо, разницы особой не заметил
(Reply) (Thread)
[User Picture]From: dmitry_novak
2010-09-29 08:07 am (UTC)
для вас фрагмент портрета на моем примере не показателен? не видно, во что превращается фактура кожи, ресницы и т.д.?
(Reply) (Parent) (Thread) (Expand)
[User Picture]From: my_mriya
2010-09-28 01:55 pm (UTC)
Спасибо за статью. Полезные знания...
(Reply) (Thread)
From: gromushka.blogspot.com
2010-09-28 02:01 pm (UTC)
Даже как то не задумывался, спасибо.
(Reply) (Thread)
Page 1 of 2
<<[1] [2] >>