Bobr
del.icio.us
digg
facebook
Furl
Google
Memori
Mister Wong
News2
reddit
Slashdot
StumbleUponКак самому создавать скины
Материал из PDA Prime_wiki
Обсуждение на форуме.При создании скинов нужно помнить, что прежде всего вам понадобится упорство, так как возможно вам придётся примерять и переделывать некоторые элементы по несолько раз для достижения оптимального результата. Чтобы избежать путаницы, давайте рассмотрим создание скинов и не только для каждой отдельно взятой программы.
Содержание |
Темы для экрана Today
Процесс создания тем для тудея - то с чего многие начинают свой путь, именно поэтому стоит остановиться на этом по подробнее. Для создания могут быть использованы различные программы.
Theme Generator by Microsoft
Данная программка от Microsoft предназначена для создания тем для экрана Today для ваших Windows Mobile устройств. Скачать программу можно здесь.
Рассмотрим основные шаги создания темок для Today с помощью этой программы:
Шаг 1. Собственно сам запуск программы. Перед нами высвечивается следующее окно:
http://www.liveinternet.ru/images/attach/1/3971/3971044_1.jpg
Нам предлагается на выбор 3 пункта: - Create a new theme - собственно создание новой темы. - Open an existing theme - открыть существующую темы, для возможного редактирования. - Find themes on PocketPC.com - тут всё понятно.
Выбираем первый пункт.
Шаг 2. Нам предлагают выбрать изображение, которое будет служить фоном темы. Тут всё просто, нажимаешь "Browse", указываем место где находится наше изображение и жмём Открыть.
http://www.liveinternet.ru/images/attach/1/3971/3971057_2.jpg
После того как мы выбрали изображение, в окне программы покажется приблизительный вид нашей темы.
http://www.liveinternet.ru/images/attach/1/3971/3971197_3.jpg
Шаг 3. Изменение фона. Для изменений мы должны нажать в этом же окошке Modify This Image.
http://www.liveinternet.ru/images/attach/1/3971/3971438_4.jpg
Нам предлагают изменить настрйкии изображения (Image Options): - Negative - Негатив изображения - Gray Scale - Чёрно белое изображение - Flip - Горизонтальное отображение изображения - Mirror - зеркальное (вертикальное) отображение изображения
Darkness/Lightness - нам позволяют настроить яркость изображения Transparency - Прозрачность изображения
Далее идут 2 кнопки - это поворот изображения по часовой, и против часовой стрелки.
После того как мы настроили изображение по своему желанию жмём ОК и возвращаемся в предыдущее окно.
Жмём Next и переходим к следующей стадии создания темы.
Шаг 4. Настройка фона Меню Старт. Тут так же всё достаточно просто. Нам предлагают выбрать из двух пунктов: - Использовать в качестве фона в Меню старт то же изображение, что используется в качестве основного фона. - Использовать другое изображение. Если мы хотим использовать другое изображение, отмечаем этот пункт, и жмём на Browse, где указываем место нашего изображения. Вы так же можете настроить это изображение нажав Modify this Image (настройки идентичны тем, что были в предыдущем шаге).
http://www.liveinternet.ru/images/attach/1/3971/3971535_5.jpg
Жмём Next
Шаг 5. Выбираем цвета Темы. Нам предлагают настроить следующие цвета: - Today Text - Navigation Bar - Command Bar - Navigation Tray - Message - Important message
http://www.liveinternet.ru/images/attach/1/3971/3971543_6.jpg
Здесь всё интуитивно понятно. Но следует помнить, что подбирая цвета, вы должны опираться на их читаемость на выбранном вами фоне. После того, как вы настроили цвета и пришли к нравящемуся вам виду, жмём Next/
Шаг 6. Сохранение. В строке Name and save your theme - вы указываете название вашей темы. Location - место куда ваша тема будет сохранена. (на мой взгляд проще всего указать Рабочий стол) Вы можете так же отметить пункт "Послать тему на КПК после окончания". Advanced Options - Настройки сохраняемой темы - Нам предлагают выбрать качество Изображения (либо jpg, либо bmp). Советую вам выбрать jpg и опытным путём найти преемлимое соотношение качества (ползунок) и размера темы. После всех настроек, мы нажимаем Finish.
http://www.liveinternet.ru/images/attach/1/3971/3971551_7.jpg
Шаг 7. С читой совестью отрываем рабочий стол (или ное место где вы сохранили), и копируем свою темку на кпк. Выбираем в настройках - Личное - Сегодня свою темку и наслаждаемся.
Extende Themes для Spb Pocket Plus
Так как по сути своей, это своеобразный add-on для Theme Generator, логично его рассмотреть именно сейчас. Оригинальный вариант инструкции вы можете найти здесь. Я же изложу только основные моменты.
Установка.
1. Скачать и установить Theme Generator. Ccылка.
2. Скачать Spb Extended Theme Generator add-on.
3. Установить add-on.
Создание новой темы.
Шаг 1. Создание Extended theme гораздо более трудоёмкое, и, пожалуй, требует от вас хоть какого-нибудь знания Фотошопа. На этом этапе мы создаём Фон нашей темы и фон Меню Старт.
Если мы создаём для QVGA , нам слудует создать изображение с размерами 320x294, и задать ему имя - tdywater.gif. Это будет фон нашей темы.
http://www.spbsoftwarehouse.com/products/pocketplus/themes/tutorial/todaybackground.gif
Нам так же следует создать изображение с размерами 240x320, и назвать его - stwater.gif. Это изображение послужит фоном для меню Старт.
Если мы создаём для VGA , схема абсолютно такая же. Изображение для самой темы создаём с размерами - 640x588, и называем его tdywater.gif.
http://www.spbsoftwarehouse.com/products/pocketplus/themes/tutorial/todaybackground_vga.gif
Изображение в качестве фона Меню Старт, создаём с размерами 480x640, и называем его stwater.gif.
Шаг 2. Создание индикаторов. Данный этап опционален, то есть вы можете создать свои индикаторы, что придаст вашей теме ещё больше индивидуальности, а можете использовать те, что предлагает программа (стоит отметить, что выбор достаточно не плохой).
Если вы решили создать свои индикаторы, давайте рассмотрим как это сделать. вы можете так же изменить уже имеющиеся, они лежат в папке Program Files\Theme Generator\predefined\Today
Мы должны создать следующие файлы:
* pls_backlight.gif - подсветка * pls_backlight_auto.gif - автоподсветка (не на всех КПК) * pls_backupbattery.gif - резервная батарея * pls_battery.gif - батарея * pls_battery_charging.gif - батарея "заряжается" * pls_battery_empty.gif - батарея "пуста" * pls_storage.gif - память КПК * pls_storagecard.gif - SD карта памяти * pls_storagecard2.gif - CF карта памяти * pls_storagecard3.gif - встроенная флэш память
1. определитесь с размерами индикаторов (cм картинку ниже)
http://www.spbsoftwarehouse.com/products/pocketplus/themes/tutorial/todaylayout2.gif
2. форат индикаторов каждый из 10 файлов имеет следующуб схему (за исключением pls_backlight.gif и pls_backlight_auto.gif у которых 3 states вместо 2)
http://www.spbsoftwarehouse.com/products/pocketplus/themes/tutorial/skinlayout.png
3. Цвета Маски. (R, G, H) - описание (255, 0, 0) - горизонтальная панель (128, 0, 0) - горизонтальная панель с ползунком (для подсветки) (0, 255, 0) - вертикальная панель (0, 128, 0) - вертикальная панель с ползунком (для подсветки) (0, 0, 255) - текст (255, 0, 255) - зона кликанья
Альфа канал - используется в скине для установки прозрачности. все цвета в альфа канале должны быть чёрно белыми. Чёрный - непрозрачный, белый - полная прозрачность. Серые цвета - для частичной прозрачности.
Шаг 3. Создание индикатора батареи над панелью задач. (так же как и второй шаг опционален!)
Есть различные дефолтовые индикаторы выглядящие следующим образом:
http://www.spbsoftwarehouse.com/products/pocketplus/themes/tutorial/sample_taskbarbattery.jpg
Но вы так же можете создать свои. Индикаторы могут быть высотой в 2 или 3 пикселя. их толщину мы устанавливаем в настройках Покет+
http://www.spbsoftwarehouse.com/products/pocketplus/themes/tutorial/taskbattery_options.gif
То есть каждый индикатор должен состоять из 2 файлов: plbwater2.gif, plbwater3.gif, для соответственно тонкого и толстого индикатора. файл plbwater2.gif должен быть шириной в 640 пикселей и толщиной в 9.
http://www.spbsoftwarehouse.com/products/pocketplus/themes/tutorial/taskbattery.gif
Шаг 4. Создадим папку, в которую и закиним все созданные нами индикаторы и файлы.
Шаг 5. Запустим Theme Generator и выберем создать новую тему.
Шаг 6. В качестве фона экрана тудей выбираем - tdywater.gif, а фона меню старт - stwater.gif.
Шаг 7. Настраиваем цвета нашей темы.
Шаг 8. в окне имя - мы вбиваем имя нашей темы, но с окончанием Ext, чтобы показать, что это расширенная тема. Если тема для ВГА устройства, приписываем окончание Ext VGA. Жмём Finish.
http://www.spbsoftwarehouse.com/products/pocketplus/themes/tutorial/cr3.gif
Шаг 9. Нам высвечивается незнакомое окно. Именно здесь мы и создаём нашу Extended тему. Ставим галочку у Create an extende theme - это означает что мы созадём, затем отмечаем, что мы создаём ВГА тему (если это действительно так).
В следующем окне, укажите папку, где сохранены все наши индикаторы и файлы.
Ну а дальше всё ясно, либо мы выбираем из имеющихся индикаторов, либо ставим флажок у Custom и показываем где лежат наши файлы.
Шаг 10. После всего, мы ещё раз тщательно проверяем всё ли мы правильно указали и жмём Generate. Если всё указано правильно, то наша темка сгенерируется и сохранится там где мы указали, а если что-то сделано не так, нам вадаётся окно об ошибке - значит проверяем всё ещё раз.
ThemeMaker McDeb от KAMware
А эта программа создания тем для Today, пожалуй, одна из лучших. Скачать программу можно здесь.
Итак, устанавливаем и запускаем. Стоит оговориться, что если вы запускаете ДЕМО версию, то на всех сделанных вами темах будет не очень цензурное слово DEMO. Перед нами появляется достаточно милый интерфейс программы.
http://www.liveinternet.ru/images/attach/1/3982/3982291_11.jpg
Нам предлагают Создать новую тему (Start new theme): - Standard, обычная тема для qvga в портретном режиме. - QVGA, тема для устройств qvga работающих на WM 2003SE и выше, соответственно поддерживающие как портретный, так и ландшафтный режимы. - VGA, тут всё ясно.
Image tools - загрузка изображения - изменение изображения - прозрачность - создание скриншота
Пара слов о каждом подпункте. Загрузка изображения
http://www.liveinternet.ru/images/attach/1/3982/3982309_12.jpg
Нам предлагается либо ужать изображение (3 варианта, по оси Х и Y, либо по X, либо по Y), либо "выхватить кусочек оригинального изображения не сжимая его. Так же его возможность покрутить изображение (горизонтально и вертикально). После того как мы остались довольны результатом, жмём ок.
Изменение изображения, собственно изменение того, что мы только что установили.
Прозрачность, устанавливаем прозрачность основного фона. НО, если мы щёлкнем по кнопке Старт, нам откроется меню, и мы уже будем изменять прозрачность фона меню. Мы так же можем задать цвет "прозрачности".
Cоздание скриншота, для облегчения нашего труда, нам предлагают сделать скриншот, при чём в 4-х различных вариациях.
Color Tools Далее мы задаём цвета нашей Темы. количество настроек здесь немного больше чем в том же ThemeGenerator. вы так же можете щёлкнуть мышкой на объекте для которого задаёте цвет, а затем кликнуть по тому цвету на виртуальном экране Today, который вы бы хотели установить. После настроек я получил приблизительно следующее:
http://www.liveinternet.ru/images/attach/1/3982/3982325_13.jpg
И вот мы наконец доходим до особенности этой программы. А именно настройка внутренних цветов. Кликаем на Internal Colors. Видим следующее окно.
http://www.liveinternet.ru/images/attach/1/3982/3982395_14.jpg
Здесь мы задаём цвет полос (каждой из двух и обеих сторон), а так же цвет кружочков, долгого удержания стилуса на месте (появляющегося меню). Подбираем цвета. Нажимаем Save and Exit.
Далее, мы впечатываем название нашей темы в окошко Theme Name и жмём на сохранить (дискетку), выбираем куда сохранить и всё. Наша тема завершена.
Выключение КПК
psShutXP
Информация взята с оффсайта. Как создать свои скины:
Все управляющие элементы находятся в фиксированных позициях и имеют жесткие размеры, т.е. к этим областям привязаны соответствующие действия:
http://img104.imageshack.us/img104/3562/hotspotsmh9.gif
Элементы управления: 1. выключение экрана; 2. выключение КПК; 3. сброс КПК; 4. блокирование паролем; 5. таймер; 6. иконка в трэе (красная область - иконка для галки); 7. отмена.
Для создания своего скина необходимо просто вписаться в них своей графикой. К примеру, вот два файла для темы основанной на теме SouLuna для ПК: - psshutxp_skin_rus.gif, размер: 220x140 - сам диалог:
http://img147.imageshack.us/img147/5279/psshutxpskinrusdd3.gif
- psshutxp_skin.gif, размер: 16x16 - галочка для IconTray: http://img104.imageshack.us/img104/6665/psshutxpskinog8.gif
Пример исходного файла скина SouLuna со слоями в программе Adobe Photoshop, на основе этого файла можно легко создать свой скин:
http://img135.imageshack.us/img135/9589/soulunasamplenc6.gif
Шаблон элементов для VGA (HiRes) версии формате PSD программы Adobe Photoshop:
http://img104.imageshack.us/img104/903/hirestemplategq1.gif
Название файлов скинов: - psshutxp_skin.gif - галка (16x16); - psshutxp_skin_rus.gif - русская версия (220x140); - psshutxp_skin_eng.gif - английская версия.
Отдельно для VGA версии: - psshutxp_skin_vga.gif - галка (24x24); - psshutxp_skin_rus_vga.gif - русская версия (440x280); - psshutxp_skin_eng_vga.gif - английская версия.
Today плагины
Существует ряд плагинов, которые изменяют внешний вид вашего экрана Тудей и не только. Большая их часть позволяет так или иначе изменять их вид. Давайте их рассмотрим.
spb Pocket Plus
На сегодняшние день существует ряд программ, позволяющие нам выводить на экран Тудея иконки приложений, что значительно облегчает нам запуск программ. У каждой из них есть свои особенности, свои плюсы и минусы, но тем не менее каждая из них имеет право "жить".
Давайте рассмотрим одну из самых первых программ, позволившую нам сделать наш экран тудей наиболее функциональным - spb Pocket Plus. Речь пойдёт уже об обновлённой версии программы, о версии 3.1 и старше. Почему не о предыдущих версиях? Потому что именно с 3-ей версии в программе появилось много приятных нововведений, которые мы и будем украшать.
http://ssh.kms.ru/img/spb-pplus.gif
Итак, при установке программы, в её директории, создаётся папка Icons. Именно с ней мы далее и будем работать. Как мы видим, программа позволяет создавать закладки, и приписывать им различные названия и иконки. Чтобы добавить свои, к уже имеющемуся не маленькому выбору, мы должны открыть файлы tab12 (tab24 для VGA устройств.) Как мы видим, у нас имеется "лента" с различными иконками, каждая из которых имеет размер 12х11 (ширина и высота соответственно) и 24х22 для VGA. Таким образом, что бы добавить один элемент, мы должны увеличить холст на 12 (24) пикселя, и на образовавшееся место разместить наше изображение. Следует отметить, что белый цвет - отвечает за прозрачность, поэтому ту часть изображения, которая не должна отображаться, следует закрасить белым цветом.
http://img.liveinternet.ru/images/attach/1/10047/10047993_1.jpg
После этого, мы сохраняем наше изображение, и заменяем им то, которое мы имеем на кпк. Далее выбираем из списка нашу иконку и наслаждаемся.
Идём далее, переходим к более глобальным вещам - к самим иконкам. Здесь нужно вспомнить, что VGA девайсы поддерживают иконки 64x64 и 32х32, а QVGA устройства 32х32 и 16х16. Поэтому выбираем уже имеющийся любой комплект изображений и увеличием его с правого боку (к примеру) в соответствии со следующими параметрами:
http://img.liveinternet.ru/images/attach/1/10051/10051231_Untitled1.jpg
Почему высота изображения должна быть и является двойной? Потому что первым рядом идёт изображение само, а вторым идёт альфа канал этого изображения. Добавим новые иконки для QVGA устройства. 4 иконки, значит увеличиваем имеющееся изображение на 128х64 (ширину увеличиваем на 128 пикселей, а высота остаётся прежней) В первый ряд мы вставляем сами изображения, а во второй, как уже было сказано выше, их альфа каналы.
http://img.liveinternet.ru/images/attach/1/10052/10052287_2.jpg
Что есть альфа-канал? По сути это чб изображение, отвечающее за то, какая часть основного изобажения будет видна. То место основного изображения, которому соответствует чёрный цвет альфа канала отображаться не будет. (см изображение выше) Где взять альфа каналы? Либо нарисовать их самому, либо если ты работаешь с tga иконкой взять альфа канал уже оттуда. Поэтому, если вы берёте файл с иконками (ico или ещё какой), то лучше извлекать иконки оттуда в формате tga.
http://img.liveinternet.ru/images/attach/1/10052/10052337_2356456.jpg
Таким образом, после всех проделанных манипуляций, мы сохраняем наши иконки в разрешении png и закидываем в папку Icons на кпк заменяя предыдущие. Вот что получилось у меня:
http://img.liveinternet.ru/images/attach/1/10053/10053879_Screen001.png
Resco Plugin
Что ж, для особо заинтересованных опишем как к этой программе делаются скины. Процесс чертовски незамысловат. Распишем построчно файл *.skin.
[General]- тут начинаются основные настройки
DefaultStatusFontSize=10 - размер шрифта для цифровой части индикатора (напр., заряд батареи [color=red]90%[/color])
DefaultStatusFontBold=1 - будет ли он жирным ([color=red]1 - да, 0 - нет[/color])
DefaultLabelFontSize=10 - размер шрифта словесной подписи индикатора (напр., [color=red]Main Memory[/color])
DefaultLabelFontbold=1 - будет ли подпись написана жирным шрифтом
LabelTextColor=255,255,255 - цвет словесной подписи индикатора (в данном случае выбран белый цвет)
ItemPaddingHor=12 - горизонтальный отступ от края экрана в пикселях
ItemPaddingVert=7 - вертикальный отступ от края экрана в пикселях
StatusTextColor=255,255,255 - цвет текста цифровой части индикатора
Indicator=Indicator.png - эта строка используется тогда, когда мы для всех индикаторов используем одинаковую шкалу заполненности, причем она у нас идет отдельным файлом. Это несколько упрощает жизнь: нам достаточно нарисовать ее один раз, назвать Indicator.png и прикреплять к каждой из иконок индикаторов (батарее, карточке...)
IndicatorAlpha=IndicatorAlpha.png - это альфа-канал для нашей шкалы. То, что на нем черное - то будет видно, а белое - обрубается. Если прописали такую строку, то файл нужно назвать IndicatorAlpha.png
IndicatorOrder=0 - положение шкалы относительно иконки ([color=red]0 - иконка накладывется на шкалу, 1 - наоборот[/color])
IndicatorStates=1 - положение шкалы
Последние 4 строки можно не использовать, если рисовать шкалы в самих иконках (т.е. в одном файле с ними)
[Background] - Играем с отступами плагина
MarginHor=4
MarginVert=4
PaddingHor=0
PaddingVert=0
[Settings]
Alpha=SettingsAlpha.png - задаем название файла альфа-канала иконки настроек
[BatteryMain] - БАТАРЕЯ
NumStates=9 - допустим, что мы забили на создание шкалы в отдельном файле. Создаем несколько иконок одинакового размера с постепенно изменяющимся положением шкалы (на одной у нас шкала пустая - 0%, потом 10% и т.д.). Засовываем их в один файл в ряд, слева направо. Именно колличество этих положений индикатора и прописывается в данной строке.
IndicatorPos=55,7 - положение шкалы, ежели она у нас отдельным файлом
Alpha=BatteryMain_alpha.png - название рисунка иконки индикатора
ChargeAlpha=BatteryMain_alpha.png - ее альфа-канал
StatusRect=20,0,70,60 - область под цифровую подпись ([color=red]напр., 0% - 100%[/color]); начало области (от левого края), начало области (от верхнего края), конец области (от левого края), конец области (от верхнего края)
StatusAlignHor=0 - выравниваем ее горизонтально; 0/1/2 = лево/центр/право
StatusAlignVert=2 - выравниваем ее вертикально; 0/1/2 = верх/центр/низ
LabelRect=0,0,0,0 - область под словесную подпись
LabelAlignHor=0 - выравниваем ее горизонтально; 0/1/2 = лево/центр/право
LabelAlignVert=0 - выравниваем ее вертикально; 0/1/2 = верх/центр/низ
[BatteryBackup] - ЗАПАСНАЯ БАТАРЕЯ
NumStates=9
IconPos=0,0
IndicatorPos=55,7
Alpha=BatteryMain_alpha.png
ChargeAlpha=BatteryMain_alpha.png
StatusRect=20,0,70,60
StatusAlignHor=0
StatusAlignVert=2
LabelRect=0,0,0,0
LabelAlignHor=0
LabelAlignVert=0
[ProgramMemory] - ОПЕРАТИВКА
NumStates=9
IconPos=0,0
IndicatorPos=55,7
Alpha=BatteryMain_alpha.png
StatusRect=20,0,70,60
StatusAlignHor=0
StatusAlignVert=2
LabelRect=0,0,0,0
LabelAlignHor=0
LabelAlignVert=0
[StorageMain] - ОПЕРАТИВКА ПОД ФАЙЛЫ
NumStates=9
IconPos=0,0
IndicatorPos=55,7
Alpha=BatteryMain_alpha.png
StatusRect=20,0,70,60
StatusAlignHor=0
StatusAlignVert=2
LabelRect=0,0,0,0
LabelAlignHor=0
LabelAlignVert=0
[StorageBuiltIn] - ака IPAQ FILE STORE
NumStates=9
IconPos=0,0
IndicatorPos=55,7
Alpha=BatteryMain_alpha.png
StatusRect=20,0,70,60
StatusAlignHor=0
StatusAlignVert=2
LabelRect=0,0,0,0
LabelAlignHor=0
LabelAlignVert=0
[StorageSD] - SD-КАРТА
NumStates=9
IconPos=0,0
IndicatorPos=55,7
Alpha=BatteryMain_alpha.png
StatusRect=20,0,70,60
StatusAlignHor=0
StatusAlignVert=2
LabelRect=0,0,0,0
LabelAlignHor=0
LabelAlignVert=0
[StorageCF] - CF-КАРТА
NumStates=9
IconPos=0,0
IndicatorPos=55,7
Alpha=BatteryMain_alpha.png
StatusRect=20,0,70,60
StatusAlignHor=0
StatusAlignVert=2
LabelRect=0,0,0,0
LabelAlignHor=0
LabelAlignVert=0
