-Цитатник

Просто жить, не думать, не бежать, Просто жить и осенью дышать... - (1)

Просто жить, не думать, не бежать, Просто жить и осенью дышать... ***Здесь будет текст*** ...

Рамочка "И хочется укутаться в тепло, глядеть в огонь и треск поленьев слушать… " - (0)

Рамочка "И хочется укутаться в тепло, глядеть в огонь и треск поленьев слушать… " Здесь будет ...

Рамочка "С Днем Рождения!" - (0)

Рамочка "С Днем Рождения!" Ваш текст... Ваш текст...

С днем рождения, октябрьские именинники! - (0)

С днем рождения, октябрьские именинники! Код коллажа:

Осенние кнопочки перехода - (0)

Осенние кнопочки перехода Осенние кнопочки перехода ...

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

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

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

 

 -Интересы

любопытный

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 10.02.2009
Записей: 18229
Комментариев: 354642
Написано: 415761


Баннер

Вторник, 02 Марта 2010 г. 21:16 + в цитатник
Цитата сообщения avalona Как сделать мигающий баннер в Photoshop'e



В этом уроке я расскажу как сделать баннеры для собственного сайта или блога на примере работ для сайта 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

Рубрики:  фотографии
разное
зима
страны и города
цитаты друзей
Метки:  

Ray_Sunset   обратиться по имени Вторник, 02 Марта 2010 г. 21:45 (ссылка)
укачивает(
Ответить С цитатой В цитатник
 

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

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

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

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