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

Knach.com » GIMP и Web » Логотипы (Эмблемы) в GIMP

Логотип lmigre-26

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

Логотип Imigre-26

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

Название параметра Значение параметра
Текст GIMP
Цвет текста Красный (HTML-код FF0000)
Цвет обрамления Синий (HTML-код 0022FF)
Шрифт Пропорциональный без засечек
Кегль шрифта 100 точек
Размер обрамления 2

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

Название параметра Значение параметра
Текст Супер-сайт
Цвет текста Жёлтый (HTML-код FFDC00)
Цвет обрамления Оранжево-коричневый (HTML-код ED5A27)
Шрифт Пропорциональный без засечек
Кегль шрифта 50 точек
Размер обрамления 1

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

Изменённая эмблема Imigre-26

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

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

Эмблема SOTA хром

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

Название параметра Значение параметра
Насыщенность хрома -80
Светлость хрома -47
Фактор хрома 0.75
Текст GIMP
Кегль шрифта 150 точек
Шрифт Пропорциональный без засечек
Карта окружения beavis.jpg (карта по умолчанию)
Баланс бликов Светло-коричневый (HTML-код D35F00)
Баланс хрома Чёрный (HTML-код 000000)

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

Название параметра Значение параметра
Насыщенность хрома -60
Светлость хрома -47
Фактор хрома 0.50
Текст Супер-сайт
Кегль шрифта 72 точки
Шрифт Пропорциональный без засечек
Карта окружения beavis.jpg (карта по умолчанию)
Баланс бликов Фиолетовый(HTML-код 4A00D3)
Баланс хрома Серый (HTML-код C0C0C0)

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

Модифицированная эмблема SOTA хром

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

Карта окружения по умолчанию для эмблемы SOTA хром

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

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

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

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

Новая карта окружения для эмблемы SOTA хром

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

Название параметра Значение параметра
Насыщенность хрома -60
Светлость хрома -47
Фактор хрома 0.50
Текст Супер-сайт
Кегль шрифта 72 точки
Шрифт Пропорциональный без засечек
Карта окружения foto2.jpg (новая карта)
Баланс бликов Фиолетовый(HTML-код 4A00D3)
Баланс хрома Серый (HTML-код C0C0C0)

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

Эмблема SOTA хром с новой картой окружения

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

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

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

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

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

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

Название параметра Значение параметра
Текст 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-страницы, например такой:

Макет дизайна 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 ограничены только ими. Дальше каждый интересующийся может продолжить исследования самостоятельно.

  • Создание кнопок в GIMP
  • Создание логотипов и элементов дизайна web страниц
  • Создание аватары для блога или форума
  • Сам себе руководитель: дизайнер-фрилансер
  • Создаем собственное Интернет казино
  • Комментариев пока нет. Будете первым?

    Оставить комментарий

    XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>