Доброго времени суток!
Давно хотела научиться делать не простые баннеры, а АНИМИРОВАННЫЕ.
Шаг 1. Мы создаем в фотошопе новый файл:
Шаг 2. Выдираем нужный нам цвет подложки. У меня это как всегда фиолетовый:
Шаг 3. Начинаем создавать наши слои.
Шаг 5. Каждый отдельный слой баннера группируем - то есть объединяем слои которые мы делали для нашего баннера. У меня это Слой подложка + слой с картинкой + слой с текстом. И таких слоев у меня получилось 6 шт.
При сохранении ОБЯЗАТЕЛЬНО выбираем формат GIF
<a href="АДРЕС САЙТА на который будет ссылаться баннер"><img border="0" height="42" src="URL вашего картинки баннера"></a>
Давно хотела научиться делать не простые баннеры, а АНИМИРОВАННЫЕ.
И вот когда встал вопрос о том, что анимированный баннер мне заказали сделать для сайта визитки а я не знаю как( тут то я и поняла что обучение больше откладывать нет смысла.
Ну и естественно я весь процесс описываю для Вас дорогие мои читатели. Надеюсь Вам тоже пригодится это умение.
Шаг 1. Мы создаем в фотошопе новый файл:
Шаг 2. Выдираем нужный нам цвет подложки. У меня это как всегда фиолетовый:
Шаг 3. Начинаем создавать наши слои.
слой с фоном подложки следует сделать Дубликат (количество этих дубликатов зависит от того сколько слоев в баннеры Вы планируете сделать).
Затем мы на каждый из слоев подложек делаем рисунки или добавляем картинки / текст - все что Вы хотите что бы содержал конкретный слой баннера.
Шаг 4. Пишем послойно текст - на каждый слой подложки к добавленным рисункам еще добавляем и текст. У меня он к примеру разный на всех слоях. Написав текст настройте Параметры наложения слоя. Я выбрала внешнее свечение и тень, которую немного сдвинула....
Шаг 5. Каждый отдельный слой баннера группируем - то есть объединяем слои которые мы делали для нашего баннера. У меня это Слой подложка + слой с картинкой + слой с текстом. И таких слоев у меня получилось 6 шт.
Шаг 6. После того как все слои для будущего баннера готовы мы приступаем к самому интересному. Его непосредственному созданию. Для этого нужно открыть окно Анимации как показано на рисунке а. ( у меня же такого пункта не обнаружилось, поэтому я воспользовалась вариантом b. в правом верхнем углу я развернула 3D и выбрала Движение)
Шаг 7. Почти кульминация. В появившемся окошке Шкалы времени мы ищем кнопочку как показано на рисунке ниже стрелочкой и в появившемся окошке выбираем СОЗДАТЬ КАДРЫ ИЗ СЛОЕВ.
Шаг 7. К сожалению скриншот данного шага у меня упорно отказывался делаться, поэтому я воспользовалась чужим (за что очень стыдно, но надеюсь я буду прощена). И так как показано ниже Нам следует выбрать на сколько секунд будет задерживаться каждый кадр баннера.
Шаг 8. Завершение. Вот мы с Вами и создали нашщ баннер, теперь остается его только правильно сохранить. Для этого открываем окошко Сохранить для Web:
При сохранении ОБЯЗАТЕЛЬНО выбираем формат GIF
Жмем сохранить и остается только установить Ваш баннер. Я устанавливала его просто через установку картинки и добавила на нее ссылку. Можноже воспользоваться HTML кодом в который вставить URL адрес картинки и URL адресс сайта на который эта картинка будет ссылаться:
<a href="АДРЕС САЙТА на который будет ссылаться баннер"><img border="0" height="42" src="URL вашего картинки баннера"></a>
ВОТ что получилось у меня:
видео на тему:
Как всегда с наилучшими пожелания Вам,
Велерея.
Спасибо большое! Я примерно знакома с этой системой создания, но банер делала не с помощью фотошопа, а с помощью другой программки (честно уже не помню название) там делаешь одинаковые картинки на каждой пишешь текст сохраняешь (на пример5-6 картинок) и вставляешь в ту программку и она уже сама соединяет между собой картинки. Нужно попробовать с фотошопом:)
ОтветитьУдалитьсразу беру в избранное.
ОтветитьУдалитьНата, огромное спасибо за пошаговое разъяснение. Мне баннеры всегда делает сын. Но он часто занят и его не всегда допросишся. Буду учиться по вашей инструкции, шаг за шагом.
ОтветитьУдалитьНе за что Татьян, если будут какие вопросы спрашивайте я постараюсь разъяснить подробнее.
Удалить