прорисовка в «карамельном» стиле

меня уже несколько раз просили более подробно рассказать о прорисовке/рисовании во flash. в частности просили рассмотреть на примере «карамельного домика», который вы видите на 1-м слайде флешки. обещания я свои выполняю, поэтому присаживайтесь поудобнее и слушайте внимательно.

1. итак, мы имеем на выходе вот такой симпатичный домик. рассмотрим по порядку все шаги, которые привели к этому результату.
2. всё всегда начинается со скетча (наброска) на бумаге. можно конечно и сразу на компьютере, если у вас есть планшет, но как по мне никакой планшет не сможет сравниться с простым карандашом и листком бумаги. этот домик был нарисован гелевой ручкой в блокноте.
3. первое что я делаю это выбираю контрастный цвет для контурных линий (зачастую это синий или красный) и прорисовываю все основные контуры с помощью инструмента pen и редактирую точки и линии инструментом arrow. не используйте при прорисовке pencil, его линии зачастую получаются кривые и содержат много точке, к тому же их сложнее редактировать.
4. когда все линии прорисованы, удаляем слой с наброском, меняем цвет линий на чёрный и корректируем элементы по композиции. я увеличила домик, передвинула окошки, дорисовала облака и велосипед. планировались ещё деревья, но они не вписались )
5. подбираем основные цвета картинке. обычно это процесс у меня занимает больше всего времени. если я не знаю, чего конкретно хочу от цветовой гаммы, на помощь приходит адобовский кулер. здесь я обошлась без него, заранее зная, что хочу картинку в тёплых тонах.
6. вот как выглядит наша картинка без контурных линий. не спешите их удалять, они могут вам ещё пригодится, лучше всего скопируйте их на отдельный слой.
7. далее добавляем градиенты. в идеале нужно использовать корректирующие слои (слой с градиентной заливкой в чётных или белых тонах с прозрачностью), чтобы мы в любой момент могли поменять основной цвет без ущерба градиентным переходам. но в данном случае цвета менять я не собиралась, поэтому работала без корректирующих слоёв — просто добавляла градиент основному цвету (от более всетлого к тёмного). результат вы можете видеть.
8. далее шёл кропотливый процесс добавления бликов и теней, который и привёл домик к «карамельному» виду. и добавлены детали такие как цветочек и кружка в окошке.
9. вот блики и тени без заливки. обратите внимание на контуры окошек и забора — это нично иное как наши контурные линии, просто где-то они чёрные, а где то белые с прозрачностью 15-25%. так же добавлены градиентные блики везде, где что-то может блестеть. даже шёрстка у кошки )
10. чтобы блики смотрелись симпатичнее я использовала градиентную заливку  не белого цвета, а светло-жёлтого, в результате чего блики кажутся теплее.
11. что касается теней, то часть из них это просто градиенты чётного с прозрачностью он 0 до 25% (см. тени вокруг окошек и двери), а часть — расблёреные movie clip-ы с обычной заливкой (см тени под велосипедом и забором).

вот собственно и весь секрет. пробуйте, экспериментируйте и у вас всё получится!!!

вот например процесс отрисовки нескольких «сладких» иконок.

  • http://blog.go4flash.com Antonos

    amazing style, thanks for sharing 🙂

  • Костя

    Ура! Я просто не верю своему счастью 🙂 Именно то, о чем я просил.

    Спасибо огромнейшее!

  • http://vapes.na.by VapeS

    мм.. вкусно! Как орбит карамель ))

  • http://flash-animation.ru Lerika

    2 Антон: всегда пожалуйста )

    2 Костя: я рада, что хоть иногда получается делать людей счастливыми )

    2 Валера: жжошь! :))))

  • Vaserson

    Ты — мой КУМИР!) Я уже второй день пытаюсь нарисовать эту первую конфету… Получается, но я не совсем доволен результатом…) То у меня изгиб маленький, то конфета большая, то блик неправильный и тень не такая…) Я поражаюсь твоему воображению) Ты супер…Как я уже говорил, ты — мой КУМИР!))

  • http://flash-animation.ru/ Lerika

    2 Vaserson: приятно слышать 🙂

  • kedovan

    Расскажите пожалуйста как блики делать из пункта 8.

    P.S. комментарии не работают

  • http://flash-animation.ru Lerika

    2 kedovan: блики из 8-го пункта рисуются очень легко. Внимательно рассмотрите 9-й слайд. Каждый блик имеет градинтный цвет белый или светло жёлый. На одном конце градиента альфа цвета =100%, а на другом 0%.
    А например на заборе, окнах и дверях в качестве бликов и теней выступают контурные линии белого и чёрного цветов с альфой =50%.

    ps: и комментарии работают нормально. но если будут какие-то замечания в работе комментариев — пишите.

  • FOr3st

    Очень красиво =)

  • http://grand-piano.ucoz.ru Sue

    Не понимаю как сделать градиент не в том же слое, а наложением, можете объяснить или дать ссылку на урок.

  • http://mirstu.livejournal.com Mirakuru

    Спасибо, Лерика! Замечательный урок. Художник из меня так себе, так что описание техники рисования даёт очень положительные результаты… ))

  • Questioning

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

  • http://legendgame.net/ LegendMAN

    Lerika, твоя картинка пользуется популярностью! )
    случайно наткнулся, сразу вспомнил, что где-то видел туториал по этому рисунку:
    http://www.mochigames.com/game/new-house/

  • http://flash-animation.ru Lerika

    фигасе!!! О_о

  • Pingback: У меня впервые нагло спёрли мой арт! » Flash animation()

  • thenatasha

    Красота неописуемая! Спасибо за урок))) Приятно видеть красивые картинки…

  • Окси

    Круто, из Вашего рисунка сделали игрушку :-))

    Спасибо за урок!
    Вот бы Ваш сайт мне было найти год назад 🙂
    Избежала бы много проб и ошибок 🙂

  • http://flash-animation.ru Lerika

    Окси, на ошибках учатся, а совершенствоваться никогда не поздно 🙂

  • http://darkoff.ru/ darkoff.ru
  • http://darkoff.ru/ darkoff.ru

    Хорошая инфа, пригодится. Мой блог http://darkoff.ru/, тематика скриптовый кодинг; )

  • http://darkoff.ru/ darkoff.ru

    Спасибо, понадобится. Полистай http://darkoff.ru/, основа похожий php; )

  • Cosmo

    Для ускоренного процесса можно делать всё сразу в Corel Draw или Illustrator и жкспортировать в swf, которое затем можно перенести во flash. Единственный минус, не знаю как иллюстратор, но корел допускает ошибки при экспорте радиальных градиентов и прозрачностей любого типа. Дело в самом отличительном построении градиентов, которые имеют другой список параметров, в отличии от флеша. К примеру во флеше можно изменить пропорции радиального градиента, а квадратного или конусного градиента там вообще нет!

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

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

  • Oxana

    Cosmo, а во флеше и не надо «тыкать в елезаметные стрелочки и точки». Там совсем другая техника рисования. И если к ней привыкнуть, то она намного проще, чем в Кореле и Иллюстраторе. Обратно отвыкать не захочется.