Перейти к содержимому



Купить ссылку здесь
Фотография
- - - - -

Как создать простой анимационный баннер для форума

Форум ZiSMO.biz
17
Сообщений в теме: 17

OFFLINE Отправлено

Christopher Alesund
группа пользователя
  • Онлайн:24д 10ч 18м
77

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

Результат: 3xrrt1P.gif


Поехали!


 

1.  Для начала открываем Photoshop, нажимаем Файл > Создать, у вас открывается окно, в котором вы должны заполнить все как у меня.

HOSDni.png

2. После того, как мы создали наш документ, нам нужно подобрать фон для будущего баннера, вы можете просто залить цветом, а можете скачать какой-нибудь фон с интернета. Я взял вот эту картинку в качестве background'а. Далее после того как мы скачали картинку, перетаскиваем ее в фотошоп, в наш документ. И с зажатой клавишей SHIFT растягиваем таким образом, чтобы она перекрывала весь наш белый фон. У меня получилось вот так, если вон сильно светлый, то нажимаем на слой с фоном, чуть ниже нажимаем на volROi.png и выбираем "Наложение цвета". Далее настраиваем его, Режим наложения: Нормальный, цвет - черный, непрозрачность - 50%(можно чуть меньше)

38Mj7E.png

3. Создаем новый слой нажав на иконку в правом нижнем углу Vna5V0.png Выбираем инструмент  горизонтальный текст в левом меню f96vPg.png и кликаем по нашему фону (именно по самому фону, а не слою). И пишем ваш текст, который вы будете рекламировать. Наш текст не по центру, поэтому кликаем на слой с текстом нажимаем сочетание клавиш CTRL + A и в верхней панели кликаем вот сюды CPLBNT.png, все по вертикали наш текст выровнен, по горизонтали этого делать не нужно. Далее опять нажимаем на наш слой с текстом (справа) и нажимаем дважды сочетание клавиш CTRL + J, наш слой скопировался дважды, зачем это нужно? Узнаете ниже! Получается вот такая картина: 

2D2A8S.png



4. Нажимаем на слой "Копия 2" и в верхнем меню переходим в Фильтр > Размытие > Размытие в движении > ОК, растрировать наш текст > Выставляем здесь Угол = 0, Смещение = 15 пикселей. Далее можно скрыть наш слой, нажав на глазок слева от слоя vUhdyX.png. Переходим на слой "Копия" (1) и повторяем ту же процедуру, что и со слоем "Копия 2", только смещение не 15 пикселей, а 10. С текстом на этом пока что все.

5. Далее нам нужно сделать кнопочку для привлечения клиента. В левом меню выбираем "Прямоугольник со скругленными углами", в верхней панели радиус ставим 25* градусов  и делаем небольшой прямоугольник под размер кнопочки как показано на скрине ниже (выбирайте цвет либо белый, либо контрастный или близкий к фону). По желанию можно добавить кнопке ч/б градиент с 10-20% непрозрачностью вот тут volROi.png

MFn8Bh.png

6. Затем опять создаем текст белого цвета и размещаем его по середине нашей кнопки. Текст должен быть в стиле: Заказать, Перейти, Узнать, Заглянуть и т.п. Далее в нижнем правом углу нажимаем сюда DV1nBR.png - этим мы создадим папку в которую пихаем нашу кнопку и текст "Заказать" путем простого перетаскивания.

 1fhbUj.png 


7.1 Далее мы будем уже заниматься анимацией, открываем в верхней панели Окно > Анимация (Или Шкала времени, тогда внизу появляется панель, нажимаем создать анимацию кадра и следующим дальнейшим инструкциям). Далее создаем новый кадр нажав на эту кнопку  Vna5V0.png в левом нижем углу,  (пока что забудьте про нашу кнопочку "Заказать"),  "открываем глазик" у слоя "%ваш_текст% Копия", а у нашего основного слоя с текстом "глазик закрываем".
7.2 Чтобы дальше не путаться я буду говорить скрываем/открываем слой. Далее опять создаем новый кадр и скрываем наш слой "%ваш_текст% Копия", а открываем "%ваш_текст% Копия 2". Очень важно сейчас не запутаться, поэтому вчитывайтесь! Повторяем пункт 7.1 со слов "Далее создаем новый кадр..."

SblTAN.png


Анимация текста готова, у вас должно было получиться 4 кадра. Далее работаем с нашей кнопкой.

МЕЖПУНКТ: Лучше создать еще 5 кадр, где будет только ваш текст, без размытия и кнопки.


8. Переходим на 2 кадр и нажимаем на слой "Группа 1" и чуть выше и правее выставляем непрозрачность 75%, далее на третий кадр и там выставляем 50%, на четвертом кадре 25%. Уже почти готово, теперь на 1 кадре нажимаем на стрелочку и выставляем 1-2 секунды, у остальных ставим 0,1 и ниже самих кадров есть надпись "Однократно", нажимаем на нее и выставляем "Постоянно".

hwV8vM.png

9.  Далее идем сохранять это все, нажимаем Файл > Сохранить для WEB, ставим все как у меня и нажимаем СОХРАНИТЬ.

VWmxxy.png

Результат: 3xrrt1P.gif


УРОК ОКОНЧЕН, ЖДУ ВАШИХ ОРИГИНАЛЬНЫХ РАБОТ :)


 


 


Сообщение отредактировал Christopher Alesund: 05 07 2016 - 17:58




    • 4
  • Наверх
  • Ответить

ONLINE Отправлено

T710MA
группа пользователя
  • Онлайн:221д 14ч 19м
1 656

спасибо, полезно, сделай видос ещё  (clap)


e5735f37c70a2e49ff803f7d4d0dcbf6.png LikOFF.net — Купоны likest Like4u LikeOrgasm TurboLike likes.FM VTope Nimses
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Christopher Alesund
группа пользователя
  • Онлайн:24д 10ч 18м
77

спасибо, полезно, сделай видос ещё  (clap)

Хотел, да микрофон очень сильно шумит, даже удаление шумов не помогает. Может потом под музыку запилю.


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

itruegiraffe
группа пользователя
  • Онлайн:47д 5ч 11м
85

Был бы чайником, я бы тебя боготворил) хех

ну круто, новичкам сойдет. Советую АЕ юзать, там еще проще, уже готовые эффекты, только текст пишешь и все.


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

AKnyazev
группа пользователя
  • Онлайн:3ч 52м
0

да, можно и без слов, в принципе по скринам видно, но видео было бы круто. спасибо


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Akar
группа пользователя
  • Онлайн:3д 14ч 21м
17

(y) Малаца! Полезный урок.


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

HITACHI
группа пользователя
  • Онлайн:1ч 47м
0

Спасибо, полезно, сделай видос ещё   (clap) ТОЧНО ТОЧНО  :D 


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

PSer
группа пользователя
  • Онлайн:33д 13ч 56м
64
Зачем вам видео? Читать лень?
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

s-smoke
группа пользователя
  • Онлайн:35д 8ч 46м
43

Вот только не так давно "активным" на зисмо запретили ставить баннеры в подпись. 

Класс! 


    • 0
  • Наверх
  • Ответить

ONLINE Отправлено

Sergei1994
группа пользователя
  • Онлайн:198д 49м
1 330

Спасибо, полезная информация. (y)  (y)  (y) 

Лови лайк


54c2ae17aacf.gif14.12     avtolaykii_8989494_27386865.png31.12
 
   d216a5b955ad.png                         nakrutkapr_4806752_27386851.png    
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Google
группа пользователя
  • Онлайн:4д 20ч 57м
17
Спасибо, действительно полезная инфа. Но я такой фотошопер, что даже не понял половину
    • 0
  • Наверх
  • Ответить

ONLINE Отправлено

riddik33
группа пользователя
  • Онлайн:302д 14ч 15м
266

спасибо пригодиться .. подпишусь.)


bbcf55888b2e.gif  Gmail.com , YouTube.com  / Google отлёжка / код 10%-й скидки - 77920729

    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

bagfalkova
группа пользователя
  • Онлайн:43д 21ч 54м
368
Спасибо, все понятно. Запили еще видео. Раз говоришь микрофон не пашет - гоу под музыку.

lBt6ecT.gif

    • 0
  • Наверх
  • Ответить

ONLINE Отправлено

kirya2552
группа пользователя
  • Онлайн:136д 6ч 58м
628
Круто, давай еще таких уроков
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Anamalik
группа пользователя
  • Онлайн:30д 22ч 21м
140

Автор Красава!!

Не поленился.. (y)


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

VovkaLiSS
группа пользователя
  • Онлайн:18д 19ч 50м
54

Молодец. Полезный урок!


    • 0
  • Наверх
  • Ответить

ONLINE Отправлено

Vladis55555
группа пользователя
  • Онлайн:158д 11ч 14м
87

спасибо ,вот если бы ты видос запилил, то было бы круто!


    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Антон Лавров
группа пользователя
  • Онлайн:3д 12ч 47м
4

Спасибо!


    • 0
  • Наверх
  • Ответить



Напишите свое сообщение