Подумал тут, а почему бы не привлекать на свой новый блог (ну на этот самый блог) посетителей со своего старого проекта? Ну там посещалка приличная и если трафик не «вышел» через AdSense, то его можно направить сюда (вот я сволочь!). Размещу небольшой и «скандальный» баннер и буду получать хотя бы +10-15 уников в сутки.

Когда-то уже писал про «Создание flash баннера в Adobe Flash», но это было давно и сейчас установленного Adobe Flash у меня на ноутбуке нет. Да и вообще, с flash достаточно сложно работать и процесс разработки небольшого баннера размером 200×200 пикселей может затянуться на целый вечер. Лучше уж потратить 20 минут и создать простой GIF баннер в Adobe Photoshop!

Сейчас расскажу, как это можно быстро сделать.

Лично у меня установлено сразу несколько версий: Adobe Photoshop CS4 (с такой синенькой иконкой) и Adobe Photoshop CS2 (беленькая иконка с пёрышком и в комплекте идёт программа Adobe ImageReady для работы с анимацией). Первый более современный и в нём больше возможностей, но вот второй без тормозов работает на моём ноутбуке (я и дизайн сайтов в нём рисую! А что?). Буду работать с CS2, но и про CS4 не забуду в статье.

Для начала нам необходимо подготовить кадры для нашего анимационного баннера. 3-4 штуки будет достаточно для первого опыта. Я просто взял понравившуюся картинку из Яндекс.Картинки, логотип блога и соединил их в одно единое, сделав границу в 1px (с границей как-то прикольнее что ли).

Второй и третий кадр вместо картинки будет содержать рекламный текст! Ну что бы привлечь посетителя придумаем что-нибудь загадочное, глупое и вместе с тем весёлое: «А пусть рыбка будет зарабатывать денежки в сети с помощью моих советов на блоге!». Что может быть тупее? Согласен. Ну я же Хулиган, хоть и онлайн!

Так появились кадры с текстом «У меня рыбка зарабатывает больше, чем ты!» и «А всё потому, что подписалась на RSS!».

Сохраняем их как отдельные картинки на компьютере и называем 1.jpg, 2.jpg и 3.jpg – нам с ними придётся работать в Adobe ImageReady. Для тех, у кого версия Photoshop выше CS2, у вас уже встроена функция работы с анимацией (в главном меню вкладка «Окно» – «Анимация»). Для таких как я ламеров открываем программу ImageReady и загружаем туда наши 3 картинки.

Переносим все картинки на одну из них (основную) так, что бы остальные легли сверху слоями в той последовательности, которая необходима для GIF баннера.

Затем необходимо создать на панели «Анимация» такое количество кадров, что бы они соответствовали числу наших картинок (ну по одному кадру для каждого изображения, что не понятного?).

Кликаем на первый кадр в «Анимация» и в окне «Слои» для этого кадра выставляем приоритеты показа необходимого слоя. Ну первый раз я и сам не понял, но делается это с помощью выставления непрозрачности для остальных кадров (ненужных для этого) равных 0%. Для нужного же слоя выставляем непрозрачность равную 100%. Для остальных кадров процесс тот же, просто стоит быть внимательным и не запутаться (если не разобрались – спрашивайте в комментариях).

Затем выставляем для каждой картинки необходимую длину показала в секундах – лично мне необходимо, что бы каждая из картинок показывалась по 2 секунды, затем сменялась другой и так далее.

Теперь просто запускаем анимацию с помощью кнопки на панели окна «Анимация» и любуемся на работу нашего GIF баннера. Красиво? Ещё бы!

Вот и всё. Теперь для гордых владельцев Adobe Photoshop CS2 и ImageReady переходим «Файл» – «Редактировать в Photoshop» и уже там сохраняем файл «Файл» – «Сохранить как…» – «1.gif», а для современных ребят с Adobe Photoshop CS3 и выше просто сохраняем файл в формате GIF. Можно проверить с помощью открытия файла в любом браузере – если двигается, то всё верно.

Кстати, в Adobe ImageReady можно сразу же сохранить анимацию в flash формате даже без работы с Adobe Flash. Для этого переходом «Файл» – «Экспортировать» – «Micromedia Flash CWF» – «1.swf».

Вот и всё! Загружаем на FTP и вызываем с помощью виджетов на нужном вам сайте как картинка – ссылка.

Как вам такая милая чушь?

Опубликовано в разделе: Дизайн Метки: баннер