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

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

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


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


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


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


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


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


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

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

Сообщение отредактировал Fenja - 5.9.2010, 8:48
Прикрепленный файл Table.rar   ( 6.51 килобайт ) Кол-во скачиваний: 1348
Прикрепленный файл 4ski.zip   ( 5.56 килобайт ) Кол-во скачиваний: 1362
Прикрепленный файл SkiList.rar   ( 12.19 килобайт ) Кол-во скачиваний: 1381
Прикрепленный файл Data.zip   ( 218.97 килобайт ) Кол-во скачиваний: 3127
Прикрепленный файл Skin2Gif.zip   ( 6.48 килобайт ) Кол-во скачиваний: 1332
Прикрепленный файл S4M_E770.zip   ( 135.54 килобайт ) Кол-во скачиваний: 1165
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
LeOLiX
сообщение 20.2.2007, 17:18


MOTO4EVER
*****

Группа: Пользователи
Сообщений: 676
Регистрация: 30.5.2006
Из: Winnipeg
Пользователь №: 85 412
Модель телефона: Xiaomi Hongmi 1S
Прошивка: MIUI 5
Победитель конкурса 2008

Рейтинг: 479.5



Бес, не это. Эта позиция для надписей типа "Бесшумный", "Вибро", "На улице" и т.д., а мне надо именно к тексту СТИЛЬ. Буду дальше в skinner4moto сидеть ковыряться (описания к этой позиции увы нигде не нашёл), хотя врят ли удасться найти.

Проблема разъяснилась. За надпись СТИЛЬ в окне громкости отвечает ID 539. За помощь спасибо камраду LexusRX400.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Igorstep
сообщение 25.2.2007, 10:13


Новичок
*

Группа: Пользователи
Сообщений: 8
Регистрация: 23.2.2007
Из: г. Омск
Пользователь №: 123 697
Модель телефона: SLVR L7
Прошивка: Iron Mod ACR

Рейтинг: 0



Вот такой вот вопрос - 434, 459, 483, 497 - здесь находятся маленькие GIFы, которые образуют фон некоторых окон. Так вот вопрос-как сделать всесто них одну целую картинку.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Krav
сообщение 26.2.2007, 7:49


Vertigo
******

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

Рейтинг: 877



Цитата(X3M-pro @ Воскресенье, 25 Февраля 2007, 22:39)
Как правильно переделывать скины от е398 для е770????
*


Делаем Скины На Е770
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Робсон
сообщение 12.3.2007, 13:40


Новичок
*

Группа: Пользователи
Сообщений: 3
Регистрация: 3.4.2006
Пользователь №: 77 209
Модель телефона: E398
Прошивка: 373...6fr

Рейтинг: 0



Мужики помогите! Какой ряд (в Скин4мото) несет информацию за положения шрифта на информационом окне скина.
Например: Слово "Успешно сохранено" у меня вообще з боку!
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Бес
сообщение 14.3.2007, 8:32


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

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

Рейтинг: 299.5



Робсон, может ID 432 в Позиция/Размер.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
LeOLiX
сообщение 15.3.2007, 14:53


MOTO4EVER
*****

Группа: Пользователи
Сообщений: 676
Регистрация: 30.5.2006
Из: Winnipeg
Пользователь №: 85 412
Модель телефона: Xiaomi Hongmi 1S
Прошивка: MIUI 5
Победитель конкурса 2008

Рейтинг: 479.5



Кстати, если вы создаете скин с таким расположением элементов в главном меню, что иконки находятся вплотную друг к другу, то есть здесь одна тонкость. Допустим, размер вашей иконки 50х50 (неважно статичной или анимированной), в skinner4moto в позиции/размере тоже предустановлено 50х50. Вроде бы всё хорошо. Но дело в том, что на телефоне у вас при выборе пунктов будет образовываться полоска толщиной в один пиксель (это в тех скинах где в главном меню вообще нету никакой прозрачности). Как это решить? Очень просто. В skinner4moto всё в том же позиции/размере надо проставить на один пиксель меньше ширину и высоту (если у нас было 50х50, то ставим 49х49). Теперь всё должно быть нормальным. Вот такое восприятие скинов на телефонах - вроде бы размер/позиция соответствуют реальному размеру иконки, но на деле оказывается что для правильного отображения надо ставить все на пиксель меньше.

В общем те, кто с этим сталкивался при создании своих скинов меня поймут. А эта инфа будет полезна тем, кто только начинает создавать свои оболочки.
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Crazy-Maksimys
сообщение 18.3.2007, 15:09


Новичок
*

Группа: Пользователи
Сообщений: 20
Регистрация: 18.2.2007
Из: Минск
Пользователь №: 122 937
Модель телефона: Razr V3i+Rokr EM30
Прошивка: Responsorium_1.1.1

Рейтинг: 0



Пацы, у мя много разных скинов, но у всех выпадает видеокамера в мультимедиа и USB синхронизация в подключениях. Чё сделать? (у мя разер в3)
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Бес
сообщение 18.3.2007, 16:13


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

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

Рейтинг: 299.5



Crazy-Maksimys, надоел ты уже. Лично я тебе 2 раза отвечал.
Цитата
4. - При смене скина не меняются иконки Видеокамеры, Itunes, USB-синхронизации, Голосового набора и Режима Авиа, почему?
- Эти иконки вшиты в DRM и соответственно для того, чтобы их изменить нужно править DRM.. Существует альтернатива.

Faq по скинам
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Crazy-Maksimys
сообщение 21.3.2007, 7:31


Новичок
*

Группа: Пользователи
Сообщений: 20
Регистрация: 18.2.2007
Из: Минск
Пользователь №: 122 937
Модель телефона: Razr V3i+Rokr EM30
Прошивка: Responsorium_1.1.1

Рейтинг: 0



Бес, всё что ты написал конечно хорошо, но как вырезать картинки выпавших фукций. Чем работать с DRM? Дело в том, что я ламер в этом деле. Извиняйте за назойливость. sad.gif
Юзер вышелВ друзьяВизиткаП/Я
К началу страницы
+Ответить
Создание скина, От начала до конца · Скины · Forum
 

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

 



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

Форум живёт: