Цитата сообщения Margarete70 Gimp:Создание баннера 88*31 (вариант второй)

Создание простого анимированного баннера 88*31пх.
По просьбе пользователя CURIOUS2010 показываю пример по созданию легкого анимированного баннера размером 88*31пх. Такой баннер еще называют баннерной кнопкой, вес не должен превышать 9-10 кб.


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

1. В Gimp создаем новый файл (Файл-Создать...)



2. Чтобы было хорошо видно, увеличьте масштаб:400-800%.



2.1. Инструментом Заливка заливаем этой текстурой.



3. Инструментом Текст пишем шрифтом BULGARIA RAXEL, размером 8-10пх, белым цветом цветом пишем текст, к примеру, ХОЧЕШЬ ЗАРАБОТАТЬ?(у вас естественно будет другой текст), в настроиках инструмента можете убрать галочку Сглаживание.
3.1. Закрываем видимость этого слоя, нажав на глазок в окне слоев.



4. Щелкнув вне изображения, чтобы инструментом Текст написать другую фразу на новом слое этим же шрифтом , размером 9-10пх, белым цветом, к примеру, ЗАХОДИ.



5. Инструментом Текст пишем другую фразу размером поменьше:6пх



Размещаем аккуратно их на холсте.
Чтобы установить надписи равномерно от краев применяем вертикальную направляющую (Изображение-Направляющая-Направляющая в %...- Вертикальная:50%.
5.1. Слой с текстом "WWW.COUERUS.COM" автокадрируем (СЛой-Автокадрировать) и устанавливаем в верхней части, так, чтобы, крестик на слое переместился к вертикальной направляющей.



5.2. То же самое сделайте и со слоями с текстом "ЗАХОДИ" и "ХОЧЕШЬ ЗАРАБОТАТЬ?".



Время от времени меняйте масштаб на 100%, чтобы посмотреть как будет выглядеть в оригинальном размере.
6. Дублируйте фон с деревянной текстурой 2 раза (Слой-Создать копию слоя или нажать на иконку в диалоге слоев)


Копию фона ставим на 1 слой выше.

7. Теперь будем соединять текстовые слои с фоном.



7.1. Активируем верхний слой с текстом, затем объединяем с предыдущим. (Слой -Объединить с предыдущим)



7.2. Актиавируем этот слой и опять объединяем с предыдущим.
7.3. Так же объединяем с фоном.
8. Переходим к слою с текстом "ХОЧЕШЬ ЗАРАБОТАТЬ?", активируем его и объединяем с фоном (Слой -Объединить с предыдущим).
Получится в итоге 3 слоя.



9. Начинаем делаем анимацию.
Идем Фильтры-Анимация-Плавный переход.
Оставляем переходные кадры.



После обработки откроется в новом окне с 8слоями.



Проверяем что получилось. (Фильтры-Анимация-Воспроизведение)
Вроде все неплохо, но быстро движется скорость, не огорчайтесь - это поправимо.
10. Оптимируем (Фильтры-Анимация-Оптимация для GIF)
Откроется в новом окне.
11. Теперь будем делать задержку кадров, чтобы не так быстро мелькали.
11.1. Активируем нижний слой и прописываем в атрибутах вместо 100мс - 1200мс.(можно и больше)



11.2. Активируем слой 5 и тоже прописываем вместо 100мс - 1300мс.



11.3. Воспроизводим.(Фильтры-Анимация-Воспроизведение)
12. Индексируем (Изображение-Режим-Индексированное...),ставим Размывание цвета: по Флойду-Стейнберга уменьшенное растекание.
13. Далее нам надо сохранить как гиф.
Сохраняем, (Файл-Сохранить как...)
Указываем папку,даем имя и расширение gif.
14. В следующем окне поставить галочку на Сохранить как анимацию, затем на кнопку Экспорт.
15. В следущем окне оставляем без изменения и сохраняем.
Вес такого баннера около 8КБ.