Создание тем для Talisman Desktop

Создаем тему Shrek по мотивам одноименного мультика. Тема будет средней сложности. Она будет содержать основной десктоп и несколько дополнительных форм. Кроме того мне хочется сделать большие кнопки на основе шрековских персонажей, а не использовать стандартные иконки.

Тема будет выложена в интернет. Поэтому сразу будем делать ее для разных разрешений экрана. Конечно сделать тему под одно разрешение гораздо проще, но мы должны рассчитывать на самые невообразимые конфигурации компьютеров. И все таки минимальный размер ограничим 1024x768. 640x480 экраны уже ушли в прошлое, а 800x600 слишком малы. Глубина цвета: 24bit. Если брать 16bit то в полноцветной графике появятся неприятные разводы. Делать что-либо для 256 цветов вообще невозможно.

Для создания нам понадобятся зарегистрированная версия Talisman Desktop 2.0 и выше, а также графический редактор для подготовки картинок. В моем случае это Photoshop 5.0. Кроме того нам потребуются картинки. Идем на сайт www.shrek.com и загружаем оттуда кучу всякой шрековской графики. Самое главное - берем оттуда wallpapers. Кроме того я сделал несколько десятков скриншотов с самого мультика используя DVD версию фильма.

Запускаем Talisman , нажимаем правую кнопку мыши и выбираем в меню пункт New > Theme >. Пункт New Theme включает 3 команды. Первая "Empty Screen" создаст голый рабочий стол, вторая сделает дубль вашей текушей темы, а третья предложит создать тему на базе одного из имеющихся шаблонов. Шаблоны Талисмана это те же самые темы, просто они лежат в папке talisman/templates. Можете поместить туда любую тему и она станет тоже считаться шаблоном.
Выберем шаблон Phantom. В нем уже есть готовая классическая Taskbar с кнопкой Старт, часами и двумя дополнительными формами. Будем строить нашу тему на основе этого шаблона.

Талисман запросит название создаваемой темы. Введем Shrek и нажмем Ok. Наш будущий Шрек готов. Talisman создал новую папку для нашей темы в каталоге ../talisman/themes/shrek . Все будущие кнопки, картинки и прочие файлы будут размещаться в этом каталоге. В подменю Themes появится строчка Shrek, по которой мы можем всегда загрузить нашу тему (или обновить ее экран в процессе работы).

Первым делом меняем wallpaper. Нажимаем Properties в меню и в свойствах обьекта desktop0 меняем wallpaper. При этом Талисман спросит: "Копировать картинку в каталог темы?" - Говорим "Да". Наш Walpaper будет скопирован в каталог темы. Это нужно чтобы затем тему можно было бы спокойно заархивировать и выложить в интернет, при этом не теряя локальных линков действующих только на нашем компьютере.
Справа от окна предпросмотра есть 3 кнопки со звездочками. Эти кнопки задают стиль нанесения обоев: центрированный, размноженный и растянутый на весь экран. Выберем третью кнопку, чтобы наши обои растягивались на весь экран при любом разрешении.

На нашем экране кроме нижней таскбар присутствуют еще две боковые кнопки. Это части шаблона. Они служат для вызова дополнительных форм. Так как я хочу сделать слева боковую полосу с моими основными кнопками, то левая кнопка мне мешает. Удалим ее. Для этого наведем на нее курсор и нажмем правую кнопку мыши вместе с кнопкой Cntrl клавиатуры. Появится меню редактирования. Выберем Delete - лишняя кнопка будет удалена с экрана.
То же самое сделаем с обьектом InputBox в правой нижней части экрана (прямоугольник с надписью "themebrowser"). Он нам не нужен. Удалим его.

Теперь создадим левую боковую полосу для наших будущих кнопок. Дело в том что размещать кнопки произвольной формы на таком же произвольном wallpaper очень неудобно. Их нужно для этого делать с прозрачными участками, что весьма трудоемко. Гораздо проще сделать кнопки на однотонном фоне. Я выбрал черный. Поэтому создам черную вертикальную полосу по всей левой стороне экрана.
Опять MainMenu > New > Shape. Создастся обьект Shape. Shape это прямоугольник закрашенный каким-нибудь цветом либо залитый картинкой. По умолчанию это серый квадрат 100x100. Вызываем окошко его свойств (MainMenu > Properties).  Устанавливаем его ширину =160 (такова моя задумка), wallpaper выбираем подготовленный в Photoshop bar.bmp (картинка шириной 160 пикселей), панель привязки обьекта Align ставим в положение: расстянуть на всю высоту экрана и привязать к левому краю, кроме того значение X= устанавливаем в 0 чтобы наша полоса была прижата к левому краю экрана. Устанавливаем галочку Locked, чтобы этот обьект невозможно было перетаскивать по экрану.

На нашем десктопе есть еще одна Shape - shape_2. Это нижняя горизонтальная полоска во всю ширину экрана. В шаблоне Phantom она использовала только цветовые настройки и бордюр шириной в 1 пиксель. Бордюр уберем, установив значение Border Width =0. А в wallpaper загрузим предварительно подготовленную в Photoshop картинку размером 20x20 пикселей. Она будет новой заливкой.

Чтобы немного оживить черный фон боковой полосы я сделал BMP картинку для нижней части полосы. Создадим обьект Picture (MainMenu > New > Picture). В открывшемся окошке редактора выберем нашу картинку (не забудем разрешить ее копирование в каталог темы). Привязку (Align) установим в положение привязывать к левому-нижнему углу, чтобы при изменении разрешения экрана наща картинка всегда оставалась в левом-нижнем углу экрана. Еще одна проблема - Талисман создаст картинку в самой нижней позиции списка обьектов. А так как наша картинка одной ширины с предварительно созданной Shape, то эта shape будет загораживать картинку. Поэтому нам нужно вывести картинку на первый план. Для этого щелкнем правой кнопкой на значке картинки в дереве обьектов и выберем пункт меню "Bring to front" (Послать на верх). Теперь картинка будет выводиться поверх обьекта Shape_0.

Далее меняем графику кнопки Start. Для этого готовим 3 фазы кнопки (нормальную, подсвеченную, нажатую) в Photoshop. Затем открываем окошко свойств кнопки Start и в этом окошке вставляем картинки через буфер обмена в каждую из трех фаз кнопки. Для этого справа от окошка предпросмотра есть ряд вертикальных кнопочек. Пользуемся кнопкой "Paste", предварительно выбрав нужную фазу (Normal, Highlight, Click).
Быстро сделать 3 фазы в графическом редакторе можно используя например масштабирование картинки. Этот эффект активно применяется  в яблочной OSX. Либо можно добавить фотошоповский эффект подсветки. Вариантов много. Главное чтобы разные фазы кнопки слегка отличались друг от друга.
Если вам нужно использовать прозрачность в кнопке - заливайте прозрачные участки цветом RGB: 255 000 255. В Шреке я не использовал прозрачность так как подложка под кнопками была заранее известна и мне не требовалось выполнять утомительное маскирование картинок в Photoshop.
Команду оставляем прежней: mainmenu menutop . Эта команда будет выводить главное меню из верхнего края нашей кнопки. Оставляем также привязку к левому-нижнему краю и чекбокс "Locked". Таким образом наша кнопка старт будет всегда находиться в левом-нижнем углу экрана, а ее перетаскивание будет запрещено.

Заодно удалим 2 лишние формы перешедшие из шаблона Phantom: form1 и form2. Для этого поочередно выделяем соответствующий пункт в дереве обьектов и нажимаем красный крестик Delete в заголовке дерева обьектов.

Теберь займемся системными элементами: таскбар, трэй, часы. С часами и трэем все просто - вставим через буфер обмена из Photoshop новые картинки того же размера что и были в шаблоне. Таскбар я хочу несколько изменить. Во первых вставляем через буфер картинки для всех трех фаз. Картинки я сделал в виде квадратов 42x42 пикс. Графику First и Last панелей удалим вообще - для этого открываем соответствующую вкладку графического окна и давим кнопочку Delete справа от окошка. Теперь установим значение IconSize=32. Иконки в таскбаре будут полноразмерными 32x32. Сменим в нижнем правом углу свойств таскбара команду Show text на Show hint (подписи больше не будут показываться).
Установим величину сдвига иконки от края картинки равными IconOffsetX=4 и IconOffsetY=4 .
Наконец поправим свойство Align - установим нажатыми стрелочки вниз и влево - наша Taskbar должна прижиматься к нижнему краю.
Теперь закрываем окно редактора. Наша таскбар ускакала куда-то вверх. Т.е. Y координата, которую мы забыли поправить в редакторе теперь отсчиталась от нижнего края экрана и таскбар оказалась вверху. Это легко поправимо: удерживая клавишу Cntrl перетаскиваем Taskbar вниз. Данный метод работает также для часов и трэя в том случае если не установлен флажок Locked.

Практически от прежнего шаблона уже ничего не осталось. Только боковая полоса в главном меню. Уберем ее вообще. Для этого опять загрузим редактор, выберем в нем MainMenu и в свойствах MainMenu выберем вкладку Appearance. Внизу находится выпадающий список используемых картинок Sidebar Graphic. Поочередно выбираем все три пункта и жмем кнопочку Delete справа от списка. Боковая полоса исчезнет. Если вам наоборот понадобится создать свою сайдбар - подготавливайте картинки в редакторе и вставляйте их через буфер обмена. Начинать нужно с Tile Picture - это основа полосы на которую уже потом накладываются верхняя и нижняя картинки.

Теперь настало время добавить кнопки в нашу тему. Я подготовил несколько картинок (каждая из трех фаз) в Photoshop. Затем щелкаем правой кнопкой мыши в том месте где мы хотим создать будущую кнопку Talisman. Выбираем New > Button. На экране появляется стандартная иконка с подвисью. Вызываем ее свойства . Вставляем через буфер картинки из Photoshop. Меняем подпись в поле Text. Здесь же настраиваем цвет и фонт подписи. Перетаскиванием устанавливаем нужную позицию подписи в графическом окне. Снимаем флажок Show Icons, чтобы иконки не накладывались на нашу кнопку. Устанавливаем нужную команду через поле Command.
После выхода из редактора, перетаскиванием устанавливаем кнопку в нужную позицию.
Повторяем данную процедуру для всех создаваемых кнопок.

Мне еще захотелось добавить пару дополнительных форм для смены обоев и для выбора тем. Но об этом допишу чуть позже.

Новые темы для Talisman