motofan logo
Motorola Ситилинк
18 страниц V  1 2 3 > »         
> 

Создаем скин для Е2, Мега мануал от maxyn

maxyn
сообщение 6.5.2007, 14:26


Интересующийся
**

Группа: Пользователи
Сообщений: 40
Регистрация: 16.4.2006
Пользователь №: 79 033
Модель телефона: Motorola ROKR E2
Прошивка: TheOne Beta II

Рейтинг: 31.5



Итак, теперь я решил сделать мануал, наверное, самый-самый ”доходчивый”. В нем я постараюсь изложить все нюансы этого дела, не поверхностно, а углубленно и понятно.
В этом мануале я буду делать скин на ваших глазах, и записывать сюда все этапы моей работы.
Мой урок будет делиться на несколько этапов, и вот каких:
Так как я решил сделать скин на тему Симбиан 9.0, мне нужно собрать много информации о его графическом исполнении и структуре. Так как у меня нет телефона на этой ОС, мне придется искать информацию в Интернете. Итак, первый этап – это сбор информации
- Сбор Информации
Мне были нужны скриншоты, разные графические элементы, все-все, что могло мне помочь. Я это нашел, теперь приступаем к созданию так называемого ”Проекта”

Скрин
Скрин

Я выложил 2 скрина. На самом деле я собрал более 100 скриншотов с этой платформы.
Мы видим, что структура у него вполне стандартная, 3х4 меню. Скролл, снизу довольно простая софт-полоска, сверху элементарное ”Заглавие”, и 2 иконки батареи и сети. Все это очень легко можно перенести в наш Смартфоноподобный Едва.

Приступаем к созданию самого скина.
Для этого нам потребуется :
- Программка kview 0.5
- Удобный вам графический редактор, я пользуюсь Photoshop CS 2
- Текстовый редактор, который может сохранять файлы в UNIX кодировке, я посоветую Notepad ++
- Телефон, USB-Net, Startup.txt, прямые руки.


Приступаем к созданию ”удобной базы”, для редактирования скина.
В процессе создания скина, вы будете заливать ваше творение на телефон, раз по 15 в час.
И чтобы каждый раз не мучатся с его залитием сделаем удобный автозагрузочный файл, который будет загружать скин из директории, которую можно быстро открыть, для экономии времени..
Я думаю у вас уже есть файл автозагрузки, и поэтому вписываем туда этот блок. Чтобы скин загружался из директории /ezxlocal/ и автоматом подменял стандартный, это во-первых исключает надобность почти каждый раз перезагружаться, а во-вторых папка ezxlocal легко доступна.

Код
# iconres.ezx change
if [ -f /ezxlocal/iconres.ezx ]
then
mount --bind /ezxlocal/iconres.ezx /usr/data_resource/skin/a1200/iconres.ezx
fi


У меня стоит монстр от whitemoto, там есть скинмод а1200, мне как раз подошел, для замены.
Теперь для теста достаточно кинуть файл icores.ezx в папку ezxlocal и если нужно перезагрузить телефон (вы сами поймете, когда нужно).
Далее заходим на Скины Для Е2
И ищем там удобный для редактирования скин. Вам так будет проще, чем начинать все с начала. Потому, что всю графику менять не нужно, и проще взять чей-то скин, и полностью его переделать. Это не нарушает авторских прав, потому что от него ничего, в конце концов, не останется. За основу скина Symbian , я возьму сделанный мною ранее скин Infinity.
___________________________
Отсекаем первую часть мануала. Сейчас пойдет работа.
Скин состоит из нескольких файлов, а именно :

Alarmclock_p.ini – параметры будильника
Camera_p.ini – параметры камеры
Fmradio_p.ini – параметры радио
Info.ini - информация о скине
Calendar_p.ini – параметры календаря
Common_p.ini – очень важный файл. Параметры шрифтов, цвета, итд…
Demoapp_p.ini – не знаю что, и знать не хочу.
Phone_p.ini – параметры структуры скина
Voicenote_p.ini – параметры голосовых заметок
Worldclock_p.ini – параметры ”Мирового Времени”
Calculator_p.ini – параметры калькулятора
Preview.jpg – какая то превьюшка (она нам не нужна)
Iconres.ezx – самый важный файл, графика.

Нам в принципе для хорошо проработанного скина понадобится всего 2 файла, это Iconres.ezx и common_p.ini.

Начнем работу. Первым у нас будет редактироваться файл Iconres.ezx .
Для этого качаем программу под названием kview 0.5
Она поможет нам разобрать, отредактировать и собрать файл Iconres.ezx.

Скрин

Вот так выглядит окно программы, открываем вкладку File-> Open EZX

Скрин

После того как нажали Открыть, он повторит эту операцию, не пугайтесь это не глюк. Можно выбрать куда открыть, либо нажать Отмена и он разберет файл в папку, где он сам и лежит.
После чего вы увидите примерно следующую картину :

Скрин

А в папке, где лежал файл Iconres.ezx , теперь появились еще файлы. Это:

Файл iconres.dat – структура файла Iconres.ezx
Файл iconres.hdr – не знаю для чего
Папка icons – там лежат все иконки.
Папка raws – там лежат те же иконки, но в формате, который понимает Едва.

Для редактирования нам нужна папка icons, поэтому копируем ее в удобное для вас место, и открываем. Там мы видим тучу файлов, разных форматов (а именно bmp.png.gif) Хочу заметить, что формат файлов нельзя менять. Иначе скин не заработает.Многие на этом этапе говорят себе ”Да пошло все в….’, но нет! Мы не остановимся. Идем дальше.

Скрин

Я сделал картинку, наглядно показывающую, на какие части делится скин.
1. Нижняя софт полоска
- softkey_lft_bg_sel.bmp – левая клавиша + нажата
- softkey_lft_bg_std.bmp – левая клавиша
- softkey_rgt_bg_std.bmp – правая клавиша
- softkey_tgt_bg_sel.bmp – правая клавиша + нажата

2. Иконки Батареи, Сети, Активной линии, Режима Вызова на рабочем столе
- alert_ring_idle8.png
- alert_ring_n_vib_idle8.png
- alert_silent_idle8.png
- active_line_1_idle9.png
- alert_vibrate_idle8.png
- active_line_1_idle9.png
- batt_level_0_cli7.png
- batt_level_0_idle10.png
- batt_level_1_cli7.png
- batt_level_1_idle10.png
- batt_level_2_cli7.png
- batt_level_2_idle10.png
- batt_level_3_cli7.png
- batt_level_3_idle10.png

3. Заглавие меню
- popup_header_bg_std.bmp – заглавие
- popup_header_left_std.bmp – полоска слева
- popup_header_right_std.bmp – полоска справа

4. Полоска выбора
- listitem_bg_h.bmp
- listitem_bg_hs.bmp
Рамка
- listitem_bottom_h.bmp
- listitem_bottom_hs.bmp
- listitem_top_h.bmp
- listitem_top_hs.bmp
- listitem_left_h.bmp
- listitem_left_hs.bmp
- listitem_right_h.bmp
- listitem_right_hs.bmp
Уголки у рамки
- listitem_topleft_h.bmp
- listitem_topleft_hs.bmp
- listitem_topright_h.bmp
- listitem_topright_hs.bmp
- listitem_bottomleft_h.bmp
- listitem_bottomleft_hs.bmp
- listitem_bottomright_h.bmp
- listitem_bottomright_hs.bmp

5 Полоска выпадающего меню (кстати оно как раз похоже на Симбиановское)
- optmenu_item_bg_h.bmp
-optmenu_item_bg_hs.bmp

6. Иконки
- С ними все понятно. Иконка с приставкой «_ani» - анимированная, а иконка с приставкой «_std» - стандартная

7.Рамка у иконки
- mm_imgcontain01_left_h.bmp
- mm_imgcontain01_right_h.bmp
- mm_imgcontain01_top_h.bmp
- mm_imgcontain01_bottom_h.bmp
Уголки
- mm_imgcontain01_bottomleft_h.bmp
- mm_imgcontain01_bottomright_h.bmp
- mm_imgcontain01_topright_h.bmp
- mm_imgcontain01_topleft_h.bmp

8. Заглавие Меню- header_bg_std.bmp

9.10. Иконки сети и батареи в меню
- Ну там все понятно. Такая же иконка + добавлен фон меню. Разберетесь.

11. Скрол
- Тут тоже непонятков возникнуть не должно.

12. Фон меню
-fdbsl01_bg.bmp

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

Скрин

В окне программы нажимаем Converter => Convert all.

Скрин

В строке Тип файлов ставим Image files
Выбираем любой файл из списка и жмем Открыть.
В следующем окне программа попросит выбрать куда Конвертировать, выбираем папку raws , выбираем там любой файл и нажимаем Сохранить

Скрин

Ок. Вся ваша графика сконвертированна в понятный телефону формат. Осталось только запаковать все в один файл Iconres.ezx
Жмем в окне программы File => Save to EZX

Скрин

Программа попросит файл iconres.dat, этот файл лежит в той же папке, в которую вы и разбирали скин. Указываем ее..

Скрин

Затем программа попросит указать куда сохранять файл Iconres.ezx, выбираем либо тот файл, который мы разбирали , либо сохраняем новый, в другом месте.
________________________

Отчеркиваем еще одну часть нашей работы. Осталось совсем не много.
А именно – Отредактировать конфиги.
Я не буду описывать в этом мануале все конфиги скина. Вы и сами сможете в них разобраться. Я опишу только самый главный из них, а именно common.ini
Он содержит в себе так называемые блоки. По типу они идентичны. Я опишу один из них..
Этот блок отвечает за шрифт в поле Настроек, когда на это поле наведен курсор.

Код
[Font_SettingAHs] – Описание блока + параметр Hs
Size = 22 – Размер
Leading = 24 – не знаю что
Style = 1 – стиль шрифта
Color = 19992850 – цвет шрифта (об этом расскажу отдельно)
Align = 1 – положение


Я не буду описывать эти параметры (кроме цвета), потому есть очень хороший мануал от камрада kryck.
Он описал все основные блоки и параметры этого файла. Этот мануал будет прикреплен ниже.
Я же опишу только цвет. Цвет в этом файле как видно задается не стандартным значением. Давайте разберемся.

Color = 19992850

На самом деле это значение определяется очень просто. Достаточно открыть стандартный виндовый калькулятор, работающий в инженерном варианте. (т.е Вид => Инженерный)

Скрин

Вбиваем туда наше значение в Dec режиме. И переводим его в режим Hex

Скрин

После перевода мы получаем число 1311112
Заходим в Photoshop и вводим наше значение

Скрин

И получаем темно-синий цвет. (так и есть)
Чтобы занести свой цвет в файл common.ini делаем все в обратном порядке..
Выбираем цвет в фотошопе, заносим его в hex формат и переводим в dec.
После всех редактирований осталось последнее. Файл, который служит для определения телефоном стоит ли скин или нет. Это файл ххх.chm (где xxx это имя скина. В моем случае это moto_symbian.chm)

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

Скрин
Скрин
Похожи?))))
А я всем желаю удачного скинодельства и удачи в жизни!) Обойдем китайцев общими усилиями =)))))
_____________________________
Мануал и фотографии составлены мной аКа maxyn
[OFF]Блин! Задолбался печатать :( Так-как много скринов, решил сделать их ссылками, так-как если выкладывать привьюшками - пишет что их слишком много :angry: [/OFF]
+ вложил файлик с описанием блоков и мануал в DOC формате (кстати советую читать в нем)
:spiteful:
Прикрепленный файл kview.rar   ( 265.14 килобайт ) Кол-во скачиваний: 1366
Прикрепленный файл Dopolnenie.rar   ( 560.81 килобайт ) Кол-во скачиваний: 1640
Прикрепленный файл notepad__.rar   ( 1.43 мегабайт ) Кол-во скачиваний: 679
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Subw00Fer
сообщение 6.5.2007, 14:41


Опытный
***

Группа: Пользователи
Сообщений: 102
Регистрация: 3.4.2007
Пользователь №: 129 666
Модель телефона: Matarola E2
Прошивка: Бета2

Рейтинг: 1.5



Вот ето класс! спасибо большое очень полезная информация. вроде понятно щас буду и пробовать.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
t i e s t o
сообщение 6.5.2007, 15:17


Мастер
****

Группа: Пользователи
Сообщений: 217
Регистрация: 25.7.2006
Из: Город-герой Смоленск
Пользователь №: 92 724
Модель телефона: Nokia 1202
Прошивка:

Рейтинг: 86.5



maxyn, твой мануал подоспел вовремя! Мне как раз захотелось сделать качественный скин. Сразу назрел вопрос: скажи как называется файл рамки выделения в главном меню (квадратик этот) и можно ли сделать его прозрачным? А если какой иконки нет в скине, котором я выбрал для редактирования как быть- просто добавить её?
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Umnij
сообщение 6.5.2007, 20:48


Опытный
***

Группа: Пользователи
Сообщений: 149
Регистрация: 11.5.2006
Пользователь №: 82 759
Модель телефона: Rokr E2
Прошивка: 41р final

Рейтинг: 45.5



Цитата(Subw00Fer @ 6.5.2007, 17:41) *

Вот ето класс! спасибо большое очень полезная информация. вроде понятно щас буду и пробовать.

Рамка у иконки
- mm_imgcontain01_left_h.bmp
- mm_imgcontain01_right_h.bmp
- mm_imgcontain01_top_h.bmp
- mm_imgcontain01_bottom_h.bmp
Уголки
- mm_imgcontain01_bottomleft_h.bmp
- mm_imgcontain01_bottomright_h.bmp
- mm_imgcontain01_topright_h.bmp
- mm_imgcontain01_topleft_h.bmp
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Ubiyca
сообщение 15.5.2007, 19:13


Мастер
****

Группа: Пользователи
Сообщений: 245
Регистрация: 26.12.2005
Пользователь №: 63 485
Модель телефона: Nokia N82
Прошивка: V 20.0.062

Рейтинг: 220.5



Цитата(maxyn @ 6.5.2007, 18:26)

сохранив ее в том же формате
*



Я за основу тоже взял скин Infinity, так вот в нем нет анимации иконок, а если я хочу сделать скин с анимацией, как мне быть? Если я сохраню тот же файл в формате gif и удалю тот, что у тебя в формате png, будет ли работать?
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
UnShad
сообщение 16.5.2007, 6:08


Опытный
***

Группа: Пользователи
Сообщений: 135
Регистрация: 28.12.2004
Пользователь №: 30 526
Модель телефона: Atrix HD

Рейтинг: 83



Цитата(Ubiyca @ 15.5.2007, 19:13) *

Я за основу тоже взял скин Infinity, так вот в нем нет анимации иконок, а если я хочу сделать скин с анимацией, как мне быть? Если я сохраню тот же файл в формате gif и удалю тот, что у тебя в формате png, будет ли работать?

Iconrez не соберется с твоими гифами. Такой прикол, что надо картинки сохранять в том же формате как в скине, который редактируешь. Изначально в стандартном скине, например, есть картинка батареи в формате bmp, а вот в скине glass от китайца, вместо bmp стоит png картинка. Как он это сделал не понятно, я уже много способов перепробовал, ничего не получается. Также нельзя в iconrez добавлять картинки. Так что если кто-то додумается как решить эти проблемы, ему будет большой респект!

Сообщение отредактировал UnShad - 16.5.2007, 6:09
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
whitemoto
сообщение 16.5.2007, 8:56


Ветеран
*****

Группа: Разработчики
Сообщений: 553
Регистрация: 22.12.2005
Пользователь №: 63 052
Модель телефона: Motorola ROKR E2
Прошивка: pre

Рейтинг: 165.5



UnShad,
все нормально вставляется, через kview 0.3
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Ubiyca
сообщение 16.5.2007, 12:42


Мастер
****

Группа: Пользователи
Сообщений: 245
Регистрация: 26.12.2005
Пользователь №: 63 485
Модель телефона: Nokia N82
Прошивка: V 20.0.062

Рейтинг: 220.5



whitemoto,
действительно, сохранил всё через версию 0,3 и всё стало на свои места. Спасибо wink.gif
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
UnShad
сообщение 21.5.2007, 8:19


Опытный
***

Группа: Пользователи
Сообщений: 135
Регистрация: 28.12.2004
Пользователь №: 30 526
Модель телефона: Atrix HD

Рейтинг: 83



Кто-то знает как менять цвет текста полученного сообщения?

Сообщение отредактировал UnShad - 24.5.2007, 11:40
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Сумерок
сообщение 6.6.2007, 17:22


Ветеран
*****

Группа: Пользователи
Сообщений: 431
Регистрация: 10.9.2006
Из: Budva
Пользователь №: 98 437
Модель телефона: Nokia E52
Прошивка: latest

Рейтинг: 106



[Font_Griditem*] – подписи иконок в главном меню
[Font_SettingA*], [Font_SettingВ*] – шрифты в главное меню/настройки

не срабатывает. шрифт подписей к иконкам в главном меню остается прежних размеров. Кто знает?
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Создаем скин для Е2, Мега мануал от maxyn · ROKR E2 · Forum
 

Motorola Ситилинк
18 страниц V  1 2 3 > » 
Ответ в темуСоздание новой темы
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



Текстовая версия Сейчас: 15.10.2019, 1:30

Форум живёт: