Как сделать мигающий баннер в фотошопе
67 комментариев
Автор: avalona | Категория: Уроки photoshop | Опубликовано: 13-02-2009
В этом уроке я расскажу как сделать баннеры для собственного сайта или блога на примере работ для сайта http://scottish-straight.ru.
Для начала решите, какой вы хотите сделать баннер. Он может быть любой, но чаще всего используются следующие размеры:
468×60
|
125×125
|
120X90
 |
100×100
 |
120×60
 |
88×31
 |
После того как вы определились с размером, откройте Adobe Photoshop и создайте новый файл выбранного размера: File –> New –> выставляете выбранные значения ширины и высоты (Width, Height):
Залейте фон выбранным цветом (например светло-зеленым) или вставьте готовую картинку: File –> Open –> выбираете нужную картинку –>Ctrl+A –> Ctrl+C –> переходить во вкладку с нашей заготовкой –> Ctrl+V. Чтобы подогнать размер, нажимаем Ctrl+T, затем зажимаем Shift (чтобы рисунок сохранял пропорции) и тянем за верхний левый угол.
Затем создайте новый слой и введите неоходимый текст. Здесь можете попробовать разные шрифты и размеры:
Опять создаем новый слой и добавляем на него картинку, значок или красивую кисть:
Нажимаем Ctrl+Shift+E, чтобы объединить все слои в один. Теперь приступаем к созданию второй картинки. Делаем все также как и с предыдущей. Только используем новый цвет заливки, пишем другой текст и вставляем новую картинку. Когда вторая часть нашего будущего баннера готова, отключаем глазик на первой картинке (Layer 1) :
И опять нажимаем Ctrl+Shift+E, чтобы объединить слои второй картинки. Включаем «глазик» на первом слое. В результате у нас должно остаться 2 слоя: картинки №1 и №2.
Теперь переходим к анимации. Для этого идем в Window –> ставим галочку на Animation. Выключаем «глазик» на втором слое. В открывшейся панели анимации дублируем фрейм:
Включаем «глазик» на втором слое. Выбираем скорость переключения фреймов. (Для баннеров – это интервал 0,5 – 1 секунда). И ставим значение Forever? то есть бесконечное число переключений.
Нажимаем плей и любуемся своей работой.
Теперь нужно сохранить картинку: File –> Save for Web &Devices –> Save.
Картинка готова! Теперь нужно превратить ее в баннер. Для этого надо залить ее на любой доступный сервер (Я использую Яндекс.Фотки) и получить ссылку на изображение.
Теперь пишем код, для того, чтобы наш баннер был кликабельным и ссылался на ваш сайт: <a href=»http://адрес_вашего_сайта«><img src=»http://ссылка_на_изображение»/></a>. Получаем вот такую кликабельную картинку:
И последний штрих: надо сделать тематическую подпись к картинке, чтобы при наведении мышкой на баннер, появлялось красивая надпись, а не рабочее имя файла. Вот так:
Для этого в предыдущий код добавляем title=»ваша_надпись» и получаем: <a href=»http://адрес_вашего_сайта«><img src=»http://ссылка_на_изображение» title=»ваша_надпись»/></a>.
Все готово!
Теперь этот код вы можете вставлять в любое поле, поддерживающее html.
Урок подготовила [user=avalona]
Огромное спасибо за подробный урок!
Круто! Большое спасибо за урок. Сделал себе баннер на сайт сам и денег съэкономил!
Огромнейшее спасибо!!!!!)))))))))
Ой, а никто не подскажет по предпоследнему пункту, я чего то все пытаюсь сделать код, а как то не получается.
Так понимаю в ссылку надо просто вставить адрес сайта и ссылку на изображение, и получится готовая ссылка на баннер. Адрес сайта просто нужно вводить, как он и пишется? без пробелов, подчеркиваний..
Полина,
в ссылку нужно вставить ТОЛЬКО ссылку на изображение.
сделал я банер в фотошопе, мне нужно что бы у меня этот банер хранился в папке, делее я хочу его разместь в определённом месте на сайте!?!?!?
Где мне взять ссылку на изображение, и как его установить конкретно туду куда нужно? Я могу у себя в папке хранить банер, или только в инете?
???
Спасибо
Сергей,
чтобы картинка была видна в интернете, она должна быть сохранена в интернете.
Никто не мешает сохранить вам ее у себя на компе, а потом еще раз сохранить на любом хостинге.
В данной работе приводится хостинг Яндекс- фотки как пример.
Вы можете сохранить фотографию на хостинге своего сайта, то есть залить картинку в себе на сайт, а потом, взяв ссылку на изображение (клик правой кнопкой мыши по картинке и выбрать), вставить ее в код баннера.
Вот сделал: , – не работает! Подскажите?!!?!
Сергей,
У вас адрес сайта, на который ведет баннер, должен начинаться с http:
Например (без звездочек перед а), < *a href="HTTP://AVALONA.RU">здесь должен быть адрес картинки< */a>
() не работает
Сергей,
В вашем случае вам нужно скопировать следующий код < *a href="http://shodnia-photo.ucoz.ru/">< *img src="http://gazeta.sebastopol.ua/image/987/">< */a>
Не забудьте убрать звездочки ( в данном коде их три: перед а, перед img, перед /a)
Это готовый код баннера.
Чтобы вставить свою картинку заметите http://gazeta.sebastopol.ua/image/987/ на адрес своей картинки
Всё зделал как вы говорили, залил себе на сайт, но код изменить не получается. Может это из-за того, что у меня 4 кадра?Заранее спасибо.
Александр, количество кадров значения не имеет. Объясните, что значит «изменить код не получается»? Вы же код сами пишите!
Я залил баннер на сайт и в диспетчере файлов попытался изменить HTML код данный стандартно(адрес самой картинки) но при нажатии на сохранение изменения удаляются. Если я не там изменял код то подскажите пожалуйста где именно надо изменять код.
Александр, напишите код в Блокноте. Потом его скопируйте и вставьте туда, где должен стоять баннер.
Огромное спасибо всё заработало.
Александр. очень рада, что у вас все получилось! Удачи
Спасибо огромное за урок!!! Все получилось!
кулллллл!!!ссспассссссибоооо Двно думал как создать баннер!+100000000000000000000000000 вам
отличный урок!!!! спасибо огромное)))
хороший и наглядный урок , спасибо
Не получается. Он в анимацию один и тот же слой копирует!
Ксю,
скорей всего вы забыли включить/выключить глазики на слоях
спасибо вам!!!)
Здравствуйте!!! все зделал.. вроде как а нечего не полчаеться вот такой код у меня.. что не так?
А с картинкой все нормально
а кликабельную не получаеться сделать
ВОТ
Как код выложить?)))
Даниил, что именно у вас не получается?
чтобы картинка стала кликабельной на нее нужно «повесить» ссылку, то есть перед кодом картинки должен стоят код < *a href="здесь ваша ссылка"> здесь код вашей картинки < */a> (не забудьте убрать звездочки)
Написано так что непонятно нифига !!!!!!!!!!!!!!!!
НАПИШИ ВНАЧАЛЕ ТЕКСТА ЧТО ОТКРЫВАТЬ НУЖНО ImageReady а не сам Photoshop !!!!!!!!!!
Евг,
ОТКРЫВАТЬ НАДО ФОТОШОП!
Конечно, если у вас версия photoshopa из прошлого века, то придется мучиться с ImageReady. Если же с версией все в порядке, то открывается сам фотошоп и изпользуется менюшка Animation!
Огромное спасибо!!!)))
Чёта у меня не получилось!Это в фотошопе CS4 работает?
Спасибо за урок!!! Все получилось!!! Круто!!!
Яна. Да работает. Я как раз через CS4 делал)))
фраза «включаем глазик» – это жеееесть!!!!
avalona, благодарю за подробный инструктаж! М.б. Вы так же досконально расскажете как закачать флеш-плеер на сайт?
дай пожалуйста ссыслку
Наталия,
как только сама освою заливку флдеш-плеера – обязательно сделаб урок!
а скажие вот когда написано- Теперь приступаем к созданию второй картинки. Делаем все также как и с предыдущей. Только используем новый цвет заливки, пишем другой текст и вставляем новую картинку. Когда вторая часть нашего будущего баннера готова, отключаем глазик на первой картинке (Layer 1) : Это надо создавать новый документ или нет?
вока,
нет, это делает в этом же документе. Надо только создать новый слой и уже с ним проделывать все операции.
спасибо
а как на слой без документа картинку поставить
напишите пожалуста подробно а то я неочень пользоватся умею
вока,
создаете новый слой
открываете нужную вам картинку, веделяете (Сtrl+A) ее копируете (Ctrl+C)
возвращаетесь к созданному новому слою, вставляете картинку (Ctrl+V).
Если картинку нужно увеличить/уменьшить/повернуть , нажимаете Ctrl+T и делаете, что вам нужно.
все спасибо я сделал а куда он сохраняет когда нажимаеш File –> Save for Web &Devices –> Save
вока,
вообще должен предлагаться выбор места сохранения, также как обычно спрашивается при скачивани файлов или при сохранении документов.
Возможно у вас установлена папка сохранения файлов по умолчанию. Проверьте настройки
Все здорово, баннер сделала и он даже работает. Разместила на сервере, он там есть и если его посмотреть, то он загружается и работает (мигает), но как только пытаюсь поместить на сайте, видно только окно в его размер с крестиком, при этом ссылка с него работает хорошо. Подскажите пожалуйста, почему баннер может быть не виден?
а у меня слой в анимацию не получается переставить