How Is This Website FREE? | Shots So
Now I absolutely love me tools that actually allow me to screen grab various different things, and then simply make them look amazing. Tools like Snapper, Clean Shot X, or Brand Bird – all tools that I use pretty much on the daily. However, today I want to show you an absolutely free tool (at least at the time I’ve actually recording this video) that might change in the future, and this is called Shorts.so – a totally free tool that let’s be honest about it, when you see it, you’ll wonder how is this free. Let me show you what I’m talking about.
So, once you go ahead and access the site, go past the pop-up that tells you it’s in Beta (well, it is a beta), this is what you get. It’s a totally online way of creating your great-looking mock-ups. Now the cool thing with this is you’re not limited to just simple screen grab mockups. You can use mobile phones, watches, all manner of different things all integrated smoothly into Shorts.so. So let me show you how some of this works. First of all, we’re going to go ahead and grab ourselves an image. I’ve already screen grabbed something, so let’s go and click to upload that. I will add that to our mock-up, and you can see we now get a great-looking starting point.
If we take a look on the right-hand side, you can see there are a lot of pre-built layouts we can simply go ahead, click, and choose one that we think looks absolutely spot on fantastic. But we’re not limited to just using those. These are great starting points that we can then modify to tailor-make this to look exactly how we want. So moving over to the left-hand side, this is where most of the options are going to come in, and you’re going to see different ones based upon what type of mock-up you choose.
So first of all, you can see we’ve got mock-ups and frames. We’ll come back to frames in a moment. First of all, let’s go to the screenshot option, which is what we currently have. Inside there, we have an abundance of other types of mock-ups. So we may want to have a browser mock-up, and you can see that gives us a browser. Again, down the right-hand side, we get a range of different pre-laid out designs which we can simply go ahead and select.
And then coming back over to the left-hand side, we now have those context options. So, for example, we may not want to have a white kind of browser window; we might want to have a dark browser window. We might want to use Chrome as opposed to Safari. We can do that, and you see this already looks absolutely phenomenal. So you can choose whatever option works for you there. Then you can adjust your shadows, so you can see we can fine-tune and refine this on an instance by instance basis or we can simply go ahead and use one of the predefined non-soft or hard options, up to you what you use, and then you can fine-tune and tweak that with a slider above. Let’s put that back to soft. I think that looks really nice.
Then you can adjust your scale and position, so you can easily just make it bigger, make it smaller, and then you can use this little matrix to choose where you want the image to be focused. So you can see we can push this down a little bit further into the bottom right-hand corner, you can pop it right over the top left-hand corner, you can kind of do what you want. You can also manually do this by using the X and Y sliders, so you could very easily adjust this, adjust the scale, alter your position to get exactly what you want from your mockup. Pretty cool.
Now if we hop over to the frame option, you can see now we can change some other parameters. So at the moment, this is kind of a four by three layout, but we may want to have 16×9, or we may be using something like Twitter or Facebook, and we want the aspect ratio to be their preferred sizes. Well, all those are available inside this drop-down. You can see we can jump over to a 16×9; everything then sort of modifies to accommodate for that. You can do your vertical, you can do your horizontal, you can set it up any way that you want. Let’s put that back to 16 by nine, and you see that if you want to do this for Instagram, for Twitter, for Dribbble, for Pinterest, all those options are inside you. And then we can go ahead and we can adjust other things. We can choose to adjust this and set it to be transparent for the background; we can select the image we want to use. So let’s put that back to where it is; you can see we can easily change any of these parameters. We want to use solid colors, we can do that too, choose a color, and you can see that updates. These three dots under any of these now will adjust the overall amount of options you have, so you can fine-tune and refine this to get a color that you actually like, that you can keep in with what you’re trying to achieve. Now would be nice to have a Color Picker inside you, so hopefully, this is something that they will actually add in at some point, but to start off with, this is probably more than enough for most use cases.
And then if you want to use gradients, again, you’ve got those predefined gradients you can choose from. So we can pick and choose what we want from there. Now coming from probably one of my favorite tools right now, which is Brand Boot, this is the pro version, so there are extra features inside you. I actually pay for this, so this isn’t something I’m getting for free. You do have some more options inside you. So, for example, if we come to our background, you’ve got those options for gradients, and there are a lot of gradients inside you. But you can also go ahead and adjust things like the actual angle of this. So we can change the direction to get this exactly what you want. So I’d love to see something like that to be included in Shorts.so, so we could adjust the overall position of the gradient and also create our own custom gradients, custom colors, and those types of things. But like I say, maybe those are things that will come to a pro version where you pay for it. But if this is all you get for the free version, I think this is probably more than enough for 99% of use cases.
We also have desktop backgrounds. We’ve got vintage gradients; we’ve got holographic gradients, mesh gradients, and abstracts. So if you’re a Mac user, you can see you can pull up any other sort of older Mac design, more papers, or some of the most modern and up-to-date ones. Pretty cool to see all that inside there, so you’ve got a lot of options to pick and choose from.
So, those are your color kind of options. Let’s go back to our markup. Let’s go ahead and change the browser, and if we take a look inside, you’ve got a basic screenshot which we had to start off with, but you’ve also got devices, so you can create a mobile version of any of these, and again, you’ve got options on the right-hand side. The cool thing here is you can actually have this with multiple different versions, so if you wanted to show a side-by-side comparison of maybe an app or a website that you’re working on, great! If you want to present this to clients or potential clients, you could use this to create those mock-ups which I can say I think looks absolutely phenomenal.
Coming back up, we’ve got more options inside here, so you’ve got tons of new phones, all your Apple iPhones, and things like that inside. You’ve also got your tablets or your iPad. You’ve got MacBooks, you’ve got the iMac, you’ve got the Pro Display XDR, you’ve got the Apple Watch Ultra. We’ve also got ones that are just basically a simple photo, in other words, it just shows the screenshot off or a simple desktop which has none of those kinds of distractions. Again, could be absolutely phenomenal for you to demonstrate a design to a client, and again, you’ve got different variations.
So, you can see we can pull in additional options, we can do side-by-side comparison, so maybe before one and after the old design to the new design, and again all the options for putting your borders on here. So you can adjust the roundness of the borders, you can make them sharp and square, you can adjust your shadows, you could adjust all these different parameters to get amazing looking end results, and all of this is totally and utterly free at this point in time. I think this is absolutely fantastic. I love this kind of tool, so if you are in the market to have something like this, you can go ahead, test it out. The link is in the description, and when you’re ready, you can simply go ahead, download this, and then you can use it as you see fit.
Like I say, perfect if you want to use this in presentations, you want to use this in handing off to a potential client, all those kinds of use cases. So check it out, this is shorts.so. Link in the description. Let me know your feedback. Have you tried it? What do you think of it? Is this something you might hop on board and start using? Let me know in the comment section. As always, I’m Paul C. This is WPT until next time, take care.
