Баннер - бесплатно шаг за шагом

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

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

В целях самообразования, с него и начнём!

Где он?… - панель “Пуск” – “Все программы” – “стандартные” - “Paint.Net”.

Клик! – “открываем”

Баннер - бесплатно шаг за шагом


Для более красочного и эффектного баннера, было - бы не лишнем, заранее, скачать несколько картинок по необходимой для вас теме. Несколько - для того чтобы у вас был выбор. Одна из них, будет представлять основной вид вашего изделия. Многие в виду отсутствия тематических изображений применяют “панорамные фотографии природы”, выдача поисковиков по этому запросу вполне вас удовлетворит.

К примеру, ваша заготовка (картинка).

Баннер - бесплатно шаг за шагом


И так!

Шаг 1.

Загружаем картинку в Paint.Net. Верхний левый угол: “Файл” – “Открыть”

Баннер - бесплатно шаг за шагом


Открывается вкладка обзора, содержимого вашего компьютера. Находите подготовленное графическое изображение и выделяем двойным кликом.

Баннер - бесплатно шаг за шагом


Первое что нам необходимо, это придать приблизительную форму будущему баннеру, нужных нам параметров. ”Обрезать”.

Объясняю: если, к примеру, изображение 499х289, а мы планируем сделать баннер 468х60 то только изменить размер не достаточно. Как вы уже заметили, (на примере) картинка сильно искажена.

Баннер - бесплатно шаг за шагом


Шаг 2.

Используя инструмент “выделения”, при помощи курсора, СМЕЛО выделяем главный информационный элемент изображения. Задаём приблизительную форму. “Обрезаем”.

Баннер - бесплатно шаг за шагом


Шаг 3.

"Изображение" - "Изменить размер".

Баннер - бесплатно шаг за шагом


Задаём необходимый параметры: “Ширина”, “Высота”.

Баннер - бесплатно шаг за шагом


Шаг 4. “Сохраняем”.

Верхний левый угол: “Файл” – “Сохранить как”

Баннер - бесплатно шаг за шагом


Cтрока: “Тип файла:” установить формат “GIF (*gif)”

Баннер - бесплатно шаг за шагом


Теперь, уже готовый баннер загружаем снова в редактор.

С помощью инструмента “текст” наносите желаемую информацию.

Все необходимые текстовые инструменты: “размер”, “шрифт”, “курсив”, “по центру”,

После активации функции “ТЕКСТ”, будут находится в верхней строке перед вами.

Палитра красок также доступна.

Не скупитесь на фантазию и сообразительность.

Далее: “сохранить” как описано выше.

Баннер - бесплатно шаг за шагом


Таким же образом повторяем операцию и создаём ещё один файл с другим текстом.

Баннер - бесплатно шаг за шагом


И так, в нашем распоряжении два одинаковых файла с разным текстовым оформлением.

Назовём их: “№1 слой” и “№2 слой”, которые нам необходимо объединить, чтобы текст, в свою очередь, постоянно подменивался.

Эту операцию за нас выполнит программка "Gif Animator", удивительно лёгкий инструмент всего в -523 КБ, требует только активации, без установки, что делает его независимым и очень удобным для ваших экспериментов.

Скачать: Gif_Animator.zip [987,05 Kb] (cкачиваний: 0)

Подробная ИЛЛЮСТРАЦИЯ –“ Шаг за Шагом”, сделает доступным для Вас интерфейс даже на не знакомом языке.

Двойной - “клик”, активируем программу.

Баннер - бесплатно шаг за шагом

В панели инструментов "Gif Animator" открываем папку содержимого компьютера, находим и загружаем “№2 слой” нашего баннера, чтобы “№1 слой” потом лёг сверху, (в данной программе анимация (banner) собирается в обратном порядке).

Баннер - бесплатно шаг за шагом


Далее: “№1 слой”, открываем инструментом добавления “+” или “Insert”.

Баннер - бесплатно шаг за шагом


Группируем. “Select All” (Выделить всё).

Баннер - бесплатно шаг за шагом


Переходим в настройки анимации “Animation”.

Баннер - бесплатно шаг за шагом


Выделяем галочкой: “Looping” (Выполнение цикла) и “Repeat” (Повторение), возможна настройка. Переходим в настройки “image” (образ).

Баннер - бесплатно шаг за шагом


Здесь редактируем скорость кадров, в данном случае 1/80, оптимально 1/150 – 200.

Далее: “ТЕСТ”

Баннер - бесплатно шаг за шагом


"Сохранить"

Баннер - бесплатно шаг за шагом


Конечный результат. Скорость кадров 1/200.

Баннер - бесплатно шаг за шагом


Как Вы уже заметили, анимация текста происходит путём подмены отдельно взятых заготовок, которые мы именовали слоями.

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

Придерживайтесь, около трёх - четырёх слоёв, при большом количестве (слоёв) банер может иметь большой вес (объём), что НЕ приемлемо для БАНЕРООБМЕННЫХ сетей.

Как баннер сделать ссылкой или как сделать код баннера.

Для установки баннера, вам потребуется HTML код:

<a href="http://Ваш сайт" target=_blank><img src="http://Путь к баннеру" border="0" title="Текст при наведении мышки на баннер" width="468"
height="60"></a>


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

Рекомендуем посмотреть
  • Необходимые теги языка HTML HTML – это язык разметки гипертекста, он состоит из тегов. ТЕГ – это символы, заключённые в угловые скобки и по своей сути является командой браузеру к отображению информации в заданном виде.
  • Как сделать сайт (бесплатно) И так, свой первый опыт в сайтостроение я приобрел, в первую очередь, в бесконечных поисках по интернету доступного для меня варианта, так как на тот момент не имел ни малейшего представления о
  • Настройка BIOS. Загрузка компьютера с CD/DVD или USB flash Многие начинающие пользователи персонального компьютера при его изучении, рано или поздно решаются на самостоятельную установку Операционной Системы, где в свою очередь необходимо выполнить ряд
  • Мой первый сайт. Первые шаги Первый сайт, как первая девушка — всегда делаешь его с некоторым стеснением. Сегодня мы попробуем преодолеть свои страхи и сделать свой первый сайт на базе движка AutoBlog-X. А заодно убедиться, что
  • Рекламодатели для блога. Деньги для тебя Блог сам по себе может быть источником не только вдохновения, но и заработка. Кто же будет платить вам за ваше творчество? На сегодня заработок на блогах можно условно поделить на три части: ссылки,