Создание графики от А до Я

=SALGIR / вступление=
Проект Салгир - это комплект графики в черно-белых тонах выполненный в семи различных размерах для всех типов экрана начиная от 176х220 кнопки и заканчивая 720х1280 сенсор.
В будущем это 28 созданных практически с нуля файлов как графических так и текстовых. 4354 строки легкого системного кода, ну и всё такое.
А зря испугались.
Это всё очень и очень просто даже если в руках имеется мобильный телефон. Ну и чуток опыта. Если первое зависит только от вас , то опытом я с удовольствием поделюсь.
В данном сообществе будет создано несколько тем посвященных компоновке, корректировке, составлению карт управления, их оптимизации для улучшения отрисовки и уменьшения потребления памяти, шаблонному изменению карт. А так-же по тестированию и выявлению возможных ошибок.
==Подготовка к работе==
Для работы понадобятся только три программы.
Собственно сама opera mini mod, ImageMorpher и ProPaintMobile2_3.
Мод желательно взять 4.21.26(23468) так как эта сборка была последней отладочной. Все дальнейшие сборки идут без возможности подсветки кода кнопок меню.
http://opera-mini.ru/forum2/files/onepat26thawte_188.zip

ПроПайнт 2,3 как лучший редактор для телефонов с поддержкой прозрачности.
http://annimon.com/download/index.php?act=view&id=229

Ну и http://files.seclub.org/apps/d/1/f/d1fa84247e9334115564f6782094f713/ImageMorpher.jad

Теперь телефон полностью готов к работе.
Осталось всего лишь ввести любой запрос.png в , найти иконку которая более-менее подходит к будущей задумке , нажать на кнопку ниже ,,перейти на сайт,, и найти архив с понравившимся комплектом , загрузить ейный, распаковать и приступать к творчеству.
==Cоздание изображения==.
Пошаговая инструкция
1) Открываем графический редактор , выбираем - создать, не забываем поставить метку в окне Прозрачность.
2) На левой софт-клавише со списка инструментов выбираем Метка. Разметку поля производим следующим образом
а) Ставим метку руководствуясь координатами показаными в правом углу и размером иконок (48х48)
б) Следующая метка - двухкратные значения координат. (96х96)
в) Все остальные координаты можно и не высчитывать если пользуясь клавишами 1 / 3 / 7 / 9 смещать курсор точно по диагонали до пересечения с уже проведенными линиями.
3) Добавление иконок на поле выполняется так:
- меню (правый софт)
- файл
- открыть
(находим папку с материалом)
- меню (левый софт)
- открыть в буфер
После этого действия нас вернёт к
нашему полю.
- комбинация #+5
(появится экран с открытым в буфер изображением)
- ок (левый софт)
- смещаем курсор до пересечения линий разметки
- нажимаем 5 или центр джоя
Иконка осталась на указанном вами месте. Чтобы убедиться в этом слегка смещаем курсор. Повторяем всю вышеуказанную комбинацию необходимое колличество раз до заполнения всего поля.
4) Сохранение изображения:
- меню
- файл
- сохранить
- png с прозрачностью
5) Сведение всех фрагментов на одном изображении практически ничем не отличается от способа описанного в третьем пункте , ну разве что необходимо точно подсчитать файл какого размера создать.
=Замена иконки= на другую на в уже готовом изображении
1) Из списка инструментов выбираем Выделение.
2) Производим замену заднего цвета на черный
3) Выводим курсор к любому из углов лишней иконки , нажимаем 5 или центр джоя, выделяем всё лишнее поле и снова нажимаем 5
4) Очищаем зону выделения:
- меню
- правка
- очистить
5) Находим и добавляем нужную иконку
6) Сохраняем
=Зависимость пропорций=
> Высота верхнего бордюра зависит от размера логотипа
> Высота нижнего бордюра зависит от квадрата горячей нижнего
> Междустрочное расстояние в окне статуса загрузчика зависит от размера иконки ожидания
> Для корректного отображения размеры рамки должны быть около 80х80 , особенности алгоритма растягивания . Можно нарисовать и меньше, но необходимо вокруг рамки оставить свободное место
> Для быстродействия программы - цифры вкладок лучше рисовать по одной , общие координаты должны быть кратны 10, в этом деле шрифту доверять не стоит
> Непременно должна содержаться полоска цветовой схемы, получить её можно настроив схему на моде и экспортировав её в файловую систему с включенным пунктом меню +рng, значение координат схемы в карте ни в коем случае не должно быть меньше количества пунктов в текущей версии мода.
==Составление g-карты==
Данный процесс следует разбить на несколько этапов
=Подготовка графики (телефон)
Создаем файл размером побольше чем фрагмент с иконками, наносим разметку как на скриншоте , расставляем буквы от А до Т в алфавитном порядке, и просматривая карту разным цветом помечаем иконки номерами:
На примере синим я пометил иконки основного меню, малиновым иконки расширенного меню и оранжевым иконки горячих нижнего бордюра.
На каждой иконке должна присутствовать только одна цифра. Это поможет обойтись и вовсе без оптимизации.
=Подготовка графики(комп)=
Kомпонуем все фрагменты в том порядке в каком они будут в итоге. Отправляем на печать, и на листе бумаги ручкой делаем те же пометки , $25 , @З5 , &45 и так далее.
Построение шаблона
=с помощью телефонаОткрываем чистую карту любым текстовым редактором , находим назначеную предварительно иконку и смотрим напротив каких букв она стоит
На примере иконка дом у нас на пересечении литер А и L . Адрес - 0 и J.
Следовательно в карте так и пишем
$31 A L A A
...
$67 0 J A A
И по этому же принципу до тех пор пока не используем всё что есть.
Если попадается иконка которую уже применили - возле номера строки включаем переадресацию на пункт отмеченный ранее
12=$31
...
24=$67
За счёт переадресации мы в разы увеличиваем быстродействие мода и экономим оперативную память .
Все пункты из графики уже перенесены в карту, теперь можно взять лист бумаги и переписать недостающие пункты, и следовательно дорисовать их в графике. Остаётся таки добавить эти новые иконки в карту и собственно всё. Шаблон у нас готов.
=С помощью компьютера=
Переносим файл чистой карты на компьютер, открываем его через блокнот (иначе могут возникнуть проблемы с кодировкой поскольку на компьютере по умолчанию используется win1251 , а на телефоне utf8) , выделяем весь текст для редактирования и меняем размер шрифта и колличество столбцов.
(У меня компьютера нет, поэтому попросту обратился в компьютерный клуб где предоставляли услуги распечатки текста, не самым крупным шрифтом в три столбца карта заняла почти пять листов формата А4)
Глядя на распечатку карты и распечатку графики делаем метки карандашом возле каждой строки по тому же принципу
В Е А А
Затем по наброскам редактируем карту текстовым редактором.
Сохраняем исправленую карту , копируем файл (непременно пригодится) в двух-трёх экземплярах.
Все дальнейшие действия будут проводиться исключительно на телефоне.
=Правка и тестирование
Открываем Опера мини мод, заходим в файловый менеджер, находим нашу карту. Там в текстовом редакторе есть весьма полезная функция Найти/Заменить.
Глядя на таблицу шаг за шагом меняем буквы на цифры.
А на 48
В на 96
С на 144...
с каждой такой заменой мод исправит порядка тридцати значений, а в случае с А , которая является не только координатной но и основной размерной и вовсе порядка восьмисот .
Всего лишь 15-20 подобных операций и мы имеем уже рабочую карту. Вручную правим некоторые пункты , цветсхема, статусы вкладок, виртуальную клавиатуру, рамку, цифры, точку для бегунка.
Вся процедура превращения шаблона в рабочую карту займет всего лишь от двадцати минут до получаса .
Приводим имена наших файлов в соответствие с требованиями мода по именам , запускаем последний отладочный 4.21.26 (ссылка выше), в настройках вида выбираем путь к нашей новой графике, ставим галку Показывать номера, сохраняем настройки и перезапускаем мод.
Просто наслаждаемся плодами своего труда прогулками по всевозможным меню.
На листе бумаги делаем пометки где какая не на своём месте или не гармонирует. При необходимости правим и в рабочей карте , и в шаблоне.
Когда всё устраивает - переходим с следующему этапу.
=Облегчение=
Возвращаемся на шаг назад, то есть нам потребуется проверенная карта , но всё ещё с буквами.
Находим через файловый менеджер мода наш шаблон и снова благодаря функции Найти/заменить меняем все кириллические буквы на пустое место, то есть на что менять поле не заполняем.
Три десятка операций в течении пяти минут облегчат карту на 15 кб , что очень таки существенно для стабильной работы графики.
В итоге мы получили наш универсальный шаблон готовый к тиражированию под любой размер.
=Тиражирование=
Создаем в файлах телефона папку, и в ней нужное колличество подпапок названия которых указывают на размер графики ( 16 , 20 , 24 , 28 , 32 , 40 ,48 )
Копируем необходимое количество раз легкий шаблон так чтобы в каждой подпапке было по одному файлу.
Через функцию Найти/Заменить текстового редактора мода меняем латинские буквы на цифры из таблицы.
Ту же операцию проводим с графикой.
Смотрим на таблицу и добавляем к имени файла размер который хотим получить. f640 , f320 и так далее.
На предпоследнем этапе главную роль сыграет ImageMorpher.
Это самый лучший растровый редактор для работы с прозрачностью который когда либо существовал на телефоне.
Через него находим нужные нам файлы , изменяем их размер согласно подсказкам в имени файла.
Теперь для того чтобы получить графику любого размера достаточно перерисовать пару элементов, а именно цветовую схему , рамку зума и цифры для номера вкладок. Ну возможно и виртуальную клавиатуру.
И в завершении работы исправить в карте некоторые координаты, эти вот, последние. Схему, цифры, клавиатуру да рамку.
Больше по теме добавить нечего, рад буду ответить на ваши вопросы.