Логотипы (Эмблемы) в GIMP
Логотип lmigre-26
Логотип в «детском» стиле, двухцветный на белом фоне. Результат работы скрипта с параметрами по умолчанию:
В таблице приведены параметры скрипта, соответствующие настройкам по умолчанию в диалоге создания эмблемы:
Название параметра | Значение параметра |
Текст | GIMP |
Цвет текста | Красный (HTML-код FF0000) |
Цвет обрамления | Синий (HTML-код 0022FF) |
Шрифт | Пропорциональный без засечек |
Кегль шрифта | 100 точек |
Размер обрамления | 2 |
Теперь изменим параметры скрипта в соответствии с таблицей:
Название параметра | Значение параметра |
Текст | Супер-сайт |
Цвет текста | Жёлтый (HTML-код FFDC00) |
Цвет обрамления | Оранжево-коричневый (HTML-код ED5A27) |
Шрифт | Пропорциональный без засечек |
Кегль шрифта | 50 точек |
Размер обрамления | 1 |
и посмотрим на результат
Логотип SOTA хром
Кратко охарактеризовать этот логотип трудно, лучше его увидеть. Вариант с настройками по умолчанию:
В таблице — значения настроек:
Название параметра | Значение параметра |
Насыщенность хрома | -80 |
Светлость хрома | -47 |
Фактор хрома | 0.75 |
Текст | GIMP |
Кегль шрифта | 150 точек |
Шрифт | Пропорциональный без засечек |
Карта окружения | beavis.jpg (карта по умолчанию) |
Баланс бликов | Светло-коричневый (HTML-код D35F00) |
Баланс хрома | Чёрный (HTML-код 000000) |
Теперь, как обычно, изменим параметры скрипта:
Название параметра | Значение параметра |
Насыщенность хрома | -60 |
Светлость хрома | -47 |
Фактор хрома | 0.50 |
Текст | Супер-сайт |
Кегль шрифта | 72 точки |
Шрифт | Пропорциональный без засечек |
Карта окружения | beavis.jpg (карта по умолчанию) |
Баланс бликов | Фиолетовый(HTML-код 4A00D3) |
Баланс хрома | Серый (HTML-код C0C0C0) |
и посмотрим, что получилось:
Ниже приведено изображение beavis
которое является картой окружения для этого логотипа.
Это чёрно-белое (в градациях серого) изображение размером 350×350 точек.
По всей видимости, уровень белого для «хромированных» элементов изображения определяется этой самой картой окружения. Следовательно, чтобы изменить распределение уровней белого на логотипе, нужно изменить карту окружения, создав файл с такими же характеристиками (JPEG, градации серого, размер 350×350).
Для создания такого файла возьмём использовавшуюся ранее пейзажную фотографию, изменим её размеры (команда «Изображение / Размер изображения») и переведём в градации серого («Изображение / Режим / Градации серого»). Получится карта окружения:
Теперь возьмём последний вариант параметров скрипта и заменим карту окружения:
Название параметра | Значение параметра |
Насыщенность хрома | -60 |
Светлость хрома | -47 |
Фактор хрома | 0.50 |
Текст | Супер-сайт |
Кегль шрифта | 72 точки |
Шрифт | Пропорциональный без засечек |
Карта окружения | foto2.jpg (новая карта) |
Баланс бликов | Фиолетовый(HTML-код 4A00D3) |
Баланс хрома | Серый (HTML-код C0C0C0) |
после чего посмотрим, что изменилось:
По сравнению с предыдущим вариантом видно, что в «хромированных» элементах изменилось распределение светлых и тёмных участков.
Если «хромированная» рамка наводит на ненужные ассоциации или не требуется, то ничто не мешает вырезать внутреннюю часть изображения и использовать её в качестве эмблемы для сайта.
Логотип «Газетный текст»
Этот логотип имитирует заголовок в газете, создавая неоднородности, характерные для офсетной печати. Вариант с настройками по умолчанию:
а в таблице — значения параметров скрипта:
Название параметра | Значение параметра |
Текст | Newsprint |
Шрифт | Пропорциональный без засечек |
Кегль шрифта | 100 точек |
Размер ячейки | 7 точек |
Плотность | 60% |
Радиус размывания | 0 |
Цвыет текста | Чёрный (HTML-код 000000) |
Цвет фона | Белый (HTML-код FFFFFF) |
Снова изменим параметры по вкусу:
Название параметра | Значение параметра |
Текст | Супер-сайт |
Шрифт | Пропорциональный без засечек |
Кегль шрифта | 50 точек |
Размер ячейки | 1 точка |
Плотность | 70% |
Радиус размывания | 0 |
Цвыет текста | Чёрный (HTML-код 000000) |
Цвет фона | Белый (HTML-код FFFFFF) |
и посмотрим на результат:
Для этого логотипа очень подходит аскетичная чёрно-белая цветовая гамма. Цвет фона здесь устанавливается для фона изображения, а неоднородности цвета букв определяются параметрами «Размер ячейки», «Плотность» и «Радиус размывания».
Градиентный с фаской
Этот скрипт создаёт строгий, но изящный логотип из «металлических» букв с тенью на белом фоне.
Результат работы скрипта с параметрами по умолчанию:
а в таблице — значения параметров:
Название параметра | Значение параметра |
Текст | Moo |
Шрифт | Пропорциональный жирный без засечек |
Кегль шрифта | 90 точек |
Высота скоса (резкость) | 40 |
Ширина скоса | 2.5 |
Цвет фона | Белый (HTML-код FFFFFF) |
Изменим параметры в соответствии с таблицей:
Название параметра | Значение параметра |
Текст | Супер-сайт |
Шрифт | Пропорциональный без засечек |
Кегль шрифта | 50 точек |
Высота скоса (резкость) | 50 |
Ширина скоса | 1.0 |
Цвет фона | Белый (HTML-код FFFFFF) |
и посмотрим на результат:
Звёздная вспышка
Этот логотип основан на применении «спецэффекта» — имитации вспышки света на поверхности рельефного текста со слабо выраженной текстурой.
Посмотрим на результаты применения скрипта с параметрами по умолчанию:
а также на состав и значения этих параметров:
Название параметра | Значение параметра |
Текст | GIMP |
Шрифт | Пропорциональный без засечек |
Кегль шрифта | 150 точек |
Цвет вспышки | Зелёный (HTML-код 3CC421) |
Цвет фона | Белый (HTML-код FFFFFF) |
Снова изменим надпись и размер шрифта, а также попробуем поэкспериментировать с параметром «Цвет вспышки»:
Название параметра | Значение параметра |
Текст | Супер-сайт |
Шрифт | Пропорциональный без засечек |
Кегль шрифта | 72 точки |
Цвет вспышки | Жёлтый (HTML-код FFC300) |
Цвет фона | Белый (HTML-код FFFFFF) |
Получается некая имитация «золотых» букв.
Текст по кругу
Этот логотип имитирует надпись на печати. Для него важны такие параметры, как радиус, начальный угол и угол заполнения:
Название параметра | Значение параметра |
Текст | The GNU Image Manipulation Program Version 2.0 |
Радиус | 80 |
Начальный угол | 0 |
Заполнить угол | 360 |
Шрифт | Пропорциональный без засечек |
Кегль шрифта | 18 точек |
Результат применения скрипта с параметрами по умолчанию:
И снова изменим надпись и параметры шрифта:
Название параметра | Значение параметра |
Текст | Некоммерческое партнёрство «Рога и копыта» |
Радиус | 100 |
Начальный угол | -90 |
Заполнить угол | 360 |
Шрифт | Пропорциональный с засечками |
Кегль шрифта | 16 точек |
В качестве цвета текста используется цвет переднего плана, который устанавливается в главном окне программы. Установим фиолетовый цвет (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 ограничены только ими. Дальше каждый интересующийся может продолжить исследования самостоятельно.