ПРАКТИЧЕСКОГО ЗАНЯТИЯ № 14

ПЛАН

ПРАКТИЧЕСКОГО ЗАНЯТИЯ № 13

Тема: ГРАФИЧЕСКИЙ РЕДАКТОР Gimp ДЛЯ ВЕБ-ДИЗАЙНА

Цель: технология работы с изображениями в программе Gimp — разработка кнопок навигации

Время: 2 часа

Программа GIMP (The GNU Image Manipulation Program) предназначена для редактирования растровой графики. В этой работе рассмотрены возможности программы GIMP для Web-дизайна.

Методика выполнения

Кнопки

Разрабатывая какой-нибудь сайт, прежде всего, нужно решить вопрос навигации. Важнейшим элементом навигации являются кнопки. С помощью GIMP можно создавать несколько видов кнопок, причем в разных состояниях: нажатая, не нажатая, активная.

Запустите GIMP (рис. 1) и выберите пункт меню Расш.->Скрипт-Фу->Кнопки->Круглая кнопка.

Рис. 1. The GNU Image Manipulation Program

Появится окно, в котором нужно будет задать параметры кнопки: текст надписи, шрифт текста, размер шрифта, цвет фона и шрифта, заполнение по X и по Y. Можно также указать внешний вид кнопки: не нажатая, не нажатая (активная) и нажатая. Если вы включите все три режима, вы получите сразу три рисунка одной кнопки в разных состояниях. На рисунке 2 изображена не нажатая активная кнопка.

Рис. 2. Активная круглая кнопка

Второй тип кнопок – это «Простая выпуклая кнопка». Для ее создания выберите пункт меню Расш.->Скрипт-Фу->Кнопки->Простая выпуклая кнопка. Появится окно с параметрами кнопки. Параметров у простой кнопки значительно меньше, поэтому она полностью оправдывает свое название. Если вам нужна нажатая кнопка, установите одноименный параметр в окне параметров. Установив нужные вам параметры, нажмите на кнопку OK. Пример простой кнопки вы можете увидеть на рисунке 3.

Рис. 3. Простая кнопка

Эмблемы

Теперь перейдем к созданию логотипов и надписей для сайта. С помощью меню Расш.->Скрипт-Фу->Эмблемы можно создавать различные надписи для вашего сайта. Выберите пункт меню Расш.->Скрипт-Фу->Эмблемы->Объемный контур. Среди параметров данной эмблемы доступны следующие:

1. Шаблон

2. Текст

3. Шрифт и размер шрифта

4. Радиус размывания контура и тени

5. Альфа-слой

6. Смещение тени по X и по Y

В примере на рисунке 4 я использован шрифт LED FIXED.

Рис. 4. Объемный контур

Рассмотреть еще один полезный скрипт – «Текст по кругу». Для его использования активизируйте пункт меню Расш.->Скрипт-Фу->Эмблемы->Текст по кругу. Появится окно, в котором нужно будет указать текст надписи шрифт и его размер. Непосредственно к параметрами отображения текста по кругу относятся Начальный угол, Радиус, Угол заполнения (Заполнить угол). Установив определенным образом данные параметры, можно расположить текст не только по кругу, а и по дуге. Пример показан на рисунке 5.

Рис. 5. Текст по кругу

Еще один скрипт «SOTA Хром» (см. рис. 6). Для его применения активизируйте пункт Расш.->Скрипт-Фу->Эмблемы->SOTA Хром.

Рис. 6. SOTA Хром

При работе с этим скриптом можно изменить Насыщенность, светлость и фактор хрома. Для примера используем значения параметров -80, -47, 0.75 соответственно. Размер шрифта – 75. Кроме этих параметров, можно также задать баланс бликов и баланс хрома.

Также можно порекомендовать скрипты «Чужое свечение» и «Чужой неон». Результат работы скрипта «Чужое свечение» изображен на рисунке 7, а результат работы скрипта «Чужой неон» – рисунке 8.

Рис. 7, 8. Чужое свечение, Чужой неон

Фоновые изображения

Теперь перейдем к созданию различных фоновых изображений. Создать необычное фоновое изображение в GIMP можно за пару щелчков мыши. Разные шаблоны для фоновых изображений вы найдете в меню Расш.->Скрипт-Фу->Шаблоны. Например, для создания небольшой карты можно воспользоваться шаблонами «Визуализация карты» и «Земля». Пример применения шаблона «Земля» изображен на рисунке 9.

Рис. 9. Земля

Другие возможности

В меню Расш.->Скрипт-Фу->Разное можно найти интересные скрипты для изображения тех или иных объектов. Например, для создания сферы активизируйте пункт меню Расш.->Скрипт-Фу->Разное->Сфера. Пример работы этого скрипта отображен на рисунке 10.

Рис. 10. Сфера

Создание вращающего шара

Создайте новый файл, активизировав меню основного окна GIMP Файл, Новый. Установите размер нового изображения – 256x256. Тип заливки – «Прозрачное».

После создания нового изображения нам нужно использовать инструмент «Заливка с градиентом цвета», но перед этим установите цвет переднего плана и фона. Это можно сделать с помощью инструмента выбора цвета: внизу основного окна GIMP находятся два цветных квадратика. Дважды щелкнув на верхнем квадрате, вы увидите окно «Выбор цвета», в котором вы установите цвет переднего плана. Аналогично, двойной щелчок на нижнем квадратике предоставляет возможность выбора цвета фона. Установить цвета по умолчанию вы можете, щелкнув на двух маленьких квадратиках, которые находятся под большими. С помощью стрелок, расположенных над большими квадратами, вы можете переключать цвета по кругу.

В результате применения инструмента «Заливка с градиентом цвета» у вас должен получиться рисунок, похожий на этот:

Рис. 11. Заливка

Теперь щелкаем правой кнопкой мыши по любому участку получившегося изображения. Из появившегося меню выбираем Скрипт-Фу->Аниматоры->Вращающийся шар. Затем устанавливаем параметры аниматора: количество кадров, количество цветов индекса, а также обязательно включите режим «Работать с копией». Затем нажимаем Ок и ждем, пока аниматор завершит свою работу. Потом появится окно с изображением шара. Переходим в этом окно, щелкаем правой кнопкой мыши на любой части изображения и выбираем пункт меню Фильтры->Анимация->Воспроизведение. В появившемся окне нажимаем на кнопку Пуск/Стоп (см. рис. 12). Шар вращается.

Рис. 12. Результат работы аниматора «Вращающийся шар»

Потом это изображение можно сохранить в формате GIF. Для этого выберите пункт меню Файл, Сохранить. Установите тип файла «По расширению» или «GIF». При выборе определения типа файла по расширению, разумеется, нужно ввести имя файла с расширением .gif. Нажмите на конпку Ок. Затем появится окно «Экспортировать файл», в котором нужно будет установить режим «Сохранить как анимацию».

Теперь можно просмотреть файл в браузере или другой программе. Если вы хотите применить этот аниматор к уже существующему изображению, это изображение нужно преобразовать в режим RGB. Для этого выполните команду меню Изображение->Режим->RGB.

Предположим, что нам нужно разрезать наше изображение пополам, то есть разрезать на две части (или на три, четыре и т.д.). Это может потребоваться, например, для снижения времени загрузки изображения через Web, если размер изображения слишком большой.

Для этого ухватитесь мышкой за линейку слева и тащите ее до предполагаемого места разреза: появится синяя вертикальная пунктирная линия. Эта линия иногда называется направляющей. Направляющие линии используются для выравнивания или привязки к координатам. С помощью направляющей установите границу разреза. Аналогично, ухватившись за верхнюю линейку, установите горизонтальную линию разреза. Мы установили границы разреза изображения (см. рис. 13). Осталось его только разрезать. Для этого выберите пункт меню Изображение, Преобразования, Гильотина и вы получите четыре изображения.

Рис. 13. Направляющие линии

Еще один полезный прием. Предположим, что вы создали с помощью Скрипт-Фу эмблему для своего сайта, но по умолчанию используется фон, который вас не устраивает (например, цвет фона вашего сайта – белый, а цвет фона эмблемы – черный). В установках скрипта нельзя задать цвет фона. Как же удалить фон? Очень просто – достаточно удалить всего один слой – слой фона. Выберите пункт меню Слои, каналы и контуры. Появится одноименное окно, в котором будут отображены все слои вашего изображения (см. рис. 14).

Рис. 14. Слои изображения

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

Практическое задание.

После выполненных упражнений создайте вашего сайта и сохраните его с расширением .gif.

ПЛАН

ПРАКТИЧЕСКОГО ЗАНЯТИЯ № 14

Тема: СОЗДАНИЕ ДИЗАЙНА САЙТА В GIMP

Цель: технология работы с изображениями в программе Gimp — разработка дизайна сайта

Время: 2 часа

Методика выполнения

1. Скачаем изображения заготовки. В архиве вы найдете все необходимые для создания дизайна сайта в GIMP картинки, шрифт Helios, который понадобится нам для заголовков и меню, а также, готовый макет для GIMP в формате XCF (файл source.xcf)

,

Фон сайта (Background)

1. Откроем файл 960_grid_12_col.xcf, разлинованный в системе сеток 960gs. Создадим новый слой во всю площадь макета и зальем его цветом #F9F7E7. Создадим еще один слой и нарисуем на нем прямоугольное выделение во всю ширину документа и высотой 800 пикселей. Зальем выделение градиентом цветами от #c0e1df (верхняя граница градиента) до #F9F7E7 (нижняя граница):

2. Применим к градиентному фону шум (Фильтры > Шум > Шум RGB) со следующими параметрами:

3. Теперь вставим в документ кляксу (файл klyaksa.jpg), инструментом «Выделение смежных областей» (волшебная палочка) выделим белый фон и удалим его. Поместим кляксу в верхнюю правую часть макета и применим параметры цвета (Цвет > Тон-Насыщенность):

Сделаем кляксу непрозрачной (15% непрозрачности). Фон сайта готов, приступим к шапке.

Шапка сайта

4. Вставим в макет логотип (файл logo.jpg), волшебной палочкой удалим белый фон и поместим его в первые 3 колонки системы сеток в верхней части документа:

Повысим резкость логотипа на 30 (Фильтры > Улучшение > Повысить резкость).

Установите в систему шрифт из архива (Helios.otf). Перезапустите GIMP, предварительно сохранив текущий результат.

5. Нарисуем поиск. Справа, напротив логотипа нарисуйте на новом слое прямоугольное выделение шириной в 3 с половиной колонки со скругленными углами (радиус закругления 20), высотой 32 пиксела. Залейте вы деление цветом #FFFFFF. Затем, не снимая выделение, уменьшите его на 1 пиксел (Выделение > Уменьшить) и залейте снова цветом #F3F3F3.

6. Кнопка поиска «OK». Создайте новый слой и нарисуйте на нем круглое выделение, размером как на картинке. Залейте его цветом #72685d, уменьшите на 1 пиксел, залейте еще раз цветом #FFFFFF, затем еще раз уменьшите на 1 пиксел и снова залейте #72685d. Напишите на кнопке нашим шрифтом «Helios» слово «OK» (Размер текста 20 пикселей, буквы в верхнем регистре). В результате получится такая кнопочка:

7. Напишите пункты меню. Шрифт Helios, размер 20 пикселов, цвет #72685d. Отбейте пункты друг от друга 6-ю пробелами, напечатав между ними вертикальный слеш:

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

Баннер сайта

8. Сделайте выделение со скругленными углами (радиус закругления 5 пикселов) по ширине сетки, высотой 400 пикселов. Создайте новый слой и залейте его цветом #8BA9AB, уменьшите выделение на 1 пиксел и залейте остальную часть белым цветом (#FFFFFF). Сделайте непрозрачность прямоугольника 35%.

9. Вставьте картинку bbb-splash.jpg и уменьшите ее таким образом, чтобы она оказалась в центра данного прямоугольника. Сверху и снизу можно удалить лишнее прямоугольным выделением:

10. Тень под баннером. Нарисуем на новом слое круглое выделение, высотой 40 пикселов, шириной в 10 колонок сетки, посередине. Зальем его черным цветом:

Снимем выделение и размоем слой фильтром «Гауссово размывание», радиусом 30:

Удалим лишнее (чтобы тень не наезжала на баннер) и сделаем непрозрачность слоя с тенью 30%.

Баннер готов.

Основные разделы сайта

11. Напишем заголовок разделов под баннером. Шрифт Helios, размер 35 пикселов, цвет шрифта #72685d. Написание в верхнем регистре (с зажатой Shift).

12. Создадим новую группу слоев и создадим в ней новый слой, на котором нарисуем выделение с закругленными углами (радиус закругления 5), шириной в 4 колонки сетки, высотой 140 пикселей. По примеру баннера, что рисовали выше, зальем выделение цветом #8BA9AB, уменьшим выделение на 1 пиксел и зальем остальную часть белым цветом (#FFFFFF). Сделаем непрозрачность слоя 35%. Точно также как для баннера, под новым прямоугольником сделаем тень круглым выделением в той-же группе слоев и размоем ее гауссовым размыванием (радиус размывания 15/15):

Вставим картинку (bunny.jpg) и подгоним под размер прямоугольника, как показано на картинке. Лишнее обрежем.

13. Ниже напишем заголовок пункта:

Подзаголовок «О КРОЛИКЕ» будет выглядеть следующим образом:

14. Под текстом, на новом слое сделаем выделение высотой 3 пиксела, шириной в 4 колонки и зальем цветом #72685d. Закругление можно убрать.

Далее напишем текст раздела:

15. Напишем «ПОДРОБНЕЕ» ниже текста раздела. Размер шрифта 20, цвет #fe7e01, написание в верхнем регистре. Рядом создадим круглое выделение на новом слое, радиусом 28 пикселов. Зальем его цветом #C4C4C2. Не снимая выделения, уменьшим его на 1 пиксель и снова зальем цветом #F9F7E7 (вспоминаем кнопку поиска). После всех процедур с уменьшением, уменьшим выделение еще на 1 пиксель и, наконец, зальем оставшуюся часть выделения градиентом цветами от #FE7E01 (нижний цвет градиента) до #FFA955 (верхний цвет градиента).

16. Вставим в макет стрелку (изображение arrow-right.png), выделим волшебной палочкой контур стрелки и зальем белым цветом. После чего, уменьшим стрелку и поместим в наш кружок:

Сделаем непрозрачность слоя со стрелкой 80%.

17. Помните, мы создавали группу для элементов разделов? Теперь выберите эту группу на панели слоев и создайте ее копию. Переместите (с зажатой Shift) копию в следующую четверку колонок. Потом еще раз:

Замените у всех элементов текст и картинки, согласно изображению. Дополнительные картинки находятся в архиве.

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

Снова откройте стрелку (файл arrow-right.png) и выделением отрежте хвостик. Поместите ее в центр кружка.

Установите непрозрачность стрелки и кружка 35%.

Подвал (футер) сайта

19. Нарисуйте прямоугольное выделение во всю ширину макета, высотой от самого низа до разделов, залейте выделение на новом слое цветом #515046 и примените фильт «Шум RGB».

20. Напишите заголовки в подвале, с разбиением по 3 колонки. Можно провести горизонтальную направляющую, чтобы заголовки были на одном уровне.

Ниже напишем пункты с нижним подчеркиванием. Шрифт Arial, размер 14 пикселей, цвет #b7b2ac.

21. Создадим группу слоев и поместим в нее заголовок и пункты. Продублируем также, как группу с элементами выше и напишем уникальный текст для каждого раздела подвала, как на макете в начале занятия (ФАЙЛЫ, АРХИВЫ, КАТЕГОРИИ, ПОСЛЕДНИЕ ЗАПИСИ).

22. Снова вставим кляксу, поместим ее в правую часть футера и установим следующие параметры цвета (Цвет > Тон-Насыщенность):

23. В середине 3-й колонки сделаем вертикальное выделение шириной в 1 пиксель, высотой 260 пикселей. Зальем его цветом #423E39. Рядом, на этом же слое создадим такое же выделение и зальем его на этот раз цветом #66675E.

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

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