Четверг, 02.05.2024
Королевство Delphi
Главное меню
Статьи
Наш опрос
Как часто ви на этот сайт заходите?
Всего ответов: 159
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Главная » Статьи » Графика » Разные

Создание интерфейса с использованием PNG-графики

Нам понадобятся: Photoshop (или подобные редакторы), Delphi.
Кроме того: некоторые навыки работы в графических программах.
Также, для правильной работы приложения, необходим плагин «Прямые руки»,
который Вы можете скачать с этого сайта в виде исходников :-)

На рынке программного обеспечения все больше и больше стало появляться программ с использованием своего стильного интерфейса. WinAMP, Windows Media Player, Nero Smart Start и многие другие. Отличительной особенностью перечисленных мной программ является их способность изменять цвет интерфейса, именно цвет, а не само оформление.

Совсем недавно передо мной встала задача создать в Delphi 7 интерфейс программы в стиле Windows Media Player (WMP), предоставив пользователю выбирать цвет панелей (совсем как в WMP). Проведя несколько часов в Интернете, я нашел лишь готовые скины и компоненты для их использования в приложениях, написанных в Delphi. Использование смены цветовой палитры всех изображений в программе происходило медленно и не очень подходило под мои нужды. Таким образом, я решил подумать своими мозгами :-)

После некоторых размышлений и экспериментов я решил использовать png-графику. Решение было вынесено в пользу png потому, что этот формат поддерживает прозрачность и полупрозрачность. Создав в фотошопе несколько образцов с различными эффектами типа градиентов, прозрачности, слияния прозрачных градиентов и прочего, я начал экспериментировать в Delphi. На радость вся интеграция png-графики сводилась к размещению на форме компонента TImage и загрузке в него png -изображения :-)

Теперь о том, как это сделать самому.

Photoshop

Создайте новое изображение, затем для самого простого примера сделайте заливку белым градиентом.
Залейте фоновый слой черным цветом (или любым другим темным цветом).
Затем создайте новый слой, залейте его белым градиентом. По окончании работы с градиентами и перед сохранением в png, удалите или отключите фоновый слой.
Сохраните изображение как png-файл.
На этом создание простейшего примера в фотошопе закончено, приступаем к работе в Delphi.

Добавление поддержки PNG в Delphi

Для того, чтобы научить программы понимать png-изображения, заходим на сайт http://pngdelphi.sourceforge.net/ и загружаем архив. Достаточно подключить модуль из архива к проекту и Delphi начнёт понимать формат png!

Delphi

Создайте новый проект, поместите на форму компоненты: TColorBox и TPanel, на TPanel установите TShape (он будет являться фоном нашего png-изображения) установите свойство TShape Align равное alClient.

Дальше на ту же панель помещаем TImage, также ставим ему свойство Align равное alClient.

Затем загружаем в TImage наше png-изображение, и, если вы все правильно сделали в фотошопе, то после загрузки изображения Вы ничего не должны увидеть – только белый фон (белый градиент на белом TShape – теперь вам понятно, почему нельзя сделать оформление WMP полностью белым :-) ). Теперь напишем процедуру на изменение TColorBox - OnChange. Совсем просто (в нашем примере):

procedure TForm1.ColorBox1Change(Sender: TObject);
begin
 Shape1.Brush.Color:=ColorBox1.Selected;
end;

Теперь запускаем приложение и пробуем изменить цвет в TColorBox1. Теперь Вам все должно стать понятно. Использование панелей дает возможность изменять цвет интерфейса по частям или создать более темные или более светлые зоны в вашем приложении.

Данная статья дает пример работы png в приложениях. Вы можете создавать интерфейс целиком на png-изображениях (например, Style XP - его главное окно). Если немного подумать, то можно обеспечить плавное изменение цвета с использованием TTrackBar или подобных регуляторов также как это реализовано в Nero и WMP.

Пример png-изображения и исходники программы, описанной в статье »

Примеры интерфейсов с изменяемыми цветами:


Основное окно Windows Media Player (в синем оттенке) ...

... и это же окно через пару секунд ...

Окно Nero Smart Start ...

И уже в других цветах ...

Окно проигрывателя Winamp (цветовая схема Blood)

А это цветовая схема Night Vision

А вот эти самые диалоги и элементы для выбора цвета:

Получить ссылку на материал

Категория: Разные | Добавил: Барон (20.12.2011)
Просмотров: 1493 | Теги: интерфейс, графика, PNG | Рейтинг: 0.0/0
[ Пожертвования для сайта ] [ Пожаловаться на материал ]

Если вам помог материал сайта кликните по оплаченной рекламе размещенной в центре

Поиск
Категории раздела
DirectX [17]
OpenGL [2]
Игры [15]
Разные [28]
Королевство Delphi © 2010-2024
Яндекс цитирования