|
|
|
|
Как сделать простой не анимированный баннер? Автор: Андрей Краснокутский Дата: 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. Платный хостинг. Как заработать в Интернете на продаже ссылок со своего сайта? Как заработать в Интернете не имея своего сайта?
Просмотров: 17557 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Александр Благодарю Андрей , только куда мне баннер ставить у меня сайта нету, хотя у меня и куча в компе и все ни о чём , :). Дело в то что я не знаю какуэ тематику делать . что бы людям было интересно , я уже и делал на заказ, но когда пришло время расплаты , мой заказчик просто пропал:) хотя его всё устраивало, я даже не знаю для чего я Вам это написал, просто устал наверное :) Комментарии добавил(а): Александр С уважением Александр. Комментарии добавил(а): Ахмад Андрей! С уважением к Вам Ахмад. Я хотел создать Рекламный блок во втором контейнере с вашим Банером. Вот код <!-- <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> --> В чем причина Андрей? Всего доброго. Ахмад Гапурович. Комментарии добавил(а): АндрейК Ахмад, Вы неправильно используете операторы PHP: <?if>($recklams$)?> <?endif?> Уберите их и все будет в порядке. Комментарии добавил(а): Наталья У меня получилось можете посмотреть http://agent-natali.ucoz.ru Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |