Як зробити анімаційний GIF банер

  1. Давайте звернемося до вікіпедії що ж таке банер
  2. розміри банерів
  3. Що нам буде потрібно для банера
  4. Процес створення банера
  5. Налаштовуємо колірну гамму
  6. Пишемо текст і наповнюємо його ефектами
  7. Установка картинки і зміна масштабу
  8. Робимо кнопку з написом скачати
  9. налаштовуємо анімацію

Всіх радий вітати на своєму блозі з вами як завжди Максим Зеленцов і сьогодні мова піде про банерах а точніше ох створення, що таке банер Всіх радий вітати на своєму блозі з вами як завжди Максим Зеленцов і сьогодні мова піде про банерах а точніше ох створення, що таке банер? Ми кожен день зустрічаємося з цією річчю не тільки в інтернеті але і на вулиці, кожен день ми бачимо їх у різних місцях міста з різними розмірами це і є рекламні банери. Але сьогоднішня ми з вами поговоримо про банерах в інтернеті тут їх теж величезна кількість з різними розмірами. Що ж таке банер? За допомогою цього інструменту ми створюємо рекламу для свого блогу, наприклад якщо ви займаєтеся партнерками то вам необхідний цей інструмент як повітря, все ми бачили в партнерських сервісах картинки а знизу код для вставки на свій сайт для рекламування.

Як то кажуть «реклама це двигун бізнесу» і ми цей двигун будемо з вами створювати по гаечки по болтики ми зберемо наш GIF банер.

зміст:

  1. Процес створення банера
  2. Налаштовуємо колірну гамму
  3. Пишемо текст і наповнюємо ефектами
  4. Установка картинки і зміна масштабу
  5. Робимо кнопку з написом СКАЧАТИ
  6. налаштовуємо анімацію

Давайте звернемося до вікіпедії що ж таке банер

Банер (англ. Banner - прапор, транспарант) - графічне зображення рекламного характеру. Банери розміщують для залучення клієнтів, для інформування або для створення позитивного іміджу. -Баннер - один з переважаючих форматів інтернет-реклами. Являє собою графічне зображення, аналогічне рекламному модулю в пресі, але здатний утримувати анімовані (рідко відео-) елементи, а також є гіперпосиланням на сайт рекламодавця або сторінку з додатковою інформацією.

розміри банерів

88 × 31, 100 × 100, 100 × 200, 120 × 60, 120 × 90, 120 × 240, 120 × 600, 125 × 125, 125 × 250, 160 × 60, 160 × 120,160 × 240,160 × 600, 240 × 400, 250 × 250, 336 x 280, 460 × 60, 728 x 90 і багато інших.

Що нам буде потрібно для банера

  • І так перш за все вам потрібна програма Photoshop не нижче cs 3, хоча і в більш ранніх версіях теж можна зробити але трохи в інший спосіб.
  • Звичайно ж вам ще потрібно зображення дивлячись яка у вас тематика, в моєму випадку ми будемо створювати банер на тему «Як створити сайт»
  • І звичайно ж вам буде потрібно трохи проявити фантазії.

Процес створення банера

Для початок нам потрібно визначиться з розміром нашого банера для тесту я вибрав 236 х 400 це не стандартний розмір, але для свого блогу можу дозволити такий розмір так як мій віджет має саме такий розмір.

  1. Ми заходимо в редактор «Photoshop» і натискаємо вкладку «файл»
  2. Після того як ми натиснули на «файл» після ми «створюємо новий»
  3. І у нас з'являється нове вікно для визначення розмірів, і потрібного фону.
  4. Потім вам потрібно визначиться з розмірами банера а точніше з шириною у мене 236 px
  5. А тут ми вписуємо розмір висоти, в моєму випадку це 400 px
  6. Ми визначаємо який буде наш новий фон.
  7. Після того як ми в новому вікні все налаштували ми натискаємо «ok»

Налаштовуємо колірну гамму

  1. Для цього ми натискаємо на іконку з ліва під назвою «заливка»
  2. І у нас з'являється нове вікно за допомогою чого ми вибираємо потрібний нам колір.
  3. За допомогою бігунка ми можемо вибрати будь-яку колірну палітру.
  4. Після того як ми вибрали колір натискаємо «ок»

Після того як ми вибрали колір натискаємо «ок»

Після чого нам потрібно активувати наш шар для подальшого дизайну.

Фотошоп це дуже зручний редактор і не отьемлемий інструмент для створення картинок різних форматів, дизайнів, ефектів і в цьому нам допоможе додаток (градієнти, кисті, стилі, фігури, шрифти і т.д) як і де скачати ви можете подивитися в моїй статті

Після того як ми активували наш новий шар далі по бажанні можете накласти градієнт він дає нам більш красивий ефект і стиль. Після того як ми наклали обраний градієнт нам потрібно написати текст якщо ви визначилися з нішею, що саме буде рекламувати ваш банер то вписуєте текст і потім надаєте тексту стиль, ефекти а саме «обведення» і.т.д все це робиться на ваш розсуд.

Пишемо текст і наповнюємо його ефектами

  1. Для того що б написати текст ми натискаємо на потрібну нам вкладку а саме на букву «Т» в лівій колонки.
  2. Для зміна колірної гами тексту ми натискаємо на квадратик який розташований внизу також лівої колонки панелі і так же бегунком визначаємо потрібний нам колір.
  3. Для того що б змінити який не будь текст, картинку і.т.д ми наводимо курсор на потрібний шар і натискаємо на нього, після чого з'являється панель зовнішніх ефектів і вибираємо потрібну нам настройку і чаклуємо)). (Дивимося нижче)

(Дивимося нижче)

Установка картинки і зміна масштабу

Потім як ми написали текст і вставили ефекти для банера нам потрібно тепер вставити картинку, для цього ми натискаємо на «файл» і потім «відкрити». Далі нам потрібно вибрати потрібну нам картинку наприклад я вибрав 3-D картинку до речі в моїй статті ви можете подивитися як її можна зробити буквально за 2 хвилини.

Після того як ви вставите обрану картинку потрібно її від'єднати від робочого столу фотошопа, для цього ми наводимо курсор на верхню вкладку і просто відриваєте її притиснувши лівою кнопкою миші на вкладку.

Потім ми таким же дією натискаємо лівою кнопкою мишки на картинку і переносимо її на банер, далі нам потрібно налаштувати масштаб картинки, для цього б заходимо в «Редагування» після в «Трансформування» і натискаємо на «Масштабування» потім ви підганяєте малюнок під потрібний вам розмір і зберігаєте.

Так як в цій статті я показую як створювати банер упираючись на нішу по «створення сайту» то для цього мені потрібно кнопка з написом «скачати» і її ми теж зробимо в Фотошопі. Для початку ми переходимо в «файл» і натискаємо «створити» за замовчуванням всі наші розміри збереглися але нам потрібно поміняти лише одну сходинку в новому вікні. В місце «білого» фону потрібно поставити «прозорий» (дивимося нижче)

Робимо кнопку з написом скачати

Кнопка робиться дуже просто для цього ми натискаємо з лівого боку панелі на (2) квадратик і ви вибираєте якою формою буде кнопка прямокутна або з округленими кутами або кругла, після того як ви вибрали нам потрібно тепер вибрати (3) колір кнопки, раніше ми цю процедуру вже виконували вам її потрібно повторити і в цей раз.

І ось уже кнопка майже готова не вистачає тільки написи і ми знову натискаємо на букву (1) Т і пишем слово на кнопці, наприклад «скачати» далі ми налаштовуємо ефекти під свій смак кнопки і тексту.

Після цього ми натискаємо на інструмент (6) рамка це п'ята функція з лівого боку панелі з верху, обрізаємо нашу кнопку після зберігаємо. Після збереження ми відразу ж її відкриваємо в в файлі, і так само відриваємо від панелі і вставляємо на наш банер.

налаштовуємо анімацію

Підходимо до заключного етапу налаштовуємо анімацію, для цього ми переходимо на вкладку «Вікно» і натискаємо «Анімація»

    1. Після цього у вас внизу з'явиться нове додаткове вікно це і є анімаційна функція для нашого банера.
    2. Після ми натискаємо на папку розташована внизу вікна, ця функція дозволяє примножити наш файл для подальшої роботи (дивимося нижче)
    3. Так само якщо наприклад ви розмножили велика кількість файлів то ви з легкістю можете їх видалити натиснувши на кошик.
    4. І тепер переходимо до головного для того що б наш банер виглядав за потрібне нам чином нам потрібно по черзі натискати на око (4) там де відображається вічко і буде відображатися на нашому банері.
    5. Після вам потрібно визначити час, поставлені вами секунди і будуть відображати інтервал анімаційного ефекту.
    6. Ця функція дозволяє відтворити те, що у вас вийшло.
    7. Так само ви можете задати час на свій розсуд.

повернутися до змісту

повернутися до змісту

Рекомендую подивитися відео

-Рекомендується ознайомитися зі схожими моїми статьямі-

Що ж таке банер?

Новости

Как ухаживать за лицом после 30 лет: список запретов


Как ухаживать за собой


Как заставить себя начать ухаживать за собой?
Каждый вкладывает свой смысл в понятие " ухаживать за собой ". Вот мне исполнилось 30 лет и я расширяю это понятие. Я также как и Вы не особо люблю уход: не люблю краситься (честно, и не люблю) - моя

Вера Брежнева о своих секретах красоты
Талантливая певица, русская Брижит Бардо и самая стильная и сексуальная женщина России, безусловно, одна из ярчайших звезд современной русской эстрады – красавица Вера Брежнева в свои 34 года потрясающе

Лучшие советы по уходу за собой для девушек
Как всегда оставаться красивой даже в самых сложных ситуациях и тратить гораздо меньше времени и сил на уход за собой, но при этом всегда оставаться привлекательной? Если вы хотите знать ответы на эти

15 лучших средств по уходу за собой
Как почувствовать себя королевой, если с утра приходится тщательно маскировать прыщи, а к вечеру невозможно от усталости стоять на ногах? Попробуйте бороться с проблемами «домашними» средствами. Если

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

Натуральный уход за собой: красота и здоровье
Привет, дорогие читательницы! В последнее время моя жизнь наполнена совершенно волшебными знакомствами — вдохновляющими, помогающими открыть в себе что-то новое, чему-то научиться. Сегодня расскажу

Бюджетные аптечные средства по уходу за лицом. - Семейный портал Family-and-i: Все о семье, детях и не только.
Ухаживая за своим лицом и при этом, используя недорогие бюджетные аптечные средства, можно достигнуть очень заметного положительного результата. В этой статье мы подробно расскажем, что это за средства

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

  • Оформление торжеств
    21.11.2014
    Оформление торжеств

    Оформление мероприятий цветами и декорация тканью: свадьбы, юбилеи, торжества, корпоративные вечеринки, выставки, конференции, семинары, презентации.Правильная организация праздников и планировка работы для Вас и Ваших сотрудников — это залог успешного развития бизнеса. Мы предоставим полный комплекс услуг по оформлению специальных мероприятий любого масштаба. Опыт наших проектов по-своему индивидуален. Мы готовы предложить именно... 
    Читать полностью

Статьи о цветах
  • Свадебные букеты
    Свадебные букеты

    Безумное счастье воссоединения в браке, прекрасная церемония, счастливые лица гостей… Несомненно, свадьба... 
    Читать полностью

  • Роль и значение цветов в нашей жизни
    Роль и значение цветов в нашей жизни

    Еще с давних времен цветы в жизни людей играли огромную роль. Они всегда ассоциировались с любовью, радостью, хорошим... 
    Читать полностью

  • История цветов
    История цветов

    Искусство украшать живыми цветами, листьями, ветками, плодами и другим декоративным материалом праздничные процессии,... 
    Читать полностью

  • Цветочные традиции в Европе
    Цветочные традиции в Европе

    В Западной Европе в XIV в. распространилась мода на ароматы, а вместе с ней и на небольшие букетики из пахнущих цветов.... 
    Читать полностью

  • Цветы для свадьбы
    Цветы для свадьбы

    В нашей жизни ни одно торжественное событие не обходится без цветов. Букет из белых роз тонко подчеркнет красоту... 
    Читать полностью

  • Цветочный этикет
    Цветочный этикет

    В нашей жизни ни одно торжественное событие не обходится без цветов. При этом очень важно соблюдать цветочный... 
    Читать полностью