-Кнопки рейтинга «Яндекс.блоги»

 -Видео

 -Поиск по дневнику

Поиск сообщений в avalona

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 14.11.2006
Записей: 1179
Комментариев: 21695
Написано: 33514

Как сделать мигающий баннер в Photoshop'e

Пятница, 13 Февраля 2009 г. 15:58 + в цитатник

В этом уроке я расскажу как сделать баннеры для собственного сайта или блога на примере работ для сайта http://scottish-straight.ru.

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

468x60
banner 468x60-2

125x125
banner

120X90
баннер 120х90
100x100
banner
120x60
banner
88x31
banner

После того как вы определились с размером, откройте 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.

Урок подготовила avalona

Рубрики:  Уроки Photoshop


Процитировано 124 раз
Понравилось: 1 пользователю



solaris50   обратиться по имени Пятница, 13 Февраля 2009 г. 16:00 (ссылка)
Ответить С цитатой В цитатник
_LexIncorp_   обратиться по имени Пятница, 13 Февраля 2009 г. 16:11 (ссылка)
круто
Ответить С цитатой В цитатник
avalona   обратиться по имени Пятница, 13 Февраля 2009 г. 16:39 (ссылка)
_LexIncorp_, спасиб! Себе будешь делать? :)
Ответить С цитатой В цитатник
Перейти к дневнику
Перейти к дневнику

Пятница, 13 Февраля 2009 г. 16:40ссылка
опять я тупанула и ответила не в ветвь )))
Перейти к дневнику

Пятница, 13 Февраля 2009 г. 16:41ссылка
Почему не будешь? :(
Перейти к дневнику

Пятница, 13 Февраля 2009 г. 16:41ссылка
я уже говорил про моргашки-анимашки
Перейти к дневнику

Пятница, 13 Февраля 2009 г. 16:43ссылка
Ну можно же сделать мягкие - нераздражаюшие ;) И мигание раз в 30 секунд поставить )))
avalona   обратиться по имени Пятница, 13 Февраля 2009 г. 16:39 (ссылка)
solaris50, рада помочь ;)
Только убирайте из "спасибо" ссылку на radikal
Ответить С цитатой В цитатник
ToKiTo4Ka   обратиться по имени Пятница, 13 Февраля 2009 г. 17:26 (ссылка)
Спасибо, Солнце! Пригодится! С наступающим!
Ответить С цитатой В цитатник
Перейти к дневнику
Rele_Vremeni   обратиться по имени Мне понравилось, попробую сделать Суббота, 14 Февраля 2009 г. 08:13 (ссылка)
Исходное сообщение avalona
В этом уроке я расскажу как сделать баннеры для собственного сайта или блога на примере работ для сайта http://scottish-straight.ru.
Для начала решите, какой вы хотите сделать баннер. Он может быть любой, но чаще всего используются следующие размеры:
468x60






125x125


120X90

100x100

120x60

88x31




После того как вы определились с размером, откройте 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.
Картинка готова! Теперь нужно превратить ее в баннер. Для этого надо залить ее на любой доступный сервер (Я использую Яндекс.Фотки) и получить ссылку на изображение.
Теперь пишем код, для того, чтобы наш баннер был кликабельным и ссылался на ваш сайт: . Получаем вот такую кликабельную картинку:

И последний штрих: надо сделать тематическую подпись к картинке, чтобы при наведении мышкой на баннер, появлялось красивая надпись, а не рабочее имя файла. Вот так:

Для этого в предыдущий код добавляем title="ваша_надпись" и получаем: .
Все готово!
Теперь этот код вы можете вставлять в любое поле, поддерживающее html.
Урок подготовила avalona
Ответить С цитатой В цитатник
Irina_Ball   обратиться по имени Суббота, 14 Февраля 2009 г. 09:20 (ссылка)
Очень интересно
Ответить С цитатой В цитатник
Ptisa_Lucy   обратиться по имени Суббота, 14 Февраля 2009 г. 11:05 (ссылка)
Спасибо, интересно. Сейчас нет, но, все может быть! :)
С праздником!
Ответить С цитатой В цитатник
Перейти к дневнику
SCORPION1989   обратиться по имени Суббота, 14 Февраля 2009 г. 11:55 (ссылка)
Мало эффектов на таких баннерах и это большой минус.

---
WaReZ from SCORPION
Astrological World
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 14 Февраля 2009 г. 13:16ссылка
SCORPION1989, а какие бы ты еще эффекты сделал?
GDiN   обратиться по имени Суббота, 14 Февраля 2009 г. 12:25 (ссылка)
Всё супер, красиво, но когда читаешь рябит и глазки быстро устают...
da7c98b19213 (250x250, 54Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 14 Февраля 2009 г. 12:26ссылка
если у вас FireFox, нажмите Esc и перестанет
Перейти к дневнику

Суббота, 14 Февраля 2009 г. 13:14ссылка
о! А я и не знала. Спасбо за урок
reginana   обратиться по имени Суббота, 14 Февраля 2009 г. 13:53 (ссылка)
Большое спасибо!:)
Ответить С цитатой В цитатник
борисюлька   обратиться по имени Воскресенье, 15 Февраля 2009 г. 01:42 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
ВСЕ_ДЛЯ_ДУШИ   обратиться по имени спасибо,милая за помощь!за интересный пост! Воскресенье, 15 Февраля 2009 г. 02:40 (ссылка)



www.gifzona.ru Лучшие оценки!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 26 Июля 2010 г. 22:27ссылка
А как такую сверкающюю девушку сделать. Напишите плиз
Kapitoshka_N   обратиться по имени Воскресенье, 15 Февраля 2009 г. 06:58 (ссылка)
Спасибо!Пригодится!
Ответить С цитатой В цитатник
Елена_Розова   обратиться по имени Воскресенье, 15 Февраля 2009 г. 13:41 (ссылка)
Здорово! Спасибо!!!!
Посмотреть на Яндекс.Фотках
Ответить С цитатой В цитатник
Topbot30   обратиться по имени Воскресенье, 15 Февраля 2009 г. 16:35 (ссылка)
Вы попали в top30 на яндексе самых обсуждаемых тем в блогосфере. Поэтому копия вашего поста доступна в ленте по ссылке
Почитать текст со всеми комментариями можно тут
Это Ваш 20-й ТОПовый пост за последний год. Посмотреть статистику автора можно тут.
Кризиса нет, есть Блогун © НадежныйИсточник
Ответить С цитатой В цитатник
Аноним   обратиться по имени Пятница, 12 Июня 2009 г. 00:03 (ссылка)
Спасибо большое)))
Ответить С цитатой В цитатник    |    Не показывать комментарий
Аноним   обратиться по имени клан Пятница, 12 Июня 2009 г. 16:40 (ссылка)
111
 (468x60, 47Kb)
Ответить С цитатой В цитатник
Аноним   обратиться по имени клан Пятница, 12 Июня 2009 г. 17:40 (ссылка)
Клан
 (179x66, 43Kb)
Ответить С цитатой В цитатник
EgoEl   обратиться по имени Среда, 16 Сентября 2009 г. 20:08 (ссылка)
простенько!
Ответить С цитатой В цитатник
Аноним   обратиться по имени Понедельник, 25 Января 2010 г. 18:19 (ссылка)
Спасибо-спасибо-спасибо!
Ответить С цитатой В цитатник    |    Не показывать комментарий
nui4to   обратиться по имени Воскресенье, 04 Апреля 2010 г. 00:05 (ссылка)
Мерси.
Ответить С цитатой В цитатник
Аноним   обратиться по имени Суббота, 12 Июня 2010 г. 12:32 (ссылка)
еперь переходим к анимации. Для этого идем в Window --> ставим галочку на Animation.
Ответить С цитатой В цитатник    |    Не показывать комментарий
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку