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



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

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

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

OFFLINE Отправлено

Christopher Alesund
группа пользователя

    Услуги дизайнера zismo.biz/topic/681543

  • Cообщений: 423
  • Поинты: 31
  • Предупреждений: 0
  • Онлайн: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
группа пользователя

    LikOFF.net — дешёвый магазин купонов

  • Cообщений: 25 935
  • Друзей:341
  • Поинты: 9 246
  • Предупреждений: 0
  • Онлайн:198д 1ч 16м
1 623

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


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

OFFLINE Отправлено

Christopher Alesund
группа пользователя

    Услуги дизайнера zismo.biz/topic/681543

  • Cообщений: 423
  • Поинты: 31
  • Предупреждений: 0
  • Онлайн:24д 10ч 18м
77

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

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


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

OFFLINE Отправлено

itruegiraffe
группа пользователя

    что здесь нужно писать?

  • Cообщений: 4 035
  • Друзей:49
  • Поинты: 17
  • Предупреждений: 30
  • Онлайн:46д 3ч 55м
85

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

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


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

OFFLINE Отправлено

AKnyazev
группа пользователя

    Уровень 1

  • Cообщений: 38
  • Друзей:4
  • Поинты: 18
  • Предупреждений: 0
  • Онлайн:3ч 52м
0

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


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

OFFLINE Отправлено

Akar
группа пользователя

    Уровень 1

  • Cообщений: 90
  • Друзей:19
  • Поинты: 19
  • Предупреждений: 0
  • Онлайн:3д 14ч 19м
17

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


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

OFFLINE Отправлено

HITACHI
группа пользователя

    Уровень 1

  • Cообщений: 51
  • Друзей:2
  • Поинты: 4
  • Предупреждений: 10
0

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


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

OFFLINE Отправлено

PSer
группа пользователя

    ICQ: 933-77-69

  • Cообщений: 1 965
  • Друзей:2
  • Поинты: 50
  • Предупреждений: 90
64
Зачем вам видео? Читать лень?
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

s-smoke
группа пользователя

    Уровень 2

  • Cообщений: 1 777
  • Друзей:7
  • Поинты: 10
  • Предупреждений: 70
43

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

Класс! 


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

OFFLINE Отправлено

Sergei1994
группа пользователя

    Магазин акков соц.сетей kupikupon.biz

  • Cообщений: 36 949
  • Друзей:1279
  • Поинты: 3 550
  • Предупреждений: 0
  • Онлайн:189д 11ч 23м
1 293

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

Лови лайк


36fad105e8dc.gif                                                          21ede01a7fe8.png  24,08
 
8130c5c44bb9.gif 24.8                                   de9bef911a_7777598_26726106.gif
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Google
группа пользователя

    Продаю мануалы для Instаgram

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

ONLINE Отправлено

riddik33
группа пользователя

    Gmail.com I Google+ СМС - по 8 руб

  • Cообщений: 6 888
  • Друзей:153
  • Поинты: 5 788
  • Предупреждений: 0
  • Онлайн:255д 14ч 9м
180

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


b188963b11be.gif  Gmail.com , YouTube.com  / Google отлёжка / код 10%-й скидки - 77920729
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

bagfalkova
группа пользователя

    Накрутка статистики и ОХВАТА в ВК

  • Cообщений: 7 081
  • Поинты: 5 132
  • Предупреждений: 0
  • Онлайн:38д 10ч 12м
266
Спасибо, все понятно. Запили еще видео. Раз говоришь микрофон не пашет - гоу под музыку.

lBt6ecT.gif

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

OFFLINE Отправлено

kirya2552
группа пользователя

    Это ЗИСМО - Это НОРМА © kirya2552

  • Cообщений: 9 338
  • Друзей:446
  • Поинты: 1 307
  • Предупреждений: 0
  • Онлайн:132д 7ч 40м
610
Круто, давай еще таких уроков
    • 0
  • Наверх
  • Ответить

OFFLINE Отправлено

Anamalik
группа пользователя

    Уровень 2

  • Cообщений: 2 743
  • Поинты: 2
  • Предупреждений: 70
140

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

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


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

OFFLINE Отправлено

VovkaLiSS
группа пользователя

    Сложна, нипанятна

  • Cообщений: 1 747
  • Друзей:22
  • Поинты: 21
  • Предупреждений: 0
  • Онлайн:18д 18ч 5м
54

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


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

OFFLINE Отправлено

Vladis55555
группа пользователя

    Уровень 3

  • Cообщений: 5 578
  • Друзей:77
  • Поинты: 16
  • Предупреждений: 10
  • Онлайн:146д 9ч 10м
82

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


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

OFFLINE Отправлено

Антон Лавров
группа пользователя

    Уровень 1

  • Cообщений: 195
  • Поинты: 15
  • Предупреждений: 0
  • Онлайн:3д 12ч 47м
4

Спасибо!


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



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