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


Если у вас есть хотя бы базовые художественные навыки, вы можете создавать скины/темы для AllMyNotes Organizer. Ниже подробно описано, как это делать. Чтобы поощрить создание новых скинов, мы даже предлагаем лицензию Deluxe Edition для AllMyNotes Organizer при выполнении двух условий:
1. Скин, тема или даже небольшой ее элемент должны выглядеть достаточно хорошо, чтобы их можно было распространять вместе с приложением, опубликовать на нашем сайте или хотя бы использовать отдельные удачные элементы в других скинах;
2. Предоставьте нам исходный файл графики (файл .psd). Он нужен, поскольку мы регулярно добавляем графические элементы и новые значки. Без этого файла мы не сможем в дальнейшем поддерживать скин.
--- Как создавать скины для AllMyNotes Organizer (черновое руководство) ---
Файлы скинов находятся в c:\Program Files\AllMyNotes Organizer\Skinsolder. Сейчас там есть два скина - 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:

Устройство файла SkinInfo.ini
SkinInfo.ini - это обычный текстовый файл со строками формата Name=Value, сгруппированными по разделам: информация о скине, цветовые темы, цвета, текстовый редактор, размеры, шрифты и карта растрового изображения (все записи SB_*). Строки, начинающиеся с ** или //, являются комментариями - удобное место, чтобы сохранить старое значение вместо удаления. Цвета можно задавать в формате #RRGGBB (просто скопируйте из Photoshop) или R,G,B - #FFFFFF и 255,255,255 обозначают один и тот же белый цвет.
Не изменяйте ProjectSignature и RequiredAppBuildNumber: они сообщают программе, что это скин AllMyNotes, и указывают необходимую сборку. Изменяйте FileDescription - именно это название скина отображается в меню.
Цветовые темы: один скин, двадцать настроений
Скин не ограничивается одним внешним видом. Каждая строка ThemeEffects_N - это своего рода рецепт: при загрузке темы программа берет растровое изображение скина и последовательно применяет к нему цепочку графических фильтров слева направо, прежде чем что-либо нарисовать на экране. Файл .png на диске при этом никогда не меняется. Именно так Holy Crown предлагает темы Sepia, Gold, Coffee, Blueprint и Night Vision на основе одной картинки - одно изображение, никакой дополнительной работы с графикой, а Photoshop даже не догадывался.
Формат: название темы в двойных кавычках, затем эффекты, разделенные символом |. ThemeEffects_Default (без названия) применяется к самому скину. Нумеруйте темы 1, 2, 3... без пропусков - программа читает их до первого отсутствующего номера, поэтому тема после пропуска будет молча проигнорирована. Строки ThemeEffectsM3_N работают аналогично и требуют AllMyNotes 3 или новее. Цветовые темы доступны в редакции Deluxe.
От белого к черному одной строкой
Хотите сделать темную версию светлого скина? Не придется перерисовывать ни единого пикселя. INVERTBRIGHTNESS превращает светлое в темное, сохраняя оттенки: синий остается синим, просто переходит в ночную смену. Обычный INVERT заодно превратил бы ваши синие цвета в оранжевые - на минуту забавно, а потом глаза начнут жаловаться. Добавьте SCALELUMA, чтобы результат не стал совершенно черным, и немного GRAYSCALE, чтобы приглушить цвета, которые вдруг начинают светиться в темноте:
Собственные темы Holy Crown "Night Vision Glow" и "Night Vision Gray" созданы именно таким способом. Не забывайте о цветах текста: фильтры изменяют растровое изображение, а цвета в разделе Цвета остаются такими, как указано. Темно-серый FontColor на ставшем темным фоне - весьма элегантный способ спрятать собственные заметки от самого себя.
Эффекты, которые можно объединять в цепочки
| Эффект | Что он делает |
|---|---|
| AUTOLEVELS | Растягивает диапазон яркости до полных 0-255. Такая себе кнопка «сделать изображение менее блеклым». |
| GRAYSCALE | Убирает цвета; GRAYSCALE40 уменьшает их насыщенность только на 40%. Мгновенный переход в режим серьезной работы. |
| SEPIA | Тона старых фотографий. Ваши вчерашние заметки вдруг выглядят так, будто их написали в 1890 году. |
| INVERT, INVERTBRIGHTNESS | INVERT инвертирует все цвета (как на фотонегативе), а INVERTBRIGHTNESS меняет местами только светлое и темное - именно то, что нужно для темных тем. |
| BLUEPRINTLIGHT, BLUEPRINTDARK | BLUEPRINTLIGHT / BLUEPRINTDARK - вид инженерного чертежа. Заметки, по которым хоть мост строй. |
| ADJUSTLEVELS | ADJUSTLEVELS:min,max,midSrc,midDst (0-255) - изменяет средние тона: 0,255,150,110 делает их темнее, 0,255,150,190 светлее. |
| BRIGHTNESSCONTRAST | BRIGHTNESSCONTRAST:b,c (-255..255, 0 = без изменений). Делает ровно то, что обещает название. |
| HUESATURATIONLIGHTNESS | HUESATURATIONLIGHTNESS:h,s,l - сдвиг цветового тона от -360..360, насыщенность и светлота в процентах. Поверните оттенок на 180, и весь скин переместится на противоположную сторону цветового круга. |
| REPLACECOLOR | REPLACECOLOR:#from,#to,fuzziness - заменяет один цвет другим; параметр допуска 0..180 определяет, насколько цвета могут быть «похожими». Темы Gold, Coffee, Pink и Sea в Holy Crown используют один и тот же прием, только с разными значениями #to. |
| SCALELUMA | SCALELUMA:min,max (0-1000) - сжимает яркость до заданного диапазона: 250,950 = более четкое изображение, 0,500 = все не ярче половины исходного уровня, выбор для полуночников. |
| SCALESATURATION | SCALESATURATION: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 больше тем.
Приятной работы! :-)