Як зробити простій не анімований банер?

Автор: Андрій Краснокутський

Дата: 2010-04-17

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

Отже, перш за все Вам знадобитися графічний редактор. Я віддаю перевагу сам працювати з чудовим графічним редактором Photoshop, та й Вам раджу (якщо ви ще не знайомі цією програмою). Завантажити безкоштовно Photoshop Ви можете тут . До речі в комплекті йде дуже хороший русифікатор. Крім Photoshop на цій сторінці Ви знайдете безліч інших корисних програм, які можете скачати безкоштовно. Завантажуйте (якщо у Вас ще немає Photoshop), встановлюйте і починаємо робити свій банер.

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

Запускаємо Photoshop. Більшість початківців сайтостроителей не є художниками, як втім і я сам. Тому давайте для спрощення роботи, підберемо відповідну фонову картинку у форматі jpg. В якості фонової картинки можна підібрати практично будь-яке, що сподобалися Вам зображення. Єдине побажання на невеликих розмірах банера буде погано виглядати, наприклад обличчя людини, краще якщо це буде картинка з нейтральним фоном.

Я візьму для прикладу ось таку картинку (малюнок нижче):

Розмір цього зображення 300х150 пікселів, звичайно завелика, але це не біда, розмір картинки звідки Ви візьмете фон може бути будь-яким.

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

Щоб не помилитися з розмірами майбутнього банера, давайте створимо новий файл з потрібними нам розмірами 88х31 пікселів. Йдемо в верхнє меню Файл / Новий. У вікні виставляємо параметри, як на малюнку нижче:

І натискаємо кнопку OK. Тепер на робочому столі Photoshop у нас відкрито два файли. Перший з фоновою картинкою, другий файл - наш майбутній банер із заданими параметрами: 88 пікселів в ширину і 31 піксель в висоту.

Тепер в панелі інструментів програми Photoshop, вибираємо інструмент Переміщення:

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

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

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

Відразу ж навколо поля малюнка, Ви побачите пунктирну лінію, що позначає реальний розмір малюнка з невеликими прямокутниками по периметру. Якщо "наступити мишкою" і посувати за ці прямоугольнички, то буде змінюватися розміри картинки. Крім того можна просто "стати мишкою" на саме зображення і переміщати вліво-вправо і вгору-вниз. Таким чином добийтеся найбільш оптимального розташування фонового зображення. Після коригування розмірів фонового зображення, не забудьте ще раз натиснути на інструмент Переміщення. В результаті у мене вийшло ось що:

Тепер на це фонове зображення можна нанести напис. Я напишу http://www.LuksWeb.ru . Ви природно пишіть свій напис.

В панелі інструментів Вибираємо інструмент Текст:

І на нашому банері наносимо напис. Вийшло ось що:

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

Порада! Намагайтеся зберігати готову картинку з найменшими розмірами, природно при цьому з огляду на якість зображення. Банер розміром 88х31 пікселів повинен бути не більше 4 - 5 КБ. А ще краще, якщо Ви смомете домогтися 1 - 2 Кб. Найпоширеніші формати для збереження банерів: jpg, ping, gif - можете використовувати будь-який з цих форматів.

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

Якщо Ви не все зрозуміло, Ви можете подивитися Відео урок по створенню банерів з нашого Секретного розділу.

Читайте також інші наші матеріали.

Якими програмами користуюся я для створення сайтів і для роботи в Інтернеті?

Що таке Банер для сайту.

Анімовані картинки Квіти. Зроби подарунок коханій ....

Що це таке Хостинг? Частина 2. Платний хостинг.

Як заробити в Інтернеті на продажу посилань зі свого сайту?

Як заробити в Інтернеті не маючи свого сайту?

Переглядів: 16635

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

З повагою, Олександр.

Андрій! З повагою до Вас Ахмад. Я хотів створити Рекламний блок в другому контейнері з вашим банер. Ось код <! - &lt;block0> -> <? If> ($ recklams $)?> <! - LuksWeb.ru -> <a href = "http://www.luksweb.ru/" target = _blank> <img src = "http://www.luksweb.ru/img/100_100.gif" width = "100" height = "100" alt = "Безкоштовні уроки по створенню сайтів. Все для Web-майстра !! ! " border = "0"> </a> <! - end LuksWeb.ru -> <? endif?> <! - &lt;/ block0> -> У чому причина Андрій? Всього найкращого. Ахмад Гапуровіч.

Ахмад, Ви неправильно використовуєте оператори PHP: <? If> ($ recklams $)?> <? Endif?> Приберіть їх і все буде в порядку.

У мене вийшло можете подивитися http://agent-natali.ucoz.ru