motofan logo
57 страниц V < 1 2 3 4 5 > »         
> 

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

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
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Krav
сообщение 11.4.2007, 17:26


Vertigo
******

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

Рейтинг: 877



Цитата(-mak- @ Сегодня, 13:17)

Какой ID у цвета текста при передаче файлов по бт?
*


Имя файла 376, a проценты 366.
Цитата(FluzeR @ Сегодня, 13:25)

Krav, А иконка iTuns на Е1 под каким номером идёт???
*


847.gif (Не выбрана) 900.gif (Выбрана)
Цитата(Kiruha_URURU @ 9.4.2007, 22:25)

Какой цвет отвечает за цвет фона в java приложениях?
*


41-67 или 40-64, спасибо Каплан smile.gif
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
The_B3ast
сообщение 12.4.2007, 13:26


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

Группа: Пользователи
Сообщений: 50
Регистрация: 3.2.2006
Пользователь №: 68 775
Модель телефона: Motor e398>E1
Прошивка: 49R

Рейтинг: 58



А как подвинуть иконки в меню второго порядка вверх? Переместил 494 прямоугольник, но ниче не поменялось sad.gif

Сообщение отредактировал The_B3ast - 12.4.2007, 13:27
Прикрепленное изображение
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
R*erezen
сообщение 22.5.2007, 7:53


Новичок
*

Группа: Пользователи
Сообщений: 6
Регистрация: 14.3.2007
Пользователь №: 126 962
Модель телефона: Motorola E398
Прошивка: R373_G_OE.30.49R

Рейтинг: 0



Народ скажите плз как сделать так чтобы при просмотре Исходящих\Входящих СМС Полоса состояния была видна(а то она закрашена белым цветом)

Сообщение отредактировал R*erezen - 22.5.2007, 7:54
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Бес
сообщение 22.5.2007, 13:09


Оптимист
*****

Группа: Пользователи
Сообщений: 332
Регистрация: 23.7.2006
Из: Омск
Пользователь №: 92 409
Модель телефона: E398

Рейтинг: 299.5



R*erezen, не понял. Скинь скрин.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
bajkot
сообщение 29.5.2007, 13:30


Новичок
*

Группа: Пользователи
Сообщений: 3
Регистрация: 30.3.2006
Пользователь №: 76 523
Модель телефона: E790
Прошивка: R373_48R_Art_Flex_5

Рейтинг: 0



РЕБЯТ! помогите! Делаю скин, почти доделал, решил сделать меню 2*6!
Может кто подскажет из многоуважаемых, какие параметры отвечают за ПЕРЕМЕЩЕНИЕ ПО МЕНЮ???
Заранее спасибо!
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Бес
сообщение 29.5.2007, 16:26


Оптимист
*****

Группа: Пользователи
Сообщений: 332
Регистрация: 23.7.2006
Из: Омск
Пользователь №: 92 409
Модель телефона: E398

Рейтинг: 299.5



bajkot, мма уцп отвечает за меню. Я не понял что ты хочешь, можно поподробней?
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
bajkot
сообщение 29.5.2007, 16:44


Новичок
*

Группа: Пользователи
Сообщений: 3
Регистрация: 30.3.2006
Пользователь №: 76 523
Модель телефона: E790
Прошивка: R373_48R_Art_Flex_5

Рейтинг: 0



Меню нарисовал я таким образом, что получается просто 2 колонки по 6 иконок... А перемещение по ним происходит неправильно, поскольку он ссылается на схему 3*4, вот и задаю этот вопрос...
видел подобную систему в скине "Motolovers Ultimate", скачал, но особой пользы из него не извлек... в том то и дело, что скин отвечает за это перемещение... а какие параметры редактировать даже и ума не приложу... всё обсмотрел...
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Человек С (М)отором
сообщение 30.5.2007, 10:46


Mad
****

Группа: Пользователи
Сообщений: 180
Регистрация: 16.5.2006
Пользователь №: 83 415
Модель телефона: MotoMING

Рейтинг: 82.5



В скиннерформото есть вкладка Структура, там для каждой иконки есть параметры перемещения ("числовое значение ...") , так возьми эти числа из того скина и сделай в своем также.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
bajkot
сообщение 30.5.2007, 16:47


Новичок
*

Группа: Пользователи
Сообщений: 3
Регистрация: 30.3.2006
Пользователь №: 76 523
Модель телефона: E790
Прошивка: R373_48R_Art_Flex_5

Рейтинг: 0



mad.gif Не помогает... всё равно не правильное перемещение! не могу понять в чём дело... sad.gif
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
AlexSugar
сообщение 2.6.2007, 13:35


Moto DJ
****

Группа: Почетные МотоФаны
Сообщений: 297
Регистрация: 23.5.2007
Из: Germany
Пользователь №: 135 889
Модель телефона: HTC Desire S
Прошивка: Android 2.3

Рейтинг: 518



Crazy-Maksimys, все программы, которые ты ищешь, ты найдешь лишь на Варез сайтах (epidem.ru), а это не легально thumbsup.gif , так что не тут, да и на любом мото сайте их не будет.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Создание скина, От начала до конца · Скины. Skins · Forum
 

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

 



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

Форум живёт: