Let Your Designs Stand Out with ANIMATED Mockups | Joshua Butts | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Let Your Designs Stand Out with ANIMATED Mockups

teacher avatar Joshua Butts, Graphic Designer and Photographer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

4 Lessons (13m)
    • 1. Intro Video

    • 2. Changing Out Artwork

    • 3. Replacing the Background

    • 4. Resources

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Many people use mockups as a way to showcase designs created. These are an incredible and effective way to communicate your talent and abilities. Using animated mockup goes a step further though and can really make your designs more convincing and effective when showing them in portfolios or online.

In this course, I will be showing you how to use animated mockup files and export them to .gif files that you can use to upload online or email. I will also provide a few resources that you can use to download animated mockups (both free and premium mockups) and follow along in the course.



Link Updated (4/10/17)


Meet Your Teacher

Teacher Profile Image

Joshua Butts

Graphic Designer and Photographer


Josh Butts is a Graphic Designer and Photographer. He currently works for a creative agency in Provo, Utah. He's worked with many people doing creative work usually involving illustration, logo, and web design. The classes on this channel cover mostly vector illustration but there are also many other valuable skills that can be learned from the other classes on the channel. Join some of his classes to gain from valuable experience and get better at design and photography yourself!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Intro Video: when you were a designer or artists. Getting work in front of people and convincing them that you're the right person for the job can be very difficult. Using mock ups is one of the most effective ways to help your work truly stand up. But that is among one of the most common ways artists and designers are already showing off their work. That is why using animated markets is the next step in pushing your work to the next level and really standing out among the crowd. In this course, I will be teaching you where you can find resource is to download animated markups and how to use them. Using animated markets is a much different ball game than basic static markets that you may have used before. But I will tell you everything you need to know to start using animated Photoshopped markups 2. Changing Out Artwork: Alright, guys. So to start here is this link on the screen that you're gonna go to to download the market file that you can follow along with. And so if you want to go down low that you can pause the course right now and go down, love it. Or if you're I have it downloaded, then let's get started. So open up the market file, see, in a month here and then it okay, and these files air kind of big, and so they'll take a second to open as you notice. And now, once you have it open, you'll want to have this timeline visible. And if you don't have it open already, you can go to window and then click on timeline right there and then El Papa. And then you can make a little bigger to make sure you can see everything. And then this is your point in time right here, and so you can scroll back and forth and you can see the animation. Now there's two different screens on each one of the iPhones right here. And so what you can dio to change them is going to your layers panel and you'll see these two layers right here. And these are your different screens that you can change. And so, if you want to change it, all you do is double click on one of the screens right there and then find your artwork and then place it right over the screen. So I'm going to go to this file and open up some act designs that I've created. And so I've got a is That's crab. This one right here. I'm going to talk in that perfect Photoshopped, and then I'll pace it right on the front. Well, dragon in place there, and then what? I like to do it to make sure that it's gonna be visible in the other pile, is you see how there's two different timeline layers on here. Sometimes these market files automatically have timelines in your smart objects, and that can cause problems with seeing the artwork in this layer. So I'll give you an example of that right now. So if I just save this, um, and if I delayed the layer underneath, can I just say this and I go back to this other file, then when I'm scrolling than the artwork disappears. And that's because the smart object has a timeline where it appears and disappears. Well, you can do is if I go back to my smart object layer. I can either drag the layer in the time line in the beginning, so I know that it's gonna cover that whole range. What I like to do to make sure that it's gonna show up around the whole time line is all this go to layer and flatten image, and that way there is no timeline here anymore. And so if I say that, then it's going to show up no matter what. And so that looks really good and I will go to this other layer right here, which is the screen right here and all. Double quick that, and I'll grab some other artwork for that screen that this one helping that and no dragon in place. And then this one you can see doesn't have a timeline, so this must have already been flat. It's a lie commercially, Sele's. Then I can fix it of that and save it. Now this updates that screen on that I and so I can go back and forth again and see how the animation looks. And let's say that looks pretty good. And now you can do in the timeline to preview your animation is click on the soul of year right here and then change your resolution. If you want it to load the video faster, you could do a low resolution and then looped playback. Or you can. It's like that. I like to look it because I'm going to export. This is an animated GIF that I can upload to my project. So if they have play now, it's gonna play this animation at the settings that I had specified. And so that's looking really good with these reflections that air and meeting back and forth. 3. Replacing the Background: Now for this next part, I'm gonna show you how to replace the background for the animated Marca. The easiest way to do this is to go down to this layer right here. That's the background. And if you double quick on it, you can see it's made up of all these different frames. And that's how they got this animated shadow underneath so easily. Change this background to just one solid image or color. I can just go up to layer and flatten the image, and it's gonna discard all this animation data. And then I just got with the one sold layer. And so now if I say that right now, as you can see and go back into this document and scroll back and forth, you can see that the animation on the background is now frozen and it doesn't animate the shadows, but it's also still visible the whole time. And so if I go back up to that other smart object now, I have already copied an image from the line taken, do anything, and I could just taste that right here. Or you can go to file and place an image were you can open an image and dragon and then I can go to blur. And I'm just gonna blur this out just to get a nice color in the background. And now you can see it created a new video layer from that. All I need to do is just flatten it again, and then I can save it. Does it save? And now it's updated that background right here, and you can school back and forth and basically change the background to whatever you want . So now I'm just going to undo that and go back Teoh this other background that have the animated shadow on it. And now another problem with a background that's animated like this, or even the colored one I just placed is it increases the file size by a lot. And using a solid background with something like this can decrease the file size a lot. And another way of adding either your own custom background or a solid background is, for example, on this project right here. If I scroll end of bottom where I've loaded in this enemy to give, I have this great background right here that I could just match into the video file because you can't export gifts with transparency on them because it looks really bad. So what I can do is just find whatever color is on this background and match it to that. And so you can do for something like that is check whatever background color you need. Um, let's say I just want to find out what this is. I have, ah, extension for Google chrome that I'm using. Um, I can click on and you can see the extension showing up on the screen if you want to go download it yourself. So when you do is click on the middle and then go find the color. I want great there, and then I can see the hex color or that that I can use it for shop. So it was coffee. That and then go back to photo shot and then go to where my background layer is right here and then all going at a solid pillar, as you can see. And then I'll just paste in the code cricket. And now, as you can see, that's not the same grade that I had it online because you can see these two colors right here are changing that. So I'm just gonna do it these two layers. And now we get that gray color that I was looking for. I want to match on my private. So I think this all looks pretty good, and we can do now is just export your file and get right here export and save for web. And one thing that I already know, what's gonna happen is this is a pretty big file and there's a lot of friends in it, and I've also got that color that created and it's it's offset in the timeline. And so I just want to make sure I dragged that back. And you can do that with all your different layers is go through all of these and check that they're all going to match up right here, because if you don't, your animation won't look correctly, and there's going to be like a glitch of the end. So I like how this is. And as I mentioned, I know that this file sizes pretty big. So I can just do is go to image an image size, and then I'll just resize this, too, to a 900 pixel with, and that's gonna decrease of file size by a decent man. I'll go to file export Safer Web, and then this will load up and it will take a second. Usually takes a minute, these air said anxieties to get a pretty decent file size to make it manageable for uploading online. It's now this files loaded and you can see with the file size. I pick 906 75. That's six megabytes, and so that's fairly reasonable or my project. Now you go into looping options and make sure that you're looking it forever, and then you can save it. So go to where I want to say that my men say that. Now let's upload it to the project and see how it looks. I'll go at a project on my be Hance, and then I'm going Teoh. It's rather than right here. The media find. Now that I've got that upload, I could just say the project and check it out. Let's click on the project as I'm scrolling down. You can see the different screens and then at the M. This looks really nice. That blends right into the background and is a really nice way of showcasing my designs. So that's it for this course. I hope you enjoyed it and really found this useful. I love using animated mock ups, and they really help your designs to stand out among the rest. And so thanks for watching it. And if you could give me Arabia, if you like the course, then please do that. Thanks. 4. Resources: are you guys? So in this last video, I'm just gonna show you a couple of the places where I get mock ups and where you can find some free mock ups or mock ups to pay for It can be really nice to So this is one that I is . It's I store dot graphics. And if you scroll down, you can see some of the different ways they have their markets implemented. They have some of these mark ups set up as video files, which you can also use, and the scroll through. They've got some really nice, different things that you can see. The next one that I've used is G k mock ups dot com. They've got some really nice animated markets is you can see right here. If I look at this, these air some in a train station and if I click on the different previews, you can see what they might look like. And so these air really kind of nice and a good way to show your designs with some of these markets. Now, this other one that I use is these have a lot of free mock ups on this website It's a mock up world dot co, And if you go down here, all these ones on this page, if you go to the header under free mock ups and go down the animated markets, all of these ones right here are free animated mock up. So you can see here's one that we used in the video. And so for the project, you can download any of these markets online. You can buy a mock up, and I'm excited to see what you guys come up with.