You are viewing [info]garyba1di's journal

Кружок "Умелые Ноги" - Photoshop Triangulation Tutorial [entries|archive|friends|userinfo]
garyba1di

[ website | My Website ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Links
[Links:| Портфель Поток сознания ]

Photoshop Triangulation Tutorial [Nov. 28th, 2010|02:10 am]
Previous Entry Add to Memories Share Next Entry
В рамках рубрики "зацените мою новую аватарочку для вконтактика", смотрите-ка, что я сделал. Рядом положу исходник, для наглядности:


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

Ладно, я соврал, все эти приспособы мы оставим для Очумелых Ручек, а нам понадобятся лишь фотошоп и руки человеческие 2 штуки.
Значит, все началось около пары месяцев назад, когда мне на глаза попались работы некоего Jonathan Puckey, вот пара его наиболее удачных работ:


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

 

То есть все предельно просто: вы выделяете треугольник из исходного изображения, вырезаете/копируете его на новый слой, не забываете закрепить прозрачные пиксели кнопочкой  и применяете Gaussian Blur  с достаточно большой степенью размытия. Под словом "достаточно" нужно понимать такое размытие, чтобы не было видно никаких четких цветовых переходов, но и чтобы треугольник не слился в одноцветное пятно - небольшие перепады цвета придадут картинке глубину.
Порядок работы такой: методично нарезаем картинку на треугольники, учитывая геометрию тел, и расставляем их на новых слоях, закрепляя прозрачные пиксели.

Маленькая подсказка: чтобы не вскрыться при ручном переключении между слоями и нажимании кнопочки , используйте "Alt+]" и "Alt+[" для перемещения по слоям вверх и вниз.

Далее все просто, жмете комбинацию "Ctrl+F, Alt+[" настолько быстро, насколько это возможно. Кто не в курсе, контрол-эф применяет к текущему слою последний использованный эффект, то есть тот самый Gaussian Blur.
 

 1. В процессе заблюривания треугольников. Как видите, часто цвета получаются достаточно грязными. Скажем на зубах, если в треугольник попадают темные пиксели, весь треугольник станет.. эммм.. незубного цвета. Очевидно, что придется дорабатывать картинку руками.
2. Где-то добавим тени, подкрасим усы с бородой, волосы, какие-то треугольники забликуем. Делается это просто: выделяем нужный треугольник и мягкой полупрозрачной кистью нужного цвета "трогаем" центр или край треугольника. При этом прозрачные пиксели у нас все ещё зафиксированны. На отдельные грани очков можно добавить блики цвета фона.
3. Добавляем поверх всего этого желтый слой в режиме Overlay, дабы придать картинке цвет и яркость. Тот же цвет и яркость ни к чему на очках и волосах - аккуратно работаем ластиком.

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

Пользуйтесь на здоровье.
 
 
LinkReply

Comments:
[User Picture]From: [info]brainpowder
2010-11-28 12:31 am (UTC)

(Link)

тоже мне партизан..слил всю контору ваще
[User Picture]From: [info]garyba1di
2010-11-28 12:49 am (UTC)

(Link)

А мне не желко, может кому-то это пригодится. Мне-то вряд ли, я ж не иллюстратор)
[User Picture]From: [info]unclewind
2010-12-02 08:00 am (UTC)

(Link)

тем временем слив конторы продолжается )

http://dl.dropbox.com/u/684632/Workspace/Triangle%20Fill/trianglefill.swf
[User Picture]From: [info]garyba1di
2010-12-02 10:21 am (UTC)

(Link)

Дану! Ты сам сделал или нашел? Это просто великолепно!
[User Picture]From: [info]unclewind
2010-12-02 10:45 am (UTC)

(Link)

нашёл, каешн )
если бы во флеше так умел программить, был бы уже богатеем )
[User Picture]From: [info]garyba1di
2010-12-02 10:58 am (UTC)

(Link)

Я себе сохраню, пожалуй, пригодится.
(Deleted comment)
[User Picture]From: [info]unclewind
2010-12-12 04:34 pm (UTC)

(Link)

работает. надо вначале хотя бы 3 точки обозначить
[User Picture]From: [info]sashalevin
2011-01-26 12:51 am (UTC)

(Link)

Во! То, что я искал.
[User Picture]From: [info]unclewind
2011-01-26 12:54 am (UTC)

(Link)

вроде, кстати, и тут реализовали уже: http://www.psykopaint.com/
[User Picture]From: [info]bswlife
2010-11-28 01:17 am (UTC)

(Link)

пользуйтесь это конечно хорошо, а что если такой сервис сделать?)

и зафигачить типа авабомбы...
[User Picture]From: [info]garyba1di
2010-11-28 07:27 am (UTC)

(Link)

Сервис? Типа загрузил картинку и получил иллюстрацию? Вообще, совершенно не могу представить себе алгоритмы такой обработки, чтобы все автоматически было. Я ещё понимаю плагин вот как у автора оригинальных картинок, чтобы осталось только узлы расставить..
..но если что, мои 10%!))
[User Picture]From: [info]bswlife
2010-11-28 07:31 am (UTC)

(Link)

неа :)))
[User Picture]From: [info]garyba1di
2010-11-28 07:54 am (UTC)

(Link)

Мир погряз в жадинах)
[User Picture]From: [info]bswlife
2010-11-28 07:56 am (UTC)

(Link)

Либо ты, либо тебя :)
[User Picture]From: [info]brainpowder
2010-11-28 10:43 pm (UTC)

(Link)

идея то всё равно твоя какашечная))
[User Picture]From: [info]bswlife
2010-11-28 10:45 pm (UTC)

(Link)

небузи:Р
[User Picture]From: [info]katya_fm
2010-11-28 03:07 am (UTC)

(Link)

очень круто получается ! мне очень нра!
[User Picture]From: [info]garyba1di
2010-11-28 07:28 am (UTC)

(Link)

Спасибо!)
Вот если б как-то придумать, как это в векторе зафигачить - оно бы и мне, и, может быть, тебе пригодилось)
From: [info]matrix_reflex
2010-12-08 12:01 pm (UTC)

(Link)

В иллюстраторе
1: поставить фотку на фон
2: нарисовать один правильный треугольник без заливки
3: включить "View > Smart Guides"
4: фигачить копируя исходный треугольник и перетаскивая вершины
5: когда с формой покончено переходим к градиентной заливке каждого треугольника
6: профит!
[User Picture]From: [info]shoot2be
2010-11-28 09:51 am (UTC)

(Link)

ОГО! я на днях хотел как раз заморочиться понять, как они это делают) круто!
[User Picture]From: [info]garyba1di
2010-11-28 09:53 am (UTC)

(Link)

Это, конечно, не именно ТАК, но хотябы что-то... я бы хотел, конечно, способ поавтоматизированней узнать.
[User Picture]From: [info]shoot2be
2010-11-28 01:29 pm (UTC)

(Link)

мне кажется у них там сильно дофига ручной работы
From: [info]zlobniyhrundel
2010-11-28 03:39 pm (UTC)

(Link)

Спасибо!
[User Picture]From: [info]garyba1di
2010-11-28 04:02 pm (UTC)

(Link)

Пожалуйста)
[User Picture]From: [info]criminal_queer
2010-11-29 10:09 am (UTC)

(Link)

можешь написать статью на какой-нибудь psd-tuts)
[User Picture]From: [info]garyba1di
2010-11-29 10:38 am (UTC)

(Link)

Там надо по-английски, да ещё и html оформить грамотно... А так бы да, почему б и не написать.
[User Picture]From: [info]roman_yerokhin
2010-11-30 01:21 pm (UTC)

(Link)

А интересная техника, не заливкой какой-нибудь и не кисточкой, а блюром в один клик. Эффективно и эффектно!
[User Picture]From: [info]garyba1di
2010-11-30 03:08 pm (UTC)

(Link)

Да, понятно, что можно упороться, просидеть весь день над этой картинкой и нарисовать все руками. Но меня интересовал именно наиболее автоматизированный способ. Пока это самое оптимальное, что пришло в голову.
[User Picture]From: [info]artbeiter
2010-12-01 12:17 pm (UTC)

(Link)

Спасибо) Уже испытал.
http://i54.tinypic.com/2ahgzut.jpg
[User Picture]From: [info]garyba1di
2010-12-01 12:55 pm (UTC)

(Link)

Ага, хорошо вышло, фактурный дядя)
[User Picture]From: [info]ordinary_skit
2010-12-09 07:56 am (UTC)

(Link)

Отлично поработал!
Спасибо.
Жаль что в инете ничо нет об оригинальном плугине.
Вернее об его даунлоад версии))
[User Picture]From: [info]garyba1di
2010-12-09 08:45 am (UTC)

(Link)

Это да(
[User Picture]From: [info]uh_shaitan
2010-12-10 10:16 am (UTC)

(Link)

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

[User Picture]From: [info]garyba1di
2010-12-10 10:25 am (UTC)

(Link)

Ха)) Не считая кислоты на заднем плане, портрет вышел отлично, я считаю!
Много времени ушло?
[User Picture]From: [info]uh_shaitan
2010-12-10 12:30 pm (UTC)

(Link)

ну вообще-то прилично, часа три. а на самом деле в три захода в три дня. ещё на другой фотографии гоши пытался оторваться, да всё неустраивал результат. я ещё полная девчёнка в фотошопе и рука не набита.
[User Picture]From: [info]pingback_bot
2011-01-21 01:50 pm (UTC)

Триангуляция

(Link)

User [info]ashikcygan referenced to your post from Триангуляция saying: [...] Фото сделано по наводке одного поста о том, как сделать триангуляцию в фотошопе [...]
[User Picture]From: [info]pingback_bot
2011-02-15 10:11 am (UTC)

No title

(Link)

User [info]miron referenced to your post from No title saying: [...] — сайт автора тутор как это делать в фотошопе ручками [...]
[User Picture]From: [info]sketch_turner
2011-02-16 06:18 pm (UTC)

(Link)

кнопочка для прозрачных пикселей как понял не дает при блюре блюрить с прозрачностью или как ?
[User Picture]From: [info]garyba1di
2011-02-16 06:22 pm (UTC)

(Link)

Именно так
[User Picture]From: [info]sketch_turner
2011-02-16 06:31 pm (UTC)

(Link)

сколько лет работаю в фш, а про некоторые кнопочки забываю напрочь