Создание векторной иконки на смарте.

Доброго дня.
В последнее время, в связи с переходом на symbian 9, я увлекся рисованием векторных иконок, кои использует в большинстве случаев девятая ось.
Для рисования векторных изображений на ПК существует достаточно много неплохих редакторов, как то Adobe Illustrator (которым я пользуюсь), Corel Draw (надеюсь правильно написал ) и множество других.
Однако все это доступно лишь счастливым владельцам большого брата смарта, то есть компьютера... А что же делать тем у кого его нет? Или как например я - компьютер есть только на работе и доступ к нему во время отпуска пресечен, а руки чешутся до жути?
Конечно уже давно известны способы создания mif иконок на смарте за счет перегона aka упаковки растровых (png, jpg) изображений в svg или сразу mif, которые в последствий можно использовать как иконки.
Однако это полумера, ведь как ни крути это все же растровая иконка и качество ее отображения на экране зачастую оставляет желать лучшего.
Сегодня же, здесь и сейчас я попробую рассказать вам как создать на смарте чисто векторную иконку Сразу предупреждаю, что процесс этот трудоемкий но довольно интересный, поэтому нетерпеливым наверное лучше сразу пройти мимо...
Итак... Для работы нам понадобятся следующие программы:
1. vDraw - единственный и к сожалению довольно таки простенький редактор векторных изображений для смартов от нашего участника smart4n.
2. DEdit - лучший текстовый редактор для смартов от JBAK.
Обе эти программы есть как на девятые оси так и ветеранские, да да, на ветеране тоже можно рисовать ;) (при небольшом усилии их можно найти на сайте).
Описывать я буду все действия по пунктам с приведением примеров.
Итак приступим. Будем рисовать иконку в стиле AcidSonic.

1. Для начала запускаем программу vDraw и создаем новый холст: Меню (левый софт) - Файл - Создать, и во всплывающих окнах задаем размер 240х240.
2. Так как этот редактор очень простенький и имеет весьма ограниченные инструментальные возможности, то рисовать мы будем в основном инструментом Полигон, который мы и выбираем: Меню - Инструменты - Полигон (горячая клавиша - 7).
3. При рисовании есть возможность выбора цветов обводки и заливки: Меню - Цвет (горячие клавиши * и # соответственно). Выбираем оба цвета черным. Есть так же возможность выбора толщины линии обводки: Меню - Сервис - Толщина линии (горячая клавиша - 0), но в нашем случае мы будем рисовать всегда с толщиной линии - 1, поэтому менять значени не нужно, оно по умолчанию стоит на 1.
4. Сначала нам нужно нарисовать контур иконки, черная обводка которая будет видна вокруг иконки, дело это трудоемкое и требует четкости и внимания. Выбрав цвет и инструмент подводим курсор к левому краю холста, нажимаем джойстик (задав первую опорную точку) переводим курсор выше и нажимаем снова джойстик задав вторую точку и видим как они соединяются линией между собой. Таким образом обрисовываем нужный нам контур, при достижении первой точки ее нужно соединить с последней, завершив рисование полигона двойным нажатием на джойстик. Для более четкой отрисовки границ и плавного закругления можно и даже нужно уменьшить шаг курсора, для чего выбираем: Меню - Сервис - Шаг курсора (горячая клавиша - 8).
В итоге должны получить нечто подобное:

Возможно у вас получится не с первого раза, но после приобретения необходимых навыков все будет получатся легче и быстрее
5. Теперь небольшой экскурс: смысл самого рисования состоит в многослойности и наложении слоев (элементов или объектов, как кому нравится) друг на друга. Для простоты понимания можно представить что вы вырезаете из цветной бумаги фигуры и накладываете их друг на друга...
Подобным же образом мы и будем рисовать.
Как вы наверное замечали, на квадратной иконке стиля AcidSonic бока плашки нарисованы градиентом, но так как в vDraw отсутствует такой инструмент и вообще такая возможность, то мы будем рисовать этот градиент вручную, имитируя его.
6. Выбираем оба цвета (обводки и заливки) чуть светлее т.е. темно серыми и тем же инструментом Полигон, внутри черного контура, отступив от его краев небольшое расстояние рисуем фрагмент поменьше.
7. Внутри второго фрагмента, выбрав оба цвета еще чуть светлее, рисуем еще более меньший фрагмент.
Вот на этом рисунке видно насколько и с каких краев нужно делать отступ и что из себя представляет это многослойность:

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

9. Я советую вам после отрисовк и каждого фрагмента сохранять рисунок: Меню - Файл - Сохранить.
Есть еще один немаловажный момент - при рисовании инструментом Полигон, отсутствует возможность отмены последней точки, но есть возможность удаления нарисованного объекта: Меню - Инструменты - Удалить элемент. Все элементы расположены сверху вниз, т.е. последний нарисованный элемент будет находится в самом низу. Кроме того есть способ другого удаления: Меню на правом софте - Элементы - Выделяете элемент (на рисунке красная обводка) - нажатием на С удаляете выбранный элемент, после чего снова нужно перейти в режим редактирования: Правый софт - Редактирование.
Есть так же отмена и повтор рисования последнего элемента: Правый софт - Отменить или Повторить.
10. Далее. Выбираем светло серые цвета и рисуем фигуру как показано на рисунке:

11. Далее в углу, выбирая каждый раз цвета потемнее, снова имитируем градиент:

12. И опять, как и в 10 пункте рисуем фигуру, но уже цветом, на котором будет расположен основной рисунок, примерно так:

13. Далее, цветом чуть светлее цвета основного фона рисуем световой отблеск (или его имитацию ):

14. Теперь рисуем сам, необходимый нам, рисунок на получившейся плашке:



15. И в конце дорисовываем световые блики:

16. Готово! Остается только с помощью программы SmartSIS упаковать полученный svg файл (именно в этом формате сохраняет рисунок программа vDraw), который кстати можно просмотреть в стандартной презентации, в mif, переименовать в имя оригинальной иконки и положить в папку !:/Resource/Apps согласившись на замену.
В итоге на экране мы увидим:

Теперь о том, зачем нам нужна программа Dedit, если вы про нее еще не забыли
Дело в том, что изображение в формате svg это ни что иное как текстовый файл содержащий в себе строки вида:
polygon stroke="#000000" stroke-width="1" fill="#000000"
points="55,30 55,10 75,10 75,30 75,30 "
Где:
polygon - форма объекта.
stroke="#000000" - цвет обводки в 16-ричном формате.
stroke-width="1" - толщина линии.
fill="#000000" - цвет заливки в 16-ричном формате.
points="55,30 50,25 45,20" - координаты опорных точек.
Зная это можно в текстовом редакторе поправить соответственно цвета, толщину и координаты.
Не забудьте перед открытием изображения в настройках программы Dedit поставить кодировку по умолчанию utf-8 и определение unicode и utf-8.
Удачи вам!
Если данная статья вам покажется неинтересной мелочью и чушью, то просто пройдите мимо, она написана для тех кому это интересно и кто этим увлекается.
Статья написана на момент существования версии программы vDraw 1.15 и соответственно при ее дальнейшем развитии возможны изменения в способе рисования, но общий смысл я думаю останется неизменным.