Need a tutorial and some guidance

[PixyTash]

Hi

I am not sure where to even start - not even which Adobe app will be the best to use. I do web design and am currently working on a website for an artist. I want to add some movement and a bit of a wow factor to the site. She send me progress photos of a painting she did - starting with a blank canvas and progressing to the full painting.

I would like to use this an create a video / gif . I am not sure where to start. I also need to take into account the affect it will have on the loading speed of the website.

Any help would be greatly appreciated.

TIA

[Derek Cross]

When you state you do web design, are you a beginner or an expert. Are you using Muse or Dreamweaver or another application? Do you subscribe to the Adobe Creative Cloud suite? Would the progress of the painting be better linked to say a YouTube video?

[PixyTash]

Hi Derek

I am C# and PHP programmer, for this website I am using Wordpress - clients request. I do subscribe to Creative Cloud and have access to all cloud applications. I would prefer to have it embedded and preferably cached - for speed purposes. Uploading it to YouTube could work as well.

[Eternal Warrior]

Don't know quite where to start with this as don't know how much of Adobe you have... or would buy etc....

My thoughts would be: Any illustrations or graphics would either be best coded by yourself or done with Illustrator and saved as either PNG or SVG.

For the progress photos (and again I don't know what you already have)... I would (had I the choice and time) use Premier pro and After effects to get the correct video sequence and add some nice effects etc that look better than GIFs. Then render this in MP4 OGV and webm formats... Then as much as I like Adobe I would use Handbrake https://handbrake.fr/ to really compress the "rabbit" out of those files and make them as small as possible - Then I would just use this on the website either Full screen (of any resolution down to an Ipad or Tablet) or in some form of composition.

OR

If I didn't have this ability I would make the sequence in Photoshop as a GIF/similar using the Motion Work space and then use handbrake to compress the "crown" (running out of euphemisms here...) out of it again.

We have found that you can actually achieve pretty good video quality (for what is needed) on a full screen even with a file size of about 1.5 - 1.7 MB (MP4 file size quoting btw) . Which is still pretty tiny when you think about it.

Anyway just my two cents

Best,

EW

[PixyTash]

Thank you! I am going to play around with Premier and After Effects 🙂 might need some help with that though. Can you recommend any good tutorials for newbies? I am just starting with graphics, I usually contract the graphic work out, but I want to learn some new skills.

[Eternal Warrior · Accepted solution]

Sure there's a lot of good tutorials on YouTube - In particular I personally quite like the videos that ECAbrams make for After Effects and also [EDIT] AfterEffectsXYZ make:

ECAbrams - YouTube

Kinetic Typography - Text animation in after effects - YouTube - Good example of XYZ.

He also does a few Premier Pro tutorials - however Premier pro is fairly intuitive you just need to learn the keyboard shortcuts - Most of which are shared with after effects: - https://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html

However to get you started these videos look fairly self explanatory: (Please note I skimmed through these videos to see if I felt they were interesting or just boring... and also actually useful)

LEARN PREMIERE PRO IN 20 MINUTES ! - Tutorial For Beginners - YouTube

The Basics of Video Editing w/ Premiere Pro CC      - YouTube

Best regards,

EW