How To Create a Scrolling Website Animation In Photoshop

Рет қаралды 131,213

Oaklyn Studio

Күн бұрын

Learn how to make a website scroll in your image inside Photoshop, then export it to a GIF or Video for Instagram.

Пікірлер: 173

@kingoubleck 4 жыл бұрын

Brilliant guide. Probably the first time I have followed a guide on KZfaq and not got frustrated after 2 minutes!

@DIGITAL7Media 4 жыл бұрын

Check out his one. It's WAAAY smoother: louisehenry.com/blog/scrolling-website-animation

@UnconventionalCreatives 4 жыл бұрын

SO clear and easy to follow. Best tutorial I've seen on KZfaq in a LONG time. Thank you so much for making this!

@kayleighquyen2468 5 жыл бұрын

Truly appreciate this tutorial! She made it very simple and was clear and concise in her step-by-step instructions. Created a scrolling website GIF in minutes after watching this tutorial. Can't wait for more videos!

@leslieannvega 6 жыл бұрын

Thank you so so much! Asked a couple fellow designers and it seems everyone wants to keep the secret! Thank you for being open to sharing! :) We all win!

@jayrichard6845 2 жыл бұрын

i dont mean to be offtopic but does any of you know a trick to log back into an Instagram account..? I somehow lost the login password. I appreciate any tricks you can offer me.

@daniellamarie_c 6 жыл бұрын

Thank you! I had read instructions on how to do this, but it was waaaay easier to learn by seeing it. Thanks!!

@drishtisunil2610 3 жыл бұрын

Thank you so much for helping a designer out! My first animation kept turning out choppy, but I think the tween was the secret ingredient I missed! ❤

@ellecooperco 4 жыл бұрын

Thank you so much for this. This looked a lot easier than most videos I've watch.

@brennaschroeder2543 6 жыл бұрын

Thank you!!! So simple, it would have taken me forever to figure out on my own

@johnaveryworks 6 жыл бұрын

So well done! Keep doing these. You've got a great way of explaining things.

@clarkescreations 6 жыл бұрын

Thank you so much for posting this. Super helpful!

@sarahwbrown2253 4 жыл бұрын

Thank you so much! I've watched three videos on how to do this and yours was the most clear and the only one that worked! Thank you!!

@oaklynstudio 4 жыл бұрын

yay! Glad to hear. Thank you :)

@Mikey-Likes-I.T 6 ай бұрын

Thanks! was trying to remember how to do this, you made it simple.

@janetracy8732 5 жыл бұрын

This is really helpful... Unfortunately, not so many people want to show others, how it's done... You are the best 😍

@lisellarson3459 2 жыл бұрын

You are amazing. I have come back to this video over and over again. You have great teaching skills. Thanks!

@JWard-wx3jn 6 жыл бұрын

Thanks so much! I've wanted to know how to do this for so long. Great video!

@exhaledesignco513 2 жыл бұрын

That was the BEST video! Thank you so very much! Your instructions were so clear and easy to follow. AND, it's amazing how something that appears as if it would be so difficult is really quite easy (again, due to your instructions). :)

@IndieRockLover100 2 жыл бұрын

I just want to thank you so much for taking the time to make this. it is so simple and pretty much life changing information

@ebonyjamison419 6 жыл бұрын

Thank you so much! This was incredibly helpful!

@michaelhormuth4200 5 жыл бұрын

This was so incredibly helpful. Thanks!

@LoretaLabarca 4 жыл бұрын

Even in 2020 this tut is very useful! Thanks so much!

@stassalyse9656 7 жыл бұрын

Sooooo helpful! Thank you so much for this Hannah!

@thebrandmisfit 4 жыл бұрын

Thank you so much for doing this & making it so dang simple!

@sneakachick1705 2 жыл бұрын

straight to the point and clearly spoken...awesome

@marsfuture 4 жыл бұрын

Absolutely great - exactly what I was looking for, thank you so much. Really appreciated! And so well explained, also. :)

@lisagercovich3870 4 жыл бұрын

This was amazing - so clear and easy to follow, thank you so much for sharing🙏🙏🙏

@BrechtSchoeters2 5 жыл бұрын

Great work! It's a very helpfull hands-on tutorial that helped me getting the job done! Thank you for sharing your knowledge & expertise with us!

@frankiemcp11 3 жыл бұрын

Nice work. Clear preso. Next level is creating this animation on an angled screen!

@ioshisolis 4 жыл бұрын

amazing !!! thank you very much i had to try different extensions for screen capture, the photoshop part was on point. You Rock !!!

@funkay1 3 жыл бұрын

Exactly what I was looking for, thank you!

@talented_turt1e 4 жыл бұрын

This is so great! Thank you for sharing with us!

@evisionaryloveslife 5 жыл бұрын

This worked wonders!!! Thanks so much!!!

@debimishra7325 6 жыл бұрын

Thanks a lot Hannah, i was searching for this from last 1 weeek

@elianaortega316 6 жыл бұрын

Thank you! This is so helpful!

@businessbakerie6787 4 жыл бұрын

Amazing video! Thank you so much. You saved me a ton of time (and money).

@damnname 5 жыл бұрын

That is super easy and useful! Thanks a lot!

@ashtonhethcote4763 3 жыл бұрын

Thank you for this- so easy to follow!

@mysweetconflictedvillain 6 жыл бұрын

Thank you very much, this is super helpful!

@laurenmccormick653 4 жыл бұрын

Thank you! Wonderfully simple explanation.

@chrissymarquardt5005 6 жыл бұрын

This was so helpful!! Thank you!!

@ajjames9065 5 жыл бұрын

This video is useful. That Capture Chrome plugin is useful. Thanks!

@maryannwildcat 5 жыл бұрын

Lifesaver! Thank you!

@donbao 5 жыл бұрын

Thank you! I like your explanations

@kutinagraphics Жыл бұрын

Thank you so much for this tutorial!

@designsandmarketing 2 жыл бұрын

Thanks, MAM For explaining in simple words 😊

@KatelynFuentes2892 5 жыл бұрын

THIS HELPED ME SO MUCH THANK YOUUUUUUUUU

@GualtioLT 5 жыл бұрын

Wow, super easy to follow. Thanx a lot!

@ElianeTerrataca 5 жыл бұрын

Thank you so much! You're great!!!!

@lisagercovich3870 4 жыл бұрын

Thank you so much, great tutorial!

@alejandrosalas5107 3 жыл бұрын

Muchas Gracias, Excelente tip y explicación.

@LexConstantinne 5 жыл бұрын

Great video! Thank you so much!

@GeekGirlsLV 5 жыл бұрын

Wow, you made it so easy!! THANK YOU!!!!!!! :-)

@malineesaechee8238 2 жыл бұрын

This is awesome tutorial. Thank you!

@anandrm 6 жыл бұрын

very handy tutorial! thanks a lot Hannah

@madeleinedesser6220 6 жыл бұрын

Thank you so much super helpful!

@thebrandbrew 6 жыл бұрын

Excellent video, thanks for sharing!

@dianaskorn3137 3 жыл бұрын

Thank you! It helped me a lot!

@alejandrogarcia2499 4 жыл бұрын

Thank you, this video was so so helpfull !

@vincent3046 5 жыл бұрын

Very helpful video! Thank you for the tips! This topic is a good opportunity to ease people into After Effects. If anyone finds this process EASY you will love AE. If you found this process DIFFICULT ... you will LOVE AE even more. If anyone wants to learn I would be happy to make a tutorial! Not trying to spam your comments, I just like to help people that are interested in the field. I stumbled across this video looking for a way to make videos play on a website by scrolling, like you see on Apples product pages. Thanks again for the tips! Cheers! Edit: “LOVE AE *even more*”

@bsugmugs5820 6 жыл бұрын

Nice tutorial. Thanks!

@4ndy51xx 5 жыл бұрын

bless your beautiful soul for this video

@mahsa7987 3 жыл бұрын

It was so helpful for me, thank you!

@azariajayde Жыл бұрын

So helpful thanks!

@petersmit7223 6 жыл бұрын

Thank you so much for this.

@webdesign-iproxidigital3835 3 жыл бұрын

Awesome! Thank you very much

@jamesbrownization 4 жыл бұрын

Really helpful. Thanks!

@sunevolve 6 жыл бұрын

very well explained thanks!

@inna_vinchenko 3 жыл бұрын

Ohhhhh thank you!!! Super easy!!!!!

@Schwanenmaedchen 3 жыл бұрын

this was genius! Thanks a lot :D

@shirleenwong200 5 жыл бұрын

Very useful. Thank you so much :)

@RKweb 6 жыл бұрын

really good.....innovation and u well

@Annne_ 2 жыл бұрын

You save my life

@gillplatt1139 2 жыл бұрын

Fantastic, thank you soooooo much

@not_a_drunk9878 5 жыл бұрын

Smart Lady ... Thanking you

@wummyeli4397 7 жыл бұрын

You the best💖💖💖

@camilafumarola1982 4 жыл бұрын

ok u just saved my life

@shreyabhattacharya8166 3 жыл бұрын

Thank you for this video ....💕💕💕💕:)

@kingsleyanajemba 2 жыл бұрын

You're a Genius

@heraldhida4276 4 жыл бұрын

Thank you !! Keep up

@taslimaakterlipi 3 жыл бұрын

Thank you so much!

@MIGEperdomo 4 жыл бұрын

I love you, thanks ♥️

@snapfilmclub 4 жыл бұрын

Super useful!!!

@sitikanthamuhuri 5 жыл бұрын

Your tutorial is quite helpful specially for the amateurs,I request you please be a little louder so that your words can be followed.And please make your video with a zoom in view.Thank you

@VangBill96 3 жыл бұрын

not even what im looking for but lit...

@simonhjortfors2566 4 жыл бұрын

Thank you! 🙏

@imran0304 6 жыл бұрын

thanks for the video (y)

@cuclele 6 жыл бұрын

This is much better than using After Effect

@aina9873 Жыл бұрын

Thank you!!!🙏🙏🙏

@skeletonking9613 4 жыл бұрын

it help me so much :) thx

@ericakutz4808 3 жыл бұрын

Thank you! :)

@msmelodythomas 5 жыл бұрын

Thank you!!!!!

@loriezweifel3364 4 жыл бұрын

THANK YOU!!!

@deltbrahsaf1021 5 жыл бұрын

Thanksss!!

@iremcetinor4856 6 жыл бұрын

thank you !!!!! (:

@Ekaterina_oriflame 5 жыл бұрын

thank you very much

@roussinpich 6 жыл бұрын

thanks a lot

@qamariqbal6730 4 жыл бұрын

Thanks for amazing tutorial, its simple and understandable. I want to know one more thing how do i get smooth transition like slowly start from beginning and gets fast in center and then slow at the end but all this happens in smoother effect.

@oaklynstudio 4 жыл бұрын

To make the transitions feel smoother you would increase the amount of frames you place between the first and last. You then would simply need to change the timing on the frames you want to scroll faster or slower. A bit of trial and error and you'll be able to get what you're looking for.

@dominykask.8830 5 жыл бұрын

I actually liked your explanation, why did you stop making tutorials/videos?

@ayoubdrissi4745 3 жыл бұрын

THANK YOUUUUUUUUUUUUUUUUUUUUUUUU!!!!

@sonrics1993 5 жыл бұрын

Oh thanks! This is really useful, I am updating my book after 2 1/2 working in the same place, and wanted to show my web designs. Now, I'm thinking that this is so heavy to put in on a pdf. Anyway I don´t even know if a PDF supports it. The other solution maybe upload it on my website :)

@oaklynstudio 5 жыл бұрын

You can put a GIF into a PDF. Maybe this would help? stackoverflow.com/questions/9009771/is-it-possible-to-embed-animated-gifs-in-pdfs

@TheBeautybound 6 жыл бұрын

Thanks for this, super helpful. When saving the file for the web, do you have to anything to optimize the file so the size isn't too large? I don't want to slow down the site.

@TheBeautybound 6 жыл бұрын

Does it work for animations?

@TheBeautybound 6 жыл бұрын

Hannah, my web page is probably double the length of the one in your demo. How many frames would you suggest? Mine seems a bit choppy when I put it at .2 sec a frame but way TOO FAST when I put it at .1. Any sort of rule of thumb? I've tried from 30 frames to 100 and can't find the happy medium. (Your tutorial worked like a charm, though). Thanks for the help!!!!