Что нового

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

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

Задать вопрос

Создавайте темы, задавайте вопросы и получайте ответы от нашего сообщества

Отвечать

Комментируйте, отвечайте на вопросы и станьте экспертом в своей теме

Связаться с персоналом

Наши специалисты готовы ответить на ваши вопросы

[Обучение] Создание GIF баннера своими руками

NevesOma

Администратор
Регистрация
15.07.2012
Сообщения
1 030
Реакции
4
Баллы
0
Местоположение
Чобручи
Сайт
L2J-MOD.RU
1373146198_hardOK_new.png

[Обучение] от HardOK.Ru [Создание GIF баннера]
Перед созданием баннера я обычно прокручиваю в голове примерные эффекты, которые буду использовать в баннере.
Результат урока:
1373146337_22.gif


Запускаем программу Photoshop (у меня стоит Adobe Photoshop CS5). Создаем новый документ нужного размера (88х31пикс). Подбираем нужный фон (#FDF8D9). Идем в палитру со слоями (Windows→Layers или жмем F7). Дважды щелкаем по слою Background, удерживая клавишу Alt, тем самым преобразуем его в простой слой.
pic_3.jpg
Создадим внутреннюю обводку нашему слою. Для этого еще раз щелкаем дважды по слою или, выделив наш слой, идем в Layer→Layer Style→Blending Options или, нажав правой кнопкой мыши по нашему слою, выбираем Blending Options. В появившемся окне выбираем слева, самый нижний пункт Stroke. Задаем такие параметры: Size: 1, Position: Inside, Color: #A28564 и жмем кнопку ОК.
pic_4.jpg
Теперь нам надо написать текст к первому кадру нашего анимированного баннера: “все самое ИНТЕРЕСНОЕ в сети Интернет”. Для этого используем инструмент Type tool (горячая клавиша T).
pic_5.jpg
Далее делаем подложку. Создаем новый слой. Выбираем инструмент с прямоугольным выделением (горячая клавиша M). Выделяем нужную нам область (во время выделения, удобно использовать клавишу Пробел, что позволит вам двигать форму выделения). После этого заливаем наше выделение цветом #FAEEAC.
pic_6.jpg
Снимаем выделение (Ctrl+D). Пишем новый текст. В нашем примере это – “Блог об Интернет” (цвет текста #784814) и “HARDOK.RU” (цвет текста #870000).
1373146707_pic_7.jpg
Выбираем слой с текстом “HARDOK.RU” и делаем его копию (Ctrl+J). Слои “HARDOK.RU” и “Блог об Интернет” скрываем. Работаем с копией слоя. Идем в меню Filter→Blur→Motion Blur. Ставим значения Angle – 0, Distance - 10.
pic_8.jpg


pic_8_1.jpg
Подготовим первый кадр для анимации: делаем видимыми слои - слой с фоном, слой с подложкой и слой с текстом “Блог об Интернет”.
pic_9.jpg
Теперь, когда для анимации все готово, идем в меню Windows→Animation. Далее делаем копию кадра: нажимаем на кнопочку Duplicates selected frames.
pic_10.jpg
Настраиваем анимацию для второго кадра. Включаем копию слоя, тот, который размытый “HARDOK.RU”. Анимацию можно просмотреть в любой момент, нажав на кнопку Play.
pic_11.jpg
Опять делаем копию кадра. Теперь уже включаем неразмытый слой “HARDOK.RU”, а размытый слой выключаем. После этого выбираем 2-й и 3-й кадры (выделяем с нажатой клавишей Shift) и жмем кнопку Tweens animation frames.
1373146981_pic_12.jpg
В появившемся окошке указываем количество кадров – 5 и нажимаем ОК. Это даст плавный переход между кадрами.
Теперь остается только сохранить нашу анимацию (File→Save for web…) и сохраняем в формате GIF.
В итоге у меня получился вот такой анимированный баннер:
1373146337_22.gif

Спасибо всем.
 
Последнее редактирование модератором:

djon

Тутошний
Команда форума
Регистрация
23.11.2009
Сообщения
5 823
Реакции
41
Баллы
48
Местоположение
г.Тирасполь
Спасибо за урок!
 
shape1
shape2
shape3
shape4
shape7
shape8
Верх Низ