Логотипы (Эмблемы) в GIMP

Логотип lmigre-26

Логотип в «детском» стиле, двухцветный на белом фоне. Результат работы скрипта с параметрами по умолчанию:

В таблице приведены параметры скрипта, соответствующие настройкам по умолчанию в диалоге создания эмблемы:

Теперь изменим параметры скрипта в соответствии с таблицей:

и посмотрим на результат

Логотип SOTA хром

Кратко охарактеризовать этот логотип трудно, лучше его увидеть. Вариант с настройками по умолчанию:

В таблице — значения настроек:

Теперь, как обычно, изменим параметры скрипта:

и посмотрим, что получилось:

Ниже приведено изображение beavis

которое является картой окружения для этого логотипа.

Это чёрно-белое (в градациях серого) изображение размером 350×350 точек.

По всей видимости, уровень белого для «хромированных» элементов изображения определяется этой самой картой окружения. Следовательно, чтобы изменить распределение уровней белого на логотипе, нужно изменить карту окружения, создав файл с такими же характеристиками (JPEG, градации серого, размер 350×350).

Для создания такого файла возьмём использовавшуюся ранее пейзажную фотографию, изменим её размеры (команда «Изображение / Размер изображения») и переведём в градации серого («Изображение / Режим / Градации серого»). Получится карта окружения:

Теперь возьмём последний вариант параметров скрипта и заменим карту окружения:

после чего посмотрим, что изменилось:

По сравнению с предыдущим вариантом видно, что в «хромированных» элементах изменилось распределение светлых и тёмных участков.

Если «хромированная» рамка наводит на ненужные ассоциации или не требуется, то ничто не мешает вырезать внутреннюю часть изображения и использовать её в качестве эмблемы для сайта.

Логотип «Газетный текст»

Этот логотип имитирует заголовок в газете, создавая неоднородности, характерные для офсетной печати. Вариант с настройками по умолчанию:

а в таблице — значения параметров скрипта:

Снова изменим параметры по вкусу:

и посмотрим на результат:

Для этого логотипа очень подходит аскетичная чёрно-белая цветовая гамма. Цвет фона здесь устанавливается для фона изображения, а неоднородности цвета букв определяются параметрами «Размер ячейки», «Плотность» и «Радиус размывания».

Градиентный с фаской

Этот скрипт создаёт строгий, но изящный логотип из «металлических» букв с тенью на белом фоне.

Результат работы скрипта с параметрами по умолчанию:

а в таблице — значения параметров:

Изменим параметры в соответствии с таблицей:

и посмотрим на результат:

Звёздная вспышка

Этот логотип основан на применении «спецэффекта» — имитации вспышки света на поверхности рельефного текста со слабо выраженной текстурой.

Посмотрим на результаты применения скрипта с параметрами по умолчанию:

а также на состав и значения этих параметров:

Снова изменим надпись и размер шрифта, а также попробуем поэкспериментировать с параметром «Цвет вспышки»:

Получается некая имитация «золотых» букв.

Текст по кругу

Этот логотип имитирует надпись на печати. Для него важны такие параметры, как радиус, начальный угол и угол заполнения:

Результат применения скрипта с параметрами по умолчанию:

И снова изменим надпись и параметры шрифта:

В качестве цвета текста используется цвет переднего плана, который устанавливается в главном окне программы. Установим фиолетовый цвет (HTML-код 602AFD) и попытаемся создать собственный вариант «печати»:

Эксперименты со всеми остальными вариантами скриптов для создания логотипов читатели могут проделать самостоятельно и подобрать для себя наилучшие варианты по цветовой гамме и дизайну.

Нарезка изображения для Web-страниц

Пусть имеется концептуальный дизайн Web-страницы, например такой:

Для реальной страницы все участки, содержащие надписи, должны быть ссылками на соответствующие ресурсы Интернет (другие страницы, сайты и пр.), а кроме того, необходимо учесть возможность изменения ширины страницы (автоподбор ширины) для разного разрешения экрана у пользователей и различных режимов просмотра страницы. Поэтому данный элемент дизайна должен иметь возможность изменения ширины, т. е. какая-то его часть (в которой нет надписей) должна быть «резиновой» — растягиваться и сжиматься при изменении эффективной ширины окна просмотра.

Первую часть задачи (сделать участки с надписями ссылками) можно решить путём создания так называемой «Карты изображений» (эта возможность имеется в GIMP— «Фильтры / Веб / Карта изображения»), но в настоящее время такой подход используется редко, и он не поможет решить вторую часть задачи — обеспечение автоподбора ширины дизайна.

Поэтому используем возможности GIMP в части «нарезки» изображения по направляющим. Функция «Гильотина» («Изображение / Преобразование / Гильотина») — как раз одна из таких возможностей.

Сначала создадим необходимое количество направляющих:

а затем вызовем нужную команду. Пустые участки не должны быть активными, поэтому направляющие максимально прижаты к надписям. Кроме того, область с примерными координатами от 310 до 500 точек является областью, за счёт которой можно обеспечить автоподбор ширины изображения.

Теперь запустим «Гильотину» («Изображение/ Преобразование/ Гильотина») и получим много маленьких изображений (в данном случае — 48), пронумерованных как <имя>-Nх-Nу .xcf -<номер окна>. Nx и Ny — номера элементов по строке (по «X») и по столбцу (по «Y») получившейся сетки, причём нумерация начинается с нуля. Таким образом, если имя исходного файла было example-4, то изображение со словом «Главная» будет иметь имя example-4-l-l, а изображение со словом «История»—соответственно example-4-3-1.

Теперь нужно будет создать таблицу и все фрагменты изображения распределить по ячейкам этой таблицы. Это достаточно трудоёмкая работа.

Однако GIMP «умеет» самостоятельно создавать HTML-таблицу для Web-страницы и размещать в ней фрагменты изображения. Для этого нужно использовать инструмент «Нарезка для веба» («Фильтры / Веб / Нарезка для веба»). При вызове этой функции появится диалог настройки параметров скрипта.

Здесь выбран формат изображения PNG, поскольку имеются прозрачные участки и не хочется терять цветовую гамму. JPEG (JPG) в данном случае вообще не годится (в этом формате не поддерживается прозрачность), а для получения GIF нужно было бы предварительно преобразовать изображение в индексированное.

Приведём фрагмент получившегося HTML-кода:

<!-HTML SNIPPET GENERATED BY GIMPWARNING!!

This is NOT a fully valid HTML document, it is rather a piece of HTML generated by GIMP’S py-slice plugin that should be embedded in an HTML or XHTML document to be valid. Replace the href targets in the anchor (<a>) for your URLS to have it working as a menu.->

<table cellpadding=»0″ border=»0″ cellspacing=»0″> <tr> <tdximg alt = » » src= » images / slice_0_0 . png «

style = «width: 32px; height: 27px; border — width: 0px;»> </td> <tdximg alt = » » src= » images / slice_0_ 1 . png «

style = «width: 107px; height: 27px; border — width: 0px;»> </td> <tdximg alt = » » src= » images / slice_0_2 . png «

style = «width: 62px; height: 27px; border — width: 0px;»> </td> <tdximg alt = » » src= » images / slice_0_3 . png «

style = «width: lllpx; height: 27px; border — width: 0px;»> </td> <tdximg alt = » » src= » images / slice_0_4 . png «

style = «width: 188px; height: 27px; border — width: 0px;»> </td> <tdximg alt = » » src= » images / slice_0_5 . png «

style = «width: 32px; height: 27px; border — width: 0px;»> </td> <tdximg alt = » » src= » images / slice_0_6 . png «

style = «width: llOpx; height: 27px; border — width: 0px;»> </td> <tdximg alt = » » src= » images / slice_0_7 . png «

style = «width: 58px; height: 27px; border — width: 0px;»> </td> </tr>

</table>

GIMP честно предупреждает, что сгенерирована не полноценная страница, а только фрагмент. Однако нужно отметить некоторую «интеллектуальность» преобразования — для элементов изображения, находящихся на краях таблицы первая и последняя строки, первый и последний столбцы), не предусмотрены ссылки (в таких ячейках отсутствует элемент <а href=»#»>. . . </а>).

Для получения окончательного результата остаётся отредактировать этот код, убрав жёсткую установку ширины для всех изображений slice_x_4.png (5-й столбец), за счёт которых и будет происходить автоподбор ширины изображения.

На этом закончим обзор возможностей, которые GIMP предоставляет создателям Web-страниц. Но это не означает, что все функции GIMP ограничены только ими. Дальше каждый интересующийся может продолжить исследования самостоятельно.