20.2.2007, 13:25
Создание скина
I) Выбираем тему для будущего скина, и ищем графику (обои, иконки, темы оформления для винды, для других телефонов) на эту тему. Иконки лучше брать из одной темы, в одном стиле, например Ti System. Остальную графику (все кроме иконок) удобно брать от скинов к другим телефонам (эрики, сименсы, нокии т. п.) или от тем оформления Windows. Вам понадобятся следующие проги для редактирования графики:
1. Skinner4moto (основная по редактированию скинов)
2. Adobe Photoshop (куда же мы без него)
3. IconDeveloper Professional (основная, открывает иконки форматов ico, ip, exe, dll и др., сохраняет их в форматах bmp, png, targa, gif);
4. IconPackager (очень удобен для просмотра пакетов иконок в формате ip., и отлично работает в связке с IconDeveloper Professional );
5. Ulead GIF Animator (отличная прога, для создания гиф анимации);
6. Windowblinds и SkinStudio (эти две проги – все что вам надо для вытаскивания графики из тем для винды, отлично работают в связке);
II) Начнем с картинок скина. Создаем папку Картинки, кидаем в нее след. картинки из какого-нибудь скина для мотора: gif 5, 7, 38, 46, 75, 433, 434, 435, 458, 459, 477, 538, 610, 621, 630, 631, 632, 633, 634, 635, 675. Это основные картинки скина. Сначала мы должны заменить их. Как делаю я:
Создаю папку с именем скина, в ней папку Картинки, в ней папку Gif. В папку Картинки набираю картинки формата png (самое лучшее качество) для замены основных картинок скина (см. выше). В папке Картинке у нас как бы заготовки, необязательно чтобы они подходили по размеру. В папку Gif уже пронумерованные картинки формата gif для скина нужного размера. Все картинки должны быть в одном стиле, чтобы определиться со стилем и с тем как все это смотрится в телефоне надо сделать лишь картинки софт кнопок, полос выделения в списках, заголовков меню и обои, т.е. gif 5, 38, 46, 75, 458, 621, 630, 632, 634. Теперь все это заменим в каким нибудь скине и закинем в тело, глянем если смотрится норм оставляем и все остальное делаем в том же стиле, можно подправить некоторые картинки в Adobe Photoshop: изменить цвет, уровни, нарисовать границы, сделать подписи и т.п., так чтоб смотрелось лучше. Далее делаем все остальные основные картинки. Часто бывает так что на мониторе все менюшки (скрины) смотрятся отлично, а когда заливаешь их в тело, то цвета изменяются, и смотрится не очень, тут нужно не забывать что Gif поддерживает лишь 256 оттенков, в то время как SVGA мониторы миллионы !!! Поэтому лучше сделать лишь часть картинок, залить посмотреть, не понравилось, взять другую тему.
Итак делаем след. картинки:
Полосы выделения: 5, 38, 75.
Часы аналоговые: 7
Картинки заголовков меню: 46, 458, 610, 621 (не более 22-23 п.)
Средние части окон: 459 (параметры, ввод номера при звонке…), 497 (все остальное)
Окно статуса: 433 (верх), 434 (середина), 435 (низ)
Софт полосы: 630/631 (левая норм./наж.), 634/635 (правая норм./наж.), 632/633/675 (средняя норм./наж./аним.)
Софт полосы: 630/631/652 (левая норм./наж.), 634/635/664 (правая норм./наж.), 632/633/675 (средняя норм./наж./аним.)
Окно сообщения: 477
Окно громкости (яркости…): 522 (538)
Дальше по мелочи (не обязательно)
Статус бар и остальные информ. иконки: 951, 948, 949, 950, 952, 953.
Значки для скрытого плеера, громкости: 87 – 104
Полосы прокрутки: 750 – 779
Бегунок в мультимедиа: 107 – 120
Значки указатели: 611 – 615, 622 – 629
Калькулятор: 685 – 721
При этом всегда все должно сочетаться друг с другом, я делаю сразу крины будущих меню в Фотошопе след. образом. Берем новый рисунок 176х220, вставляем обоину, вставляем вниз софт. полосы, выделяем все кроме софт полос и убавляем яркость (фон), вставляем картинку заголовка (например, 458), затем среднюю часть окон, вот мы получили внешний вид окна параметры, теперь нам видно как все удачно сочетается.…Таким же образом подгоняем все остальные менюшки. Затем заменяем наши картинки в скине, и заливаем скин в тело, и смотрим, как это отображается в теле. Иногда приходиться кое-что подрисовать руками, что-то добавить…это уже воля художника.
III) Итак установив скин в тел мы видим заготовок нашего будущего шедевра, пусть все пока криво и косо…..все размеры и положения картинок (кроме софт клавиш само собой) выставляются после замены всех необх. нам картинок и иконок в скине. Так удобнее потому, что заменив всю графику наши dat файлы больше меняться не будут, изменяя цвета положения и размеры изменяется только ski файл, который мы и будем периодически менять в процессе корректировки скина. Ниже как будем это делать
Skinner4moto – Положения и размеры:
1). Внешний вид:
Софт клавиши: ID 651 – 681(или сгруппированные элементы – софт клавиши левая…)
Высота не более 25 п.
ID – идентификатор
Ряд – расположения картинок в dat файлах.
Слева – кол-во пикселей слева от картинки
Вверх – кол-во пикселей сверху от картинки
Справа – кол-во пикселей справа от картинки
Снизу – кол-во пикселей снизу от картинки
654 – 812 – 0 – .. – .. – 220 –.. – ..
.
655 – 816 – 3 – 198 – 63 – 216 – 61 – 19
658 – 819 – 0 – .. – .. – 220 –.. – ..
659 – 820 – 3 – 198 – 63 – 216 – 61 – 19
660 – 821 – 119 – 198 – 172 – 216 – 61 – 19
663 – 824 – .. – 175 – .. – 220 –.. – ..
.
667 – 828 – 119 – 198 – 172 – 216 – 61 – 19
670 – 831 – .. – 175 – .. – 220 –.. – ..
673 – 834 – .. – .. – .. – 220 –.. – ..
.
.
.
Шрифт оператора, даты цифровые, аналоговые часы, положения джойстика это все вроде понятно (все просто)
2). Идем дальше:
Полосы выделения в списках: Параметры: ID 2 – 4, 2 – 5,(текст), ID 3 – 9, 3 – 10,(сама картинка)
Справочник (Картинки): ID 14 – 24...14 – 26, 16 – 32...21 – 45
Сообщения и все остальное: ID 67 – 244...78 – 266
Полосы прокрутки: ID 4 – 13, 39, 77, 983
Иконки: ID 42 – 165...43 – 183 (9 иконок в меню)
Деле идем по порядку начиная с ID 429 (верх окна статуса). Выставили положения верха, например:
429 – 591 – 2 – 38 – 173 – 67 – 172 – 30
Смотрим снизу от верху у нас 67, значит сверху от середины (ID 430) будет тоже 67, также слева 2, справа 173. Сначала всегда задается размер (ширина, высота, а потом уже правится положение: слева, сверху, справа, снизу).
Таким же образом выставляем размеры и положения всех след. по порядку окон до ID 562 (положения джойстика), затем выставляем ID 608 – 620, 983 – 985. Если вы сделали иконки калькулятора то придется выставлять и их положения и размеры (ID 722 - 747)
Сложнее дело со значками громкости, бегунков. Значки громкости расположены как бы в своем окне, относительно которого и изменяются их координаты. Рецептов здесь нет, корректируете, сохраняете, меняете на теле ski, смотрите, как все это отображается, и подгоняете дальше.
Я не буду подробно описывать как все это изменять, этому должен научится каждый сам на своем опыте.
IV) Цвета: Основные цвета находятся в Сгруппировных элементах. Остальные в окне Цвета. Вы найдете большинство описанных цветов. Вот некоторые которые сложно найти сразу:
Цвет фона меню: ID 41 – 67 (Цвет фона, фон окон второго слоя)
Окна подменю: ID 603 – 764
Текст в окнах подменю (также текст при звонке, в справочнике): ID 990 – 1149
Текст ввода номера: ID 41 – 68
Фон в плеере, камере: ID 41 – 95
С прозрачностью нужно быть очень осторожным, из за нее многие глюки в скинах, такие как пропадание графики и т.п. На главном виде (где дата, оператор и т.п.) можно ставить любые прозрачности и кол-во контуров для текста, на софт полосы тоже и в главном меню текст пунктов меню. Все остальные тексты лучше делать без контуров, и с нулевой прозрачностью.
Цвет фона меню при прозрачности более 5 дает такие глюки как пропадание линий подчеркивания при пролистывании вниз например в справочнике.
V) 1). Также можно добавлять пункты в меню:
Например хотите вы сделать скин типа Неон из обычного(где меняется только одна иконка главного меню, остальные статичные), открываете ski в блокноте, находите строки:
0 42 9 (42-статичные иконки, 9-кол-во иконок в меню)
.
0 43 9 (аним. иконки)
.
.
до 1 44 .
и меняете их на строки из ski файла скина Неон.
0 42 9
.
0 43 9
.
до 1 44 .
Только не забывайте после блокнота прогонять ski через прогу SkinRepair.
Аналогично можете сделать 12, 14 и т.д. иконок в меню из скина с 9 иконками:
Находите
0 42 9 (42-статичные иконки, 9-кол-во иконок в меню)
.
0 43 9 (аним. иконки)
.
.
до 1 44 .
меняете 0 42 9 на 0 42 12 ( 14 и т.д.), т. е. у нас уже 12 иконок, также 0 43 9 на 0 43 12...
и добавляете еще по 3 иконки в статичные и анимированные:
то есть 3 строки до 0 43 12, и 3 строки до 1 44.Эти 3 строки вы можете скопировать из любых уже выше описанных иконок, а потом все (размер и положение) подправите в Skinner4moto.
2). Можно изменить кол-во строк в списках (сообщения, параметры) аналогичным образом, находя нужные строки и удаляя, либо прибавляя новые. Найти описание каких либо картинок в ski очень просто: Открываете скин в Skinner4moto, заходите Положения и размеры, ищите нужную картинку, щелкаете по ней два раза, и видите её описание в ski, далее открываете этот ski блокнотом и правите.
VI) Иконки. Их можно делать или сразу еще до набора картинок скина, или уже после замены и корректировки всех картинок в скине, по настроению.
Здесь тоже все просто. Я делаю папки 48х48 и 64х64, затем в каждой из них папки gif. В папки 48х48 и 64х64 набираю иконки прогой IconDeveloper Professional, в формате png, затем открываю их в Adobe Photoshop и делаю кадры и сохраняю в папки gif, затем по кадрам открываю каждую иокнку в Ulead GIF Animator и делаю анимацию.
Ну и еще раз повторю удобнее сначала сменить всю графику в скине (картинки и иконки), залить все это в тело, а адльше уже корретктировать положения, размеры и цвета, меняя только ski в теле, и оставляя все dat с графикой, это быстрее чем менять каждый раз все dat.
Прочитав все это вы я думаю поймете как нелегко сделать классный скин…но самые решительные и выносливые примутся за работу и доведут её до конца, пусть не сразу, да тут нужно вдохновение…но когда нибудь им самим будет приятно смотреть на то что они сделали сами, своими руками и своим художественным умом.
ЖЕЛАЮ ВСЕМ ВАМ УДАЧИ!!! :)
Небольшой мануал для тех кто хочет сделать прозрачную софт-полоску:
Включил с помощью SkiMan (Skins Manager), там нажимаете кнопку More->Patch SKI on hard disk, ставите галочку на Soft buttons - Transparent, нажимаете OK и выбраете SKI файл скина.
Потом чтобы задать степень прозрачности полоски надо править значения в SKI файле по адресам:
2 650 - (Left Normal) Левая нормальная
2 653 - (Left Pressed) Левая нажатая
2 657 - (Left Normal) Левая нормальная
2 662 - (Right Normal) Правая нормальная
2 665 - (Right Pressed) Правая нажатая
2 669 - (Right Normal) Правая нажатая
2 672 - (Middle Leer) Центральная неактивная
2 677 - (Middle Anim) Центральная анимированная
2 679 - (Middle Pressed) Центральная нажатая
2 680 - (Middle Normal) Центральная нормальная
Во всех эти строчках после патча стоит 4, вот ее и надо менять, самое интересное что 1 это максимальная прозрачность.
Описания точно не проверял, просто по смыслу так должно-быть.
Прозрачность шрифта на софт полоске настраивается как обычно средствами Skinner4Moto
Основные цвета:
Таблица в которой расписаны иконки (пока только те которые используюстя в качестве пунктов меню) по принципу: номер иконки в размере 33х33 - номер той же статичной иконки - номер той же анимированной иконки - название пункта меню.
Table.rar ( 6.51 килобайт )
Кол-во скачиваний: 1351
|
Наиболее используемые цвета в таблице xls
|
4ski.zip ( 5.56 килобайт )
Кол-во скачиваний: 1362
|
Предлагаю найденные позиции отмечать в файле SkiList.csv, что лежит в папке Data программки Skinner4moto, и выкладывать сюда. Или, если кто возмётся, и будет объединять все "находки" и выкладывать в закреплённом сообщении.
|
SkiList.rar ( 12.19 килобайт )
Кол-во скачиваний: 1382
|
Дополненный SkiList.csv - болше строк расшифровано, поддержка новых телефонов, распаковать в каталог S4M
|
Data.zip ( 218.97 килобайт )
Кол-во скачиваний: 3127
|
Исправленный модуль S4M для E770
|
S4M_E770.zip ( 135.54 килобайт )
Кол-во скачиваний: 1166
|
Утилитка для разборки графики скина. Програмка извлекает всю графику из .dat файлов с именами прописанными в скине в папку ../gifs. В отличии от S4M не добавляет графику из модуля, в отличии от dat2gif файлы со своими именам в одном каталоге. Может пригодится в скиностроительстве. Для работы требуется наличие MS .NET Framework 1.1 или выше.
|
Skin2Gif.zip ( 6.48 килобайт )
Кол-во скачиваний: 1333
|
Ссылки по теме:
1. Faq по скинам (установка+вопросы)©
2. Нужны Иконки Для Скина?
3. Методика Переделки Скинов Под 372-ю Платформу
4. Переделка Скинов Под Полноэкр. Просмотр От Parus-а
Авторы мануала:
Maximca, Metrofan, dex vega, SEDoiii, Sowa, Side, а я всё собрал в единое целое. :)
Сообщение отредактировал Fenja - 5.9.2010, 8:48
