motofan logo
57 страниц V « < 55 56 57        
> 

Создание скина, От начала до конца

Krav
сообщение 20.2.2007, 13:25 Закрепленное сообщение!


Vertigo
******

Группа: Почетные МотоФаны
Сообщений: 719
Регистрация: 7.12.2005
Из: Украина, Киев
Пользователь №: 61 139

Рейтинг: 877



Создание скина

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 килобайт ) Кол-во скачиваний: 1113


Наиболее используемые цвета в таблице xls
Прикрепленный файл 4ski.zip   ( 5.56 килобайт ) Кол-во скачиваний: 1123


Предлагаю найденные позиции отмечать в файле SkiList.csv, что лежит в папке Data программки Skinner4moto, и выкладывать сюда. Или, если кто возмётся, и будет объединять все "находки" и выкладывать в закреплённом сообщении.
Прикрепленный файл SkiList.rar   ( 12.19 килобайт ) Кол-во скачиваний: 1132


Дополненный SkiList.csv - болше строк расшифровано, поддержка новых телефонов, распаковать в каталог S4M
Прикрепленный файл Data.zip   ( 218.97 килобайт ) Кол-во скачиваний: 2889


Исправленный модуль S4M для E770
Прикрепленный файл S4M_E770.zip   ( 135.54 килобайт ) Кол-во скачиваний: 938


Утилитка для разборки графики скина. Програмка извлекает всю графику из .dat файлов с именами прописанными в скине в папку ../gifs. В отличии от S4M не добавляет графику из модуля, в отличии от dat2gif файлы со своими именам в одном каталоге. Может пригодится в скиностроительстве. Для работы требуется наличие MS .NET Framework 1.1 или выше.
Прикрепленный файл Skin2Gif.zip   ( 6.48 килобайт ) Кол-во скачиваний: 1103


Ссылки по теме:
1. Faq по скинам (установка+вопросы)©
2. Нужны Иконки Для Скина?
3. Методика Переделки Скинов Под 372-ю Платформу
4. Переделка Скинов Под Полноэкр. Просмотр От Parus-а

Авторы мануала:
Maximca, Metrofan, dex vega, SEDoiii, Sowa, Side, а я всё собрал в единое целое. :)

Сообщение отредактировал Fenja - 5.9.2010, 8:48
Прикрепленный файл Table.rar   ( 6.51 килобайт ) Кол-во скачиваний: 1113
Прикрепленный файл 4ski.zip   ( 5.56 килобайт ) Кол-во скачиваний: 1123
Прикрепленный файл SkiList.rar   ( 12.19 килобайт ) Кол-во скачиваний: 1132
Прикрепленный файл Data.zip   ( 218.97 килобайт ) Кол-во скачиваний: 2889
Прикрепленный файл Skin2Gif.zip   ( 6.48 килобайт ) Кол-во скачиваний: 1103
Прикрепленный файл S4M_E770.zip   ( 135.54 килобайт ) Кол-во скачиваний: 938
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
грибник
сообщение 10.3.2015, 15:02


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

Группа: Пользователи
Сообщений: 313
Регистрация: 20.6.2009
Из: Тула
Пользователь №: 201 613
Модель телефона: E398
Прошивка: DaR2-16 Ergonomic

Рейтинг: 81



Цитата(MOROROSCHKA_SL. @ 10.3.2015, 14:02) *

грибник,
да зачем всё так сложно? Зачем hex редактор? Причём тут лэнг? Скиньте скин мне в лс и границу, которую не видно, я поищу

А в скиннерМото не знаю как главное меню показать. Наверно, надо у себя скин установить

Сообщение отредактировал грибник - 10.3.2015, 15:04
Прикрепленный файл Spring.zip   ( 1.05 мегабайт ) Кол-во скачиваний: 63
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
грибник
сообщение 14.3.2015, 18:37


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

Группа: Пользователи
Сообщений: 313
Регистрация: 20.6.2009
Из: Тула
Пользователь №: 201 613
Модель телефона: E398
Прошивка: DaR2-16 Ergonomic

Рейтинг: 81



Цитата(Claus398 @ 8.3.2015, 17:08) *

грибник,
мне кажется потому, что область где текст выводится, сдвинута в сторону. то есть фактически при листании заголовок есть, но его не видно просто.


Claus398, еще вопрос. Наверняка его задавали и другие.
Почему при установке нового скина в нем иногда пропадают все строки? Сейчас реанимировал третий Е398 и пришлось удалить некоторые скины в ДаР 1-3. Но это не связано с прошивкой, скорее всего, т.к., то же самое наблюдал при установке скина Аква в ДаР2. И сейчас хотел установить скин Blue Moto, который стоит у меня на ДаР2 вместо родных, тоже пустые строки. Хотя 4 скина установились
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Claus398
сообщение 14.3.2015, 18:51


Авторитет
********

Группа: Разработчики сайта
Сообщений: 12 196
Регистрация: 6.7.2007
Из: Украина. Кривой Рог
Пользователь №: 140 536
Модель телефона: Motorola Rokr E1
Прошивка: My skins mod


Настроение:
Пишу обзоры за еду



Рейтинг: 3107



грибник,
пустые строки, но они перелистываются, нету просто текста? если да, то не подскажу, может быть где то в скине вместо цвета и обводка прозрачность стоит.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
грибник
сообщение 14.3.2015, 19:53


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

Группа: Пользователи
Сообщений: 313
Регистрация: 20.6.2009
Из: Тула
Пользователь №: 201 613
Модель телефона: E398
Прошивка: DaR2-16 Ergonomic

Рейтинг: 81



Цитата(Claus398 @ 14.3.2015, 18:51) *

грибник,
пустые строки, но они перелистываются, нету просто текста? если да, то не подскажу, может быть где то в скине вместо цвета и обводка прозрачность стоит.

перелистываются и открываются. Более того, я по памяти попадаю на нужный пункт
За наводку спасибо, посмотрю ски-файл
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Unreal_man
сообщение 15.3.2015, 12:49


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

Группа: Пользователи
Сообщений: 669
Регистрация: 16.12.2009
Из: Другого Края Земли
Пользователь №: 211 211
Модель телефона: Motorola DROID Turbo


Настроение:
:-I



Рейтинг: 371



грибник,
Цитата
Почему при установке нового скина в нем иногда пропадают все строки? Сейчас реанимировал третий Е398 и пришлось удалить некоторые скины в ДаР 1-3.


Ты мне ответь: у тебя шрифт даровский ща стоит? Возможно дело тут не в ски файле.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
грибник
сообщение 15.3.2015, 19:56


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

Группа: Пользователи
Сообщений: 313
Регистрация: 20.6.2009
Из: Тула
Пользователь №: 201 613
Модель телефона: E398
Прошивка: DaR2-16 Ergonomic

Рейтинг: 81



Цитата

Ты мне ответь: у тебя шрифт даровский ща стоит? Возможно дело тут не в ски файле.


Да, крупный даровский.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Unreal_man
сообщение 16.3.2015, 11:09


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

Группа: Пользователи
Сообщений: 669
Регистрация: 16.12.2009
Из: Другого Края Земли
Пользователь №: 211 211
Модель телефона: Motorola DROID Turbo


Настроение:
:-I



Рейтинг: 371



грибник,

Цитата
Да, крупный даровский.


А поставь-ка обычный мелкий шрифт. Список появился? Я так понял это у тебя из-за крупного шрифта. Тебе надо ски файлы править всех скинов где больше 7ми строк(ну или со скольки там строки появляются).
Правь строки начинающиеся с "0 67" и "0 78", например вот кусок ски файла на 10 строк:

0 67 10
1 3 31 166 47
1 3 48 166 64
1 3 65 166 81
1 3 82 166 98
1 3 99 166 115
1 3 116 166 132
1 3 133 166 149
1 3 150 166 165
1 3 166 166 181
1 3 182 166 197

Думаю ясно, что с этим делать.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Создание скина, От начала до конца · Скины. Skins · Forum
 

57 страниц V « < 55 56 57
Ответ в темуСоздание новой темы
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0

 



Текстовая версия Сейчас: 16.7.2019, 10:12

Форум живёт: