Статьи пользователей » 02.11.2005 - Учимся рисовать "скины" - DNK

Учимся рисовать «скины»

Автор: DNK
Редакция: GOTVIEW

В данной статье я расскажу, как самому нарисовать «скин» для программы GoTView на основе тех возможностей, что открыты в самой программе и без каких-либо дополнительных знаний. (Художественная фантазия – приветствуется). Лично я использовал 2 программы: Corel Photo-Paint и Compact Draw. Можно использовать любые версии этих программ, а также аналогичные: вместо Corel’a – Photoshop, а Compact Draw заменить любой, которая может путём наложения света и тени придать т.н. «объёмность» простым формам (прямоугольник, круг и т.д.). Есть и плагины для Corel’a и Photoshop’a, с такими же возможностями. Для нашего изделия понадобиться любой, уже существующий «скин», например «GoTView» (по умолчанию C:\Program Files\GoTView\Skins\GoTView). Далее придётся разбить статью на две части: описание файла «параметры конфигурации», т.е. тому, что в нём написано, что оно обозначает и, как следствие, что мы можем использовать; и, непосредственно рисование. С чтения какой из частей начать решаем сами. (Справедливости ради надо заметить, что, скорее всего, человек, знакомый со структурой таких файлов, наверняка занимался «скинами», а человек, рисовавший кнопочки, знает, куда их потом поставить. А, по сему, новичкам читать придётся всё, но написать удобнее по главам, нежели пошагово).

Часть 1. «Параметры конфигурации»

Открываем с помощью блокнота файлик Skin (C:\Program Files\GoTView\Skins\GoTView) и пытаемся разобраться. Существуют определённые правила отображения информации в таких файлах, создания групп кнопок и т.д., но заниматься здесь теорией мы не будем. Просто изучим то, что есть, что уже создано и работает (так, как есть, а не почему работает и зачем так сделали). Для начала ставим перед каждой открывающейся квадратной скобкой курсор и жмём «Enter». Так мы разбили файл по объектам исключительно для удобства восприятия. Каждый объект (название которого написано в этих самых скобочках) это кнопка, ползунок и т.п.
Немного азов:
  • все размеры и расстояния измеряются в пикселях.
  • цвет обозначен 3 цифрами (RGB) в 16-тиричной системе счисления
  • Top – расстояние сверху
  • Left – расстояние слева
  • Width – ширина
  • Height – высота
  • Color – цвет
  • Image – рисунок в формате .bmp
  • Font – шрифт и его настройки (FontColor – цвет шрифта и т.д.)
Стоит разъяснить обозначение цвета. С использованием программы Paint, имеющейся на каждом компьютере это сделать проще всего. Все цвета палитры RGB состоят из сочетания трёх основных Красного, Зелёного и Синего (Red, Green, Blue). Открываем Paint, дважды кликаем на любой цвет палитры (1), в появившемся окне выбираем «определить цвет» (2) и видим данные выбранного цвета (3). (См. скриншот).
То есть наш цвет можно записать так: 128 128 64. Теперь переведём каждое число в 16-тиричную систему. Проще всего это сделать с помощью встроенного в ОС Windows калькулятора. Открываем его в инженерном виде и просто пишем число. Далее выбираем 16-тиричную систему (Hex) и видим наше число, записанное в этой системе. Следовательно, если бы мы хотели записать выбранный цвет в файле конфигурации «скина», то строчка выглядела бы так: Color=0x808040
Итак разберём первый, не самый простой, но основной объект файла конфигурации: Это описание основной панели «скина» на которой расположатся все кнопочки (см. изображение в той же папке: mainform.bmp) [MainForm]
Color=0x0F0000
Image=mainform.bmp
Top=0
Left=0
MainWidth=358
MainHeight=305
TransparentColor=0xFF00FF
TransparentColorTolerance=0x030303 [MainForm] – название
Color=0x0F0000 – скорее всего это цвет фона «под» рисунком панели. Мне это не понадобилось.
Image=mainform.bmp – рисунок, находящийся в этой же папке, который и есть панель.
Top=0 – (сверху 0 пикселей) см. ниже
Left=0 – (слева 0 пикселей) – левый верхний угол панели, начало отсчёта всех дальнейших размеров «скина» (оставляем без изменения).
MainWidth=358 – ширина панели
MainHeight=305 – высота панели
Эти два параметра могут быть больше реальных размеров панели, но не меньше, иначе панель не поместится в указанные параметры и будет выглядеть как бы «обрезанной».
- TransparentColor=0xFF00FF – очень важный параметр – прозрачность. Мы видим цвет: FF00FF, он же в 10-тичной системе: 255 0 255, он же: _________. Любая часть панели, закрашенная таким цветом, будет прозрачной. Поскольку формат .bmp не поддерживает прозрачность то все объекты на «скине» прямоугольной или квадратной формы. Чтобы сгладить, например, углы, просто закрашиваем их таким цветом. (снова смотрим на рисунок mainform.bmp и моя тирада становится понятной).
- TransparentColorTolerance=0x030303 – допуск изменения цвета прозрачности. Мне не понадобилось.
Прим: Если уже что-то стало не понятно, то можно обратиться ко второй части статьи, рисованию, где размеры панели мы установим сами и сгладим углы. Удобнее при чтении постоянно сверяться с файлом «Skin», рисунками из той же папки и главой 2.
Далее следующий объект, так же влияющий на весь «скин». [Caption]
Image=caption.bmp
Top=-15
Left=-15
Width=390
Height=208
Прим: Точнее для восприятия параметры следовало бы написать так:
[Caption]
Image=caption.bmp
Top=0
Left=0
Width=358
Height=193
Это область, которая при нажатии на кнопку «размер панели» останется видимой. Image=caption.bmp. Как мы видим, в папке рисунка с таким названием нет. Он ведь и не нужен, т.к. задача обозначить только область. Координаты верхнего левого угла отрицательные. Это так подогнали разработчики. Ширина больше панели. Это тоже не важно, а вот высота меньше изначальных размеров. Т.о. при нажатии на кнопку «размер панели» наш «скин» как бы обрежется снизу, то есть уберётся нижняя часть с дополнительными настройками. Следующий объект [GradientCaption] – просто кружочек, индикатор: активна программа в данный момент или нет. Посмотрев на параметры, увидим, что он находится за пределами скина. Изменив «Top» и «Left» помещаем его в область панели и решаем, нужен или нет. Понятно, что изменив «Top» и «Left» на значение, например, 100 и 48 мы увидим кружочек на 100 пикселей ниже и на 48 пикселей правее левого верхнего угла панели. Меняем цвета по вкусу, размер (Width и Height) тоже, а вот до параметра Style нам не добраться. Несколько вариантов предустановленны и мы можем только посмотреть варианты, изменяя значение (0,1,2,3). Я использовал этот объект в левом верхнем углу «скина» GoTView (QCD).
[GradientCaption]
BeginColorActive=0x000000
EndColorActive=0x00FFFF
BeginColorUnactive=0
EndColorUnactive=12500670
Style=2
Top=594
Left=770
Width=15
Height=15

И далее по списку:
[CheckBoxOn]
Image=CheckBoxOn.bmp

[CheckBoxOff]
Image=CheckBoxOff.bmp
Кнопки «звук включён», «оставлять звук», «чёрно-белое», «всегда сверху», «подсказки» и «кнопка taskbar» могут быть только одинаковыми и иметь два варианта (включено/выключено). Эти два параметра и указывают на рисунки: включили – используется картинка CheckBoxOn.bmp, выключили - CheckBoxOff.bmp. Параметры расположения кнопок найдём ниже в файле, под именами: [SoundOn], [KeepSnd], [BW], [Topmost], [Hints], [TaskBarBtn]. Как и где расположить кнопку мы знаем: (Top=288, Left=144 – отсчитываем сверху 288, слева 144 – это и будет левый верхний угол рисунка кнопки. Она наложится в это место поверх панели), а вот с параметрами Width и Height интереснее. Это не размер кнопки. Размер в пикселях будет такой, какую кнопку мы нарисовали (например 13х13), не больше и не меньше. Width и Height отвечают за видимость кнопки и одновременно за область, в которой она будет нажиматься (отсчет с левого верхнего угла кнопки). То есть при размере 10 и 10 наша кнопка уменьшится на 3 пикселя снизу и справа , а при параметрах 20 и 20 кнопку мы увидим целиком, но и при клике правее или ниже на 7 пикселей кнопка будет срабатывать. Следующие 6 объектов отвечают за изображение кнопок переключения каналов: [ChnlUpBtnUp]
Image=ChnlUpBtnUp.bmp – такой рисунок будет на кнопке “ ^ “ в нормальном состоянии [ChnlUpMouseOver]
Image=ChnlUpMouseOver.bmp – такой – в момент наведения на кнопку курсора мышки. [ChnlUpBtnDown]
Image=ChnlUpBtnDown.bmp – такой – в момент нажатия на кнопку.
Далее снова вернётся рисунок нормального состояния. Для кнопки “ v “ – аналогично ([ChnlDnBtnUp], [ChnlDnMouseOver], [ChnlDnBtnDown]). В данном «скине» все три рисунка одинаковые. Как это будет выглядеть при разных рисунках мы разберёмся в главе 2, на практике. Параметры расположения кнопок ниже в файле ([ChnlUp] и [ChnlDn]). Далее: [Minimize], [Hide], [Close], [Expand] (минимизировать, спрятать, закрыть, размер панели). Тут всё просто: один рисунок на кнопку и расположение. [ChnlDnC] и [ChnlUpC] – рисунков к этим кнопкам нет, они не используются. Не использовал их и я, но расскажу что это и для чего. Если мы решим расположить кнопки переключения каналов на убирающейся части панели, то не сможем переключать каналы, когда «скин» раскрыт не полностью. А это основные кнопки. Так вот если мы их ([ChnlDnC] и [ChnlUpC]) нарисуем и обозначим место на не закрывающейся части панели, то при развёрнутом «скине» их видно не будет. В свёрнутом - кнопки появятся. Минусы: 1 – кнопке можно присвоить только один рисунок, 2 – место, где будут появляться эти кнопки должно быть пустым, иначе они перекроются другими кнопками, а это значит, что в развёрнутом виде на не убираемой части «скина» будет неиспользуемое место, которого обычно не хватает. Плюсы: можно сделать «скин» минимизирующийся до узкой полоски с 3-4 кнопками (канклы+, каналы-, закрыть) и регулятора громкости ([SliderCVolume2]) [ButtonCapture], [ButtonChannels], [ButtonScheduler], [ButtonSettings], [ButtonTeletext], [ButtonTVGuide], [ButtonListing] (Захват, Каналы, Планировщик, Настройки, Телетекст, ТВ программа, Листинг) каждая из этих кнопок имеет один рисунок и две предустановки: Flat=0 и Flat=1, обрисовывающие область нажатия. Далее примеры, на которых видны варианты:
1). Flat=0, Width и Height больше размера кнопки
2). Flat=1, Width и Height больше размера кнопки
- «спокойное» состояние:


1) 2)
- при наведении мыши:


   
- при нажатии:


   
Прим: Рисунок не остаётся на указанном месте при Width и Height больше размера кнопки, а смещается в центр области нажатия. При Width и Height равным размерам кнопки эффекты не видны (кроме нажатия).
Как видно, мы можем только менять рисунок и выбрать предустановку, однако мне удалось для 4-х кнопок сделать по два рисунка путём использования других объектов расположенных в файле ниже. Дойдём и до них.
Следующая кнопка текстовая [ButtonFullscreen] (Режим) полностью идентична предыдущим, только не имеет рисунка и имеет настройки шрифта. Параметр FontHeight=-13 для меня остался загадкой, остальные понятны.

Кнопки [ButtonFreqUp] и [ButtonFreqDn] (Частота) такого же типа, но в этом «скине» не используются, убраны за размеры рабочей области (Left=840). Не работал с ними и я т.к. мне такой вариант был не нужен, а более широкий по возможностям расположен в файле ниже. Дойдём и до его описания.

Переходим к ползункам. [SliderCVolume], [SliderBrightness], [SliderContrast], [SliderHue], [SliderSaturation], [SliderSharpness], [SliderVolume] (громкость общ., яркость, контраст, оттенок, насыщенность, резкость, громкость канала).

Объекты такого типа все одинаковые. Рассмотрим на примере первого: [SliderCVolume] (общая громкость) Orientation=0 – сумасшедшая цифра вместо нуля пусть нас не пугает. Тут вариантов три:
0 – ползунок расположен горизонтально (минимум слева, максимум справа)
1 – ползунок расположен вертикально (минимум внизу, максимум наверху)
2 – ползунок расположен вертикально (наоборот, минимум наверху)
Эти цифры и надо использовать, но не просто так, а только проверив следующие строчки.
ImageHRuler=SliderImageHRuler.bmp – полоска, область, по которой будет двигаться ползунок, в случае горизонтального расположения.
ImageHThumb=SliderImageHThumb.bmp – ручка ползунка при горизонтальном расположении, изображённая дважды (см. рисунок в папке) левую мы видим постоянно, правая отображается при наведении мыши и перемещении. (на этом «скине» они одинаковые, по сему смотрим часть 2 этой статьи).
ImageVRuler=SliderImageVRuler.bmp – область при вертикальном расположении.
ImageVThumb=SliderImageVThumb.bmp – ручка ползунка при вертикальном расположении.
Top=140
Left=226
Width=110
Height=14
Color=0x808080
Далее вроде понятно, однако есть несколько тонкостей:
- Если ползунок расположен, например, горизонтально, то параметры ImageVRuler и ImageVThumb лучше вообще убрать. Рисунки должны соответствовать (т.е. полоска, по которой будет двигаться ползунок и сам ползунок должны быть нарисованы правильно) и Width и Height – соответствовать горизонтальному расположению. Иными словами, открыв файл конфигурации какого-либо «скина» и просто поменяв параметр Orientation программа может выдать ошибку (не смотря на то, что все четыре параметра Image имеют правильные ссылки на правильные рисунки). Лучше отнестись внимательно ко всем строчкам объекта.
- Если полоска будет меньше ручки ползунка а параметры Width и Height позволяют увидеть всё, то пустое пространство будет закрашено серым цветом (Color=0x808080) и выглядеть на зелёном, например, «скине» это будет так. Чтобы исправить это можно либо подобрать цвет заливки пустого места, либо рисовать полоску по ширине ползунка с учётом цвета панели. Можно попробовать заменить цвет заливки на прозрачный: вместо Color=0x808080 - Color=0xFF00FF. (Помните начало статьи?) Однако прекрасно создавая прозрачность на основной панели и ручке ползунка этот трюк не предсказуем на кнопках и остальных объектах. Пробуйте.

- Ползунки [SliderWhiteBalance], [SliderBackLightComp], у меня не использованы (тюнер 7135).
- [SliderCVolume2] – см. выше, где описано [ChnlDnC] и [ChnlUpC]

Итак, мы подошли к объектам типа «Lable». Это объекты отображения информации, текстовые. На некоторые из них можно нажимать и, как мы увидим дальше, вполне успешно. Сложного ничего нет. Но объяснить нужно немного не по порядку расположения.
[LabelCnlName], [LabelSoundOn], [LabelBW], [LabelKeepSnd], [LabelTopmost], [LabelHints], [LabelTaskbar], [LabelFreq], [LabelCnlNum], [LabelSource], [LabelSystem] (название канала, звук включён, чёрно-белое, оставлять звук, всегда сверху, подсказки, кнопка taskbar, отображение частоты канала, номер канала, источник сигнала, система).
Объекты со 2-го по 7-ой включительно (выделены цветом) дублируют аналогичные кнопки. Кликнув по надписи можно включить\выключить данную функцию. Я не увидел практического применения этих объектов. Они занимают очень много места. Если рядом с кнопкой нарисовать (прямо на панели), например, символ, то назначение кнопки становится понятно, а место экономится. Кроме того при наведении мыши видна подсказка. Ставим «скин» TVAmp, GoTViewWood или GoTView(QCD) и смотрим исполнение вышеописанного на них.

[LabelCnlName]
Top=22
Left=24
Width=233
Height=16
Color=0x0F0000
FontColor=0xFF0000
FontHeight=-12
FontName=Arial Cyr
FontSize=9

Этот объект пишет в указанном месте (Top=22, Left=24) название канала. Width=233 рассмотрим внимательнее. Ширина видимого пространства кажется слишком большой, но если, например радиоканал называется у нас «Радио семь на семи холмах», то при меньшем значении мы увидим надпись не полностью. Можно, конечно, и переименовать название канала. Решаем сами, пробуем. Параметры Color=0x0F0000 и FontHeight=-12 мне не пригодились, остальные – настройки шрифта – понятны.

[LabelFreq] аналогичен предыдущему, а вот в объекте [LabelCnlNum] появились новые строчки: ShadowColor=0x000000 – цвет тени
ShadowPos=0x000000 – позиция тени (этот параметр указан не правильно. Варианты: 0,1,2,3. Но ошибки нет, программа воспринимает как 0).
ShadowSize=0 – удаление тени от основного объекта (0 – тени нет (т.к. она находится прямо за объектом), 1, 2, 3…. – удаление).
Смотрим примеры: при FontColor=0xFF0000 и ShadowColor=0x0000FF
ShadowPos ShadowSize Что получилось
0 2
1 2
2 2
3 2
2 1
2 4
[LabelSource] и [LabelSystem] (источник сигнала и система) – аналогичны.

Следующий параметр [CnlSwitch] – готовые кнопки переключения каналов. Вариантов изменения 2 ( и )+ можно изменить размер. Мне этот объект был совершенно не интересен.

[FreqSpin] – подстройка частоты – аналогичен предыдущему, но имеет гораздо больше вариантов изменения. Но эти изменения касаются, как и в случае выше, уже готовых, нарисованных вариантов, редактирование которых не возможно. Мне не пригодилось, т.к. для создания уникального «скина» необходимо рисовать всё самому. Просто потому, что готовые варианты почти никогда не подойдут к цветовому фону или стилю задумки. Например, в сглаженно-овальный зелёный «скин» не годятся квадратные серые кнопки. Вне зависимости от их размера и местоположения.

Вспомните примечание к кнопкам «захват», «настройка» и т.д. Вот мы и добрались до объектов, которыми можно заменить кнопки «захват», «каналы», «планировщик» и «настройка». Делаем следующее: объекты [ButtonCapture], [ButtonChannels], [ButtonScheduler] и [ButtonSettings] выносим за пределы рабочей области (Left=700, Top=600), а объекты [ImageCapture], [ImageChannels], [ImageScheduler] и [ImageSettings] помещаем на нужные нам места. Естественно рисунки должны быть уже готовы и добавлены в папку с правильными названиями: [ImageCapture]
ImageUp=ImageCaptureUp.bmp – нормальное отображение кнопки.
ImageDown=ImageCaptureDown.bmp – отображение в момент нажатия.
Top=200
Left=244
Width=25
Height=25

То есть рисуем кнопку, называем её ImageCaptureUp, сохраняем в формате .bmp и помещаем в папку «скина» и т.д.

Зачем это всё? Объясню. Если кнопка круглая, то используя объект [ButtonCapture] это будет выглядеть так:
В нормальном состоянии и в момент нажатия Используя объект [ImageCapture] – мы можем использовать 2 рисунка для кнопки и избавимся от предустановки «нажатие». Смотрим, что получается:

В нормальном состоянии а в момент нажатия можем её «подсветить», либо или «вдавить» и т.д.
То есть вариант «в момент нажатия» рисуем на свой вкус.

[ImageTeletext], [Image800x600] – у меня не используются.
[ImageFreqDown], [ImageFreqUp], [ImageRecButton] (запись) [ImageSnapshotButton] (скриншот) – аналогичны вышеописанным. Стоит отметить здесь лишь кнопки [ImageFreqDown] и [ImageFreqUp] (увеличение/уменьшение частоты). Я обещал к ним вернуться, но смысл уже понятен. Замечу только, что в не зависимости, какие объекты мы используем для изменения частоты, объект [LabelFreq] будет отображать частоту правильно.

Финишная прямая. Следующие объекты относятся только к time shift.
[StartTimeShift] – кнопка старта time shift.
[StopTimeShift] – кнопка стоп time shift.
[PlayTimeShift] и [PauseTimeShift] – пуск и пауза time shift. Они не имеют координат т.к. заменяют собой кнопку старта. Так уж сделано и на программном уровне мы бессильны. Но, например, отодвинуть их от «старта» в ту или иную сторону можно. Тогда кнопка «старт» перекрываться не будет. Вернее всё останется как задумано, но видеть мы будем так, как я описал. Это нужно только для удобства, что бы кнопки «старт», «стоп» и «пауза» не находились визуально на одном месте. Мы теряем место, но мне так привычнее. Сделать это можно только нарисовав хитрые кнопки. Пример:

Рисуем кнопку «старт» примерно так:
Кнопку «пуск» так:
Кнопку «пауза» так:
Тогда, как это и предустановленно, в случае замены одной кнопки другой, видны будут все три. Не забываем правильно установить параметры Width и Height. Похожие кнопки использованы в «скинах» GoTView(QCD), GoTViewWood и GoTViewMini.

[SliderTimeShift] – этот объект – ползунок, появляющийся во время работы time shift.
Он и сделан так же, как и обычные ползунки. Интересный момент только один и он хорошо виден на этом «скине». Рисунок SliderTimeShiftImageHRuler.bmp это часть основной панели, то есть повторяет область основной панели под местом расположения ползунка. Нам, в этом случае, кажется, будто ручка ползунка движется прямо по основной панели.

Заключение к главе 1:
- Больше экспериментируем, пробуем разные варианты.
- Открываем файл параметров конфигурации «скина» Silver 2 и видим там объект [SpectrumPanel] – это объект – графический анализатор звука. Добавляем в наш скин, экспериментируем.
- Осторожно работаем с цветом прозрачности и не только с ним. Если вместо указанного цвета отображается серый, то пробуем похожие варианты. Чем цвет проще, тем лучше. Используйте цвета простых палитр (не True color). Всё только опытным путём.

- В статье возможны ошибки. Я не разрабатывал программу. Я попытался вытянуть всё возможное из данного. Сравниваем объекты друг с другом (они во многом похожи) и избегаем ошибок.
- У меня тюнер 7135. В других могут использоваться незадействованные у меня объекты.
- Со временем программисты добавят другие функции и кнопки, и статья всё меньше будет соответствовать оригинальному файлу, но принципы останутся. Поняв всю белиберду, описанную выше, мы во всеоружии встретим новшества и поэкспериментируем с ними.
@Mail.ru Rambler's Top100