Створення gif банера для сайту

  1. Як зробити gif банер в фотошопі?
  2. Як заробити на створенні гіф банерів

подробиці

Вітаю Вас, дорогі друзі, на блозі firelinks Вітаю Вас, дорогі друзі, на блозі firelinks.ru. Давайте розглянемо таку тему як створення красивої gif анімації банера для сайту і способів заробітку на ньому. В інтернеті вже не зустрінеш ні один сайт на якому не було б графічних банерів виконаних у flash, гифки або ж просто статичної картинки. Використання такого роду банерів привертає увагу потенційних клієнтів, які шукають ту чи іншу послугу або ж інформацію. Суть полягає в тому, щоб зрозуміти для яких цілей використовується на сайті дана графіка, серед яких можна виділити:

  • Рекламні банери, що ведуть на сторонні сайти і блоги;
  • Акцентування уваги на певному продукті або послузі сайту;
  • Виділення розділів з акціями та спеціальними пропозиціями;
  • Створення динаміки на сайті, що в свою чергу приверне увагу користувачів до потрібної інформації.

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

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

Так як ми з Вами ведемо свій бізнес в інтернеті і хочемо економити і примножувати свій капітал, то необхідно і вирішувати певні технічні проблеми, пов'язані з розробкою графічних елементів для свого блогу. Коли я зіткнувся з необхідністю створити банер з gif анімацією, то відразу ж побіг на сервіси з фрілансом, де мені виставили рахунки за створення простого банера в межах від 500 до 1700 руб. Недешево, чи не так? Якщо вміти створювати такі речі, то можна і самому не кволо заробити тільки на одному цьому напрямку.

Ну я посидів, зібрав потрібну інформацію, обміркував і тепер готовий поділитися з Вами їй. У мережі повно всіляких уроків по створенню анімації банера, але корисних дуже мало, або ж взагалі не зрозумілих і жахливо викладених. Я постараюся вирішити дану проблему і дати повне уявлення всієї суті створення таких зображень і розповім як можна заробити на цьому.

Як зробити gif банер в фотошопі?

Для початку нам необхідно встановити на комп'ютер програму Adobe Photoshop CS5. Раджу використовувати саме цю версію продукту так як там їсть зручні інструменти для настройки анімації і зручна навігація з вікнами. Багато напевно можуть не морочитися і скористатися створенням гіф анімації онлайн, але я скажу Вам, що все це повна нісенітниця. При використанні онлайн сервісів дається обмежені ресурси і ніякого польоту фантазії, ну і ще цілу купу підводних каменів. Як уже говорив раніше такі речі необхідно вміти створювати самому і нічого в цьому складного немає.

Для створення потрібного банера нам необхідно провести підготовчі роботи, в які входить:

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

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

Заходимо в Photoshop, де нам насамперед необхідно знати розміри нашого банера в пікселях і створити новий шаблон саме з цими параметрами. Я вибираю 315х610 px.

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

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

Сподіваюся ви підготували вже в окрему папку картинки які ви будите використовувати при створенні свого банера.

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

Тепер в розділі "шари" ви бачите новий шар, який ми назвемо "фон". Картинку для фону можна розтягнути за своїм розміром полотна.

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

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

Відмінно, я трохи підредагувати картинки і тепер залишилося тільки додати текст. Сам банер у мене буде складатися з 2 слайдів, які через певний проміжок часу будуть змінювати один одного. На першому макеті залишилося тільки додати потрібний текст. А так як банер я роблю для рекламування "Безкоштовного курсу зі створення свого сайту з нуля" то і текст буде відповідним темі. Для створення напису вибираємо в лівому меню букву "Т" і кнопкою миші вказуємо потрібно місце для написання. Особливу увагу варто приділити ієрархії шарів у правому нижньому меню. Шар який буде вище в списку той і буде перебувати поверх нижче лежачого шару. Якщо є необхідність щось поміняти місцями їх можна простим перетягуванням поля з назвою.

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

Для створення другого банера нам необхідно відключити всі старі шари першого банера і за аналогією додати всі ті картинки, які необхідні для створення другого макета.

Після того як я повторив всі дії, що робив для створення першого прототипу, ось, що в мене вийшло.

Після того як я повторив всі дії, що робив для створення першого прототипу, ось, що в мене вийшло

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

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

Тепер нам необхідно задати загальну тривалість анімації. Це робиться шляхом переміщення повзунка вліво і вправо або просто натиснути два рази на таймер де і можна буде виставити час.

У вікні тимчасової шкали, в її лівій частині, файли розташовані саме в тій послідовності що ми їх і додавали в проект. Тепер нам необхідно загальну шкалу часу просто розділити на 2 частини, перетягнувши повзунок часу кожного файлу до центру. Знизу вгору у нас йдуть файли першого слайда тому їх нам треба зрушити з правого краю до центру, а вже другого від центру до кінця шкали як я зробив на Крін нижче.

Знизу вгору у нас йдуть файли першого слайда тому їх нам треба зрушити з правого краю до центру, а вже другого від центру до кінця шкали як я зробив на Крін нижче

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

Також, натиснувши на кожен кадр, можна вказати час його показу

Після застосування всіх налаштувань нам залишилося тільки зберегти наш файл у форматі .gif. А так як ми робимо анімацію для розміщення файлу на сайт то вибираємо функцію "Зберегти для Web і пристроїв". У процесі збереження вибираємо і тип вихідного файлу, перевіряємо, щоб картинка постійно прокручувалась і натискаємо зберегти.

У процесі збереження вибираємо і тип вихідного файлу, перевіряємо, щоб картинка постійно прокручувалась і натискаємо зберегти

Тепер нам можна приймати замовлення на створення рекламних блоків, а також розміщувати у себе на блозі красиві динамічні gif банери.

Як заробити на створенні гіф банерів

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

Створення gif банера на замовлення досягає вартості від 500 до 1000 руб., А в форматі Flash від 1000 до 2000 руб. Так що сміливо біжимо на фріланс і починаємо заробляти на отриманих знаннях.

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

Нижче я записав невелику відео інструкцію по створенню банера. Приємного перегляду -))))

Також раджу почитати статті:

Якщо у когось виникли труднощі і проблеми то можете написати в коментарях і я обов'язково відповім. Всім удачі, до зустрічі в наступних статтях.

З повагою, Галіулін Руслан.

Корисні матеріали:

Додати коментар

Як зробити gif банер в фотошопі?
Недешево, чи не так?
Як зробити gif банер в фотошопі?
IRC (Internet Relay Chat)