Форум о социальных сетях Поиск по форуму Инвестиции SMM обучение SMM курсы
Форум о социальных сетях Поиск по форуму Инвестиции SMM обучение SMM курсы
  • Страница 1 из 2
  • 1
  • 2
  • »
Анимация загрузки
#1
Пятница, 08.05.2009, 19:50
Kaizzer
Заблокированные
Сообщения: 2944
Репутация: 6478
Здравствуйте любители Photoshop. В этом уроке я покажу ВАМ анимацию загрузки.
1. Создадим новый документ размером 300х300.
2. Нажмем D (этим действием основной цвет станет черным, а фоновый цвет белым). Нажмем Alt + Delete (Этим действием мы зальем наш фон черным цветом).
3. Создадим новый слой Layer-New-Layer… (или нажмем Ctrl + Shift + N). Или легче всего нажмем на иконку нового слоя в палитре Layers, назовем слой Kolco.

Нажмите Ctrl + R слева и сверху появятся линейки. Наведите на верхнюю линейку нажмите на ней и не отпуская тащите вниз пока она не окажется в центре. Теперь наведите на левую линейку и не отпуская тащите вправо пока линия не окажется в центре нашего окна. Выбираем инструмент Elliptical Marquee Tool (клавиша M). Наведите курсор на центр нажмите и растяните (держа клавиши Alt + Shift) как на рисунке.

4. Залейте выделение белым цветом (Если у вас цвет фона белый, то нажмите Ctrl+Delete).
Теперь не снимая выделения, нажмите Select-Modify-Contract поставьте 15 пикселей, а затем Select-Modify-Smooth поставьте тоже 15. И нажимайте Delete.

5. Нажимаем два раза на слою Kolco (или нажмем Layer-Layer Style-Blending Options…). В открывшемся окне выбираем:



У Вас должно получиться что – то вроде этого

6. Создаем новый слой поверх слоя Kolco и называем его load. Выберем основной цвет белый для этого нажмем D затем X. Поставим смешивание на Screen.

7. Нажимаем два раза по слою load и выбираем настройки как на рисунке.

8. Теперь начинается анимация. Если у Вас Photoshop CS2 и выше тогда нажмите Window- Animation (У Вас появится окно анимации). Если версия Photoshop ниже откройте Image Ready нажав Shift+Ctrl+M.
9. В окне анимации создадим новый кадр для этого нажмем на иконку как на рисунке

Теперь при активном втором кадре нажмем два раза на слой load (или layer-layer style-Blending options… ). Выберем Gradient Overlay и поставим Angle : -90.
Снова создадим новый кадр(это будет под номером 3). Опять щелкаем два раза по слою load и теперь ставим Angle: 180.
Создаем новый кадр (4) теперь ставим Angle: 90.
Создаем новый кадр(5) ставим Angle:0.
10. Активируем последний кадр и нажимаем Tweens animation frames (на рисунке ниже помечено красным.).

В появившемся окне ставим как на рисунке

11. Далее активируем 4 кадр и повторим действия описанные в шаге 10.
Тоже самое сделаем с кадрами 3 и 2. У нас получится 17 кадров. Удалим 17 последний кадр для этого активируем его и нажмем на Deletes selected frames (иконка помечена синим цветом на первом рисунке 10 шага).
12. Для тех кто не знает чтобы сохранить анимацию нажмите File – Save for Web В открывшемся окне выберем формат GIF.

P.S можно добавить текст под слоем load анимация будет действовать и на тексте.
Вот конечный результат.

источник demiart.ru

Пост отредактировал Max_Alex - Пятница, 08.05.2009, 19:50
#2
Пятница, 08.05.2009, 19:52
WARHAMER
Пользователь
Сообщения: 38
Репутация: 73
КласС) +
#3
Пятница, 08.05.2009, 19:53
sMoFo
Пользователь
Сообщения: 165
Репутация: 55
ооо ман спасибо бро,то что надо для сайта,Думал как это воплотить в жизнь,но ты это сделал быстрее меня спс большое 9/10 и плюсик тебе)
#4
Суббота, 09.05.2009, 09:21
vitya250
Проверенный
Сообщения: 474
Репутация: 274
хороший урок!аля виста стайл))
No Money, No Time, No Girl, No Job - NO PROBLEM!
#5
Суббота, 09.05.2009, 13:59
t-m-b
Проверенный
Сообщения: 1030
Репутация: 462
Max_Alex,Спасибо.Хороший очень урок
#6
Суббота, 09.05.2009, 14:27
SENNAR
Заблокированные
Сообщения: 1280
Репутация: 436
Max_Alex, куул урок! спс! happy
#7
Суббота, 09.05.2009, 14:48
TAKS
Пользователь
Сообщения: 133
Репутация:
я октивировал слой с градиентом как показано в пункте 7. но у меня он не появляеться! почемУ??? после я попробывал сделать все равно чоть и не появился анимацию сделать короче... вот ана не сделалась(не стала крутиться так как там не было градиента ) почему
[img]http://oboima.clan.su/MEGASOFT/Usebar.gif[/img]
#8
Суббота, 09.05.2009, 14:52
sawa
Проверенный
Сообщения: 270
Репутация: 113
спс
Куда идем мы с Пятачком
На остановку за БЫЧКОМ!
#9
Суббота, 09.05.2009, 15:11
hugo_angel
Заблокированные
Сообщения: 315
Репутация: 198
еще бы искр добавить... smile
http://cs-x.ru/forum/66-429-1 - бесплатная раскрутка сайтов!
Суббота, 09.05.2009, 16:20
TAKS
Пользователь
Сообщения: 133
Репутация:
я октивировал слой с градиентом как показано в пункте 7. но у меня он не появляеться! почемУ??? после я попробывал сделать все равно чоть и не появился анимацию сделать короче... вот ана не сделалась(не стала крутиться так как там не было градиента ) почему
[img]http://oboima.clan.su/MEGASOFT/Usebar.gif[/img]
Суббота, 09.05.2009, 16:27
hugo_angel
Заблокированные
Сообщения: 315
Репутация: 198
Quote (TAKS)
почему

Чтобы ответить на этот вопрос, надо иметь:
1. Среднестатистический нормальный мозГ
2. Прямые руки
3. Глаза
4. Photoshop

biggrin

http://cs-x.ru/forum/66-429-1 - бесплатная раскрутка сайтов!
Суббота, 09.05.2009, 18:25
[uCoz]
Заблокированные
Сообщения: 0
Репутация: 394
Забавненько happy
Воскресенье, 10.05.2009, 01:26
smaaile
Проверенный
Сообщения: 261
Репутация: 453
прикольно получилось smile
Воскресенье, 10.05.2009, 07:17
TAKS
Пользователь
Сообщения: 133
Репутация:
hugo_angel, ты меня за дурака не дерЖИ!!!!
[img]http://oboima.clan.su/MEGASOFT/Usebar.gif[/img]
Воскресенье, 10.05.2009, 11:45
nikitka
Проверенный
Сообщения: 304
Репутация: 202
у меня анимация не получиась... cry
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
Форум
Социальные сети
Хостинг от uCoz