Поддержка › Как создавать/редактировать скины и цветовые темы приложения


AllMyNotes Organizer - Скины и темы

Любите скины? Создайте свой!!!

Если у вас есть хотя бы базовые художественные навыки, вы можете создавать скины/темы для AllMyNotes Organizer. Ниже подробно описано, как это делать. Чтобы поощрить создание новых скинов, мы даже предлагаем лицензию Deluxe Edition для AllMyNotes Organizer при выполнении двух условий:

1. Скин, тема или даже небольшой ее элемент должны выглядеть достаточно хорошо, чтобы их можно было распространять вместе с приложением, опубликовать на нашем сайте или хотя бы использовать отдельные удачные элементы в других скинах;

2. Предоставьте нам исходный файл графики (файл .psd). Он нужен, поскольку мы регулярно добавляем графические элементы и новые значки. Без этого файла мы не сможем в дальнейшем поддерживать скин.


--- Как создавать скины для AllMyNotes Organizer (черновое руководство) ---


Файлы скинов находятся в c:\Program Files\AllMyNotes Organizer\Skins older. Сейчас там есть два скина - Holy Crown и Deep. Каждый находится в отдельной папке.


Каждая папка содержит два файла:

1. SkinInfo.ini - содержит все цвета и параметры скина.

2. Файл .png с графическими элементами скина. Координаты элементов управления на этом растровом изображении сохраняются в SkinInfo.ini


Чтобы создать новый скин:


1. Скопируйте один из существующих скинов в другую папку

2. В скопированном файле измените название скина в SkinInfo.ini - см. параметр FileDescription. Желательно, чтобы название папки и название скина совпадали. В общем-то, это все: дальше можно менять цвета, редактировать растровое изображение и т. д.


Другие советы:

1. Обычно мы создаем скины в PhotoShop в формате .psd. Он позволяет применять мощные эффекты, эффекты слоев и прозрачность. После завершения редактирования растрового изображения скина мы экспортируем данные в .png-файл скина. Работать исключительно с .png-файлами настоятельно не рекомендуется: это утомительно для дизайнера и затрудняет дальнейшее расширение.

2. Если вам нужны ресурсы, смело обращайтесь в Vladonai Software. Мы можем предоставить графику, которую уже использовали для скинов, а также дополнительные советы из нашего опыта.


Содержимое растрового изображения и SkinInfo.ini достаточно понятно само по себе, названия параметров подобраны удачно, а на изображении мы добавили подписи, чтобы упростить создание новых скинов. Если вам нужна информация о назначении значков на панелях инструментов, в меню, кнопках или дереве, пожалуйста, свяжитесь с нами - мы с радостью предоставим подробности и другие ресурсы.


P.S. Вот короткий наглядный пример того, как координаты изображения отражаются в файле SkinInfo.ini:

Пример редактирования скина AllMyNotes Organizer

Устройство файла SkinInfo.ini

SkinInfo.ini - это обычный текстовый файл со строками формата Name=Value, сгруппированными по разделам: информация о скине, цветовые темы, цвета, текстовый редактор, размеры, шрифты и карта растрового изображения (все записи SB_*). Строки, начинающиеся с ** или //, являются комментариями - удобное место, чтобы сохранить старое значение вместо удаления. Цвета можно задавать в формате #RRGGBB (просто скопируйте из Photoshop) или R,G,B - #FFFFFF и 255,255,255 обозначают один и тот же белый цвет.

ProjectSignature=AllMyNotes Project RequiredAppBuildNumber=110 FileDescription=Holy Crown (Default) ** a comment line WindowBackgroundColor=#DAE1F0 InactiveFontColor=170,170,170

Не изменяйте ProjectSignature и RequiredAppBuildNumber: они сообщают программе, что это скин AllMyNotes, и указывают необходимую сборку. Изменяйте FileDescription - именно это название скина отображается в меню.


Цветовые темы: один скин, двадцать настроений

Скин не ограничивается одним внешним видом. Каждая строка ThemeEffects_N - это своего рода рецепт: при загрузке темы программа берет растровое изображение скина и последовательно применяет к нему цепочку графических фильтров слева направо, прежде чем что-либо нарисовать на экране. Файл .png на диске при этом никогда не меняется. Именно так Holy Crown предлагает темы Sepia, Gold, Coffee, Blueprint и Night Vision на основе одной картинки - одно изображение, никакой дополнительной работы с графикой, а Photoshop даже не догадывался.

ThemeEffects_Default=AUTOLEVELS ThemeEffects_1="Holy Crown - Memories (theme of Version 1)" ThemeEffects_2="Holy Crown - Crisp"|SCALELUMA:250,950 ThemeEffects_3="Holy Crown - Sepia"|SEPIA|ADJUSTLEVELS:0,255,150,110 ThemeEffects_7="Holy Crown - Gold"|REPLACECOLOR:#d8dfef,#FCC200,27|SCALELUMA:300,980 ThemeEffects_10="Holy Crown - Night Vision Glow"|INVERTBRIGHTNESS|SCALELUMA:0,500

Формат: название темы в двойных кавычках, затем эффекты, разделенные символом |. ThemeEffects_Default (без названия) применяется к самому скину. Нумеруйте темы 1, 2, 3... без пропусков - программа читает их до первого отсутствующего номера, поэтому тема после пропуска будет молча проигнорирована. Строки ThemeEffectsM3_N работают аналогично и требуют AllMyNotes 3 или новее. Цветовые темы доступны в редакции Deluxe.

От белого к черному одной строкой

Хотите сделать темную версию светлого скина? Не придется перерисовывать ни единого пикселя. INVERTBRIGHTNESS превращает светлое в темное, сохраняя оттенки: синий остается синим, просто переходит в ночную смену. Обычный INVERT заодно превратил бы ваши синие цвета в оранжевые - на минуту забавно, а потом глаза начнут жаловаться. Добавьте SCALELUMA, чтобы результат не стал совершенно черным, и немного GRAYSCALE, чтобы приглушить цвета, которые вдруг начинают светиться в темноте:

ThemeEffects_21="My Skin - Midnight"|INVERTBRIGHTNESS|SCALELUMA:60,800|GRAYSCALE30

Собственные темы Holy Crown "Night Vision Glow" и "Night Vision Gray" созданы именно таким способом. Не забывайте о цветах текста: фильтры изменяют растровое изображение, а цвета в разделе Цвета остаются такими, как указано. Темно-серый FontColor на ставшем темным фоне - весьма элегантный способ спрятать собственные заметки от самого себя.

Эффекты, которые можно объединять в цепочки

ЭффектЧто он делает
AUTOLEVELSРастягивает диапазон яркости до полных 0-255. Такая себе кнопка «сделать изображение менее блеклым».
GRAYSCALEУбирает цвета; GRAYSCALE40 уменьшает их насыщенность только на 40%. Мгновенный переход в режим серьезной работы.
SEPIAТона старых фотографий. Ваши вчерашние заметки вдруг выглядят так, будто их написали в 1890 году.
INVERT, INVERTBRIGHTNESSINVERT инвертирует все цвета (как на фотонегативе), а INVERTBRIGHTNESS меняет местами только светлое и темное - именно то, что нужно для темных тем.
BLUEPRINTLIGHT, BLUEPRINTDARKBLUEPRINTLIGHT / BLUEPRINTDARK - вид инженерного чертежа. Заметки, по которым хоть мост строй.
ADJUSTLEVELSADJUSTLEVELS:min,max,midSrc,midDst (0-255) - изменяет средние тона: 0,255,150,110 делает их темнее, 0,255,150,190 светлее.
BRIGHTNESSCONTRASTBRIGHTNESSCONTRAST:b,c (-255..255, 0 = без изменений). Делает ровно то, что обещает название.
HUESATURATIONLIGHTNESSHUESATURATIONLIGHTNESS:h,s,l - сдвиг цветового тона от -360..360, насыщенность и светлота в процентах. Поверните оттенок на 180, и весь скин переместится на противоположную сторону цветового круга.
REPLACECOLORREPLACECOLOR:#from,#to,fuzziness - заменяет один цвет другим; параметр допуска 0..180 определяет, насколько цвета могут быть «похожими». Темы Gold, Coffee, Pink и Sea в Holy Crown используют один и тот же прием, только с разными значениями #to.
SCALELUMASCALELUMA:min,max (0-1000) - сжимает яркость до заданного диапазона: 250,950 = более четкое изображение, 0,500 = все не ярче половины исходного уровня, выбор для полуночников.
SCALESATURATIONSCALESATURATION:min,max (0-1000) - то же самое для насыщенности: увеличьте минимальное значение, и бледные цвета станут выразительнее.

Основные элементы и что произойдет, если их изменить

Несколько параметров из Holy Crown, за что они отвечают и чего ожидать после их изменения:

ПараметрЧто меняется (и побочные эффекты)
WindowBackgroundColor=#DAE1F0Фон позади всех панелей. Измените его, и вся программа приобретет другое настроение, словно комната с новыми обоями.
FontColor=#636363Основной цвет текста. Задайте ему то же значение, что и ViewBackgroundColor, и вы изобретете невидимые чернила - отлично для секретов, но не для продуктивности.
MenuFontColor=#6080BD
MenuSelectionColor=#a9beef
MenuBackgroundColor=#FAFAFA
Текст меню, полоса выделения под указателем мыши и фон меню. Сделайте выделение ярким, и каждый поход в меню превратится в маленькую дискотеку.
TextEditorSelectionColor=#f6d595
TextEditorInactiveSelectionColor=#f8ebd3
Цвет выделения текста, который вы отмечаете мышью в заметке (неактивный вариант используется, когда редактор не находится в фокусе). Выберите темный цвет, и выделенный текст станет нечитаемым именно тогда, когда вы захотите его скопировать.
TreeOutlineColorHighlighted=#D0BF91Закругленная рамка вокруг выбранной папки в дереве. Ненавязчивая отметка «вы здесь».
DistBetweenControls=4
DistBetweenCtlAndBorder=5
Отступы между панелями и от панелей до края окна, в пикселях. При 4 все уютно рядом; при 40 панели разъезжаются, как континенты.
FontNormalName=Amelian.TTF
FontMenuName=segoepr.ttf
FontEditName=TENAHB48.TTF
FontWndTitleName=Orbitbn.ttf
FontWndTitleBolded=TRUE
FontHintName=Amelian.TTF
Скин может содержать собственные шрифты для пяти элементов: обычного текста интерфейса (FontNormal), меню (FontMenu), редактора заметок (FontEdit), заголовков окон (FontWndTitle, вместе с FontWndTitleBolded=TRUE) и всплывающих подсказок (FontHint). Если этих параметров нет, используется системный шрифт. Файл .ttf берется из папки скина или из папки Fonts в Windows (именно оттуда происходит Segoe Print, segoepr.ttf). Segoe Print в меню выглядит очаровательно ровно один день; Orbitbn.ttf в заголовке окна чуть дольше создает ощущение пульта управления космическим кораблем. Параметры ...Size по-прежнему работают, но теперь размер текста гораздо проще изменить в настройках самой программы - пусть скин выбирает гарнитуру, а пользователь определяет размер.
SkinBitmap=HolyCrown.png
SB_Button_NormalCoord=69,108
SB_Button_LeftPieceWidth=10
SB_ScrollBarWidth=16
Все с префиксом SB_ ссылается на части изображения .png: Coord задает координаты x,y верхнего левого пикселя элемента, а значения ширины LeftPiece / Fill / RightPiece определяют, как его разрезать - крайние части рисуются без изменений, а центральная растягивается. Измените здесь размер, не переместив пиксели в файле .png, и программа разрежет изображение не в тех местах - ваш скин вступит в период Пикассо.

Как быстро увидеть изменения в программе

AllMyNotes читает SkinInfo.ini и файл .png только в двух случаях: при запуске и когда вы выбираете скин или тему в меню Скины. Само по себе сохранение файла ничего не меняет. Но перезапускать программу после каждой настройки не обязательно:

1. Отредактируйте SkinInfo.ini (или экспортируйте .png) и сохраните файл.

2. В меню Скины выберите любой другой скин или тему, а затем снова свой вариант. При каждом выборе программа повторно читает файлы с диска, поэтому после второго щелчка вы увидите изменения - примерно секунда на весь процесс.

Если выбрать уже отмеченный галочкой скин, ничего не произойдет - программа вежливо решит, что менять нечего. Всегда сначала переключайтесь на другой вариант, а затем возвращайтесь.

Список скинов в меню формируется один раз за сеанс. Поэтому после добавления новой папки скина или переименования скина (FileDescription) либо темы один раз перезапустите AllMyNotes, чтобы увидеть новое название. А если ваш скин внезапно выглядит точь-в-точь как Holy Crown, значит, программа не смогла загрузить ваш файл и вернулась к стандартному скину - проверьте последнюю измененную строку.

Совет: папка Skins находится в Program Files, поэтому Windows может запретить сохранение файлов в ней. Запустите редактор от имени администратора или используйте портативную версию, где скины хранятся в обычной папке.


Примечание: в редакции Lite доступно только 2 скина, а в Deluxe больше тем.


Приятной работы! :-)