Как сделать баннер

Сегодня я вам расскажу, как сделать баннер. Любое дело оказывается простым, когда знаешь, как его исполнить. Купив баннер у заказчика, может возникнуть ситуация, что необходимо заменить текст или потребовался еще один баннер для нового сайта, или нужно сделать еще один баннер с другим текстом или в другом формате, или…, или… Все это стоит определенных денег. А не проще ли сделать баннер самому и бесплатно, чтобы не зависеть от кого-то.

Итак, начинаем. Банеры бывают обычно следующих форматов: 468х60, 120х120, 100х100 или 88х31. Для наглядности предлагаю сделать баннер 468х60.

Создавать будем в фотошопе. Я делаю это в версии 6.0, но все инструменты, о которых я буду говорить, присутствуют версиях выше 6.0.

1. Открываем фотошоп. Верхнее горизонтальное Меню -> Файл -> Новый.

В открывшемся окне вписываем размеры в пикселях: для нашего случая ширина 468, высота – 60, разрешение 150пикс/дюйм, содержимое – прозрачность, далее жмем «ОК».

2. На баннере размещают логотип или любую желаемую картинку, а также необходимый текст, например «как увеличить посещаемость сайта «. Этим мы сейчас и займемся.

Слева в фотошопе имеется вертикальное меню (вы видите его на блоге тоже слева). Левой клавишей мышки нажимаем на левое окошко палитры цветов и для примера выбираем зеленый. Жмем «ОК».

3. Выбираем инструмент «ведро». Если вы не видите инструмент, о котором я буду говорить, тогда нажмите правой кнопкой мышки на место предполагаемого инструмента, и вы увидите весь набор инструментов для данного окошка меню. После выбора «ведра», жмем по баннеру левой кнопкой мышки. Баннер окрасится в зеленый цвет. Получилось?  Должно быть как на кртинке ниже.

4. Теперь будем помещать картинку на баннер. У меня картинка, например, для RSS-подписки с изображением шахматной фигуры в виде коня. Она имеет расширение jpg, но можно и расширение gif. Открываем картинку в фотошопе. Будет лучше, если мы поместим не всю картинку, а только изображение коня. Идем:  Меню -> Изображение -> размер изображения. Запоминаем размер картинки.

5. Верхнее горизонтальное Меню -> Файл -> Новый. Для нового документа пишем размеры, как у картинки с конем (у меня 84х84), содержимое – «прозрачный».

6. Выбираем инструмент «Перемещение» и перетаскиваем коня в новый документ. Перетаскивать надо, нажав инструментом «перемещения» по коню, чтобы сделать картинку активной и перетащить затем в новый документ.

7. Выбираем инструмент «волшебная палочка», щелкаем им по фону вокруг коня. Если фон достаточно контрастный, то большая его часть выделится. Нажимаем клавишу «del» и удаляем выделение. Если не удалось за одно нажатие «волшебной палочки» удалить фон, то нажимайте на оставшийся фон и повторяйте процедуру необходимое количество раз. В нашем случае, я сделала это за 2 раза. См. ниже.

8. Теперь необходимо сделать так, чтобы конь поместился в баннере. Далее идем: верхнее горизонтальное Меню -> Изображение -> размер изображения. Пишем высоту 60 (по высоте нашего баннера). Обратите внимание, чтобы внизу стояла галочка «сохранять пропорции». Жмем «ОК», при этом картинка должна изменить размеры.

9. И снова инструмент «перемещение», нажимаем на коня с уменьшенным размером, чтобы сделать картинку активной, и перетаскиваем его на баннер. Размещайте картинку там, где требуется. В нашем случае я поместила ее справа.

10. Осталось написать текст. Выбираем инструмент «Текст» и цвет текста, как в пункте 2. Для нашего случая это белый. Пишем, например, «Подпишитесь на RSS-ленту». Инструментом «перемещение» вы можете установить текст так, как вам это требуется.

11. Верхнее горизонтальное Меню -> сохранить как … -> присваиваем имя лучше с расширением .jpg и сохраняем на своем компьютере. После этого заливаем, полученный баннер, на хостинг и прописываем путь к нему в следующей ссылке.

Ссылка на баннер имеет вид. Данный код вы устанавливаете в том месте сайта, где хотите видеть ваш баннер.

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

И еще: здесь можно скачать бесплатно заготовки для баннеров, обои и кнопки.

Источник: biznes-mesto.ru

Категория: Онлайн-шоппинг

Похожие статьи: