В данном случае, поскольку шкурка учебная, то она будет иметь такие свойства:
Создание шкурки начинается с Идеи. Лучше всего сперва нарисовать эскиз шкурки в графическом редакторе, а уже потом создавать файлы, необходимые для шкурки.
Что может быть идеей для простой шкурки, предельно не богатой изысками? Разумеется, вышедшая некоторое время назад операционная система "с универсальным интерфейсом"!
С помощью этого эскиза решались такие вопросы:
Несложно заметить, что эскиз выглядит "недоработанным". Так и есть. Впрочем, он ответил на основные вопросы, а большего от него и не требовалось. Поэтому на этом стадия "эскиз" завершена: детали будут дорабатываться на ходу.
Информация о шкурке не имеет каких либо требований, кроме максимальной длины 45 символов. Просто надо заполнить название шкурки, автора и (при желании) всё остальное. В данном случае это выглядит так:
SkinTitle=Sample SkinAuthor=Gilorn SkinVer=4.7.4 SkinWWW=http://www.light-alloy.ru/ SkinCmt=sample skin for education
Избегайте пробелов после знака "равно".
Три самые важные детали, которые делают визитку визиткой:
Поскольку наша шкурка стилизуется под плиточный интерфейс, то и визитка будет плиткой:
Начиная с этого момента придётся сильно полагаться на эскиз и воображение. Ведь создание рисунков для шкуры оценить невозможно: проигрыватель не понимает просто рисунки.
Первый вопрос, который надо решить, это сколько отдельных рисунков создавать. Чем больше рисунков - тем модульнее получится конструкция и тем проще будет развивать шкурку в будущем или использовать её для создания других шкурок. Одновременно, чем больше отдельных рисунков, тем больше пустого места на них будет и тем тяжелее будет шкурка.
После тщательного размышления было решено оформить отдельными рисунками следующие элементы:
С ним проще всего: в файле будет только одно изображение. Всё, что требуется - это просто перенести логотип из эскиза. Можно, правда и добавить что-нибудь.
Здесь уже сложнее, поскольку элементов несколько. Поскольку размер всех элементов стандартен, то можно подумать, как удобно разместить элементы.
Или взять в качестве основы изображение из похожей по оформлению шкурки:
Между прочим, 10 значков контекстного меню являются единым объектом, поэтому изменять их порядок или количество рядов нельзя.
Обратите внимание на фон: он красно-розовый. Его задача - давать однозначный и очевидный ответ на вопрос "это фон?", а также удобно показывать границы отдельных рисунков в файле. Вместо красно-розового цвета можно было подобрать любой другой - это дело личных предпочтений.
К слову, такой модульный подход позволяет копировать часть файла разметки (interface.xml) из старой шкурки в новую.
Тут всё просто (масштаб 500 %)...
...как 67 кирпичей. Увы большое количество настраиваемых цветов не способствует лёгкому пониманию назначения каждого пикселя. И если в будущем потребуется коррекция, придётся тратить уйму времени на определение, какой именно пиксель нужно изменить. Поэтому такой вариант имеет смысл лишь в одном-единственном случае: при использовании специального редактора шкурок.
Наиболее разумный вариант - использовать для каждого цвета не один пиксель, а пиксель с иллюстрацией. Конечно, создание такой системы займёт не один час, но в результате появится несравненно более удобный и наглядный механизм выбора цветов. Например, как этот (масштаб 200 %):
Здесь каждый цвет представлен слоем-заливкой "цвет" с графической маской (инструментарий Photoshop). Все цвета удобно сгруппированы по папкам. В результате уже на этапе первоначального подбора цветов видно, как он будет смотреться. Кроме того, каждый слой имеет говорящее имя, так что нужный слой отыскивается очень быстро. Для изменения цвета здесь нужен лишь двойной клик на соответствующем слое.
В основной файл рисунка пойдёт всё, что не попало в предыдущие три, а именно:
Поскольку дальнейшего развития шкурки не будет, всё можно сделать красиво:
На первый взгляд всё компактно, но даже в этой шкурке есть много свободного места. Просто оно не красное, а серое.
Внимательно присмотритесь к самой нижней серой области. Цифры и элементы громкости и шкалы времени расположены в том же порядке, в котором они будут располагаться на шкурке. Более того, графические константы каждого элемента расположены отностительно других, относящихся к тому же контролу в визуальном порядке. Это всё позволит в будущем понимать что обозначает каждый из элементов.А разметка поможет на следующем шаг определить границы каждой графической константы.
Кроме того, можно заметить, что рисунок, изображающий ещё незаполненную громкость (серый квадрат слева внизу), недорисован справа на 1 пиксель. Это нужно, чтобы визуально скрыть "недоезд" бегунка на тот самый 1 пиксель. Ведь как известно, бегунок ездит из расчёта, что в нём 10 пикселей (а не 9, как в этой шкурке).
Присмотритесь к графическому шрифту. Он начинается с символа "<". Этот символ рисуется перед позицией, если пользователь включает обратный отсчёт времени. Если изобразить этот символ как минус, то получится намного более понятное выражение (как, например, в шкурках Alter Ego, Dub, PK-69 и большинстве других).
Последнее, на что следует обратить внимание, это анимация кнопок с фиксацией. Реакция проигрывателя происходит не на нажатие кнопки, а на её последующее отпускание - отжатие, если угодно. Это ведёт к следующим результатам:
Вот почему надо использовать изменение изображения кнопки не с нижнего левого рисунка, а с правого верхнего. Это недавняя рекомендация, поэтому есть некоторое количество шкурок, которые её не выполняют (просто они появились до рекомендации).
Это самая важная часть работы по созданию шкурки, которую хорошо бы проверять наживую (т.е. примерять недошкурку на проигрыватель). Перво-наперво, нужно создать заготовку: разместить блоки кода в удобном порядке (помним про кодировку UTF-8 with signature):
<?xml version="1.0"?> <SKIN> <!-- Логотип --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Логотип --> </IMAGE> <!-- Заголовок окна --> <IMAGE id="HD" file="main.bmp"> </IMAGE> <!-- Панель управления --> <IMAGE id="FT" file="main.bmp"> </IMAGE> <!-- Список воспроизведения --> <IMAGE id="PL" file="main.bmp"> </IMAGE> <!-- Наборы цветов --> <IMAGE id="Color" file="Color.bmp"> </IMAGE> <!-- Контекстное меню --> <IMAGE id="Menu" file="Rclick.bmp"> </IMAGE> <!-- Иконки мышки в хинтах --> <IMAGE id="Hint" file="main.bmp"> </IMAGE> <!-- Распознавание чисел по чередованию разных цветов внизу блока --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" --> <!-- //Конец разметки основных рисунков на фрагменты // =================== --> <!-- Начало описания применения созданных ранее фрагментов рисунка ======== --> <CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Описание бордюра программы --> <!-- Располагаем кнопки заголовка окна --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Задний план заголовка --> </CTLDEF> <!-- Располагаем кнопки Панели управления --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Задний план панели управления --> </CTLDEF> <!-- Располагаем кнопки Списка воспроизведения --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- задний план кнопок --> </CTLDEF> </SKIN>
Зелёный текст - это комментарии. Они помогают ориентироваться в тексте, но при этом игнорируются программой.
Каждая константа имеет уникальное имя, положение и размер. Если имя можно взять из справочника, то положение с размером придётся определять самостоятельно. Делается это с помощью графического редактора.
Подавляющее большинство графических редакторов отображает координаты курсора и имеет инструмент "выделение прямоугольной области" с указанием размеров выделенной области.
Для целей разметки просто идеально подойдёт PhotoFiltre (бесплатная для некоммерческого использования, официальный сайт, портативная версия). Она при выделении позволяет сразу узнать и позицию и размер. Причём размер выделения можно на месте поправить мышкой:
Таким образом определение всех значений происходит в четыре этапа:
В результате 15-и минут усилий первая часть файла разметки приобретает следующий вид:
<!-- Логотип --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Логотип --> </IMAGE> <!-- Заголовок окна --> <IMAGE id="HD" file="main.bmp"> <AREA id="brd" pos="0,0" size="26,62"/> <!-- Бордюры окна --> <AREA id="bg" pos="4,3" size="18,20"/> <!-- Задний план заголовка--> <AREA id="TitleBG" pos="5,6" size="10,16"/> <!-- Задний план под текстом--> <AREA id="btAbout" pos="0,63" size="26,59"/> <!-- [о программе] --> <AREA id="btExit" pos="27,63" size="45,59"/> <!-- [закрыть] --> </IMAGE> <!-- Панель управления --> <IMAGE id="FT" file="main.bmp"> <AREA id="bg" pos="27,0" size="45,40"/> <!-- Задний план основной панели управления --> <AREA id="btPlay" pos="73,0" size="81,122"/> <!-- [Игра/пауза] --> <AREA id="btPrefs" pos="155,0" size="40,122"/> <!-- [Настройки] --> <AREA id="Digits" pos="2,125" size="120,8"/> <!-- Комплект цифр "<0123456789: >" --> <AREA id="SeekBGfill" pos="34,135" size="24,23"/> <!-- Шкала времени уже заполненная --> <AREA id="SeekThumb" pos="59,147" size="24,11"/> <!-- бегунок по шкале, выравнивание по низу --> <AREA id="SeekBG" pos="84,135" size="24,23"/> <!-- Шкала времени ещё пустая --> <AREA id="SeekHiTick" pos="59,140" size="1,6"/> <!-- штрихи на шкале основные--> <AREA id="SeekLoTick" pos="60,140" size="1,6"/> <!-- штрихи на шкале промежуточные--> <AREA id="VolBGF" pos="2,149" size="9,9"/> <!-- Регулятор звука уже полный --> <AREA id="VolThumb" pos="12,149" size="9,9"/> <!-- Регулятор звука бегунок--> <AREA id="VolBG" pos="22,149" size="9,9"/> <!-- Регулятор звука ещё пустой --> </IMAGE> <!-- Список воспроизведения --> <IMAGE id="PL" file="main.bmp"> <AREA id="bg" pos="27,41" size="45,21"/> <!-- задний план кнопок --> </IMAGE> <!-- Наборы цветов --> <IMAGE id="Color" file="Color.bmp"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!--указываем цвета текста в заголовке окна --> <AREA id="OSD" pos="141,18" size="1,5"/> <!--указываем цвета OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!--указываем цвета автопромотки --> <AREA id="Hint" pos="71,119" size="1,3"/> <!--указываем цвета хинтов --> <AREA id="PL" pos="1,18" size="1,12"/> <!--указываем цвета списка --> <AREA id="Menu" pos="71,18" size="1,7"/> <!--указываем цвета контекстного меню --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!--указываем цвета полноэкранной загрузки файлов --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!--указываем цвета полноэкранной загрузки субтитров --> </IMAGE> <!-- Контекстное меню --> <IMAGE id="Menu" file="Rclick.bmp"> <AREA id="bg" pos="0,0" size="20,23"/> <!-- рисунок для колонки иконок в контекстном меню --> <AREA id="pics" pos="0,24" size="33,84"/> <!-- значки для элементов контекстного меню --> <AREA id="Checked" pos="0,109" size="16,16"/> <!-- маркер отмеченного пункта меню --> <AREA id="Bookmark" pos="22,0" size="11,11"/> <!-- закладка в списке --> </IMAGE> <!-- Иконки мышки в хинтах --> <IMAGE id="Hint" file="main.bmp"> <AREA id="Lclick" pos="150,138" size="22,22"/> <!-- Рисунок ЛКМ --> <AREA id="Rclick" pos="173,138" size="22,22"/> <!-- Рисунок ПКМ --> </IMAGE>
В общем и целом здесь есть только один подводный камень: не все знают, что такое "<" и ">" и чем они отличаются. Поэтому в комментарии лучше указать, что имелось ввиду более понятным языком:
<!-- Распознавание цифр по чередованию разных цветов внизу блока --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" -->
Это финальный этап создания шкурки. И его желательно визуально контролировать.
Есть несколько примечаний, которые необходимо сделать:
В примечаниях это может выглядеть сложно, но если посмотреть их на живой шкуре, станет понятнее.
От чего зависят позиция и размер контролов? Размер - только от того, какое изображение было нарисовано (кроме панелей и полос прокрутки громкости и шкалы времени - они тянутся). Позиция не зависит ни от чего. Она определяется лишь задумкой автора.
<CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Описание бордюра программы --> <!-- Располагаем кнопки заголовка окна --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Задний план заголовка --> <CONTROL type="GfxBtn" pos="0,0" size="26,19" img="HD.btAbout" link="App.About"/> <!-- [о программе] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,19" img="HD.btExit" link="App.Exit"/> <!-- [закрыть] --> <CONTROL type="Text" pos="30,3" size="-50,17" font="Verdana" fontsz="9" top_delta="-1" bold="0" bg="HD.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Текстовая строка заголовка --> </CTLDEF> <!-- Располагаем кнопки Панели управления --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Задний план панели управления --> <CONTROL type="GfxBtn" pos="0,0" size="40,40" img="FT.btPlay" link="App.SuperPlay"/> <!-- [Игра/пауза] --> <CONTROL type="GfxBtn" pos="-40,0" size="40,40" img="FT.btPrefs" link="App.Prefs"/> <!-- [Настройки] --> <CONTROL type="Text" pos="50,6" size="140,7" font="Digits" text=" {POS} > {DUR}"/> <!-- Позиция/Длительность --> <CONTROL type="Text" pos="-90,6" size="45,7" font="Digits" text="{TIME}"/> <!-- Текущее время --> <CONTROL type="Slider" pos="50,31" size="78,9" bg="FT.VolBG" bgsplit="1,19" bgfill="FT.VolBGF" thumb="FT.VolThumb" link="Audio.Volume"/> <!-- Регулятор громкости --> <CONTROL type="Seeker" pos="140,18" size="-50,24" bg="FT.SeekBG" bgsplit="12,6" bgfill="FT.SeekBGfill" thumb="FT.SeekThumb" lotick="FT.SeekLoTick" hitick="FT.SeekHiTick" link="Player.Seeker" OpeningPos="14" OpeningHeight="8"/> <!-- Шкала времени --> </CTLDEF> <!-- Располагаем кнопки Списка воспроизведения --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- задний план кнопок --> </CTLDEF>
После того, как все элементы получают свою позицию и размер, шкурку надо посмотреть на предмет проблем, некрасивых решений и недоработок. Если что - поправить позицию контролов.
Наконец, файл разметки приобретает свой окончательный вид:
<?xml version="1.0"?> <SKIN> <!-- Логотип --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Логотип --> </IMAGE> <!-- Заголовок окна --> <IMAGE id="HD" file="main.bmp"> <AREA id="brd" pos="0,0" size="26,62"/> <!-- Бордюры окна --> <AREA id="bg" pos="4,3" size="18,20"/> <!-- Задний план заголовка--> <AREA id="TitleBG" pos="5,6" size="10,16"/> <!-- Задний план под текстом--> <AREA id="btAbout" pos="0,63" size="26,59"/> <!-- [о программе] --> <AREA id="btExit" pos="27,63" size="45,59"/> <!-- [закрыть] --> </IMAGE> <!-- Панель управления --> <IMAGE id="FT" file="main.bmp"> <AREA id="bg" pos="27,0" size="45,40"/> <!-- Задний план основной панели управления --> <AREA id="btPlay" pos="73,0" size="81,122"/> <!-- [Игра/пауза] --> <AREA id="btPrefs" pos="155,0" size="40,122"/> <!-- [Настройки] --> <AREA id="Digits" pos="2,125" size="120,8"/> <!-- Комплект цифр "<0123456789: >" --> <AREA id="SeekBGfill" pos="34,135" size="24,23"/> <!-- Шкала времени уже заполненная --> <AREA id="SeekThumb" pos="59,147" size="24,11"/> <!-- бегунок по шкале, выравнивание по низу --> <AREA id="SeekBG" pos="84,135" size="24,23"/> <!-- Шкала времени ещё пустая --> <AREA id="SeekHiTick" pos="59,140" size="1,6"/> <!-- штрихи на шкале основные--> <AREA id="SeekLoTick" pos="60,140" size="1,6"/> <!-- штрихи на шкале промежуточные--> <AREA id="VolBGF" pos="2,149" size="9,9"/> <!-- Регулятор звука уже полный --> <AREA id="VolThumb" pos="12,149" size="9,9"/> <!-- Регулятор звука бегунок--> <AREA id="VolBG" pos="22,149" size="9,9"/> <!-- Регулятор звука ещё пустой --> </IMAGE> <!-- Список воспроизведения --> <IMAGE id="PL" file="main.bmp"> <AREA id="bg" pos="27,41" size="45,21"/> <!-- задний план кнопок --> </IMAGE> <!-- Наборы цветов --> <IMAGE id="Color" file="Color.bmp"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!--указываем цвета текста в заголовке окна --> <AREA id="OSD" pos="141,18" size="1,5"/> <!--указываем цвета OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!--указываем цвета автопромотки --> <AREA id="Hint" pos="71,119" size="1,3"/> <!--указываем цвета хинтов --> <AREA id="PL" pos="1,18" size="1,12"/> <!--указываем цвета списка --> <AREA id="Menu" pos="71,18" size="1,7"/> <!--указываем цвета контекстного меню --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!--указываем цвета полноэкранной загрузки файлов --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!--указываем цвета полноэкранной загрузки субтитров --> </IMAGE> <!-- Контекстное меню --> <IMAGE id="Menu" file="Rclick.bmp"> <AREA id="bg" pos="0,0" size="20,23"/> <!-- рисунок для колонки иконок в контекстном меню --> <AREA id="pics" pos="0,24" size="33,84"/> <!-- значки для элементов контекстного меню --> <AREA id="Checked" pos="0,109" size="16,16"/> <!-- маркер отмеченного пункта меню --> <AREA id="Bookmark" pos="22,0" size="11,11"/> <!-- закладка в списке --> </IMAGE> <!-- Иконки мышки в хинтах --> <IMAGE id="Hint" file="main.bmp"> <AREA id="Lclick" pos="150,138" size="22,22"/> <!-- Рисунок ЛКМ --> <AREA id="Rclick" pos="173,138" size="22,22"/> <!-- Рисунок ПКМ --> </IMAGE> <!-- Распознавание цифр по чередованию разных цветов внизу блока --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" --> <!-- //Конец разметки основных рисунков на фрагменты // ==================================== --> <!-- Начало описания применения созданных ранее фрагментов рисунка ========================= --> <CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Описание бордюра программы --> <!-- Располагаем кнопки заголовка окна --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Задний план заголовка --> <CONTROL type="GfxBtn" pos="0,0" size="26,19" img="HD.btAbout" link="App.About"/> <!-- [о программе] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,19" img="HD.btExit" link="App.Exit"/> <!-- [закрыть] --> <CONTROL type="Text" pos="30,3" size="-50,17" font="Verdana" fontsz="9" top_delta="-1" bold="0" bg="HD.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Текстовая строка заголовка --> </CTLDEF> <!-- Располагаем кнопки Панели управления --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Задний план панели управления --> <CONTROL type="GfxBtn" pos="0,0" size="40,40" img="FT.btPlay" link="App.SuperPlay"/> <!-- [Игра/пауза] --> <CONTROL type="GfxBtn" pos="-40,0" size="40,40" img="FT.btPrefs" link="App.Prefs"/> <!-- [Настройки] --> <CONTROL type="Text" pos="50,6" size="140,7" font="Digits" text=" {POS} > {DUR}"/> <!-- Позиция/Длительность --> <CONTROL type="Text" pos="-90,6" size="45,7" font="Digits" text="{TIME}"/> <!-- Текущее время --> <CONTROL type="Slider" pos="50,31" size="78,9" bg="FT.VolBG" bgsplit="1,19" bgfill="FT.VolBGF" thumb="FT.VolThumb" link="Audio.Volume"/> <!-- Регулятор громкости --> <CONTROL type="Seeker" pos="140,18" size="-50,24" bg="FT.SeekBG" bgsplit="12,6" bgfill="FT.SeekBGfill" thumb="FT.SeekThumb" lotick="FT.SeekLoTick" hitick="FT.SeekHiTick" link="Player.Seeker" OpeningPos="14" OpeningHeight="8"/> <!-- Шкала времени --> </CTLDEF> <!-- Располагаем кнопки Списка воспроизведения --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- задний план кнопок --> </CTLDEF> </SKIN>
На данный момент шкуркой уже можно пользоваться но всё ещё неудобно передавать. Теперь её нужно оптимизировать и упаковать.
Оптимизация заключается в изменении графических файлов.
Как известно, формат "bmp" очень расточительно расходует место, поскольку он не имеет встроенных возможностей к сжатию. Но не всё так плохо. Взамен можно сыграть на глубине цвета. Рисунок формата "bmp" поддерживает такие варианты глубины цвета:
Количество цветов в рисунках нашей шкурки следующее:
Как видно, 2 изображения можно сжать до 8-битной глубины цвета, а одно - даже до 4-битной. Чтобы в новом изображении сохранились нужные цвета, их необходимо проиндексировать. Как это сделать, зависит от графического редактора. Например, в Photoshop нужно перейти в главное меню \ Изображение \ Режим \ Индексированные цвета.... В результате проверки оказалось, что для Rclick.bmp сжатие до 256-и цветов визуально незаметно. Поэтому Будет произведено изменение глубины цвета для всех изображений:
Файл | Старый размер, KiB | Новая глубина цвета | Новый размер, KiB |
---|---|---|---|
logo.bmp | 85,1 | 8 бит | 29,4 |
Color.bmp | 71,1 | 8 бит | 23,8 |
Rclick.bmp | 12,3 | 8 бит | 4,0 |
main.bmp | 91,9 | 4 бит | 15,7 |
ВСЕГО | 260,4 | - | 72,9 |
Как оказалось общий объём рисунков уменьшился больше, чем в три раза. Впечатляет! Аналогичным образом нужно поступить с файлом "preview.png" Единственная разница, что формат "png" не имеет 4-битную глубину цвета, а только полную (16,8 млн. цветов) или 8-битную (256 цветов).
Всё довольно просто: берутся все нужные файлы и архивируются в формат "zip". Уровень сжатия - любой, но рекомендуется максимальный. Настройки сжатия лучше оставить по умолчанию, поскольку Light Alloy не понимает современные методы сжатия навроде LZMA.
Наконец, финальный штрих: у шкурки необходимо поменять расширение. Был ".zip" - стал ".las".
Наконец, после одного-двух дней времени, шкурка готова!