How to Create a SCROLLING Website Mockup in Photoshop for Instagram

Рет қаралды 14,577

Big Cat Creative - Squarespace Tips & Templates

Күн бұрын

⚡️ FREE TRAINING⚡️ DIY Your Dream Site: 5 key steps to a stress free + beautiful website - Join instantly here: bigcatcreative.com/free-train...
Today we show you how to create an eye-catching scrolling computer or laptop animation mockup in Photoshop. Showcase your e-books, online courses, and website designs in a compelling and engaging way by adding this creative element to your site. Check out our easy-to-follow step-by-step guide to create a video or GIF ready to share.
TIMESTAMPS:
0:00 Intro
0:29 Selecting an image
2:14 Taking a full web page screenshot
4:00 Resizing your image
6:00 Adding your screenshot
8:55 Creating a frame
12:05 Creating the animation
17:30 Saving as a GIF
19.10 Saving as a MP4 movie
MENTIONED IN THE VIDEO:
👉🏼 Read the written post on this topic: www.bigcatcreative.com/blog/s...
👉🏼 Squarespace: squarespace.syuh.net/bigcatcr... *
👉🏼GoFullPage Chrome Extension: chrome.google.com/webstore/de...
👉🏼How to Optimize your Images for Web: www.bigcatcreative.com/blog/o...
👉🏼How to Create a Scrolling Computer Graphics in Canva: www.bigcatcreative.com/blog/h...
💰 SQUARESPACE DISCOUNT CODE: Use code BIGCATCREATIVE10 for 10% off your first year of Squarespace! Sign up here squarespace.syuh.net/bigcatcr... *
📣 Want Squarespace Tips straight to your inbox every week? Sign up here: view.flodesk.com/pages/612971...
💻 Ready to up your Squarespace Website Design? Check out our Squarespace Template Kits: bigcatcreative.com/templates-yt
MORE GOODIES:
👉🏼 Visit our blog full of Squarespace Tips & Tricks: bigcatcreative.com/blog
👉🏼 Follow us on Instagram: / bigcatcreative
*This is an affiliate link. I may earn a commission if you sign up using this link, at no cost to you, of course :) I only promote things that I love and recommend.

Пікірлер: 21

@marissamansfield6311 4 күн бұрын

Thanks for sharing , very helpful!

@TwoLettersStudio 8 ай бұрын

This was so helpful! I didn't know I could do this in PS!

@onlytanofficial 9 ай бұрын

Wow!!! This is awesome!! I don't think Photoshop can do the animatio like this!!! OMG!!! Thanks for sharing this tutorial. It really helps a lot!!

@debrasimon7105 3 ай бұрын

Loved this! Thanks so much :)

@nicolevictory6829 Жыл бұрын

Thank you so much for this! Simple and easy to follow.

@digivip7944 Жыл бұрын

Thanks for the value provided with your video. Exactly what I was looking for and it works great!

@xtraghenghen3221 Жыл бұрын

Simple and straight! You are awesome

@BlayneWhite 2 жыл бұрын

Well this is fantastic! Thank you so much! Always looking to up our game and I don't have time to search web to figure this out. LOVE IT

@PintoTV Жыл бұрын

Great tutorial! Thank you :)

@Milchenkaa Жыл бұрын

wanderfull, thank you so much

@dwightwilliams5717 4 ай бұрын

tysm!

@luiskamau Жыл бұрын

I actually prefer this to canva. Thank you for sharing.

@glosito759 Жыл бұрын

GOOD!!!

@jevy2914 5 ай бұрын

Thank you for this. Another idea, instead of using the selection tool is to use smart objects. That will help you fit an animation into those angled screens that you mentioned at the beginning of the tutorial.

@jevy2914 5 ай бұрын

Double click the smart object and it will bring you into a new file. Add the website screenshot and add the timeline. Save and go back to the original file and it will be there. Save out the same way.

@SusanneGeert 9 ай бұрын

Such an amazing tutorial 🙌 Which do you prefer for this - Photoshop or Canva?

@BigCatCreative 9 ай бұрын

Hey Susanne! Both are great but we recommend Canva if you're not well versed in Photoshop as it's just sooo much easier!

@prithvidhaduk1856 Жыл бұрын

Hey! When I enter the second frame, my 1st frame changes to 2nd one. Why is it so??

@billapk9188 Жыл бұрын

same happens here

@hillarymcmahan531 8 ай бұрын

The Photoshop steps are very clear, thanks! But something weird is happening when I upload the exported GIFs to my gallery section in Squarespace. I'm using the slideshow reel gallery type, FWIW. Multiple copies of the same GIF appear in the section, even though I have only uploaded two GIFs total, and they repeat infinitely. I guess it's OK for them to repeat infinitely; I'm just wondering why that doesn't happen with the gallery sections that contain JPGs.

@BigCatCreative 8 ай бұрын

I'm not 100% sure what type of gallery you're using (as there's a few different ways/types) but if you have continuous scrolling on then the same items will just keep rotating around as you go through. If you don't have that on, then it sounds like a glitch and I would reach out to Squarespace and ask!