Цель: создать анимированный баннер по заданной схеме в программе Gimp.
Перед началом работы необходимо загрузить из интернета и установить бесплатный графический редактор Gimp (URL: http://www.gimp.org/).
Все программы, необходимые для выполнения данного урока, бесплатны.
Необходимый начальный вид главного окна программы Gimp изображен на рисунке 1.
Рис. 1. Начальный вид главного окна программы Gimp
(1 – главное меню программы, 2 – панель инструментов, 3 – цвета переднего плана и фона, 4 – настройки текущего инструмента, 5 – слои, каналы, отмена действий, 6 – кисти, текстуры, градиенты, 7 – окно изображения)
Порядок выполнения работы
2. Запустить программу Gimp.
3. Если программа Gimp запущена первый раз, то в некоторых случаях она состоит из 3 окон, что не совсем удобно. Чтобы переключить программу в однооконный режим, нужно выбрать пункт меню Окна → Однооконный режим.
4. Руководство пользователя к программе Gimp на русском языке доступно через пункт меню Справка → Справка или на сайте программы Gimp (URL: http://gimp.org). Если справка не доступна через пункт меню Справка, то её можно загрузить отдельно с сайта программы и установить.
5. Создать новое изображение (пункт меню Файл → Создать… → ввести размер изображения (240 на 120 точек) → нажать кнопку OK).
6. Залить всё изображение любым светлым цветом. Для этого выбрать цвет, нажав двойным кликом на прямоугольнике выбора цвета, расположенном ниже панели инструментов, и залить им всё изображение, нажав на кнопке Плоская заливка на панели инструментов, а затем нажав на изображении.
7. Инструментом Текст с панели инструментов написать название товара или услуги согласно индивидуальному заданию в центре изображения. Размер, цвет и выравнивание (выключка) текста задаются на панели настройки текущего инструмента в левом нижнем углу экрана.
8. Создать новый прозрачный слой (пункт меню Слой → Создать слой... → тип заливки слоя "Прозрачный слой" → кнопка OK)
9. Скрыть все слои кроме нового созданного прозрачного слоя, нажав на все значки с изображением глаза слева от названия каждого слоя, кроме нового прозрачного, в окне слоёв (или удерживая клавишу Shift нажать на значке с изображением глаза слева от названия нового прозрачного слоя).
10. Сделать активным новый прозрачный слой, нажав на его названии.
11. Выбрать инструмент Карандаш с панели инструментов, задать красный цвет на панели выбора цвета, задать размер (толщину) карандаша равным 1 на панели настройки текущего инструмента и, удерживая клавишу Shift, нарисовать стрелку по 8 точкам, как указано на схеме анимации в кадре № 3.
12. Выделить внутреннюю часть стрелки. Для этого нужно выбрать инструмент Выделение смежных областей, задать режим "Заменить текущее выделение", порог "0,0" и нажать курсором мыши во внутреннюю часть стрелки.
13. Залить градиентной заливкой стрелку слева направо. Для этого выбрать инструмент Градиент, режим "Нормальный", градиент "Основной в фоновый (RGB)", форма "Линейная", указать цвет переднего плана "красный" и цвет фона "белый" на панели выбора цвета переднего плана и фона, нажать курсором мыши в левой части нарисованной стрелки и, не отпуская левой кнопки мыши, переместить курсор в правую часть стрелки и отпустить кнопку мыши.
14. Снять выделение со стрелки (пункт меню Выделение → Снять выделение).
15. Найти в интернете, например, через сервис для поиска изображений в интернете на сайте Яндекс-картинки (URL: http://images.yandex.ru/) или схематично нарисовать в редакторе Paint изображение товара или услуги и сохранить его в какую-нибудь папку на диске.
16. Вставить это изображение как новый слой (пункт меню Файл → Открыть как слои ... → выбрать файл изображения → нажать кнопку Открыть).
17. Если вставленное изображение по ширине больше половины всего изображения, то выбрать инструмент Масштаб (не путать с инструментом Лупа), задать параметры: направление "Обычное (вперёд)", режим "Сохранять пропорции", нажать курсором мыши на изображении и, потянув за любой угол изображения, уменьшить его, а затем нажать кнопку Изменить в окне Масштаб.
18. Переместить вставленное изображение в правую часть всего изображения, выбрав инструмент Перемещение, режим "Переместить активный слой" и переместив курсором мыши вставленное изображение.
19. Удалить однотонный фон (белый или любой другой) со вставленного изображения, чтобы через него был виден наш слой "Фон". Для этого выбрать инструмент Выделение по цвету, задать режим "Заменить текущее выделение", порог "0,0" или больше, если выделяется не весь фон, например, "15,0", нажать курсором мыши в точку вставленного изображения, имеющую цвет фона, и очистить выделение (пункт меню Правка → Очистить).
20. Снять выделение (пункт меню Выделение → Снять выделение).
21. Скрыть все слои кроме фона, нажав на значке с изображением глаза слева от названия слоя "Фон" в окне слоёв, удерживая клавишу Shift.
22. Инструментом Текст с панели инструментов написать в 2-3 строки фразу "Только от" и придуманное название компании вместе с видом организации, например: "Только от магазина женской одежды Модная штучка", "Только от салона оптики Оптик-стиль". Размер и цвет текста задать так, чтобы текст хорошо читался и был контрастным по отношению к фону. Выравнивание (выключку) текста задать по правому краю на панели настройки текущего инструмента в левом нижнем углу экрана. После слов "Только от" нажать клавишу Пробел несколько раз, чтобы внешне надпись выглядела в 2-3 строки следующим образом: первая строка "Только от" – выровненной по левому краю, а вторая и последующие строки с названием компании – по правому краю, как в кадре № 7 схемы анимации.
23. Сохранить полученное изображение, состоящее из 5 слоёв, в формате Gimp с расширением .XCF (пункт меню Файл → Сохранить как ... → выбрать папку и имя файла → нажать кнопку Сохранить).
24. Теперь нужно перейти к созданию анимации. Принцип создания анимации заключается в следующем: делаются видимыми только слои, которые должны присутствовать в первом кадре, остальные слои делаются не видимыми, создаётся слой из всех видимых слоёв (пункт меню Слой → Создать из видимого), и делается не видимым (это кадр для анимации), затем делаются видимыми только слои, которые должны присутствовать во втором кадре, и опять создаётся слой из всех видимых слоёв и т.д. Когда будут получены все кадры анимации, нужно удалить исходные 5 слоёв (нажать правой кнопкой мыши на названии слоя → Удалить слой), оставив только слои с названием "Видимое ..." и сохранить анимацию в формате GIF.
25. Для создания кадра № 1 нужно сделать видимыми только слои: название товара или услуги и фон.
26. Для создания кадра № 2 нужно сделать видимыми только слои: фон и название товара или услуги, сделав его полупрозрачным (выделив слой и нажав курсором мыши на бегунке Непрозрачность в окне слоёв над списком слоёв, чтобы параметр Непрозрачность стал равен "30,0").
27. Для создания кадра № 3 нужно сделать видимыми только слои: стрелка, изображение товара или услуги и фон.
28. Для создания кадра № 4 нужно сделать видимыми те же слои,
что и для кадра № 3, но слой со стрелкой нужно переместить немного правее инструментом Перемещение (режим "Переместить активный слой").
29. Для создания кадра № 5 нужно сделать видимыми те же слои,
что и для кадра № 4, но слой со стрелкой нужно переместить ещё правее.
30. Для создания кадра № 6 нужно сделать видимыми только слои: фон и фразу "Только от ...", сделав её полупрозрачной (выделив слой и нажав курсором мыши на бегунке Непрозрачность в окне слоёв над списком слоёв, чтобы параметр Непрозрачность стал равен "30,0").
31. Для создания кадра № 7 нужно сделать видимыми те же слои,
что и для кадра № 6, но слой с фразой "Только от ...", нужно сделать непрозрачным (параметр Непрозрачность равен "100,0").
32. Для создания кадра № 8 нужно сделать видимыми те же слои,
что и для кадра № 7, но слой с фразой "Только от ...", нужно сделать полупрозрачным (параметр Непрозрачность равен "30,0").
33. Итого должно получиться 13 слоёв (8 слоёв-кадров с названием "Видимое ..." и 5 исходных слоёв).
34. Удалить 5 исходных слоёв. Для этого нажать правой кнопкой мыши на названии каждого слоя → Удалить слой.
35. Запустить просмотр анимации (вкладка меню Фильтры → Анимация → Воспроизведение... → скорость анимации 0,25x, 10 fps → нажать кнопку Начать воспроизведение).
36. Если при воспроизведении анимация идёт в не правильном порядке, то нужно изменить порядок слоёв, перетаскивая их курсором мыши в окне слоёв (анимация воспроизводится от нижнего слоя к верхнему).
37. Сохранить анимацию в файл, выбрав в меню пункт Файл → Экспортировать... → выбрать место сохранения файла и его имя → выбрать "Выберите тип файла (по расширению)" → Изображение GIF → нажать кнопку Экспортировать → если возникнет сообщение об ошибке, нажать кнопку Обрезать → указать "Сохранить как анимацию", задержка между кадрами 500 миллисекунд → нажать кнопку Экспорт.
38. Открыть сохранённый GIF файл и посмотреть анимацию. Если файл не открывается как анимация стандартной программой, то нужно открыть его с помощью браузера Internet Explorer, нажав на файле правой кнопкой мыши и выбрав пункт Открыть с помощью. Баннер готов!
Комментариев нет:
Отправить комментарий