категории | RSS

Рисование пламени (огня) в программе ImageDesigner.

Доброго дня!

Автор данной статьи, я – Trojan_73

Сейчас на сайте находятся много художников или просто любителей порисовать на электронном холсте виртуальными красками smile

Большинство, по крайней мере имеющих компьютер, рисуют (aka создают свои шедевры) в Фотошопе и Иллюстраторе, но что делать нам, простым смертным не имеющим «большого брата» а юзающих смарты?

А ничего… просто рисовать на смарте smile

Благодаря Пляскину Антону aka werton на сайте давным давно появился и успешно развивается по настоящее время его проект – графический редактор для смартов ImageDesigner (который вы без труда найдете в обменнике файлов или на официальном сайте). Данная программа – один из лучших графических редакторов на смартфонах.

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

Итак приступим, темой этой статьи будет: «Рисование языка пламени (огня)»
Для начала нам нужна сама программа ImageDesigner (ищите ее в обменнике, скачивайте, устанавливайте и запускайте).

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

Поехали…

1. Открываем программу и создаем новый холст с нужными размерами: Меню-Файл-Новый… и задаем размеры холста по ширине и высоте во всплывающих окнах.
2. Выбираем в палитре черный цвет и инструментом «Заливка» (6 сверху в правом ряду в панели инструментов) заливаем весь холст черным цветом.
3. Выбираем в палитре цвета: Наружный – Красным (выбирается нажатием на джойстик), Внутренний – Черным (выбирается нажатием на 5).
4. Выбираем инструмент «Прямоугольное выделение» (седьмой сверху в левом ряду панели) и выделяем в центре холста квадрат.
5. После фиксации выделения (контур выделения должен мигать красным цветом) выбираем: Меню-Фильтр-Градиент.
6. Во всплывшей панели градиента выбираем квадратный градиент (правый нижний).
7. Курсор у вас находится на одном из углов выделенной области. Передвиньте курсор по диагонали к центру квадрата примерно на четверть длины до центра. Курсор у вас должен находится на середине одного из лучей градиента.
8. Возьмите инструмент «Пипетка» (самый верхний в правом ряду) и зафиксируйте цвет под курсором нажатием на джойстик (этот цвет устанавливается наружным и его видно в левом окне цветов в нижнем баре).
9. Поменяйте наружный и внутренний цвета местами – в палитре нажмите не иконку со стрелками.
10. В палитре выберите наружный цвет красным (ярче чем выбирали в 3 пункте), ближе к оранжевому.
11. Снова возьмите инструмент «Прямоугольное выделение» и выделите на рисунке, внутри градиентного квадрата, квадрат поменьше (он должен быть примерно на четверть меньше первого квадрата, так как мы в 7 пункте передвинули курсор на четверть, если вы не забыли).
12. После фиксации выделения (контур выделения должен мигать красным цветом) выбираем: Меню-Фильтр-Градиент.
13. Во всплывшей панели градиента выбираем квадратный градиент (правый нижний).
14. Повторяем седьмой пункт и снова передвигаем курсор по диагонали к центру квадрата еще примерно на четверть длины до центра.
15. Повторяем 8 и 9 пункты: Возьмите инструмент «Пипетка» (самый верхний в правом ряду) и зафиксируйте цвет под курсором нажатием на джойстик (этот цвет устанавливается наружным и его видно в левом окне цветов в нижнем баре). Поменяйте наружный и внутренний цвета местами – в палитре нажмите не иконку со стрелками.
16. В палитре выберите наружный цвет оранжевым.
17. Повторяем пункт 11: Возьмите инструмент «Прямоугольное выделение» и выделите на рисунке, внутри второго градиентного квадрата, квадрат поменьше (он должен быть примерно на две четверти меньше первого квадрата).
18. Повторяем пункты 12 и 13: После фиксации выделения (контур выделения должен мигать красным цветом) выбираем: Меню-Фильтр-Градиент. Во всплывшей панели градиента выбираем квадратный градиент (правый нижний).
19. Повторяем седьмой пункт и снова передвигаем курсор по диагонали к центру квадрата еще примерно на четверть длины до центра.
20. Повторяем 8 и 9 пункты: Возьмите инструмент «Пипетка» (самый верхний в правом ряду) и зафиксируйте цвет под курсором нажатием на джойстик (этот цвет устанавливается наружным и его видно в левом окне цветов в нижнем баре). Поменяйте наружный и внутренний цвета местами – в палитре нажмите не иконку со стрелками.
21. В палитре выберите наружный цвет желтым.
22. Повторяем пункт 11: Возьмите инструмент «Прямоугольное выделение» и выделите на рисунке, внутри третьего градиентного квадрата, квадрат поменьше (он должен быть примерно на три четверти меньше первого квадрата).
23. Повторяем пункты 12 и 13: После фиксации выделения (контур выделения должен мигать красным цветом) выбираем: Меню-Фильтр-Градиент. Во всплывшей панели градиента выбираем квадратный градиент (правый нижний).
24. Повторяем седьмой пункт и снова немного передвигаем курсор по диагонали к центру квадрата.
25. Повторяем 8 и 9 пункты: Возьмите инструмент «Пипетка» (самый верхний в правом ряду) и зафиксируйте цвет под курсором нажатием на джойстик (этот цвет устанавливается наружным и его видно в левом окне цветов в нижнем баре). Поменяйте наружный и внутренний цвета местами – в палитре нажмите не иконку со стрелками.
26. В палитре выберите наружный цвет белым.
27. Повторяем пункт 11: Возьмите инструмент «Прямоугольное выделение» и выделите на рисунке, внутри последнего градиентного квадрата, самый меленький квадрат.
28. После фиксации выделения (контур выделения должен мигать красным цветом) выбираем: Меню-Фильтр-Градиент. Во всплывшей панели градиента выбираем квадратный градиент (правый нижний).
29. Берм инструмент «Прямоугольное выделение» и выделяем им первый (самый большой) квадрат.
30. Поворачиваем его на 45 градусов: Меню-Изображение-Поворот и во всплывшем окне задаем угол – 45. У нас получилось что то вроде градиентного креста.
31. Выбираем внутренний цвет черным и инструментом «Прямоугольное выделение» выделяем нижнюю половину всего рисунка начиная от середины горизонтального луча до самого низа рисунка.
32. Выбираем: Меню-Редактирование-Вырезать. На рисунке должна остаться верхняя часть креста, уже чем то напоминающая язык пламени.
33. Теперь нам нужно исказить (изогнуть) этот язык по горизонтали. Для этого выполняем следующие пункты.
34. Инструментом «Прямоугольное выделение» выделяем верхнюю часть языка примерно 4/5 части по высоте и во всю ширину рисунка.
35. Выбираем: Меню-Изображение-Сдвиг, выбираем «Горизонтально» и во всплывшем окне задаем угол сдвига, примерно 10-15 градусов. Язык наклонится вправо на 15 градусов.
36. Опять инструментом «Прямоугольное выделение» выделяем верхнюю часть языка примерно 3/5 части по высоте и во всю ширину рисунка.
37. Выбираем: Меню-Изображение-Сдвиг, выбираем «Горизонтально» и во всплывшем окне задаем угол сдвига, примерно 330 градусов. Язык наклонится влево на 15 градусов. Так как возможности задать сторону наклона нет, то пользуемся простой математикой: 360-15=исходное положение (язык снова выровниться), 360-15-15=язык наклонится влево на 15 градусов.
38. Снова инструментом «Прямоугольное выделение» выделяем верхнюю часть языка примерно 2/5 части по высоте и во всю ширину рисунка.
39. Выбираем: Меню-Изображение-Сдвиг, выбираем «Горизонтально» и во всплывшем окне задаем угол сдвига, примерно 20-30 градусов. Язык наклонится вправо на 15 градусов вправо от оси (опять же простая математика: 15 градусов = язык выровнится относительно оси, 30 градусов = язык наклонится вправо на 15).
40. И снова инструментом «Прямоугольное выделение» выделяем верхнюю часть языка примерно 1/5 части по высоте и во всю ширину рисунка.
41. Выбираем: Меню-Изображение-Сдвиг, выбираем «Горизонтально» и во всплывшем окне задаем угол сдвига, примерно 345 градусов. Язык выровниться относительно оси
42. Собственно язык пламени готов, но его основание слишком широкое. Для того чтобы это исправить выбираем: Меню-Изображение-Изменение размера. Во всплывшем окне задаем ширину в 2 раза меньше исходной, а высоту оставляем неизменной. На запрос программы о сохранении пропорций отвечаем «Нет».
43. Готово. Осталось только размножить языки и наложить друг на друга, либо рядом друг с другом, изменяя их размеры и отражая по необходимости их зеркально по горизонтали…, но это уже другая история… smile

P.S. Для придания пламени реалистичности цветов, поэкспериментируйте с насыщенностью цветов (Меню-Фильтр-Насыщенность…).
P.P.S. То что, вы увидите на скрине, не есть образец для подражания, а лишь наглядный пример, созданный на скорую руку.

Статья написана специально для темы на форуме: Хитрости работы в ImageDesigner.

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

Удачи!

Trojan_73
2009-12-17T16:55:26Z

Здесь находятся
всего 0. За сутки здесь было 0 человек

Комментарии 10

#10   esom    

Отличная работа....smile
-------------
Добавлено в 11.28: Пересобрал твою анимашку, она стала легче в два раза и увеличил задержку до 300и в описании небыло про вырезание огня во время сдвига....а я думаю че у меня фигь какая то выходит...:(

Прикрепленный файл:

Внимание! У вас нет прав для просмотра скрытого текста.
(818, 38 Kb)


* редактировал(а) esom 14:37 26 ноя 2011

0 ответить

#10   Patriot1234    

Статья отличная, автору большое спасибо.


0 ответить

#10   Trojan_73    

Цитата: Asadula
Не могу вести градиент...

Заходи в тему по ссылке, подскажем smile


0 ответить

#10   Asadula    

Что то у меня не получается. Не могу вести градиент, нажимая и нечего не происходит


0 ответить

#10   Viper61    

Не думал, что можно и такое нарисовать на телефоне о_О


0 ответить

#10   m__g    

молодец, хоть и не пользуюсь этой прогой (есть фотошоп), но статья понравилась, а именно то что всё по полочкам, по пунктам. Отлично! Большая часть уроков по фотошопу позавидуетsmile


0 ответить

#10   Armen-82.08    

Да уж круче некуда! Молодец, бомба статья.


0 ответить

#10   Arhitip    

Эта статья достойна оваций.Причем именно стоя.Великолепно, снимаю шляпу!;)


0 ответить

#10   Trojan_73    

Скачать и посмотреть анимацию по рисованию можно здесь (1.79 мб)
-------------
Добавлено в 17.26: Если увидите ошибки в статье (а они могут быть, так как она писалась по памяти) прошу указать на них, по возможности исправлю.


* редактировал(а) Trojan_73 17:32 17 дек 2009

0 ответить

Яндекс.Метрика