• Авторизация


Создание баннера 88*31 (вариант второй) 11-11-2010 14:30 к комментариям - к полной версии - понравилось!

Это цитата сообщения 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КБ.
[показать]
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Создание баннера 88*31 (вариант второй) | Julia_Frank - Дневник для Души..... | Лента друзей Julia_Frank / Полная версия Добавить в друзья Страницы: раньше»