Создаём анимированный баннер для Вашего сайта
В этом уроке по работе с фотошопом я покажу как можно совсем несложно создать анимированный баннер с рекламой или другим подходящим для Вашего сайта текстом.
Подобные публикации:
- видеоурок "Как сделать текстовый баннер в фотошопе"
- видеоурок "Как сделать баннер для сайта"
- урок "Создаём анимированную кнопку для Вашего сайта"
{smooth-scroll-top}
Откроем исходник для баннера, его размер 468х60. Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать здесь. А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.
Выберем инструмент "Горизонтальный текст".
Напишем на нашем баннере любой текст, я выбрал подходящий для своего сайта.
Добавим к тексту стиль слоя. Для этого в палитре "Слои" нажмём на вторую слева иконку fx и выберем стиль "Тень".
Появится диалоговое окно "Стиль слоя", выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.
Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём "Да".
small;">Наш текст преобразился.
Отключим видимость слоя с текстом и добавим новый текстовый слой. Что-нибудь напишем.
Чтобы придать новому слою те же стили слоя, зажмём клавишу Alt и перетащим значок fx с первого текстового слоя на второй.
Наш верхний слой получил те же параметры стиля слоя, что и у первого текстового слоя.
Таким же образом создадим третий текстовый слой и придадим ему те же эффекты.
И наконец создадим последний слой с теми же стилями слоя.
Всего получилось четыре слоя с текстом.
Разблокируем наш основной слой "Задний план". Для этого левой кнопкой мыши два раза щёлкнем по нему. Появится окно "Новый слой", в котором ничего не меняем, а просто нажимаем "Да".
Простым перетаскиванием "Слоя 0" на вторую справа иконку создания нового слоя создадим три копии слоя "Слой 0".
Расположим эти слои так, что бы под каждым текстовым слоем находилась копия "Слоя 0".
Делаем активным верхний текстовый слой, нажимаем сочетание клавиш Ctrl+E. Тем самым, мы сливаем вместе верхний активный текстовый слой и расположенную под ним копию "Слоя 0".
Так же делаем со всеми слоями. В результате у нас останется всего четыре слоя. На этом подготовительная часть работы по созданию анимации закончена.
Открываем палитру "Анимация". Для этого выбираем "Окно - Анимация".
Мы увидим палитру "Анимация".
Нажмём на стрелочку, расположенную в верхнем правом углу палитры и в открывшемся списке выберем "Создать кадры из слоёв".
Так как, у нас четыре слоя, то в палитре "Анимация" появится четыре кадра.
Выберем время, в течении которого будет показываться каждый кадр. Для этого нажимаем на чёрную стрелочку, находящуюся в нижнем правом углу каждого кадра и в раскрывающемся меню выбираем необходимое нам значение.
Затем нажимаем на чёрную стрелочку под первым кадром и выбираем параметры показа анимации - будет показана один раз, всегда или можно выбрать необходимое количество раз. Я выбрал "Всегда".
Далее нажимаем на стандартную кнопку проигрывания анимации и смотрим что у нас получилось.
Сохранеяем нашу анимацию. Идём в "Файл - Сохранить для Web" или просто нажимаем Alt+Ctrl+Shift+S.
В появившемся окне ставим формат Gif, выбираем 256 цветов и нажимаем "Save" (сохранить).
В окне сохранения документа выбираем папку, куда мы будем сохранять файл, пишем название для анимации и нажимаем "Сохранить".
Вот что у нас получилось.
Не забывайте, что на сайтах можно смотреть не только на баннеры и другую рекламу, но и фильмы смотреть онлайн, причём совершенно бесплатно и без всякой регитсрации. Пример такого сайта - RuMovie.net.
{smooth-scroll-top}
Временно закрыто комментирование для гостей, нужна обязательная регистрация, ввиду засилья спамботов.
зарегистрируйтесь на сайте, что бы оставлять комментарии!
Комментарии
Лучше заказать у профессианалов !
It's awesߋme to come across a blog every once in a ѡhile that iѕn't
the samе unwanted rehashed information. Excellent read!
I'ѵe bookmarked your sitе and I'm adding your RSS feeds
What host are you using? Can I am getting your affiliate hyperlink
for your host? I want my web site loaded up as quickly as yours lol
And i am satisfied studying your article.
But should statement on some normal issues, The websitе taste is ǥreat,
the articles is truly excellent : D. Good job, cheerѕ
take advantage from it I am sure.
my աebsite;
:-)
Всё понятно. Я думаю, что этот урок пригодится мне для моей странички в Яндекс фотках. Ещё раз спасибо! :-)
Я как раз искала подобные уроки.
Попробуйте перезалейте баннер, возможно что-то произошло при его закачке на сайт. И напишите в службу поддержки хостинга, где расположен Ваш сайт.
Этот урок так же сделан в фотошопе CS3.
Сделайте как в уроке - сохраните получившийся результат через "Сохранить для Web", а потом выберите место и имя файла.
Всё должно отлично работать.
https://....
https://.....
Мне кажется, если внимательно посмотреть этот урок, то бегущую строку будет создать нетрудно. В ближайшее время будет несколько публикаций по теме анимации текста. Заходите!
чтобы отредактировать, исправить текст?
спасибо
www.photoshopsunduchok.ru/statyi/426-nastroyka4.html
Как мне быть? Спасибо.
На других сайтах видеоуроки... Такая лабуда. Выделения, растушевки и прочая муть. Жалко времени потраченное на их изучение.А ведь в закладках этот урок у меня был давно...
Сегодня же размещу баннер на свой сайт. Он будет создан для обобщения всех моих партнерских программ. Я работаю в западном сегменте Интернета.
Всего доброго. Большое спасибо!
почему? :-?:
Спасибо за то, что не только делитесь опытом, но и подробно показываете как можно преодолевать трудности. :-)
Пожалуйста, уточните этот момент.
Спасибо !!!!
Спасибо огромное !!!
Хорошый учебник!