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

Як зробити рекламний банер в фотошопі для сайту

Листопада 6, 2020

  • Який програмою скористатися
  • Принцип створення рекламного банера
  • Створюємо базовий фон
  • А також додати фон на білу основу
  • Вирізаємо і встановлюємо картинку
  • Створюємо рекламний напис
  • Створюємо кнопку "Замовити"

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

Який програмою скористатися

Існує кілька спеціалізованих програмних додатків, за допомогою яких легко намалювати банер якістю високого рівня. У професійних майстрів користується популярністю програма "Adobe Photoshop". Саме, в ній ми і будемо створювати наш перший рекламний банер своїми руками.

У нашому випадку будемо робити рекламу піци на банері з розмірністю 600 на 400 пікселів.

Принцип створення рекламного банера

Весь хід роботи складається з наступних етапів:

  • Створення базового фону потрібного формату.
  • Накладення необхідного фону.
  • Вирізання картинки від фону і її розміщення.
  • Створення рекламної написи.
  • Створення кнопки "замовити".

Створюємо базовий фон

Алгоритм дій наступний:

  • З лівого боку верхньої панелі натискаємо на кнопку "Файл", потім "Створити" (фото 1).
  • У відкритому білому вікні задаємо необхідні розміри майбутнього банера для рекламного місця (фото 2).
  • З отриманого білого тла знімаємо "замок", перетягнувши відповідний значок в кошик (фото 3).

А також додати фон на білу основу

Щоб виконати накладення кольорового фону на базову основу, слід виконати наступні дії:

За вже знайомої нам кнопці "Файл" натискаємо один раз "лівої мишкою". З випав вікна вибираємо підпункт "Відкрити" (фото 4).

  • Знаходимо потрібне фото з кольоровим фоном. Перетягуємо кольоровий фон на білий прямокутник (фото 5).
  • Зменшуємо кольоровий фон до потрібних розмірів, щоб він чітко ліг на білий прямокутник. Зменшення кольорового фону виконуємо затиснутою кнопкою "Alt" і "лівої мишею".

Вирізаємо і встановлюємо картинку

Перед винесенням фотографії піци на кольоровий фон, необхідно відокремити провести її вирізання. Для цього достатньо скористатися кнопкою «Чарівна гумка» (фото 6). Натискаючи лівою кнопкою мишки на області навколо об’єкта, видаляємо старий фон.

За такою ж схемою, як і в попередньому пункті, виставляємо фотозображення піци:

  • Виставляємо картинку на кольоровому фон в тому місці, де це необхідно.
  • Визначаємося з оптимальним розміром фотозображення, затискаючи "Alt" і ліву кнопку мишки.
  • Вибравши оптимальне місце картинки, натискаємо "Enter" на клавіатурі (фото 7).

Створюємо рекламний напис

Етап створення написи на рекламному банері полягає в наступних етапах:

  • Знаходимо і вибираємо на лівій панелі робочої рамки значок "Текст" (фото 8).
  • У потрібному місці банера інтернет реклами встановлюємо курсор для набору тексту.
  • Забиваємо необхідний слоган будь-яким шрифтом. Після цього, курсором і затиснутою "лівої мишею" виділяємо напис для банера. Вибираємо у відповідному меню відповідний шрифт і його розмір (фото 9). При необхідності перенесення тексту на іншу ділянку, натискаємо комбінацію з кнопок "Ctrl" + "T". Відбувається виділення написи на банері. Курсором переносимо позначений текст з необхідну область банера.

Створюємо кнопку "Замовити"

Доповнити банер для тексту слід спеціальною кнопкою «Замовити», що дозволяє потенційному покупцеві перейти безпосередньо до замовлення товару.

Для того, щоб зробити кнопку «Замовити», проводимо такі дії:

  • Вибираємо кнопку «Прямокутна область» (фото 10).
  • Вибираємо колір майбутньої кнопки (фото 11 і 12).
  • Курсором наносимо прямокутник потрібного розміру, натискаємо «Enter».
  • Кількома по кнопці «Текст», вибираючи функцію тестового набору.
  • Вибираємо вподобаний шрифт, зайшовши у відповідний меню.
  • Вибираємо розмір шрифту.
  • Вбиваємо слово «замовити» в кольоровий прямокутник.

Робота виконана! Підсумковий результат можна подивитися на фото 13. Тепер рекламний банер сайту можна виставляти в інтернет.

Ірина Леонова

Ірина є автором безлічі статей і публікацій на тему інтернет-реклами, маркетингу, монетизації та просування сайтів з більш ніж 10-річним досвідом. Завдяки консультаціям, розмов, публікаціям, навчання і наставництва, вона пише якісні статті і публікації.

Схожі статті

Як вигідно купити або продати місце під банер на сайті

Заробити можна на сайті з мінімальною відвідуваністю 500 хостів на добу.

Основні тренди дизайну і онлайн контсруктори банерів

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

Як працює баннерообменная мережу і сервіси обміну банерами?

Щоб просувати власну банерну рекламу, знадобиться сервіс для обміну банерами.

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

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

Створення простого веб-банера в Photoshop

Почнемо з готового банера. У нас є базовий приклад, що використовуються в ньому кольору заспокоюють очі. Його можна розміщувати на сайті, присвяченому моді і стилю, а також для персонального блогу. Виконайте наступне:

Відкрийте новий документ . Відкриваємо в Photoshop новий документ потрібного розміру:

Намалюйте прямокутник за допомогою інструменту «Прямокутна область» . Перед тим, як зробити шапку сайту HTML, створіть на новому шарі прямокутник будь-якого кольору:

Стиль шару> Накладення градієнта . Натисніть на стиль, а потім застосуйте градієнт:

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

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

Змініть режим змішування на «Перекриття» . Перед тим, як зробити банер в шапку сайту HTML, перемістіть три дубліката, створених раніше, і помістіть їх у відповідних місцях. Змініть їх режим накладення на «Перекриття». При цьому зверніть увагу, щоб вони не вийшли за межі прямокутника:

Використовуйте кисть, щоб видалити зайві області, помістіть ці три шари в групу і клацніть по іконці маски шару. Виберіть будь-який розмір кисті, але не дуже великий. Встановіть «Жорсткість» — 0%, «Непрозорість» — 10% . Замалюйте краю цих еліпсів, щоб змішати їх, і зменшите непрозорість:

Виберіть інструмент «Горизонтальний текст» і введіть напис шапки сайту HTML . Введіть основний напис банера, а потім додайте додаткову інформацію про сайт:

Створіть новий шар і створіть тінь банера . Створіть новий шар, клікніть пензлем один раз в будь-якому місці і встановіть тінь внизу веб-банера так, щоб прозорість становила 50 або 40%:

Створіть новий шар нижче шару банера . Створіть новий шар нижче шару банера, як показано на малюнку нижче, і натисніть один раз пензлем білого кольору, «Жорсткість» — 0% . Потім розмістіть цю світлу область на основному банері і зменшите непрозорість шару до 70%:

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

висновок

Ми розповіли вам як зробити банер в фотошопі. Сподіваюся, що ця стаття виявилася корисною для вас.

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

Приклади анімованих банерів в Photoshop

Приклади банерів, які можна зробити в Photoshop:

Створення анімованого банера в Photoshop — інструкція

Створимо новий документ розміром 600 на 200 px.

Для початку зберемо банер в статичному вигляді. Розташуємо на шарі нашого головного персонажа — рибу, де можна взяти безкоштовні ресурси для своїх робіт я писала у статті «ТОП 8 сайтів з безкоштовними ресурсами для дизайнера»:

За допомогою інструменту «Довільна фігура» розташуємо на шарі виноску з діалогом.

Нагадаю, що відредагувати фігуру (векторний об’єкт) можна за допомогою інструменту «Виділення вузла».

Так я і зробила — видалила непотрібні елементи в шарі з першою фігурою і додала ще 3 еліпса, щоб зробити так, как-будто це хмара діалогу йде з рота риби.

Тепер помістимо текст на шарах документа, в порядку, в якому він буде з’являтися.

Так як текст у нас буде з’являтися по черзі, то, природно, що в статичному варіанті шари будуть налазити один на одного.

Я покажу всі верстви з відключеним останнім текстовим шаром.

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

Отже, всі верстви у нас готові. Розташовані в порядку їх появи (від низу до верху). Чи можемо приступати до анімації.

Виберіть пункт Вікно — Шкала часу .

У панелі, що з’явилася виберіть кнопку Створити шкалу часу для відео.

В результаті створиться тимчасова шкала, з усіма нашими шарами, які ми вже можемо рухати і анімувати.

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

Якщо ви хочете анімувати фон, то зніміть блокування на його шарі, клацнувши 2 рази лівою клавішею миші.

Для кожного шару на часовій шкалі передбачені атрибути для анімації.

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

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

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

Жовтий ромб (піктограма ключового кадру) з’явиться там, де стоїть тимчасової покажчик на шкалі часу. Наприклад, на початку.

Ви можете змінити значення атрибута об’єкта, наприклад, позиції і її значення буде збережено для даного ключового кадру.

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

Клацнути по значку з ромбом навпроти назви атрибута (на часовій шкалі з’явиться нова піктограма ключового кадру) і задати нове значення атрибуту.

Наприклад, перемістити об’єкт в нове місце.

Тепер спробуємо застосувати отримані знання.

Наша риба повинна з’явитися зліва направо і її прозорість повинна помінятися з 0 до 100%. Так буде виглядати шкала часу в даному випадку.

Після того, як риба з’явилася, з’явиться діалогове хмара по частинах.

Спочатку еліпси, потім сама фігура.

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

Для фігури застосуємо ті ж дії.

Тепер створимо анімацію для тексту, використовуючи той же алгоритм.

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

Для цього використовується стандартний інструмент трансформації об’єкта (Ctrl + T).

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

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

Тепер зрівняємо всі краї доріжок в кінці.

Для цього потрібно потягнути за правий край кожної доріжки і підігнати все під один час. Щоб різко не пропадає всі об’єкти.

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

Щоб зберегти результат, необхідно вибрати Файл — Зберегти для Web.

Вибрати формат Gif і вказати, щоб анімація повторювалася постійно.

Хоч Photoshop і не створений для якоїсь складної анімації (і це резонно), але за допомогою ось таких нехитрих дій можна домогтися гідного результату при створенні gif банера.

Особливо якщо ви відчуваєте себе в Photoshop, як риба в воді, ніж при роботі в Flash.

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

Підписуйтесь на оновлення блогу «Дизайн в життя»

по e-mail або соціальних мережах

  • Share on Facebook
  • Share on Instagram
  • Share on Vkontakte

і ми обов’язково опублікуємо для вас ще більше корисних статей зі світу дизайну і нові уроки Photoshop.

  • Share on Facebook
  • Share on Twitter
  • Share on Pinterest
  • Share on LinkedIn
  • Share on Vkontakte
  • Share on Instagram

Схожі статті:

  1. Живе фото для Інстаграм в Photoshop. Анагліф-ефект + исходник
  2. Анімація руху на камеру в Adobe Animate (Flash)
  3. Ілюстрації на фотографії в Photoshop
  4. Подвійна експозиція з анімацією. Новий погляд.
  5. Сінемаграфія. Як створити живе фото в Adobe Photoshop

2 коментарі на "Анімований банер в Photoshop"

Олег :

спасибі за допомогу!

Anna Dmitrieva :

Ссылка на основную публикацию