ГБОУ ЦО Кировского района Санкт-Петербурга «Центр информационной культуры»
При создании Web-сайта, как известно, разработчику приходится решать несколько задач. Одной из них является техническая реализация сайта. Разработчику приходится выбирать средства реализации, такие как языки программирования, HTML-редакторы и т.д. Описание решения изложенных выше проблем выходят за рамки представленного учебно-методического пособия. Так же, как и некоторые другие аспекты создания сайтов, к которым относятся, например, создание структуры сайта, его хостинг и сопровождение.
В представленном учебно-методическом пособии рассматриваются некоторые проблемы, возникающие при реализации разработанного дизайна сайта. Инструментом достижения этой цели может являться растровый графический редактор. Чаще всего для этого используют AdobePhotoshop. Но, как известно, у него есть один существенный недостаток – это коммерческий продукт, который стоит очень дорого. Поэтому в качестве инструментария был выбран свободно распространяемый редактор Gimp.
Данное учебно-методическое пособие адресовано учителям информатики и ИКТ общеобразовательных школ, которые ведут занятия по теме «Интернет технологии». Также оно может быть интересно и педагогам дополнительного образования по данному профилю, и пользователям компьютеров, которые хотят попробовать себя в искусстве создания Web-сайтов.
В представленном пособии будут рассмотрены две практические задачи, которые обязательно придется решать разработчику при создании сайта:
· создание логотипа на прозрачном фоне;
· создание кнопок.
К пользователям данного пособия предъявляются некоторые требования. Они должны:
· уметь работать с операционной системой на уровне начинающего пользователя;
· они должны знать теоретическую сторону понятия «растровая графика»;
· иметь представление о многослойном изображении;
· иметь начальные навыки работы с растровым графическим редактором (панель инструментов, слои, диалоги).
Логотип на прозрачном фоне
Перед тем, как начать работать в графическом редакторе Gimp, его необходимо настроить. А именно, открыть и правильно позиционировать два прикрепляющихся диалоговых окна: окно «навигация» и окно «слои».
Это можно сделать следующим образом. В меню «окна» основного окна необходимо выбрать «прикрепляющиеся диалоги». Затем в появившемся меню последовательно выбрать соответствующие диалоги.
Расположить эти диалоговые окна, панель инструментов и основное окно редактора следует, на мой взгляд, примерно следующим образом.
Подготовительная работа завершена. Теперь переходим к описанию построения логотипа на прозрачном фоне.
1. С помощью команды «Файл→Открыть» открываем заготовку логотипа. В качестве заготовки может выступать любое изображение, содержащее в себе логотип. Например, если это будет логотип редактора Gimp, то его можно получить из следующего изображения, которое можно получить из диалогового окна «О программе Gimp» (меню «Справка→О программе»).
2. Используя инструмент «Кадрирование»
из панели инструментов
«отрезаем» от изображения все «лишнее», как показано на рисунке.
3. Теперь необходимо узнать размеры получившегося изображения. Это можно сделать с помощью команды «Изображение→Размер изображения…». Появится диалоговое окно, в котором можно посмотреть все параметры изображения, в том числе и размеры.
4. Создаем новое изображение с помощью команды «Файл→Создать» либо такого же, либо пропорционального размера (меньшего, чем исходное). В появившемся диалоговом окне выбираем соответствующие параметры изображения. Для того чтобы фон получился прозрачным, в поле «фон», которое находится в расширенных параметрах, необходимо выбрать «прозрачный».
5. Возвращаемся к изображению логотипа. Теперь нам необходимо его выделить. Возможны два варианта.
· Фон изображения одноцветный (или простой, состоящий из нескольких «соседних» по номеру цветов). Тогда можно использовать инструмент «Выделение смежных областей»
. Он выделяет области активного слоя или изображения по признаку схожести цветов. Выделение начинается от выбранной точки и растекается от нее во все стороны, выделяя при этом точки с приблизительно теми же цветами, что и у начальной точки. Степень схожести можно регулировать. При использовании этого инструмента очень важно правильно выбрать начальную точку.· Фон изображения сложный, но достаточно четко видны контуры логотипа. В этом случае можно воспользоваться инструментом «Умные ножницы»
.6. В нашем примере цвет фона белый. Поэтому воспользуемся первым вариантом. Второй оставим на самостоятельное изучение. В панели инструментов выбираем «Выделение смежных областей»
. В настройках инструмента, которые находятся в нижней части панели, в поле порог задаем количество цветов, которые попадут в выделяемую область. В нашем случае можно задать этот параметр равным 1, так как фон состоит из одного цвета. Теперь для выделения фона нам необходимо «щелкнуть» правой кнопкой мыши в любое место фона.
7. Выберем в меню команду «Выделение→Инвертировать». После этого выделенной окажется та часть изображения, которая выделенной не была, то есть в нашем случае – логотип.
8. Скопируем через буфер обмена выделенный логотип в созданное ранее изображение с прозрачным фоном. При необходимости масштабируем вставленный логотип с помощью соответствующего инструмента
. Получаем конечный результат.
9. Теперь его необходимо сохранить для внедрения в HTML-документ. Не все форматы графических файлов поддерживают прозрачность. Это позволяет формат Gif. В нем и будем сохранять получившийся логотип. Это можно сделать, выбрав команду «Файл→Сохранить».
10. В появившемся диалоговом окне выбираем тип файла «gif image». Нажимаем кнопку «сохранить». Появляется еще одно диалоговое окно.
11. В нем выбираем переключатель, как показано на рисунке. Нажимаем кнопку «экспорт». Появляется еще одно диалоговое окно.
12. В этом окне можно написать комментарии к изображению. После нажатия на кнопку «сохранить» изображение будет сохранено в формате Gif и готово к внедрению в HTML-документ.
Кнопки
В данном учебно-методическом пособии будет рассмотрен процесс создания трехмерной кнопки.
1. Создаем изображение размером 50х50 пикселей с прозрачным фоном.
Для удобства в окне «навигация» устанавливаем масштаб 300%.
2. С помощью инструмента «Эллиптическое выделение»
создаем выделение окружностью. Для этого в настройках инструмента фиксируем соотношение сторон, как показано на рисунке.
Получаем следующее.
3. С помощью инструмента «Градиент» делаем градиентную заливку выделенной области. При этом инструмент необходимо настроить следующим образом: первый цвет берем более темным, второй – более светлым тоном какого-либо цвета (в примере используется заливка от темно-серого цвета к светло-серому цвету), градиент выбираем от светлого к темному, форму – линейную. Остальные параметры оставляем без изменений.
Запоминаем направление градиента!
4. С помощью команды «Выделение→Уменьшить» уменьшаем радиус окружности выделения на 5 пикселей.
5. Заливаем выделенную область градиентной заливкой также как выше, но в обратном направлении.
6. С помощью команды «Выделение→Снять» из меню снимаем выделение. Заготовка кнопки готова! Теперь ее можно сохранить в формате Gif.
Теперь можно что-нибудь написать на кнопке, или добавить на нее какой-нибудь логотип. Например, если мы создаем кнопку для перехода на главную страницу сайта, то на ней уместным будет стилистическое изображение дома. Мы же будем делать кнопку для перехода на официальный сайт Gimp. Поэтому на нашей кнопке будет логотип Gimp.
1. Открываем файл с изображением логотипа Gimp.
2. С помощью инструмента «Умные ножницы»
(или любым другим известным способом) выделяем нужный нам объект, масштабируем его с помощью соответствующего инструмента и копируем в буфер обмена.3. Переходим в окно с изображением кнопки. С помощью команды «Слой→Создать слой» из меню этого окна создаем новый слой. С помощью диалогового окна «Слои» делаем созданный слой активным.
4. Вставляем в активный слой изображение из буфера обмена. объединяем слои с помощью команды «Слой→Объединить с предыдущим». Кнопка готова! Теперь ее необходимо сохранить.
Автоматическое создание кнопок и логотипов средствами Gimp
Представленная выше методика создания логотипов и кнопок не привязана к конкретному редактору и представляет собой достаточно простой способ самостоятельного создания элементов оформления сайта. Однако редактор Gimp обладает достаточно мощным аппаратом создания таких элементов оформления в автоматическом режиме. Таким образом, в Gimp можно создавать не только кнопки, логотипы и текстуры по определенным шаблонам.
Чтобы воспользоваться этими возможностями, нам необходимо выбрать в меню основного окна редактора команду «Файл→Создать».
Затем нужно выбрать тот элемент, который хотим создать. После этого появится еще одно меню, в котором можно выбрать шаблон оформления соответствующего элемента.
Кнопка
Для кнопки это меню выглядит следующим образом.
После выбора соответствующего пункта меню появится диалоговое окно с настройками кнопки. Например, для круглой кнопки оно может выглядеть так, как показано на рисунке слева. Результатом работы редактора в этом случае будет следующая кнопка.
Если поиграть с настройками, то можно ее модифицировать. Как видно из рисунка, изменять можно цвета, надпись и тип кнопки.
Простая выпуклая кнопка выглядит примерно так.
Ее также можно модифицировать с помощью соответствующего диалогового окна.
Логотип
Принцип автоматического создания логотипа в целом схож с принципом создания кнопки. Сначала с помощью меню выбираем шаблон.
Затем в появившемся диалоговом окне шаблон можно настроить. В зависимости от того, какой шаблон вы выберете, вид этого окна может меняться. Если выбрать шаблон «лед…» то он будет выглядеть так.
А результатом будет следующий логотип.
При использовании автоматических средств разработки вы получаете набор стандартных элементов оформления сайта, создание которых не требует никаких знаний в области подготовки графических изображений. Однако результатом являются «типовые» кнопки и логотипы, основным элементом которых является текст. Иногда этого достаточно. Иногда нет. Поэтому необходимо уметь создавать элементы оформления сайта самостоятельно.
