(2016-07-21, 00:54)movie78 Wrote: I would appreciate a step by step tutorial , so i can make the cheap ones and you can focus on the High End stuff
That was the look i was going for..
Again thanks!!
hehe there will be no cheap or high end stuff ... if you get the idea of how its work you can do a lot with it ( and its MUCH easier than the most ppl think )
ok, lets start and try ( it will be just a fast,simple,dirty "tutorial" with the method "i" used ... there will me maybe much more others and better ones ^^ )
you should have at least BASIC Photoshop skills and you should know how to work with layers and smartobjects etc
1. some basics ( i use PHOTOHOP ! )
- i use a 5 seconds timeline with 12fps = 60Images - i noticed that 60 images are the max for kodi - after the 60images ( maybe 61 ) it starts from the beginning ( but i think with this skinhelper plugin it plays more... didnt test it yet realy much )
- Image Size = 500 x 713 ( half the size of the fanart.tv rule for normal posters )
- always smoothen the images you are using - either with gaussian Blur or camera raw filter ( i use camera raw filter )
- try to work with smart objects ( images AND Videos ) - you can transform the most stuff just with smart objects
- youtube is your friend if you need some overlays ( like rain,snow,smoke,sparks etc ) - try to find overlays with BLACK Backround ! Photoshop doesnt work realy great with green screen
2. The steps i did on the example " THE BOY "
- check fanart.tv for a logo ( and normaly for a static Poster i want to use - best case a already textless one )
- make a new photoshop image with the dimensions i post before
- enable the timeline if you dont have it already on, and config the stuff i post before ( 5 seconds, 12 fps )
- load the gif backround - then you have to A. render it as a VIDEO or B. make a Smartobject of all layers ( choose all layers and transform them to a smart object )
- copy the videofile (A) or the smartobject (B) into the first generated photoshop image
- adjust the size and position where the animation should be - in this case we have not enough space at the bottom ( where the logo will be ) - so i add a layer above and clone the missing parts ( to get a full poster again - photoshop basics
)
- now i was cutting the first cpl of seconds of the animation ( before the lights comes out ) - will need this part for the rest of the timeline
- now i move the part with the light animation inside the timeline to the position i want ( around the center )
- move the cutted first seconds ( dark scene with the raining outside ) to the beginning of the timeline ( under the row of the light animation ) - make a copy of that layer and move it behind the first one - now it will be inside a VIDEOGROUP - if its now "overlapping" with the light animation, copy the layer again and move it to that position of the timeline, where it overlap with the lightanimation for maybe 1-2 seconds - if there is still space left until the end, make another copy of it and put it behind it ( i have 2 in the beginning and 2 at the end )
- now add a "fadeout" timeline fx on the end of the light animation and reduce it to maybe 0.5 seconds to get a smooth fade out at the end of the lightanimation ( the original stops realy hard )
- we should have now the basic poster backround animated ... with a longer dark rain animation at the beginning - then the lightanimation - then a fade to the rain animation again - lets play it in loops to check if you have a ugly step or anything else...
3. Add the LOGO
- drag and drop the logo to the PSD project
- move it to the position you want
- now move the timeline slider to the position where the lightanimation starts - then click left on that small arrow-down symbol to open the timeline transformation option of that logo layer - we want to change the transparency - so click on the small "diamond" icon to add a "KEYFRAME" - move the slider a bit to the right - and then change the OPACY on the LAYER Option Bar ( reduce it maybe to 25% ) !!! this will add automaticly a new keyframe with the new opacity --- if you move now the slider to the left again, you can see that the logo is fading between this both keyframes !
so next move it again a bit more to the right - change opacity ... etc - now do this until you are happy with the results - just play around with the keyframes - move them around and see the differences --- with this "keyframes" you can animate your stuff - sizes, opacitys, positions etc
4. Export for Web
i use this settings: ( sorry its german, but i think you can see what it means )
if you want to reduce the FILESIZE! - just play around with the LOSSY settings - sometimes 10% more lossy will make the image just a lill bit uglier, but save you maybe 50% filesize
save it and check it...
well this is realy just a HUSH HUSH steps "tutorial" - you can add now some overlay videos like i post before ( in this case maybe some "old video fx" with scratches and dust or so ) - but you have to be aware - it looks great when you work on it - but when you convert it to gif - it will be MUCH MUCH "uglier" and Grainy/Pixelate because of the 256 colors !!!
so try to keep the color variaton "LOW" - not too much gradients - and not toooo much overlays - if you do too much you will get an ugly pixel crap, with a filesize of 10mb and more ^^
for the workflow just watch the youtube videos that would be posted before - the rest is just fantasy and time
well... even this dirty step tutorial is already so big... so you can imagine how long it would be if you would explain realy every lill step of it
but maybe this will help some people a lill bit
so keep it comming and take your time !!!!! dont rush things
greets
schimi
( sorry for every wrong translation - english is not my native language
)