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

подробиці

Вітаю Вас, дорогі друзі, на блозі 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 руб. Так що сміливо біжимо на фріланс і починаємо заробляти на отриманих знаннях.

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

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

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

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

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

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

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