Как сделать мигающий баннер в фотошопе
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]
А я вообще не смог создать баннер))
на сайт то я смогу его поставить
У меня в Window нет позиции animation , что делать???
)
Блин всё норм крому одного, не могу сохранить файл почему то, нажимаю сохранить для web и устройств а ни чего не происходит, подскажи то плиз что может быть….
за ранее спасибо!)
Всё спасибо!)ток я непойму как новый слой сделать???
Здравствуйте!
Помогите, пожалуйста, разобраться в проблеме. Я создал первую картинку, соединил слои. Теперь, когда я начинаю создавать вторую картинку, то на панели слоев первый слой второй картинки ложиться поверх первой картинки, а не ниже, как в Вашем примере.
Вопрос: что нужно сделать, чтобы на панели слоев первый слой второй картинки ложился ниже первой картинки. В моем случае, когда я начинаю делать анимацию, эти две картинки ложаться одна на одну. У меня Фотошоп CS2. Спасибо.
Виталий, отключите глазик на первой картинке.
Артем, зайдите: главное меню – вкладка Layer – New – Layer…
Или нажмите комбинацию клавиш Shift+Ctrl+N
Не удержалась написать вам добрые слова! Спасибо вам за урок! а то встречаются такие заносчивые особы и учат так что нифига не понятно! Огромное вам человеческое СПАСИБО!!!!!!!!
Сергей, сделала все как вы предложили. Все получилось, кроме показа в мигании второй картинки, мигает одна и та же. В Animation не получается второй слой поставить. Что делать?
Вера, а где вы тут Сергея нашли? =)))
В Animanoin есть значок «создать новый фрагмент», он выглядит также как и значок «новый слой» в Layers.
Вопрос к создателю урока. Скажите – а как же сохрнаить данный баннер просто на компьютер чтоб он при просмотре мигал. Ведь – пр исохранении в формате фотошопа он не мигает, в формате jpg – то же самое. Вообще-то должны мигать файлы в формате – gif – но и это не помогло.
Неужели он будет мигать только на сайте? Ведь остальные анимированные гифы, например, можно спокойно просматривать любым граф. просмотрщиком и сохрнаять на диск.
Спасибо
И еще вопрос. При работающем ДЕНВЕРЕ – то есть локальном сервере этот баннер у меня на странице также не мигует. В чем может быть причина? Спс
Саша (из Праги), чтобы сохранить картинку заходите File –> Save for Web &Devices –> Save.
В этом случае картинка сохраняетсяв формате GIF. Она будет мигать и на компьютере.
Если не мигает, попробуйте сменить программу для просмотра изображений, т.к не все программы поддерживают «мигание». Например, в Microsoft Office Picture Manager картинка выглядет статичной.
Большое спасибо за урок, теперь можно и деньги зарабатывать
Большое спасибо! Урок доступен для «чайников», у меня получилась моя первая работа в фотошоп! Спасибо!
Спасибо!
Урок получился хорошим.
Огромное спасибо!!!!!! это мне очень помогло!!!!!