Регистрация / Вход

Помощь сайту

Понравился сайт? Внесите вклад в его развитие, пожертвовав любую сумму на один из кошельков или отправив SMS:


МуравейR131473649041

Z558546585090


Книжка410011044538287


    

     RBK       RU623180834


Письмо Отправить SMS

(от 5 руб.)


Деньги пойдут на оплату серверов и на развитие сайта.

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.


Администрация сайта.


Пользователи, внесшие вклад

Друзья


группа Учимся работать в компьютерных программах

Кто на сайте

Сейчас 270 гостей онлайн

Designed by:
Reseller hosting Joomla Templates
Hosting services
Главная Уроки анимации в фотошопе Создаём анимированный баннер для Вашего сайта
Создаём анимированный баннер для Вашего сайта
Работа с фотошопом - Уроки анимации в фотошопе
Автор: NON   
27.03.2010 22:24


оздаём анимированный баннер для Вашего сайта
В этом уроке по работе с фотошопом я покажу как можно совсем несложно создать инимированный баннер с рекламой или другим подходящим для Вашего сайта текстом.
Откроем исходник для баннера, его размер 468х60. Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать здесь. А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.
Выберем инструмент "Горизонтальный текст".
Напишем на нашем баннере любой текст, я выбрал подходящий для своего сайта.
Добавим к тексту стиль слоя. Для этого в палитре слои нажмём на вторую слева иконку fx и выберем стиль "тень".
Появится диалоговое окно "Стиль слоя", выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.
Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём "Да".
Наш текст преобразился.
Отключим видимость слоя с текстом и добавим новый текстовый слой. Что-нибудь напишем.
Чтобы придать новому слою те же стили слоя, зажмём клавишу Alt и перетащим значок fx с первого текстового слоя на второй.
Наш верхний слой получил те же параметры стиля слоя, что и у первого текстового слоя.
Таким же образом создадим третий текстовый слой и придадим ему те же эффекты.
И наконец создадим последний слой с теми же стилями слоя.
Всего получилось четыре слоя с текстом.
Разблокируем наш основной слой "Задний план". Для этого левой кнопкой мыши два раза щёлкнем по нему. Появится окно "Новый слой", в котором ничего не меняем, а просто нажимаем "Да".
Простым перетаскиванием "Слоя 0" на вторую справа иконку создания нового слоя создадим три копии слоя "Слой 0".
Расположим эти слои так, что бы под каждым текстовым слоем находилась копия "Слоя 0".
Делаем активным текстовый слой, нажимаем сочетание клавиш Ctrl+E. Тем самым, мы сливаем вместе активный текстовый слой и расположенную под ним копию "Слоя 0".
Так делаем со всеми слоями. В результате у нас останется всего четыре слоя. На этом подготовительная работа закончена.
Открываем палитру "Анимация". Для этого выбираем "Окно - Анимация".
Мы увидим палитру "Анимация".
Нажмём на стрелочку, расположенную в верхнем правом углу палитры и в открывшемся списке выберем "Создать кадры из слоёв".
Так как, у нас четыре слоя, то в палитре "Анимация" появится четыре кадра.
Выберем время в течении которого будет показываться каждый кадр. Для этого нажимаем на чёрную стрелочку каждого кадра, находящуюся в нижнем правом углу каждого кадра и в раскрывающемся меню выбираем необходимое нам значение.
Затем нажимаем на чёрную стрелочку под первым кадром и выбираем параметры показа анимации - будет показана один раз, всегда или можно выбрать необходимое количество раз. Я выбрал всегда.
Далее нажимаем на стандартную кнопку проигрывания анимации и смотрим что у нас получилось.
Сохранеяем нашу анимацию. Идём в "Файл - Сохранить для Web" или просто нажимаем Alt+Ctrl+Shift+S.
В появившемся окне ставим формат Gif, выбираем 256 цветов и нажимаем "Save" (сохранить).
В окне сохранения документа выбираем папку, куда мы будем сохранять файл, пишем название для анимации и нажимаем "Сохранить".
Вот что у нас получилось.

В этом уроке по работе с фотошопом я покажу как можно совсем несложно создать анимированный баннер с рекламой или другим подходящим для Вашего сайта текстом.



Подобные публикации:

top-iconНаверх


Откроем исходник для баннера, его размер 468х60. Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать здесь. А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.




Выберем инструмент "Горизонтальный текст".




Напишем на нашем баннере любой текст, я выбрал подходящий для своего сайта.




Добавим к тексту стиль слоя. Для этого в палитре "Слои" нажмём на вторую слева иконку fx и выберем стиль "Тень".




Появится диалоговое окно "Стиль слоя", выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.




Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём "Да".




small;">Наш текст преобразился.




Отключим видимость слоя с текстом и добавим новый текстовый слой. Что-нибудь напишем.




Чтобы придать новому слою те же стили слоя, зажмём клавишу Alt и перетащим значок fx с первого текстового слоя на второй.




Наш верхний слой получил те же параметры стиля слоя, что и у первого текстового слоя.




Таким же образом создадим третий текстовый слой и придадим ему те же эффекты.




И наконец создадим последний слой с теми же стилями слоя.




Всего получилось четыре слоя с текстом.




Разблокируем наш основной слой "Задний план". Для этого левой кнопкой мыши два раза щёлкнем по нему. Появится окно "Новый слой", в котором ничего не меняем, а просто нажимаем "Да".




Простым перетаскиванием "Слоя 0" на вторую справа иконку создания нового слоя создадим три копии слоя "Слой 0".




Расположим эти слои так, что бы под каждым текстовым слоем находилась копия "Слоя 0".




Делаем активным верхний текстовый слой, нажимаем сочетание клавиш Ctrl+E. Тем самым, мы сливаем вместе верхний активный текстовый слой и расположенную под ним копию "Слоя 0".




Так же делаем со всеми слоями. В результате у нас останется всего четыре слоя. На этом подготовительная часть работы по созданию анимации закончена.




Открываем палитру "Анимация". Для этого выбираем "Окно - Анимация".




Мы увидим палитру "Анимация".




Нажмём на стрелочку, расположенную в верхнем правом углу палитры и в открывшемся списке выберем "Создать кадры из слоёв".




Так как, у нас четыре слоя, то в палитре "Анимация" появится четыре кадра.




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




Затем нажимаем на чёрную стрелочку под первым кадром и выбираем параметры показа анимации - будет показана один раз, всегда или можно выбрать необходимое количество раз. Я выбрал "Всегда".




Далее нажимаем на стандартную кнопку проигрывания анимации и смотрим что у нас получилось.




Сохранеяем нашу анимацию. Идём в "Файл - Сохранить для Web" или просто нажимаем Alt+Ctrl+Shift+S.




В появившемся окне ставим формат Gif, выбираем 256 цветов и нажимаем "Save" (сохранить).




В окне сохранения документа выбираем папку, куда мы будем сохранять файл, пишем название для анимации и нажимаем "Сохранить".




Вот что у нас получилось.




Не забывайте, что на сайтах можно смотреть не только на баннеры и другую рекламу, но и фильмы смотреть онлайн, причём совершенно бесплатно и без всякой регитсрации. Пример такого сайта - RuMovie.net.

top-iconНаверх


Комментарии
Добавить новый
Анонимно   |Ваш IP адрес -178.187.143.xxx |2010-04-28 23:54:01
:arrow:
Анонимно   |Ваш IP адрес -178.187.143.xxx |2010-04-28 23:54:17
:0 :0 :0
flash  - баннеры   |Ваш IP адрес -84.19.181.xxx |2010-12-13 01:32:51
Спасибо!
Хорошый учебник!
Денис  - Photoshop cs3   |Ваш IP адрес -109.171.9.xxx |2010-12-13 01:33:01
Спасибо !! Класный материал ! Я научился!!
Наталья   |Ваш IP адрес -93.190.203.xxx |2010-12-13 01:33:09
Это самый лучший и подробный материал по созданию баннера. Я перерыла кучу сайтов, где этому учат и поверьте мне, тут самая понятная и точная информация. Только благодаря Вам и научилась их создавать.Большое спасибо.
admin77   |SAdministrator |2010-08-27 03:00:15
Не за что!
Алексей   |Ваш IP адрес -87.252.227.xxx |2010-12-13 01:33:19
:woohoo: Лучшее описание по созданию банера!!!!!!!!!!!!!!
romJkeeee  - СПОСИБО.   |Ваш IP адрес -94.143.240.xxx |2010-09-21 03:29:15
Огромное спосибо :!: .Раньше не доходило.А тут всё просто и легко.Смосибо сайту.Точно регнусь! :lol:
romJkeeee  - УРА   |Ваш IP адрес -94.143.240.xxx |2010-09-21 03:30:10
АДМИН САМЫЙ КРУТОЙ чувак :woohoo:
рома  - Спосибо.   |Ваш IP адрес -81.24.80.xxx |2010-12-17 01:39:04

Споибо!!!!!!!!!!
Анонимно   |Ваш IP адрес -77.34.83.xxx |2010-11-16 12:03:27
спс!долго думал как создать аминацию на шапку для сайта и вот нашёл свой ОТВЕТ! :)
Анонимно   |Ваш IP адрес -77.40.29.xxx |2010-12-02 23:40:38
Спасибо, все понятно описано!!! :woohoo:
Александр   |Ваш IP адрес -109.184.236.xxx |2010-12-10 16:47:41
Спасибо огромное за статью! Два дня мучился с этим анимированным банером пока на эту статью не наткнулся. Как прочёл, получилось всё за 2 минуты.
Анастасия   |Ваш IP адрес -89.221.200.xxx |2010-12-23 20:26:52
Спасибо Вам огромное!!!! Очень полезная статья!!!
admin77   |SAdministrator |2010-12-23 20:28:32
Большое всем спасибо за хорошие отзывы!
Анонимно   |Ваш IP адрес -92.240.208.xxx |2011-01-22 19:04:43
Спасибо большое :!: Ваще класс :!: B) :woohoo:
//////////////////////////////   |Ваш IP адрес -94.50.1.xxx |2011-01-24 22:48:09
:X
Александр   |Ваш IP адрес -83.149.3.xxx |2011-02-20 15:59:53
спасибо дольшое за такие уроки!все сделал как вы описали и получилось с первого раза!БОЛЬШОЕ СПАСИБО!!!!
KR1T  - EEEE   |Ваш IP адрес -95.221.185.xxx |2011-02-20 21:21:28
Ваще кулл!!Только здесь по понятному нашел как делать!!!Спасибо огромное!))
alex11  - помогите!!!   |Registered |2012-05-08 20:27:42
Доброе времени суток!дайте пожайлуста подробный урок как сделать как тут=>

http://....
admin77  - re: помогите!!!   |SAdministrator |2012-05-08 20:27:27
[quote=alex11]Доброе времени суток!дайте пожайлуста подробный урок как сделать как тут=>

http://.....

Мне кажется, если внимательно посмотреть этот урок, то бегущую строку будет создать нетрудно. В ближайшее время будет несколько публикаций по теме анимации текста. Заходите!
Анонимно   |Ваш IP адрес -77.79.175.xxx |2011-03-04 02:59:23
спасиб :side:
Анонимно   |Ваш IP адрес -85.175.236.xxx |2011-03-18 22:50:51
:angry: :0 :confused: B) :evil: :silly: :dry: :lol: :kiss: :D :pinch: :( :shock: :X :side: :) :P :unsure: :woohoo: :huh: :whistle: ;) :s :!: :?: :arrow: :idea:
Анатолий   |Ваш IP адрес -93.178.79.xxx |2011-04-19 12:15:59
Самый лучшее объяснение!!!
admin77   |SAdministrator |2011-04-19 23:46:14
Всем большое спасибо за хорошие отзывы об уроке! :D
Ирина   |Ваш IP адрес -217.18.157.xxx |2011-04-20 10:07:10
Замечательный урок!!!Очень помог в работе! Спасибо огромное.
admin77   |SAdministrator |2011-04-20 21:50:52
Спасибо за хороший отзыв!
Натали   |Ваш IP адрес -62.16.94.xxx |2011-04-26 17:34:27
ОГРОМНОЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО!!!
admin77   |SAdministrator |2011-04-26 22:40:47
Спасибо, что посмотрели урок.
OlgaBr   |Ваш IP адрес -80.254.148.xxx |2011-04-28 14:22:32
Ура!!!!!! У меня получилось !!! Счастью нет предела!! Очень понятно, доступно, легко !!! Теперь надо оттачивать мастерство )))))
Спасибо огромное !!!
OlgaBr  - баннеры с картинками   |Ваш IP адрес -80.254.148.xxx |2011-04-28 15:33:58
Подскажите, пожалуйста, где посмотреть урок и вообще как научиться делать баннеры с картинками, логотипами? Баннер с текстом у меня получился. Но только текста недостаточно, мне надо чтобы менялись картинки.
Спасибо !!!!
OlgaBr   |Ваш IP адрес -80.254.148.xxx |2011-04-29 17:41:14
В самом начале урока Вы не сказали в какой момент надо заблокировать основной слой "Задний план". Я все делала по шагам и вдруг прочитал, что надо разблокировать основной слой "Задний план".....а он у меня не заблокирован, т.к. не было указания это сделать.
Пожалуйста,
уточните этот момент.
admin77   |SAdministrator |2011-04-30 00:21:52
Блокировать слой "Задний план" не надо! Когда Вы открываете любой файл в фотошопе, то Вы всегда видите один слой "Задний план" и он заблокирован!
Эд   |Ваш IP адрес -80.87.154.xxx |2011-05-08 01:37:02
Спасибо сайту и чуваку ,написавшему это!!! Даже я смог себе баннер замутить.. :woohoo:
Анонимно   |Ваш IP адрес -85.26.231.xxx |2011-05-30 21:13:08
:idea: :idea: :idea: :idea:
Призрак   |Ваш IP адрес -89.106.237.xxx |2011-06-09 00:02:17
Всё получилась с первого раза, спасибо вам огромное :cheer: :cheer:
Денчик   |Ваш IP адрес -109.187.158.xxx |2011-06-15 21:43:55
Спасибо вам давно искал это! :lol: :lol: :side: B) :silly:
admin77   |SAdministrator |2011-06-16 18:32:01
Большое спасибо за хорошие отзывы!!!
svetic   |Ваш IP адрес -195.239.83.xxx |2011-06-22 10:31:51
Спасибо!!!!Все классно и подробно описано, все получилось с 1 раза!!Лучшая статья на эту тему :D
Александр   |Ваш IP адрес -188.162.170.xxx |2011-07-02 02:36:54
И у меня получилось, большое спасибо за урок. Реально просто. :woohoo:
Nurzhan  - получилось )   |Ваш IP адрес -95.58.242.xxx |2011-07-28 12:11:30
:cheer: !!!получилось)
Роман  - СПАСИБО!!!!   |Ваш IP адрес -95.143.213.xxx |2011-07-30 18:04:08
Спасибо!
Спасибо за то, что не только делитесь опытом, но и подробно показываете как можно преодолевать трудности. :)
Влад  - не идет   |Ваш IP адрес -195.244.24.xxx |2011-09-02 20:50:29
Списибо большое за толковые разъяснения! У меня файл "меняется" в Программе просмотра изображений и факсов", а на сайте ***.NAROD.RU - просто статичная картинка :X
admin77   |SAdministrator |2011-09-02 20:56:09
Влад! Всё дело скорее всего в настройках Вашего сайта, очевидно анимация запрещена.
Анонимно   |Ваш IP адрес -95.25.161.xxx |2011-09-21 19:31:21
Спасибо Очень помог Учебник. РЕСПЕКТ :)
Гела  - не получается(((   |Ваш IP адрес -85.172.162.xxx |2011-09-21 20:37:38
Я все вроде бы сделала как надо, но когда сохраняю в "как Веб", то просто статичная картинка, в форошопе и имайджреди все нормально (в фотошопе анимации нет в имайдж - есть) ну вот делаю анимацию через имайдж и все норм, а когда перехожу в фотогоп, то становиться как до
анимации и сохраняю, а ничиго не получается.....((((
почему? :?:
admin77   |SAdministrator |2011-09-22 12:59:40
Гела! Если в фотошопе Вы сохраняете файл через 'Сохранить для Web', выбираете формат GIF и у Вас после сохранения анимация не проигрывается, то скорее всего дело в Вашей программе просмотра графических файлов (или там в настройках стоит запрет на на GIF ), попробуйте открыть
сохранённый файл в другой программе.
Макс   |Ваш IP адрес -178.184.105.xxx |2011-10-14 15:36:21
Спасибо ОГРОМНОЕ. Баннер получился. Все понятно и доходчиво
Владимир   |Ваш IP адрес -193.201.231.xxx |2011-10-26 04:36:37
Спасибо, все очень подробно и понятно!
Барби   |Ваш IP адрес -82.145.217.xxx |2011-11-18 12:04:07
Вообще круть.очень рада что все получилось!
Геннадий Синцерус  - Большое спасибо за этот урок   |Ваш IP адрес -176.52.4.xxx |2011-11-28 20:52:45
Потрясающе простой, понятный урок!
На других сайтах видеоуроки... Такая лабуда. Выделения, растушевки и прочая муть. Жалко времени потраченное на их изучение.А ведь в закладках этот урок у меня был давно...
Сегодня же размещу баннер на свой сайт. Он будет создан для обобщения
всех моих партнерских программ. Я работаю в западном сегменте Интернета.
Всего доброго. Большое спасибо!
Александра  - банер   |Ваш IP адрес -31.129.193.xxx |2011-12-05 09:20:48
Здравствуйте. Спасибо вам большое за урок. Но у меня возникла проблема - в фотошопе банер работает, а при его просмотре(открыть с помощью...) ничего не работает.
Как мне быть? Спасибо.
admin77   |SAdministrator |2011-12-05 11:15:01
Александра! Если Вы сохранили файл в формате GIF, то никаких проблем не должно быть. Может быть Ваша программа для просмотра изображений не поддерживает формат GIF, проблема может быть только в этом.
Сергей  - Создаём анимированный баннер для Вашего сайта   |Ваш IP адрес -89.28.60.xxx |2012-01-04 20:52:26
:woohoo: Спасибо! Очень толково! Благодаря Вам наконец-то всё получилось! Низкий Вам поклон! И Уважение!
Вова  - Не сохраняет   |Ваш IP адрес -95.179.93.xxx |2012-02-05 23:29:48
нажимаю Сохранить для Web пишет не достаточно памяти что делать банер анимация :?:
admin77   |SAdministrator |2012-02-06 01:16:11
Вова! У Вас не хватает оперативной памяти. Посмотрите материал вот в этой статье, возможно она Вам поможет -

link:http://www.photoshopsunduchok.ru/statyi/426- nastroyka4.html
Вова  - Не сохраняется   |Ваш IP адрес -95.179.93.xxx |2012-02-06 02:29:12
Её у меня дофига
MEFESTA   |Ваш IP адрес -46.249.30.xxx |2012-02-11 02:07:21
отличный урок!
спасибо
олег   |Ваш IP адрес -85.26.186.xxx |2012-02-11 05:11:43
СПАСИБО)))
олег  - ВОПРОС   |Ваш IP адрес -85.26.186.xxx |2012-02-11 05:21:42
СПАСИБО... А КАК СДЕЛАТЬ ДЕЙСТВИЕ- ОБРАТНОЕ CTRL+E
чтобы отредактировать, исправить текст?
admin77   |SAdministrator |2012-02-11 15:32:09
Олег! Нажмите Ctrl+Z и Вы вернётесь на одно действие назад. Чтобы последовательно вернуться на несколько шагов назад нажимайте ctrl + Alt + Z столько раз сколько нужно, чтобы вернуться назад к необходимому действию. А проще всего зайти в палитру "История" и сделать активным то
состояние, которое Вам нужно.
Нико   |Ваш IP адрес -94.255.98.xxx |2012-02-15 19:13:43
Posted image
Гадя   |Ваш IP адрес -83.239.230.xxx |2012-03-31 22:31:43
спасибо за статью!
эдуард   |Ваш IP адрес -109.225.20.xxx |2012-04-20 17:55:17
супер сайт спасибо вам огромно теперь я сам смог создать свой Баннер =)
Серж  - очень нужна помощь   |Ваш IP адрес -31.162.152.xxx |2012-05-08 18:25:24
банер сделал! спасибо очень доходчиво рассказали! но вот на сатйе он не отображается! помогите?
admin77   |SAdministrator |2012-05-08 20:29:21
Серж! Посмотрите настройки сайта, возможно что Gif файлы запрещены к размещению.
Юлия  - Не могу нормально сохранить баннер   |Ваш IP адрес -95.55.63.xxx |2012-05-17 23:51:44
Спасибо за описание создания анимированного баннера! но у меня проблема, когда я хочу сохранить баннер он у меня сохраняется в офис менеджере изображений и при раскрытии файла показывается только 1 слайд баннера! что делать - нужно чтобы всё показывалось! у меня фотошоп CS3
admin77   |SAdministrator |2012-05-18 02:52:08
Юлия! Не совсем понятно, что за офис менеджер изображений Вы используете, во всяком случае я с ним не работал. Объясните поподробнее.
Этот урок так же сделан в фотошопе CS3.
Сделайте как в уроке - сохраните получившийся результат через "Сохранить для Web", а потом выберите
место и имя файла.
Всё должно отлично работать.
Оставить комментарий
Имя:
Email:
 
Тема:
 
Русская редакция: www.freedom-ru.net & www.joobb.ru

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

Обновлено 19.09.2011 11:29
 

NEW

Хотите создать шикарную фотокнигу?


Фотокнига

Ответ здесь

Рассылка - "Практические советы и уроки по работе с фотошоп". Подписавшись на неё, Вы 1 раз в 10 дней будете получать на свой почтовый ящик ссылки на новые уроки по работе в программе Adobe Photoshop и на другие полезные материалы!


Ваше имя: *
Ваш e-mail: *
Подписчиков:

Получите Ваши подарки - подробности.

Что в сундучке?

  • Уроков - 523
  • Программ - 6
  • Статей - 29
  • Советов - 72
  • Шаблонов, обоев и клипартов - 240
  • Наборов кистей - 215
  • Календарей - 32
  • Наборов рамок - 155
  • Книг - 16
  • Текстур и фонов - 17
  • Наборов иконок - 24
  • Наборов логотипов - 3
  • Видеоуроков - 394
  • Стилей - 8
  • Шрифтов - 77
  • Журналов Фотомастерская - 23



Наша RSS лента

Подпишитесь
Все новости с  сайта PhotoshopSunduchok.ru

Птичка твиттера

PhotoshopSunduchok

на

You Tube

You Tube

Каталог@MAIL.RU - каталог ресурсов интернет Rambler's Top100 Яндекс цитирования Яндекс.Метрика

Работа с фотошопом, уроки фотошопа на русском бесплатно, обработка фотографий в фотошопе
Автор сайта: Накрошаев Олег, Все права защищены Copyright, © 2009-2012