Новости сайта и форума Sibmama 
КУДА СХОДИТЬ В НОВОСИБИРСКЕ С 28 МАРТА ПО 3 АПРЕЛЯ  
Побывать на настоящих Улётных каникулах, узнать, что такое мраморирование бумаги, поучаствовать в фотоквесте...
Как сделать анимированный баннер?
Помогите, пожалуйста.

На страницу 1, 2  След.

Сейчас эту тему просматривают: Нет  
 
Начать новую тему   Ответить на тему    Форумы » Дом и семья » Фотофорум. Все о фото
Категория: Сохранить в цитатник Закрыть окно  
Для сохранения части сообщения в цитатник выделите нужный текст в поле ниже, категорию цитаты и нажмите кнопку "на память". В случае, если требуется сохранить всё сообщение, достаточно только выбрать категорию и нажать упомянутую кнопку. Для отмены нажмите кнопку "закрыть окно".
Предыдущая тема :: Следующая тема  
Автор Сообщение
parfait
Аспирант Сибмамы
Аспирант Сибмамы


На сайте с 28.01.10
Сообщения: 2123
В дневниках: 2272
Откуда: Sib
Добавить в ЗакладкиСообщениеДобавлено: Чт Фев 03, 2011 13:04    Заголовок сообщения: Как сделать анимированный баннер? Ответить с цитатой

Добрый день, дорогие СибМамы и СибПапы!!!
Посмотрела темки- не смогла найти Как в Фотошопе Сделать
АНИМИРОВАННЫЙ БАННЕР!


Последний раз редактировалось: parfait (Сб Фев 05, 2011 12:04), всего редактировалось 1 раз
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник            
 
A.Potter
мудрый папа
мудрый папа


На сайте с 20.05.08
Сообщения: 4892
В дневниках: 7
Откуда: Russia, Barnaul
Добавить в ЗакладкиСообщениеДобавлено: Пт Сен 30, 2011 14:14     Ответить с цитатой

Вот простейший сайт-генератор любых картинок и баннеров: http://gifr.ru/
Или кого-то смущает фирменный ярлычек "gifr.ru" в правом верхнем углу картинки? :-)
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник            
 
parfait
Аспирант Сибмамы
Аспирант Сибмамы


На сайте с 28.01.10
Сообщения: 2123
В дневниках: 2272
Откуда: Sib
Добавить в ЗакладкиСообщениеДобавлено: Вс Окт 02, 2011 13:13     Ответить с цитатой

Отец Тук
Добрый день папа Тук!
Какой вы молодец! Посоветовали всем :-)
теперь не надо никому ничего изучать ,а просто залазишь в Гиф и все ок :-)
Скрытый текст:
На момент создания этой темы в ГифЗоне не было возможности анимировать авы и баннеры.

_________________
Счастливая мама лучшей Кузи на свете
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник            
 
yuliya_myod
Школьные годы
Школьные годы


На сайте с 23.10.11
Сообщения: 1251
В дневниках: 1
Откуда: Ленина, 12
Добавить в ЗакладкиСообщениеДобавлено: Вс Дек 18, 2011 18:00     Ответить с цитатой

Отец Тук

спасибо за наводку! :-)

а Вы не подскажете,как сделать так,чтобы картинка при клике выводила на мою тему,а не на гифр? :oops:
_________________
Лазерная эпиляция дешево и безболезненно
LPG массаж
Классический косметический массаж лица
Вернуться к началу
Посмотреть профиль Отправить личное сообщение            
 
Владимир_Хрусталев
бойкий папа
бойкий папа


На сайте с 14.10.11
Сообщения: 327
В дневниках: 3
Откуда: Новосибирск
Добавить в ЗакладкиСообщениеДобавлено: Пн Дек 19, 2011 9:28     Ответить с цитатой

:4U: :4U: :4U:

Дарю:

Обьясню на примере юзербара, но обычный баннер идет размером 460х60 пикселей.


Шаг первый:



Начинаем с самого простого. На рисунке обозначенны пункты (в звездочках)
1. Создаем новый документ. Идем в Файл -> Новый или же просто жмем Ctrl + N
В появившемся окне ставим параметры:
2. Имя: User Bar (на ваше усмотрение, прим. автора)
3. Ширина юзер бара 350 пикселей (заметьте что не сантиметров и не дюймов)
4. Высота юзербара 19 пикселей и нажимаем на кнопочку "Да" или "Ок"

Шаг второй:



1. У нас получается вот такая вот полосочка ^_^ (Если она вдруг очень большая, то проверьте, поставили ли вы пикселы а не сантиметры)
2. Создаем новый документ (мы уже умеем это делать, не так ли?)

Шаг третий:



1. Теперь ширину мы ставим 3 пикслеа...
2. ... и высоту тоже 3 пиксела
Жмем "Да" или "Ок".
3. Получаем оооочень маленький квадратик. (Большой звездочкой отмечен инструмент "Лупа" или "Увеличительное стекло", воспользуйтесь им чтобы увеличить этот квадратик до максимального размера увеличения, а именно 1600% как показанно красным прямоугольником)

Шаг четвертый:



Средней звездочкой отмечена кнопка "Рисования" и для того чтобы выбрать на ней "Карандаш" надо щелкнуть по этой кнопке ПРАВОЙ кнопкой мыши и выбрать нужный инструмент.
1. Итак как сказанно в небольшом предисловии сверху, выбираем карандаш
Большой звездочкой отмечен размер выбранного инструмента (в данном случае карандаша) его нужно поменять на 1 пиксель как у меня на рисунке
2. С помощью карандаша в 1 пиксель рисуем вот такую полоску

Шаг пятый:



1. Как показанно у меня на рисунке, мы выбираем Редактирование -> Определить узор
2. В новом окне у нас появится имя нашего файла ("Полосочки" в моем случае) его можно поменять по вашему усмотрению.
Жмем "Да" или "Ок" соглашаясь со всеми всплываемыми окнами (если таковые появятся)

Шаг шестой:



1. Файл -> Открыть и этим все сказанно. Или же просто Ctrl+O
2. Вводим адрес картинки которую вы хотите видеть на своём будующем юбаре, или же двойной щелчок по ней (отмеченно красным) (В моем случае это Хью Лори) (Желательно брать картинку побольше для начала, потипа обоев или такого рода)
Жмем "Открыть" (отмеченно красным "Open")

Шаг седьмой:



1. На панели инструментов (где мы ранее выбирали "Увеличительное стекло") мы выбираем инструмент "Прямоугольное вырезание" и выделяем понравившуюся часть картинки (вообще в юзербарах с людьми в основном берутся глаза. Ну кто будет делать юзербар с носом, рукой, ртом итд?)
2. С помощью инструмента "Перемещение" мы тащим выделеную часть картинки на юзербар как показанно пунктиром.

Шаг восьмой:

1. Как я показал на рисунке, картинку можно двигать (не только вверх и влево, а как угодно) (Хочу обратить ваше внимание на то, что обои с которых вы резали ту или инную часть остались целыми и невридимыми ^_^)
Жмем Shift+Ctrl+N и нажимаем "Да" или "Ок"
2. Давим CTRL+A. Выполняем: Редактирование -> Выполнить заливку

Шаг девятый:



1. В появившемся окне выбираем "Узор"
2. Дальше нажав на небольшую стрелочку (на рисунке она входит в "красную зону" и находится справа от полосок) мы ищем тот узор что делали вначале. А именно всеми любимые "Полосочки"
3. Непрозрачность мы ставим ~ от 10 до 20, но это зависит от рисунка. Желательно не пренебрегать. В своем случае я поставил 15%
Жмем "Да" или "Ок" и замечаем что нашу картинку покрыли слегка заметные полоски (на картинке я увеличил чтобы было более заметно)

Шаг десятый:



Нажмите сначала клавишу "D" а потом "X" (чтобы отрегулировать цвет)
Большой звездочкой отмечен инструмент "Фигура". На него как и ранее на инструмент "Рисование" нужно нажать правой кнопкой мыши...
1. ...и выбрать "Овал" или, как его ещё называют, "Эллипс"
2. Делаем следующие. Наводим курсор (перекрестие) ровненько на левый верхний угол и дальше, не отпуская левой кнопки мыши, тянем овал в правый нижний угол.
3. Должно получится что то наподобии этого (Новичков просьба не пугатся, все в порядке, так и должно быть)

Шаг одиннадцатый:

С помощью стрелок на клавиатуре или инструмента "Перемещение" тащим овал наполовину вверх.
1. Теперь, на панели слоев (если таковая у вас отсутствует (по умолчанию она вроде должна быть снизу справа) то нажмите F7), щелкаем правой кнопкой мыши по слою с фигурой (Название по умолчанию у него "Фигура 1")
2. Выбираем "Параметры наложения"

Шаг двенадцатый:



1. В новом окне, выделяем "Параметры наложения: Заказные" (вобщем то что выделенно у меня)(по умолчанию оно и должно быть выделенно)
2. Непрозрачность ставим ~ на 20-30% (В моем случае 25)
Жмем "Да" или "Ок". Чувствуете разницу, не так ли?

Шаг тринадцатый:



1. Вот что то наподобии должно получится у вас.
Большой звездочкой отмечена кнопка "Текст" на панели инструментов. Выбираем её.

Шаг четырнадцатый:



1. Выбираем место для текста (дело в том, что у юзербара размером 350*19 при шрифте визитор в 10 пикс можно легко найти середину (по вертикали) и разместить текст ровно, чтобы он не был не снизу не сверху), а задействовав кнопочки со стрелками на вашей клавиатуре или опять инструмент "Перемещение" можно изменить положение написанного вами текста (В моем случае "D. House Fan")

Шаг пятнадцатый:



1. На панели слоев выделяем слой с текстом (он приобретает имя написанного текста)
Большой звездочкой отмечена кнопка "Добавить стиль текста" (ранее когда мы заходили в "Параметры наложения" у нашего овала вам наверняка заметились в новом окне и другие строки такие как "Тень", "Обводка" итд. Для того чтобы зайти в это окно ещё раз можно нажать эту кнопку. Просто я хочу расказать вам о всевозможных вариантах) жмем на эту кнопку и выбираем "Обводка"
2. Ставим размер 1 пикс.
3. Цвет ставим черный.
(Прим. автора: если хотите, то можете поставить галочку напртив строки "Тень")
Жмем "Да" или "Ок"

Шаг шестнадцатый:



Большой звездочкой отмеченна кнопка "Новый слой" Жмем на неё (Прим. автора: Новый слой можно так же создать с помощью клавиш Ctrl+N или зайдя в "Слой -> Новый -> Слой")
1. У вас должен появится вот такой вот новый слой. Теперь когда он выделен жмем Ctrl+A и вы заметите выделение вокруг вашего юзербара.
2. Заходим в Редактирование -> Выполнить обводку

Шаг семнадцатый:



1. Выставляем Ширину (рамки кстати) 1 пикс.
2. Цвет рамки должен быть черным (хотя бы для начала, а потом будете эксперементировать)
3. Непрозрачность - 100%
Жмем "Да" или "Ок"
Итак, мы получили уже готовый юзербар. Поздравляю!
Шаг восемнадцатый:
Благодаря фотошопу файлы можно сохранять в разных форматах. Многие спорят в каком правильно хранить юзербар: *.png или *.gif, но одно ясно точно. Оригинал можно (и даже нужно) хранить в формате *.psd ибо если вы вдруг забудете про какую то деталь, к примеру блик или текст, захотите поменять, отформатировать итд), то сможете сделать это только в этом формате. В других все слои просто слепятся друг с другом. Однако об авторском праве я вам пожалуй говорит не стану... Но лично я храню файлы в формате *.gif однако дело ваше. Чтобы сохранить юзербар зайдите в Файл -> Сохранить как или Shift+Ctrl+S, выберите директорию (папку) в которой хотите чтобы хранился ваш юзербар и формат. :love_sibmama:

Добавлено спустя 6 минут 28 секунд:

Victoriana писал(а):
а Вы не подскажете,как сделать так,чтобы картинка при клике выводила на мою тему,а не на гифр? :oops:



Доброго времени суток! :4U:

Это будет выглядеть примерно так: :blin:

[url=нужная Вам ссылка для перехода][img]ссылка на Ваш баннер[/img][/url]

в теги [img][/img] необходимо заключать ссылку на баннер, который вы загрузите путем создания нового ответа на форуме. Есть такая опция "Загрузить картинку". :oops:

а теги [url][/url] помогут сделать Ваш баннер не просто мерцающей картинкой а картинкой при клике на которую можно бует переместиться в Вашу тему. :blin: :love_sibmama:

Добавлено спустя 9 минут 50 секунд:

И по анимации: :blin:

Откройте уже готовый Userbar, который вы создали по примеру выше. Откройте окно анимации (Window -> Animation).


Выделяем нужный слой (1), потом выбираем инструмент "Move Tool" (2), и перемещаем слой в положение, как показано на рисунке (3) (перемещения можно совершать с помощью курсоров на клавиатуре).


Кликните на небольшую стрелку, которая обозначена на рисунке, чтобы изменить задержку времени в 0,1 секунды.


Затем нажимаем кнопку "Duplicates selected frames".


Выберем только что сделанный нами кадр (1), берём "Move Tool" и перемещаем в положение, как показано на рисунке (2) (перемещения можно совершать с помощью курсоров на клавиатуре).


Теперь выбираем кадр №1 (1), и щелкаем на кнопку "Tweens animation frames" (2). Таким образом, у нас получится последовательность анимации между первым и вторым кадром.


Параметры "Tweens animation frames":


Нажмите "Plays animation", чтобы просмотреть резуьтат:


Если вы считаете, что анимация слишком быстра, то отмените "Tweens animation frames" (Edit -> Undo Tween), и повторите эту операцию сначала (предварительно убедившись, что выбран первый кадр), но в параметрах поставьте 50 кадров.

Получается не совсем красиво, когда нет паузы между концом и началом анимации. Чтобы это исправить переходим к последнему кадру и изменяем задержку времени на одну секунду.


Теперь нужно сохранить наше творчество, и желательно оптимизировать. Идем по адресу File -> Save for Web & Devices..., переходим к закладке "Optimized", выставляем указанные ниже параметры и жмем "Save" (параметры оптимизации можете менять по своему усмотрению).


Кстати, моя работа в моей же подписи этого форума :oops: собрал за 8 минут :blin:
_________________

Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник Посетить сайт автора         Благодарностей:  (5)  
 
yuliya_myod
Школьные годы
Школьные годы


На сайте с 23.10.11
Сообщения: 1251
В дневниках: 1
Откуда: Ленина, 12
Добавить в ЗакладкиСообщениеДобавлено: Вт Дек 20, 2011 13:34     Ответить с цитатой

ого,как всё сложно!!!
_________________
Лазерная эпиляция дешево и безболезненно
LPG массаж
Классический косметический массаж лица
Вернуться к началу
Посмотреть профиль Отправить личное сообщение            
 
parfait
Аспирант Сибмамы
Аспирант Сибмамы


На сайте с 28.01.10
Сообщения: 2123
В дневниках: 2272
Откуда: Sib
Добавить в ЗакладкиСообщениеДобавлено: Вт Дек 20, 2011 14:07     Ответить с цитатой

Victoriana писал(а):
ого,как всё сложно!!!

:haha: 5ballov

Добавлено спустя 9 минут 39 секунд:

Victoriana писал(а):

а Вы не подскажете,как сделать так,чтобы картинка при клике выводила на мою тему,а не на гифр? :oops:


Скрытый текст:


или так:
Скрытый текст:


Украшения в винтажном стиле для особых случаев и на каждый день:




отправила коды лс
:snegurochka:
_________________
Счастливая мама лучшей Кузи на свете
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник         Благодарностей:  (1)  
 
Владимир_Хрусталев
бойкий папа
бойкий папа


На сайте с 14.10.11
Сообщения: 327
В дневниках: 3
Откуда: Новосибирск
Добавить в ЗакладкиСообщениеДобавлено: Вт Дек 20, 2011 14:30     Ответить с цитатой

:4U: все проще чем кажется) :oops:

Шаг за шагом кнопка к кнопке) :blin:

и все получится

а по кодам:

в сообщении выше просто затерялось описание)) :oops:

Это будет выглядеть примерно так: :blin:

[url=нужная Вам ссылка для перехода][img]ссылка на Ваш баннер[/img][/url]

В теги [img][/img] необходимо заключать ссылку на баннер, который вы загрузите путем создания нового ответа на форуме. Есть такая опция "Загрузить картинку".

а теги [url][/url] помогут сделать Ваш баннер не просто мерцающей картинкой а картинкой при клике на которую можно бует переместиться в Вашу тему.
_________________

Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник Посетить сайт автора         Благодарностей:  (1)  
 
yuliya_myod
Школьные годы
Школьные годы


На сайте с 23.10.11
Сообщения: 1251
В дневниках: 1
Откуда: Ленина, 12
Добавить в ЗакладкиСообщениеДобавлено: Вт Дек 20, 2011 15:08     Ответить с цитатой

parfait

огромное спасибо ещё раз!)) :give_heart: :give_heart:

Владимир_Хрусталев

шаг за шагом и от кнопки к кнопке-это точно не про меня :lol: -мне надо так: прочёл инструкцию по диагонали (одним глазом,разумеется)),методом научного тыка на кнопочки понажимал-получилось-здОрово!-не вышло-ааа,пускай так остаётся)))))) :eek:
_________________
Лазерная эпиляция дешево и безболезненно
LPG массаж
Классический косметический массаж лица
Вернуться к началу
Посмотреть профиль Отправить личное сообщение            
 
Tatyana_sr
Аспирант Сибмамы
Аспирант Сибмамы

На сайте с 29.10.10
Сообщения: 4124
В дневниках: 5
Откуда: с.м. Золотая Нива
Добавить в ЗакладкиСообщениеДобавлено: Ср Дек 28, 2011 20:33     Ответить с цитатой

Владимир_Хрусталев
Всё так понятно, большое спасибо!
Вот только в своём фотошопе 8.0 sc не нашла окно видео :-(
а у вас какой? :oops:

Добавлено спустя 32 минуты 49 секунд:

нашла, надо открыть Файл -> править в ImageReady
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник            
 
Владимир_Хрусталев
бойкий папа
бойкий папа


На сайте с 14.10.11
Сообщения: 327
В дневниках: 3
Откуда: Новосибирск
Добавить в ЗакладкиСообщениеДобавлено: Чт Дек 29, 2011 9:13     Ответить с цитатой

Tatyana_sr писал(а):
Владимир_Хрусталев
Всё так понятно, большое спасибо!
Вот только в своём фотошопе 8.0 sc не нашла окно видео :-(
а у вас какой? :oops:

Добавлено спустя 32 минуты 49 секунд:

нашла, надо открыть Файл -> править в ImageReady


Доброго времени суток! :4U:

поставьте Photoshop CS3 самая актуальная версия и системы старенькие не напрягает. :blin:

А окошко анимации должно быть во всех версиях по идее. окно>анимация. :oops:
_________________

Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник Посетить сайт автора            
 
Tatyana_sr
Аспирант Сибмамы
Аспирант Сибмамы

На сайте с 29.10.10
Сообщения: 4124
В дневниках: 5
Откуда: с.м. Золотая Нива
Добавить в ЗакладкиСообщениеДобавлено: Чт Дек 29, 2011 9:30     Ответить с цитатой

Владимир_Хрусталев
не у меня именно второй программой открывается, вчера всё облазила, cs8 у меня :aga-aga: а дальше всё то же самое как вы объясняли :aga-aga: по тем же пунктам :aga-aga:
у меня был раньше 5й фотошоп, только не помню CS он был или нет :oops: а к этому я как то привыкла уже. :aga-aga:
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник            
 
Helen20042005
Академик
Академик


На сайте с 26.12.07
Сообщения: 25882
В дневниках: 152
Откуда: Новосибирск, Ленинский, Широкая
Добавить в ЗакладкиСообщениеДобавлено: Чт Янв 19, 2012 11:56     Ответить с цитатой

xmas
Вернуться к началу
Посмотреть профиль Отправить личное сообщение            
 
Марина М-о
Подготовишка
Подготовишка


На сайте с 03.08.11
Сообщения: 364
В дневниках: 2
Откуда: Новосибирск, Первомайка
Добавить в ЗакладкиСообщениеДобавлено: Вт Фев 19, 2013 11:05     Ответить с цитатой

Обратилась в GIFr так там загрузка фото из компа шла 15 мин,так и не дождалась,ушла.Это так и нужно, долго загружается или как? если грузить 3 фото ,так это пол дня уйдет :eek:
_________________
АВТОРСКАЯ БИЖУТЕРИЯ, НЕСТАНДАРТНЫЕ ПОДАРКИ
[img][url=http://gifr.ru/show/c17e951059]http://gifr.ru/show/86e6fbe018
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник            
 
Раз, два, три
Вся такая внезапная
Вся такая внезапная

На сайте с 10.09.07
Сообщения: 7469
В дневниках: 184
Откуда: Академгородок/ВЗ
Добавить в ЗакладкиСообщениеДобавлено: Вс Фев 24, 2013 18:33     Ответить с цитатой

Вот несколько ссылок на видео-уроки "как сделать простой баннер в фотошопе".







Вернуться к началу
Посмотреть профиль Отправить личное сообщение Дневник Посетить сайт автора         Благодарностей:  (2)  
 
Показать сообщения:   
Начать новую тему   Ответить на тему    Форумы » Дом и семья » Фотофорум. Все о фото
Страница 1 из 2 На страницу 1, 2  След.

 
Перейти:  
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах