mARTa

Показват се публикациите с етикет анимация. Показване на всички публикации

Как се прави анимиран сняг най-лесно

Posted on 23:41 - by Yanita Pavlova In: анимация, програми

Начините да направите анимиран сняг са много. С Photoshop има поне 5 различни начина да постигнете такъв ефект.

Онези от вас, които са правили анимиран сняг знаят, че с фотошоп не може да се получи автоматично и не става толкова бързо и лесно.

В тази тема обаче ще ви прадложа най-лесния начин. Изобщо не е необходимо да имате каквито и да било познания за работа с фотошоп, талант да рисувате и т.н.

Всичко което трябва да направите е да си изтеглите една малка и много полезна програмка - Sqirlz Water Reflections

С тази програма може да си правите всякакви анимации със сняг, дъжд и анимирана водна повърхност:

Програмката е безплатна и изключително лесна за употреба.

От настройките в горното меню може да зададете скорост на снега, посока, големина на снежинките и т.н.

Тествате анимацията си от жълтата стрелка:

По същия начин се процедира и в случаите, когато искате да вали дъжд или да анимирате водна повърхност.

С инструментите за селекция в страничната лента селектирате онази част от снимката, която искате да се напълни с вода, а настройките на вълните стават отново от жълтата стрелка.

Запазвате анимацията си като гифче или като флаш съответно в gif или avi формат от менюто в горната част на екрана:

Sqirlz Water Reflections дава възможност да се комбинират няколко анимации. Може да постигнете ефект на дъжд с локви, сняг над водна повърхност и т.н.

Пробвайте, много е лесно и забавно. С помощта на Sqirlz Water Reflections може да си направите много ефектни аватарчета, сигнатури, тапети за телефони, анимирани картички и т.н.

Ето моите четири сезона:

На страниците на официалния сайт на програмата ще намерите уроци, но мисля че с няколко разцъквания може да се справите и без тях.

Официален сайт
Download

Анимациите в темата са в стандартни формати за тапети за GSM
голям тапет - 230х320 рх
малък тапет - 176х220 рх

Ако ви харесват използвайте ги.
Малък коледен подарък от мен. Благодаря, че посещавате блога ми.
Весели празници!

Прочетете Цялата Статия...

бутон за сайт

1 коментара |

Мишка влачеща гирлянда от сърца

Posted on 2:01 - by Yanita Pavlova In: анимация, ефекти, комбинирани уроци, Java script

комбиниран урок за Photoshop, Image Ready, Java script

В този туториал ще видим как се прави ТОЗИ интересен и атрактивен ефект - мишка влачеща гирлянда от сърца

1. Отворете нов документ (40px/40px; RGB; 72dpi; transparent background)

2. Дайте Zoom 600%
Изберете червен цвят (hex #FF0000)
Вземете Shape tool и направете следните настройки:

Така ще рисувате с пиксели, не с вектори - fill pixels
Нарисувайте сърцето.

3. Кликнете върху слоя в палитрата на слоевете, за да го маркирате, след това от менюто изберете Edit -> Stoke. Направете следните настройки:

1 pixel
inside
maroon, hex #660000
blending = normal
Opacity = 100%

4. Дублирайте слоя и му махнете "оченцето" - направете го невидим.

5. Вземене move tool и намалете сърцето до 80% в широчина и височина:

6. Отворете палитрата на анимациите за Photoshop CS3: Window -> Animation
за по-старите версии на програмата: преминете в Image Ready

7. Направете фреймовете по следния начин:

Frame 1: layer 1copy - видим, време за задържане 0,5
Frame 2: layer 1 - видим (време - no delay)
Frame 3: layer 1copy - видим (време 0,2)
Frame 4: layer 1 - видим (no delay)

8. Върнете се на фрейм 1. Отворете си панела optimize. Поставете следните настройки:

GIF; image with lossy = 0; colors = 3; web; no dither

9. Отидете на File -> Save Optimized As
Именувайте файла burst1.gif
Направете същото с втория фрейм, като го именувате burst2.gif
Повторете това и за третия и четвъртия фрейм, съответно burst3.gif и burst4.gif

10. Отворете notepad от компютъра си
за онези, които не са го палзвали до сега отваря се от бутона Start (зеления бутон най-вляво долу на екрана ви)
start -> programs -> accessories -> notepad

11.Сега дайте Copy/paste на следния скрипт в notepad:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mousetrails</title>
</head>
<script>
B=document.all;
C=document.layers;
T1=new Array("burst1.gif",40,40,"burst2.gif",30,30,"burst3.gif",25,25,"burst4.gif",20,20,"burst4.gif",15,15,"burst1.gif",10,10)
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")}
function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if Â©
write(" style='");
write(St+";' ")
}
else write((B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}
function closeContainer(){
document.write((B)?"</div>":"</layer>")
}
function getXpos(N){
return (B) ? parseInt(B[N].style.left) : C[N].left
}
function getYpos(N){
return (B) ? parseInt(B[N].style.top) : C[N].top
}

function moveContainer(N,DX,DY){
c=(B) ? B[N].style :C[N];c.left=DX;c.top=DY
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
}
}
function newPos(e){
moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2
)
}
if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)
</script>
<body>

</body>

</html>

12. Запазете файла си: File -> Save.
Сложете го в папката, където са ви останалите файлове от "сърцето". Именувайте го index.html и изберете за save as type:
All files от падащото меню.

С HTML редактора си може да видите какво сте направили.
Забележка: Вижда се през IE, през Mozilla при мен не става.

превод: mARTa
източник

Прочетете Цялата Статия...

бутон за сайт

1 коментара |

Анимиран текст - Кодът на Да Винчи

Posted on 12:11 - by Yanita Pavlova In: анимация, Photoshop

В този туториал ще разгадаем Кодът на Да Винчи... с Фотошоп разбира се. Ще се научим как се прави анимиран текст.

Урока е лесен и е подходящ за начинаещи фотошопъри

Наученото от него може да приложите във всякакви аватарчета, анимирани банери, тапети за телефони, сигнатури за форуми и т.н.

Започваме:

1. Отворете си нов документ и го запълнете с черно.

2. Напишете някакъв текст със сив цвят. В този урок е използван шрифт Dali, ако нямате такъв си изтеглете от линка.

3. Създайте нов слой и с помощта на тънка четка с бял цвят повторете първата буква на нашия код.

4. Променете Blend Mode на Overlay.

5. Създайте нов слой. Повторете с бяло втора буква от текста.
Променете Blend Mode на Overlay.

6. Нов слой - трета буква - Overlay.

7. Нов слой - четвърта буква - Overlay и т.н.

В урока са направени 7 слоя, но сигурно може и повече.
След като маркирахме с бяло желаните букви започваме да анимираме.
Онези от вас, които са на по-стари версии на Photoshop (CS2) трябва да преминат в Image Ready, за CS3 и по-новата версия на програмата просто отваряме политрата за анимации - Window -> Animation

8. За първи кадър на анимацията избираме фрейма с всичките осветени (бели) букви.

9. Дублираме първия кадър.

10. Втория кадър е слоя, на който е осветена първата буква от кода (Layer1).

11. Създаваме междинните слоеве с помощта на Tween:

12. Правим копие на последния къдър. Махаме оченцето на първия слой и добавяме втория (Layer2)

13. Повтаряме Tween за създаване на кадрите.

14. Повтаряме същите действия за всяка следваща буква (за всеки слой)

15. Накрая си запазвате анимацията н gif и ...Шифърът на Леонардо е разгадан:

Разбира се може да импровизирате, да използвате друг шрифт, по-ярък цвят, повече осветяване и т.н.

mARTa
източник

Прочетете Цялата Статия...

бутон за сайт

3 коментара |

Мигаща снимка

Posted on 7:23 - by Yanita Pavlova In: анимация, ефекти

Предлагам ви един лесен и забавен урок за фотошоп, с който ще накарате снимката си да намига. Може да използвате този атрактивен ефект за аватарчета, банери, сигнатури и всякакви анимации.

Започваме с отварянето на снимка, на която очите на модела се виждат добре, за да може да се откроява ефекта на намигането.
1. Запазете си избраната снимка в gif формат и я кръстете- 1
File-Save As (запази като)

2. Увеличете си снимката с лупата. С Eyedropper Tool си вземете образец от цвета на долните мигли (фиг. 2а) След това вземете четката, поставете следните опции (фиг. 2b) потъмнете долните мигли (фиг.2с)

3. Вземете Healing Brush с подходящ размер след което задръжте клавиша Alt, кликнете на челото на модела (примерно там където е поставено числото1 на фиг.3а) за да вземете образец от кожата за оцветяване на окото. Започнете да оцветявате. Правете това внимателно с няколко стъпки. Ако не ви хареса нещо: Edit-Step Backward
Ако клепача ви се получи тъмен вземете Dodge tool (изсветяване) и поставете следните параметри (фиг 3в) и изсветлете клепача (фиг 3с) За да направите окото по реалистично и за да избегнете разнотоние използвайте Blur (размиване) (фиг 3d)

Получава се ето това:

4. Запазете си файла във формат gif , кръстете го- 2
Преминаваме в Image Ready
5. Отворете си двата файла File-Open-gif1. gif2

Отворете панела с анимациите, ако не е отворен: Window -> Amimation
6. Кликнете на gif2 за да го направите активен, клед което отидете в менюто и дайте Select -> All

Gif2 е маркиран (фиг. 6а) Копираме го: Edit -> Copy (фиг.6в)
След което кликнете на gif1 за да се активира и дайте Edit -> Paste (фиг 6с)

И така от gif1 получаваме изображение с два слоя (фиг 6d)

7. Започваме да анимираме:
В прозореца на анимациите щракнете върху триъгълничето ( фиг. 7а)
От появилото се меню изберете Make Frames From Layers (фиг. 7в)

В прозореца на анимациите се появи втория кадър. (фиг. 7с)
Щракнете на триъгълничето на първия кадър и дайте време за задържане 1 секунда, за втория кадър дайте време 0,2 сек.

Щракнете на долното триъгълниче и изберете режим на анимацията Forever (фиг 7d)