Gimp для Web. Часть 1Создание аватары для блога или форума
Скачать 151.8 Kb.
|
| Иван Хахаев 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 миллисекунд. ^ Графическое оформление сайтов может быть создано исключительно вручную, однако GIMP предоставляет начинающим сайтостроителям некоторый набор процедур автоматизации создания элементов графического оформления. Автоматизация процесса осуществляется с помощью программ (скриптов), которые могут быть написаны как на собственном языке GIMP, так и на широко известном языке Python. Набор программ на собственном языке GIMP называется «Скрипт-Фу» (Script-Fu) и доступен как из главного меню окна изображения, так и из меню главного окна программы, но варианты меню «Скрипт-Фу» получаются разные (рис. 3 и 4).  Рисунок 3. Меню «Расш./Скрипт-Фу» главного окна GIMP.  Рисунок 4. Меню «Скрипт-Фу» окна изображения. На данном этапе более интересен первый вариант (меню «Расш./Скрипт-Фу» главного окна программы). Здесь можно найти как раз то, что нужно для создания элементов дизайна сайтов – кнопки, темы Web-страниц и эмблемы. Рассмотрим некоторые варианты предлагаемых элементов с настройками по умолчанию и с изменёнными параметрами. КнопкиGIMP предлагает два варианта автоматизированного создания кнопок - «Круглая кнопка» и «Простая выпуклая кнопка». Для каждого варианта существует собственный набор настроек. Вызовем диалог настройки «Круглой кнопки» (рис. 5).  Рисунок 5. Диалог настройки скрипта «Круглая кнопка». Этот скрипт позволяет сразу создать три варианта кнопки – неактивную, активную (когда на кнопку наведена мышь) и нажатую. Изменение изображения кнопки обеспечивается уже автором сайта. Соответственно, выбираются цвет затенённой части кнопки (нижний цвет), цвет поверхности кнопки (верхний цвет) и цвет текста. Для нажатой кнопки «верхний» и «нижний» цвета меняются местами (инвертируются). Для активной кнопки поверхность становится более «яркой» (подсвеченной) и меняется цвет текста. В целом цветовая гамма по умолчанию не очень приятная. В случае, если иллюстрации получаются в градациях серого, настройки цвета можно воспроизвести из представленной ниже таблицы (таблица 1). Таблица 1: Коды цветов «круглой кнопки» по умолчанию.
На рис. 6 показаны результаты работы скрипта – три кнопки в порядке их создания: обычная, активная и нажатая.  Рисунок 6. Результаты работы скрипта «Круглая кнопка» с настройками по умолчанию. Теперь попробуем изменить вид и размер шрифта, цвета и параметр «отношение радиусов» (рис. 7).  Рисунок 7. Изменение параметров скрипта «Круглая кнопка». Коды цветов элементов изображения приведены в таблице ниже (таблица 2), а результат показан на рис. 8. Таблица 2: Изменённые коды цветов «круглой кнопки».
 Рисунок 8. Результат работы скрипта с новыми параметрами. Заметим, что создаются полноцветные изображения, следовательно, при сохранении кнопок для использования на Web-странице должен быть выбран формат JPEG (поскольку все еще используются браузеры, некорректно отображающие изображения в формате PNG). Для сохранения кнопок в формате GIF нужно будет преобразовать изображения в индексированные. Теперь познакомимся с работой скрипта «Простая выпуклая кнопка». Диалог настройки скрипта с параметрами по умолчанию показан на рис. 9. Следует обратить внимание, что для кнопки может быть включён режим «Нажатая».  Рисунок 9: Параметры скрипта «Простая выпуклая кнопка». Цвета элементов кнопки приведены в таблице 3 (в HTML-кодах). Таблица 3: Цвета по умолчанию для «простой выпуклой кнопки».
Посмотрим на результаты работа скрипта при создании обычной кнопки (рис. 10) и «нажатой» кнопки (рис. 11) с параметрами по умолчанию.  Рисунок 10. Кнопка с параметрами по умолчанию.  Рисунок 11. Нажатая кнопка с параметрами по умолчанию. В обоих случаях создаётся три слоя изображения – слой с границами (основа), слой с градиентом цвета от верхнего левого угла кнопки к нижнему правому, а также слой с текстом. В результате работы скрипта опять-таки создается полноцветное изображение и при сохранении кнопки для использования на Web-странице должен быть выбран формат JPEG (поскольку все еще используются браузеры, некорректно отображающие изображения в формате PNG). Для сохранения кнопки в формате GIF нужно будет преобразовать изображение в индексированное. Теперь изменим параметры скрипта в соответствии с рис. 12 и цвета элементов в соответствии с таблицей 4 и посмотрим на получившуюся «нажатую» кнопку (рис. 13).  Рисунок 12. Изменённые настройки для «простой выпуклой кнопки». Таблица 4: Изменённые цвета для «простой выпуклой кнопки».
 Рисунок 13. «Простая выпуклая кнопка» с пользовательскими параметрами. ^ Описываемая здесь версия GIMP позволяет с помощью расширений Скрипт-Фу создавать следующие темы Web-страниц: «Classic.Gimp.Org», «Выпуклый шаблон» и «Чужое свечение». Рассмотрим, что и как они позволяют получить для графического оформления web-страниц. ^ Список элементов темы «Classic.Gimp.Org» показан на рис. 14.  Рисунок 14. Элементы темы «Classic.Gimp.Org». Поскольку совершенно не ясно, что означает в данной ситуации термин «главная труба», рассмотрим только два скрипта - «Большой заголовок» и «Малый заголовок». Настройки по умолчанию для скрипта «Большой заголовок» показаны на рис. 15, а HTML-коды цветов элементов – в таблице 5.  Рисунок 15. Настройки по умолчанию для скрипта «Большой заголовок». Таблица 5: Цвета по умолчанию для скрипта «Большой заголовок».
Скрипт создает индексированное изображение, а это значит, что сохранять результат для использования на Web-странице нужно будет в формате GIF. На рис. 16 показано получившееся изображение в окне изображения GIMP, а на рис. 17 - получившийся заголовок в окне браузера.  Рисунок 16. «Большой заголовок» в окне изображения GIMP.  Рисунок 17. «Большой заголовок» в окне браузера. Получается вполне красиво, так что даже не хочется ничего менять в настройках по умолчанию. Однако попробуем, не изменяя цветовую палитру, изменить вид и размер шрифта, а также текст и количество цветов в индексированном изображении (рис. 18).  Рисунок 18. Изменение параметров скрипта «Большой заголовок». Результат эксперимента в окне браузера показан на рис. 19. Этот результат также выглядит вполне пристойно.  Рисунок 19. «Большой заголовок» с измененными настройками. Теперь посмотрим на настройки и результаты работы скрипта «Малый заголовок». Диалог настройки показан на рис. 20, а в таблице 6 приведены цвета элементов изображения.  Рисунок 20. Параметры по умолчанию для скрипта «Малый заголовок». Таблица 6: Цвета по умолчанию для скрипта «Малый заголовок».
Результат в окне браузера показан на рис. 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: Параметры элементов дизайна страниц для темы «Выпуклый шаблон».
Для этих элементов 5 точек является минимально допустимым размером, т.е. линия с толщиной менее 5 точек не может быть получена. Все элементы на Web-странице показаны на рис. ?  Рисунок 33. Элементы темы «Выпуклый шаблон» на Web-странице. Видно, что фактура шаблона почти не видна, а стрелка не видна вообще, поскольку используемый шаблон слишком тёмный. Повторим создание элементов с теми же параметрами, но с более светлым шаблоном (например, Orange!), соответственно изменив цвет на кнопке. На рис. 34 показан результат внесения изменений.  Рисунок 34. Тема «Выпуклый шаблон» с шаблоном «Orange!» ^ В этой теме количество элементов меньше, чем в предыдущей, поскольку отсутствует скрипт для создания заголовка (рис. 35).  Рисунок 35. Элементы темы «Чужое свечение». Диалог настройки скрипта «Кнопка» с параметрами по умолчанию показан на рис. 36, а в таблице 8 приведены параметры по умолчанию для остальных элементов темы.  Рисунок 36. Параметры по умолчанию для кнопки темы «Чужое свечение». Таблица 8: Параметры по умолчанию для элементов дизайна страниц темы «Чужое свечение».
На рис. 37 показано, как выглядят все эти элементы на Web-странице с белым фоном.  Рисунок 37. Элементы темы «Чужое свечение» с настройками по умолчанию. Видно, что параметры по умолчанию рассчитаны на черный фон документа, как и в теме «Выпуклый шаблон». Попробуем изменить параметры так, чтобы элементы темы нормально выглядели на странице с белым фоном. Таблица 9: Измененные параметры для элементов дизайна страниц темы «Чужое свечение».
Результаты применения этих параметров показаны на рис. 38.  Рисунок 38. Элементы темы «Чужое свечение» с измененными параметрами. Продолжение следует... |
Добавить документ в свой блог или на сайт
Похожие:
 | Задание Запустить программу gimp. Запуск графического редактора gimp осуществляется командой gimp или с помощью главного меню kde,... | | Некоторые фильтры уже рассматривались раньше (в частности, векторный редактор Gfig и сценарий «нарезки» изображения для размещения... |
| Этот урок обобщающий, проводится после усвоения учащимися определенных навыков работы с простейшим графическим редактором «gimp»,... | | Цель работы: Ознакомление с основами Web-проектирования и Web-дизайна. Формирование навыков использования пакета FrontPage 2002/2000... |
| Программа поддерживает растровую графику и частично векторную. Gimp умеет многое. Его можно использовать как в качестве простой программы... | | Макет должен быть представлен в форматах psd, ai, xcf(файл gimp) или tiff сохранен в rgb (цветовая схема, воспроизводимая подавляющим... |
| «Пилот». Отдельные люди могут свободно копировать эти файлы из Интернета для своего личного пользования и они могут быть сделаны... | | Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности... |
| Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности... | | «Пилот». Отдельные люди могут свободно копировать эти файлы из Интернета для своего личного пользования и они могут быть сделаны... |