Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Как сделать простой не анимированный баннер?

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

Дата: 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, выбираем инструмент Перемещение:

Выбираем инструмент Перемещение

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

Тянем изображение на новый файл

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

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

Подгоняем размеры картинки

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

Заготовка баннера сайта LuksWeb/ru

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

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

Выбираем инструмент Текст

И на нашем баннере наносим надпись. Получилось вот что:

Баннер сайта LuksWeb.ru

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

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

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

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

 

Читайте так же другие наши материалы.

Какими программами пользуюсь я для создания сайтов и для работы в Интернете?

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

Анимированные картинки Цветы. Сделай подарок любимой....

Что это такое Хостинг? Часть 2. Платный хостинг.

Как заработать в Интернете на продаже ссылок со своего сайта?

Как заработать в Интернете не имея своего сайта?

 

Просмотров: 13477


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Александр
Дата: 2011-06-20

Благодарю Андрей , только куда мне баннер ставить у меня сайта нету, хотя у меня и куча в компе и все ни о чём , :). Дело в то что я не знаю какуэ тематику делать . что бы людям было интересно , я уже и делал на заказ, но когда пришло время расплаты , мой заказчик просто пропал:) хотя его всё устраивало, я даже не знаю для чего я Вам это написал, просто устал наверное :)

Комментарии добавил(а): Александр
Дата: 2011-06-20

С уважением Александр.

Комментарии добавил(а): Ахмад
Дата: 2011-07-03

Андрей! С уважением к Вам Ахмад. Я хотел создать Рекламный блок во втором контейнере с вашим Банером. Вот код <!-- <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?> <!-- </block0> --> В чем причина Андрей? Всего доброго. Ахмад Гапурович.

Комментарии добавил(а): АндрейК
Дата: 2011-07-03

Ахмад, Вы неправильно используете операторы PHP: <?if>($recklams$)?> <?endif?> Уберите их и все будет в порядке.

Комментарии добавил(а): Наталья
Дата: 2011-09-09

У меня получилось можете посмотреть http://agent-natali.ucoz.ru

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Заработает каждый
от Школьника до Пенсионера!
"Как?"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT