Gimp для Web. Часть 1Создание аватары для блога или форума




Скачать 151.8 Kb.
НазваниеGimp для Web. Часть 1Создание аватары для блога или форума
Дата публикации17.03.2013
Размер151.8 Kb.
ТипДокументы
odtdocs.ru > Право > Документы
Иван Хахаев

ikh1@yandex.ru

GIMP для Web. Часть 1.



1Создание аватары для блога или форума


Аватара – небольшая картинка, изображающая персонаж, которым притворяется автор блога или форума. Этот персонаж может не иметь ничего общего с реальной личностью, он является воплощением виртуальной личности автора.

Обычно аватара имеет размер 80-100 точек по горизонтали и вертикали, создаются аватары на основе фотографий или имеющихся картинок (в последнем случае нужно помнить об авторских правах и этике!). Кроме того, в аватарах возможна анимация.

Создадим анимированную аватару my-tux на основе картинки egonpin_Tux.png, загруженной с сайта openclipart.org (рис. 1). Поскольку картинка относится к категории PublicDomain и будет использована исключительно для учебных целей, проблем с соблюдением авторских прав не должно возникнуть.



Рисунок 1. Исходная картинка для создания аватары.



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

Итак, начинаем творить. Сначала изменим фон изображения, потом масштабируем его, а потом создадим эффекты анимации.

Откроем исходное изображение в GIMP, выделим его полностью с помощью команды «Выделение/Все», скопируем, а затем создадим новое изображение. Новое изображение автоматически окажется размером с исходное. Нужно только обязательно проверить разрешение экрана для вновь создаваемого изображения, оно должно соответствовать тому, что реально обеспечивает видеосистема («Дополнительные параметры» в диалоге создания изображения). Затем инструментом «Получение цвета из изображения» («Пипетка») устанавливаем цвет «одежды» пингвина в качестве цвета переднего плана, выделяем полностью новое изображение и заливаем его цветом переднего плана с помощью инструмента «Заливка» с соответствующими параметрами.

После этого вставляем («Правка/Вставить») выделенное ранее исходное изображение в новое, сохраняем результат в формате XCF, а затем создаём из плавающего выделения новый слой и масштабируем изображение пропорционально до ширины в 80 точек. Результат показан на рис. 2.



Рисунок 2. Заготовка для аватары.



В качестве анимации заставим пингвина перебирать лапками. Поскольку GIF-анимация делается по слоям, всего потребуется 4 слоя с изображением разных фаз этого процесса, причём у каждого слоя должен быть непрозрачный фон. Этого можно добиться, скопировав слой фона, разместив эти копии нужным образом и затем объединив слои изображения и фона для соответствующих кадров анимации.

Нужно заметить, что все операции редактирования нужно делать в прозрачном слое изображения, когда он активен и сделан видимым. На этом этапе полезно все остальные слои сделать невидимыми.

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

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

2Создание логотипов и элементов дизайна страниц


Графическое оформление сайтов может быть создано исключительно вручную, однако GIMP предоставляет начинающим сайтостроителям некоторый набор процедур автоматизации создания элементов графического оформления. Автоматизация процесса осуществляется с помощью программ (скриптов), которые могут быть написаны как на собственном языке GIMP, так и на широко известном языке Python. Набор программ на собственном языке GIMP называется «Скрипт-Фу» (Script-Fu) и доступен как из главного меню окна изображения, так и из меню главного окна программы, но варианты меню «Скрипт-Фу» получаются разные (рис. 3 и 4).



Рисунок 3. Меню «Расш./Скрипт-Фу» главного окна GIMP.





Рисунок 4. Меню «Скрипт-Фу» окна изображения.



На данном этапе более интересен первый вариант (меню «Расш./Скрипт-Фу» главного окна программы). Здесь можно найти как раз то, что нужно для создания элементов дизайна сайтов – кнопки, темы Web-страниц и эмблемы.

Рассмотрим некоторые варианты предлагаемых элементов с настройками по умолчанию и с изменёнными параметрами.

Кнопки


GIMP предлагает два варианта автоматизированного создания кнопок - «Круглая кнопка» и «Простая выпуклая кнопка». Для каждого варианта существует собственный набор настроек.

Вызовем диалог настройки «Круглой кнопки» (рис. 5).



Рисунок 5. Диалог настройки скрипта «Круглая кнопка».



Этот скрипт позволяет сразу создать три варианта кнопки – неактивную, активную (когда на кнопку наведена мышь) и нажатую. Изменение изображения кнопки обеспечивается уже автором сайта. Соответственно, выбираются цвет затенённой части кнопки (нижний цвет), цвет поверхности кнопки (верхний цвет) и цвет текста. Для нажатой кнопки «верхний» и «нижний» цвета меняются местами (инвертируются). Для активной кнопки поверхность становится более «яркой» (подсвеченной) и меняется цвет текста. В целом цветовая гамма по умолчанию не очень приятная. В случае, если иллюстрации получаются в градациях серого, настройки цвета можно воспроизвести из представленной ниже таблицы (таблица 1).

Таблица 1: Коды цветов «круглой кнопки» по умолчанию.

Элемент изображения

HTML-код цвета

Верхний цвет:

C0C000

Нижний цвет:

806C00

Цвет текста:

000000 (black)

Верхний цвет (для активн.):

FFFF00 (yellow)

Нижний цвет (для активн.):

806C00

Цвет текста (для активн.):

0000C0

На рис. 6 показаны результаты работы скрипта – три кнопки в порядке их создания: обычная, активная и нажатая.



Рисунок 6. Результаты работы скрипта «Круглая кнопка» с настройками по умолчанию.



Теперь попробуем изменить вид и размер шрифта, цвета и параметр «отношение радиусов» (рис. 7).



Рисунок 7. Изменение параметров скрипта «Круглая кнопка».



Коды цветов элементов изображения приведены в таблице ниже (таблица 2), а результат показан на рис. 8.

Таблица 2: Изменённые коды цветов «круглой кнопки».

Элемент изображения

HTML-код цвета

Верхний цвет:

65AEEE

Нижний цвет:

003980

Цвет текста:

FFD200

Верхний цвет (для активн.):

65AEEE

Нижний цвет (для активн.):

003980

Цвет текста (для активн.):

E02DDE



Рисунок 8. Результат работы скрипта с новыми параметрами.



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

Теперь познакомимся с работой скрипта «Простая выпуклая кнопка». Диалог настройки скрипта с параметрами по умолчанию показан на рис. 9. Следует обратить внимание, что для кнопки может быть включён режим «Нажатая».



Рисунок 9: Параметры скрипта «Простая выпуклая кнопка».



Цвета элементов кнопки приведены в таблице 3 (в HTML-кодах).

Таблица 3: Цвета по умолчанию для «простой выпуклой кнопки».

Элемент изображения

HTML-код цвета

Верхний-левый цвет:

00FF7F

Нижний-правый цвет:

007FFF

Цвет текста:

000000


Посмотрим на результаты работа скрипта при создании обычной кнопки (рис. 10) и «нажатой» кнопки (рис. 11) с параметрами по умолчанию.



Рисунок 10. Кнопка с параметрами по умолчанию.





Рисунок 11. Нажатая кнопка с параметрами по умолчанию.



В обоих случаях создаётся три слоя изображения – слой с границами (основа), слой с градиентом цвета от верхнего левого угла кнопки к нижнему правому, а также слой с текстом. В результате работы скрипта опять-таки создается полноцветное изображение и при сохранении кнопки для использования на Web-странице должен быть выбран формат JPEG (поскольку все еще используются браузеры, некорректно отображающие изображения в формате PNG). Для сохранения кнопки в формате GIF нужно будет преобразовать изображение в индексированное.

Теперь изменим параметры скрипта в соответствии с рис. 12 и цвета элементов в соответствии с таблицей 4 и посмотрим на получившуюся «нажатую» кнопку (рис. 13).



Рисунок 12. Изменённые настройки для «простой выпуклой кнопки».



Таблица 4: Изменённые цвета для «простой выпуклой кнопки».

Элемент изображения

HTML-код цвета

Верхний-левый цвет:

A6A6A6

Нижний-правый цвет:

000000

Цвет текста:

FFFFFF



Рисунок 13. «Простая выпуклая кнопка» с пользовательскими параметрами.




^

Темы Web-страниц


Описываемая здесь версия GIMP позволяет с помощью расширений Скрипт-Фу создавать следующие темы Web-страниц: «Classic.Gimp.Org», «Выпуклый шаблон» и «Чужое свечение». Рассмотрим, что и как они позволяют получить для графического оформления web-страниц.
^

Тема «Classic.Gimp.Org»


Список элементов темы «Classic.Gimp.Org» показан на рис. 14.



Рисунок 14. Элементы темы «Classic.Gimp.Org».



Поскольку совершенно не ясно, что означает в данной ситуации термин «главная труба», рассмотрим только два скрипта - «Большой заголовок» и «Малый заголовок».

Настройки по умолчанию для скрипта «Большой заголовок» показаны на рис. 15, а HTML-коды цветов элементов – в таблице 5.



Рисунок 15. Настройки по умолчанию для скрипта «Большой заголовок».



Таблица 5: Цвета по умолчанию для скрипта «Большой заголовок».

Элемент изображения

HTML-код цвета

Цвет текста:

526C9F

Цвет бликов:

BEDCFA

Тёмный цвет:

2E4A5C

Цвет тени:

000000

Скрипт создает индексированное изображение, а это значит, что сохранять результат для использования на Web-странице нужно будет в формате GIF. На рис. 16 показано получившееся изображение в окне изображения GIMP, а на рис. 17 - получившийся заголовок в окне браузера.



Рисунок 16. «Большой заголовок» в окне изображения GIMP.





Рисунок 17. «Большой заголовок» в окне браузера.



Получается вполне красиво, так что даже не хочется ничего менять в настройках по умолчанию. Однако попробуем, не изменяя цветовую палитру, изменить вид и размер шрифта, а также текст и количество цветов в индексированном изображении (рис. 18).



Рисунок 18. Изменение параметров скрипта «Большой заголовок».



Результат эксперимента в окне браузера показан на рис. 19. Этот результат также выглядит вполне пристойно.



Рисунок 19. «Большой заголовок» с измененными настройками.



Теперь посмотрим на настройки и результаты работы скрипта «Малый заголовок». Диалог настройки показан на рис. 20, а в таблице 6 приведены цвета элементов изображения.



Рисунок 20. Параметры по умолчанию для скрипта «Малый заголовок».



Таблица 6: Цвета по умолчанию для скрипта «Малый заголовок».

Элемент изображения

HTML-код цвета

Цвет текста:

87DCDC

Цвет бликов:

D2F0F5

Тёмный цвет:

2E4A5C

Цвет тени:

000000

Результат в окне браузера показан на рис. 21.



Рисунок 21. «Малый заголовок» с параметрами по умолчанию.



Теперь сделаем цвета «Малого заголовка» такие же как у большого, установим шрифт той же гарнитуры, что у измененного «Большого заголовка» размером 18 точек, а количество цветов в индексированном изображении установим в 255. Запустив скрипт с новыми параметрами, получим результат, показанный на рис. 22.



Рисунок 22. Малый заголовок с измененными параметрами.



А теперь посмотрим, как оба заголовка выглядят вместе о окне браузера (рис. 23)



Рисунок 23. Большой и малый заголовок вместе на Web-странице.




^

Тема «Выпуклый шаблон»


Список элементов темы «Выпуклый шаблон» показан на рис. 24. Рассмотрим эти элементы с настройками по умолчанию, а потом,как всегда, попробуем изменить параметры скриптов.



Рисунок 24. Элементы темы «Выпуклый шаблон».



Начнем с заголовка страницы. Диалог настройки скрипта с параметрами по умолчанию показан на рис. 25, а результат работы – на рис. 26.



Рисунок 25. Заголовок темы «Выпуклый шаблон» с параметрами по умолчанию.





Рисунок 26. Результат формирования заголовка.



Здесь по умолчанию используется шаблон с фактурой светлого дерева (шаблон называется Wood) и фон заголовка получается черным. Тогда всю Web-страницу придется делать на черном фоне, что может затруднить шрифтовое оформление и восприятие страницы (хотя на вкус и цвет, как известно, товарищей нет).

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

Итак, изменяем текст, устанавливаем размер шрифта в 48 точек, выбираем гарнитуру по вкусу и устанавливаем шаблон под названием «:Big Blue», а также включаем режим «Прозрачный фон» (рис. 27).



Рисунок 27. Измененные параметры заголовка для темы «Выпуклый шаблон».



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

Хороший результат можно получить, скопировав получившийся текст на белый фон и экспортировав результат в формат JPEG (рис. 28).



Рисунок 28. Итоговый заголовок для темы «Выпуклый шаблон».



«Выпуклость» в итоге практически незаметна, однако у текста получились довольно интересные темно-сине-черные переходы.

Следующий элемент рассматриваемой темы – кнопка. Аргументы скрипта по умолчанию показаны на рис. 29. Шаблон используется тот же. что и для заголовка (Wood), а цвет текста – черный (HTML-код 000000).



Рисунок 29. Параметры по умолчанию для кнопки темы «Выпуклый шаблон».



Как видно из рис. 29, скрипт позволяет создавать как обычную, так и «нажатую» кнопку. Ограничимся примерами обычной кнопки.

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



Рисунок 30. Кнопка для темы «Выпуклый шаблон» с параметрами по умолчанию.



Теперь изменим текст и гарнитуру шрифта, установим размер шрифта в 14 точек, цвет шрифта – белый, а шаблон, как и для заголовка – Big Blue (рис. 31). Результат в окне изображения показан на рис. 32.



Рисунок 31. Изменение параметров кнопки темы «Выпуклый шаблон».





Рисунок 32. Кнопка с измененными параметрами.



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

Таблица 7: Параметры элементов дизайна страниц для темы «Выпуклый шаблон».

Элемент изображения

Аргументы скрипта

Линейка:

Длина – 300, высота – 5, шаблон – Big Blue

Маркер:

Диаметр – 10, шаблон – Big Blue, прозрачный фон

Стрелка:

Размер – 32, направление – вправо, шаблон – Big Blue

Для этих элементов 5 точек является минимально допустимым размером, т.е. линия с толщиной менее 5 точек не может быть получена.

Все элементы на Web-странице показаны на рис. ?



Рисунок 33. Элементы темы «Выпуклый шаблон» на Web-странице.



Видно, что фактура шаблона почти не видна, а стрелка не видна вообще, поскольку используемый шаблон слишком тёмный. Повторим создание элементов с теми же параметрами, но с более светлым шаблоном (например, Orange!), соответственно изменив цвет на кнопке. На рис. 34 показан результат внесения изменений.



Рисунок 34. Тема «Выпуклый шаблон» с шаблоном «Orange!»




^

Тема «Чужое свечение»


В этой теме количество элементов меньше, чем в предыдущей, поскольку отсутствует скрипт для создания заголовка (рис. 35).



Рисунок 35. Элементы темы «Чужое свечение».



Диалог настройки скрипта «Кнопка» с параметрами по умолчанию показан на рис. 36, а в таблице 8 приведены параметры по умолчанию для остальных элементов темы.



Рисунок 36. Параметры по умолчанию для кнопки темы «Чужое свечение».



Таблица 8: Параметры по умолчанию для элементов дизайна страниц темы «Чужое свечение».

Элемент изображения

Аргументы скрипта

Кнопка:

Шрифт – жирный без засечек размер 22, цвет текста – черный, цвет свечения – ярко-зеленый (HTML-код 3FFC00), цвет фона – черный, заполнение – 6, радиус свечения – 10.

Линейка:

Длина – 480, высота – 16, цвет свечения – ярко-зеленый (HTML-код 3FFC00), цвет фона – черный.

Маркер:

Радиус – 16, цвет свечения – ярко-зеленый (HTML-код 3FFC00), цвет фона – черный.

Стрелка:

Размер – 32, направление – вправо, цвет свечения – ярко-зеленый (HTML-код 3FFC00), цвет фона – черный.

На рис. 37 показано, как выглядят все эти элементы на Web-странице с белым фоном.



Рисунок 37. Элементы темы «Чужое свечение» с настройками по умолчанию.



Видно, что параметры по умолчанию рассчитаны на черный фон документа, как и в теме «Выпуклый шаблон». Попробуем изменить параметры так, чтобы элементы темы нормально выглядели на странице с белым фоном.

Таблица 9: Измененные параметры для элементов дизайна страниц темы «Чужое свечение».

Элемент изображения

Аргументы скрипта

Кнопка:

Шрифт – без засечек размер 14, цвет текста – ярко-зеленый (HTML-код 3FFC00), цвет свечения – ярко-зеленый (HTML-код 3FFC00), цвет фона – белый, заполнение – 6, радиус свечения – 6.

Линейка:

Длина – 300, высота – 4, цвет свечения – ярко-зеленый (HTML-код 3FFC00), цвет фона – белый.

Маркер:

Радиус – 6, цвет свечения – ярко-зеленый (HTML-код 3FFC00), цвет фона – белый.

Стрелка:

Размер – 20, направление – вправо, цвет свечения – ярко-зеленый (HTML-код 3FFC00), цвет фона – белый.

Результаты применения этих параметров показаны на рис. 38.



Рисунок 38. Элементы темы «Чужое свечение» с измененными параметрами.



Продолжение следует...

Добавить документ в свой блог или на сайт

Похожие:

Практикум по gimp. Урок Рабочий экран gimp
Задание Запустить программу gimp. Запуск графического редактора gimp осуществляется командой gimp или с помощью главного меню kde,...

Использование фильтров gimp для создания эффектов
Некоторые фильтры уже рассматривались раньше (в частности, векторный редактор Gfig и сценарий «нарезки» изображения для размещения...

Тезисы работы “Детская фантазия”
Этот урок обобщающий, проводится после усвоения учащимися определенных навыков работы с простейшим графическим редактором «gimp»,...

Лабораторная работа №4 Тема: «Web- проектирование и Web-дизайн. Пакет...
Цель работы: Ознакомление с основами Web-проектирования и Web-дизайна. Формирование навыков использования пакета FrontPage 2002/2000...

Gimp мощная бесплатная, свободно распространяемая программа для создания,...
Программа поддерживает растровую графику и частично векторную. Gimp умеет многое. Его можно использовать как в качестве простой программы...

Минимальные требования к дизайн-макету
Макет должен быть представлен в форматах psd, ai, xcf(файл gimp) или tiff сохранен в rgb (цветовая схема, воспроизводимая подавляющим...

Супер Сайо Часть 10 Примечание super scio часть 10 примечание
«Пилот». Отдельные люди могут свободно копировать эти файлы из Интернета для своего личного пользования и они могут быть сделаны...

Реферат по дисциплине «Человеко-машинное взаимодействие» на тему...
Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности...

Реферат по дисциплине «Человеко-машинное взаимодействие» на тему...
Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности...

Супер Сайо Часть 7 Упражнения от и продвинутые процессы super scio...
«Пилот». Отдельные люди могут свободно копировать эти файлы из Интернета для своего личного пользования и они могут быть сделаны...

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
odtdocs.ru
Главная страница