Canva + Smartmockups = 🔥

in this video we are going to bring your designs to life with canva and smart mock-ups we will create posts for social media like this one or this one but also i want to show you how to showcase how to present your designs to your clients for example under their best light and we will do stuff like this one so if this is something you want to learn how to do i suggest you keep watching what is up everyone ronnie here welcome back to our channel this is the place where you learn everything about canva how to use canva how to grow your business with canva how to become a better designer with canva we have two new videos every week one from me one from diana so if you're new here i know a lot of people are discovering our channel subscribe so you never miss the good stuff now today's topic is bringing your designs to life for this we are going to use a canva integration called smart mock-ups and i'm going to show you several ways to create these delicious mock-ups to use in your designs to share on social media or to showcase your work to your clients so without further ado let's jump into canva and let's get started [Music] all right i'm here on the canva homepage i am going to create a new document the size doesn't really matter so for me i'm going to use an instagram post okay so i'm going to create it from this style right here that says instagram post i have my blank instagram post and the first thing i want to show you is how to use smart mockups directly from canva right recently i think a year or so ago canva acquired smart mockups which is a company from the czech republic if i'm correct and so smart mockups joined the canva family and now works together with canva and i love when this happens because it means it is now super easy super integrated to work and create mock-ups with canva so let me show you how to do it so first you need an image okay so you could work with a photo you could work with anything but it needs to be an image meaning a flat image if you start designing like you create text boxes and you add shapes it won't be an image until you export it so for me here i'm just going to use one of our logos our rendy logo actually and this is already an image you'll see it is an image when you see this button right here with your image selected that says edit image so if it doesn't say that you first need to export whatever you are creating in canva into a jpeg or a png and then re-upload that into canva and then it will be an image so make sure that's the first step that you are working with an image okay next i'm going to click on that image and click on the edit image button okay once here you should see if you scroll down a little bit a section that says smart mock-ups okay so i'm going to click on see all and see what's in here so first i will be presented with a bunch of popular mock-ups so i have phones laptops greeting cards t-shirts book covers hoodies mugs all sorts of stuff and then the more you scroll the more categories you'll see so you see smartphones computers cards a lot of stuff here a lot of good stuff already so all of these are pretty much mockups that you can use you can place your image on so here i'm going to show you for example i'd love to create a hoodie just like i have the randy t-shirt right here that i created and by all means we are not selling these this is just a t-shirt we made for ourselves but for the purpose of this tutorial i want to show you and pretend we are selling them okay so i need a hoodie where can i find a good hoodie right here so clothing probably in the right place so this guy right here let's click on this okay so canva is going to do its thing here and boom we have our logo on the it's not a hoodie it's a sweater i don't see the hood but okay so this is what we have at this stage it is very important that you don't click out of your image otherwise you will lose the ability to customize this mock-up so how do you customize it by coming back to this panel right here and you will see the little setting icon or the controls here you need to click on that so let's click on that the first thing i will see is that i can pretty much adjust the cropping so it is by default set on fill but you could set it on fit so it reduces the size a little bit to fit the width of my t-shirt or you could go custom which is what i would recommend and i will start by reducing the size because this is too big okay so let's say if i want to reproduce something like this i will probably have to reduce this to 25 maybe even 20 something like that okay so i have the right size but it needs to be in the right position this to be here right so i can play around with the vertical position like so i'm going down the wrong way so let's bring this up like so and then let's push it to the right like so maybe a little bit up a bit more up i'm going down i need to go up yeah like so so this would pretty much be like creating a similar t-shirt and what i have here i can also change the color of this t-shirt or this sweater you can make it black to mimic what i'm wearing today so let's do this let's keep it like so once you're happy with this you can simply click on apply and then your mock-up will be created right here you have this photo right here that you can use in different ways so based on that let's try to create something useful this was just a demo i just wanted to show you okay this is what you can do directly from canva and smart mockup and this by all means is available to all users free users pro users you will be able to use smart mockup for free all right so now that you have seen what you can do let's use that technique to actually create something a little bit more polished for social media i want to create a post promoting that our new hoodies are out okay and i'm gonna replicate this technique so i'm gonna create a new page right here this post is going to go on my instagram so let's go ahead and do this so again i will start with the same logo okay with the logo or the image selected i'm going to click on edit image next i'm going to select smart mock-ups okay and this time i want to go back to clothing right here but this time i want to use this hoodie without any background so this is pretty much isolated you won't have any background so this is actually pretty cool so this is the first step smart mockup is gonna place your logo onto your mock-up don't click out this is a very important part of the process if you click out you will lose any option to go any further to tweak this any further and there's no way to come back so you'll have to start over but here click on the little setting options here and then instead of fill i'm gonna make it fit okay the size is about right so i'm gonna keep fit oh actually i cannot move it so let's go for custom let's reduce its size this time i want it pretty big and yes i want to push this up i need to learn how to go up all right so about here i think this is going to look great object color yeah i could change this to any color let's see how it would look in yellow no i think i'm going to stick with the white and everything else is good i'm going to click on apply so this is pretty much what i have i can now move it around so let's create that pose for social media i'm going to reduce the size of this hoodie slightly make sure it is here in the middle the first thing i want to do is to add a title okay so for that i'm going to press the t key on my keyboard to create a text box okay so this text needs to be way bigger let's go 100 and change the font to let's say this font right here this is good and i'm going to write hoodies render hoodies run the hoodies okay perfect you can make this even a bit bigger like 130. let's make sure this is in the not in the middle but centered it is centered okay so this is good and now i'm going to apply an effect on this title and make it curve okay so like so this is too much so maybe let's go 40. okay this looks good and i'm going to tweak this a little bit so randy hoodies this looks good i'm going to add another effect so it is curved 40. let's remember that for later i'm going to add a background to this okay yellow probably not i'm going to go for white and i know it's white on white for now but that's because i have something in mind so let me now add a background so i'm going to go to my elements and i want to first add a grid okay because i have something in mind i want to add a gradient into this grid so it kind of looks cool behind it and i want to add a yellow gradient so i'm going to go back to my elements and search for yellow gradient okay and click on photos all right now trying to find the perfect yellow gradient this one will do love this one with the radial gradient in the middle here all right so this looks great around the hoodies i can see my hoodie slightly behind my text background here so i can bring it up like forward actually i like that that it's slightly on top of my background here and one more thing i could do you see like this outline around my text here i could try to reproduce something like that so what i can do is to select my text box and the text box has the background so this background is not a shape it just comes with my text so i'm going to duplicate that okay so with it selected i can go command c command b okay you can see i now have a duplicate layer of that and i will duplicate it one more time okay i now have three okay so the base will be white then this one i want to give it another color so with the layer selected i'm gonna go to effects and change the color of the background from here okay so i'm gonna give it this color and similar for the last one i'm going to give this this gold color right here all right now what i want to do i want to select these two layers and scale them a little bit and then i want to select the last one and scale it a little bit more okay and now all i have to do is to stack them okay underneath my first layer so position backward okay so i have my first one here i have my second one here so i can move it and i'm just going to position it in the center but of course because i didn't center the first one oh let's center everything here and then i will move this thing some more so this one it is center you can see by the little dashed pink lines here i'm gonna release it here and push this to the back and then one forward okay and i could make this slightly bigger as well okay now this is what i have i'm gonna select all three of them i'm gonna group that position that in the center okay so now this is what i have this looks kind of cool i have something that records what i have on my logo so i'm gonna stick with this and yeah we have our first visual i can even make the hoodie come a little bit higher here so everything looks really cool actually i could give more space yeah be careful here when you move your image over the grid because it will snap into it if you don't hold your alt key on your keyboard it will snap into your grid so there we go we have our first visual for social media run the hoodies so you can post that on your social media account on your instagram and this is all created based on something we've created very easily with smart mocha now let me show you another example of social media content you can create with smart mockup let me create a new page here i have my white page my white canva i love to start creating from scratch so there we go this time we are going to create a post to motivate people to follow our tick tock account okay let's say we want to promote diana's tick tock account so i want to show her tick tock profile page you know where you have the button that says follow and then i want to put that in a phone okay so the first step is that i'm gonna use my phone i'm gonna go to diana's tick tock account and i'm going to screenshot her profile page okay next i'm gonna send this to my computer via airdrop all right and i will upload that to canva all right so i just did that and now i have diana's tiktok profile page right here the screenshot that i just took right here so i'm going to place that on my page and with it selected i'm going to go edit image smart mock-ups and this time i'm going to find a phone okay i want to put this in a phone and i want to create something cool with it so i'm going to go with this one phone21 same process it's very easy you see you have your mockups you have your image this time i'm happy with the settings i don't need to change anything just gonna click on apply and there we go i have my phone here it's kind of levitating which is cool so i'm gonna keep that here if you don't like the shadow you can crop it like so let's go let's go ahead and crop it and let's use the phone like so i'm gonna rotate it a little bit more and i'm gonna place this phone at the bottom here just like if it was simply laying there on the the bottom of my page and also against this side of my page just like if it was you know balanced here i'm gonna keep that like so and this looks pretty good next i'm going to create some text that says follow diana on tik tok okay so text box t key selecting my text i want this to be justified on this side and this time i need something big and bold so i'm gonna go for anton okay so anton all caps this looks good i'm gonna leave less spacing maybe 1.1 perfect so now changing my text follow diana on i'm going to go like this and then i'm going to add the tick tock logo instead of writing tick-tock i'm going to position this in my save zone like so follow diana on tick-tock logo i'm going to go to my elements search for tick-tock tick-tock logo this one will do it's perfect so now i want this logo to be exactly the size of my text here so i can go like so so if i want to be super precise what i can do is to bring a guide so for that make sure you have your rulers and guides showing so go to files show rulers show guides mine are already active so i don't need to activate them and then you will see these rulers here on top and on the left side just click and drag okay so i'm going to drag it i'm going to move this tick tock logo right here position it forward because it was behind my text i noticed and i'm going to move it so i can actually click and position my guide exactly where it needs to be i can zoom in if i need to to be super precise and on the bottom side there you go now i can bring back my tick tock logo here and you see it's slightly too big so now it is exactly the right size get rid of the guides so again like i'm gonna fit to my page to get rid of a guide just click on it and move it outside of your design area like so all right so this is looking good follow diana on tik tok okay so now what i do is to have diana's handle right here at the bottom so another text box this time i'm going to go for something obviously much smaller so let's say 50. and let's move it here okay that's already still too big so let's reduce that and okay at and her handle is diana munoz tv tv okay this font i feel is too big so maybe i could go something else maybe prompt yeah prompt is good let's reduce the size now i want this to stand out i really would like this to be a strong call to action so again i'm going to use the effect and the background really love the background effect because this really allows me to create that shape super easily but i don't like this yellow color i want this to be consistent with the rest of my graphic so i'm going to use the tick top color right here this red right here perfect and the text i will change it to white okay maybe bold this yes okay pretty happy with this so i can either like center it or i can justify it to the left with the rest of my design right here so again i can bring a guide to be precise and you see the guides they tend to snap on different objects so if you want to make it snap the right object so okay i'm good with this so i could leave this page blank i could scale this phone up a little bit to give it more importance in my visual so i could share that or again i could add a background so again i'm gonna go add a background for that click on the background go to my elements and clear my search here okay clear everything and scroll down a bit go to grid and then go back to elements and i could find like a gray wall background gray wall like i'd love some bricks or some cool pattern or i could use a video or so do something like that yeah adding some movement perfect now i have my social media post i can export that as a gif so obviously it depends where you want to post this visual if i want to post it on our facebook community tab for example i could export this as a gif so instead of video gif make sure i export only page 3. so this was a very quick and easy social media post to motivate people to go follow diana on tik tok and watch her canva tutorials tips and tricks over there on this other platform and shameless plug guys if you don't yet follow diana on tik tok this is your chance go and follow her account jana munoz tv some new stuff there some experimental stuff as well so yeah go ahead and follow her on tick tock all right let's continue i want to show you a completely different way to use smart mock-up so for that let's start over from scratch and with a new page in our document all right for this last project that we are going to create with smart mock-ups the idea for this one is to represent to showcase this document right here that i have created it's a brand style guide i'm doing this for the complete update of my canva master course i'm working on this like almost all the time because it's a lot of work so yeah i'm already up to section five of the course and this one is about creating your brand style guide so i have created this entire new brand style guide and i teach people how to create such a brand style guide so what i want to do is to use this document that i have created and show you how you can actually grab some of the pages from this brand style guide and visually represent them on a physical book a physical magazine or brochure okay so i'm going to be using a few of these designs a few of the pages of this brand style guide and put that into a mock-up of a brochure okay so this is what we are going to do for that i'm going to start by simply using this brand style guide okay so this is the document right here with the pages you can see if i click on the grid view here i have 22 pages so i'm going to close grid view and what i'm going to do i'm going to start by exporting some of these pages because i need a couple of pages to put in my mock-up but first let me go to my mock-ups so this time we are not going to start from canva but we are going to start from the smartmockups.com website okay so if you go to smart mockups let me go to the home page right here smartmockups.com this is what you'll see so in order for this to work like what i'm going to show you you have to create an account but it's completely free so you just like canva you can start for free and then if you want to upgrade then you have more options more mock-ups more of everything me i'm using a completely a free account here so i'm not paying for smart mock-ups this video is not sponsored by smart mock-ups or anything like that either i'm just gonna show you just want to show you what you can do and if you like it then maybe and if you like a lot of mock-ups then maybe yes it is worth upgrading to the pro account of smart mock-ups but for now you see i am logged in this is my profile picture and i'm going to start by going to magazines here so i'm going gonna click on magazine and you see immediately you have a bunch of different mock-ups some are pro some are free okay so we are going to focus on the three ones because the pro ones will have a huge like watermark on them so this is not something that i want and i want uh to showcase a few pages so i really like this one i wish i could see the cover like this one i could create a post where you can see the cover and then the inside but i don't want to extend too much so i'm just going to use this one right here so i'm going to click on it and you will see what happens here so we can see different pages actually one two three four pages and you can see here fourth page third page second page and you can see it's grayed out the one i'm looking at when i hover over the first page i can see it's the first page right here if i hover over the fourth page you see this one at the bottom third second so basically smart mock-up is showing me which page i am selecting so if i want to put a page of my canva brand style guide on this page i need to first export it so that it is in smart mock-up so let me show you how to do this by going back to my document right here so first i need to select a couple of pages so that it looks good okay so i'm gonna go for this page which says our logo and then i'm gonna use this page as well or i could use more colorful ones like our color palette let's go for our color palette so this one so the way you export that so that you can use it in smart mockups you have two options you can download this as a png and then come back to smart mockup and upload it okay so upload it from an image or you could connect with canva you see the canva button right here so this is what we are going to do so in order to connect it to canva from your original document go to your three little dots here okay click on that and under the share section of this menu find smart mockups so you might have to scroll down so here it is so i'm gonna click on that it's the first time i use this so i'll need to click on the use button and then i need to connect okay so connect canva to your smart mock-ups account all right so it is now connected and canva is asking me which page select a page so this is page 14. i'm gonna save this into smart mock-ups okay so canvas is preparing your design just like if it was exporting your design but nothing will happen because it is saved in smart mock-up so continue editing i'm gonna use page 15 as well so that will be the other page on the brochure same thing three little dots smart mock-ups right here save okay it's gonna take a couple of seconds i need two more pages but these other pages we won't really see them too much so i'm gonna go for let's say logo one let's say our logo this one okay smart mock-ups let's see i hope you're liking this tutorial guys if you do like if you just enjoy this tutorial appreciate our work the best way to support us is to give us a like this will really help us move along and show this video to more people to give us a subscribe as well if you're not subscribed to the channel but yeah we highly appreciate your support and i highly appreciate reading all of the comments every single day okay we need one more page guys let's go for this one these pages are not so important because you won't see much of them okay smart mockups page 10 okay there we go so canva is going to finalize this export of the last page okay this is done can now go back to smart mockups i'm going to quickly refresh to make sure everything is like up to date and now let's click on upload from canva and let's see if my pages are here and yes they are here so you can see this page right here so i'm going to select this one and smart mockup is going to give me a preview right here this is looking good i have some more options but this is already looking good so i'm just gonna crop and continue and then do the same for this other page right here okay from canva i'm going to select the other page about the colors this one perfect yes this looks great actually i could have swapped them around so cancel because it doesn't really make sense like the one with the title should be here and then the other one should be here okay so i'm gonna change that okay upload from canva yes so the first one should be this one no sorry this one i was about to do the exact same mistake okay this is right and the second one should be the one with the title so this one perfect crop and continue yeah now it makes a lot more sense okay i'm gonna upload my other two pages which are not so important but it's always good to have them so our logo let's say yep we can see another title here so that's good and the first page here which we don't see much of either let's go for this one select crop and continue perfect and there we go we have our entire mock-up of this brochure here i can download it can download it only in medium quality which is already quite a high enough quality because i'm not paying for the pro subscription here in smart mockups but i'm fine i'm going to go with the medium quality it's downloading it's right here so now back to canva and back to my documents here with my promo visuals and i'm going to import this directly here into my upload and i can click on it and you will see that it's looking pretty good okay so i can scale that a little bit more and there we go we have a nice representation of our brand style guide again you can create around this you can add some visuals to it so for example let's add a text let's say brand style guides okay [Music] okay like so brand style guides and then you can have a second text box that's kind of state your price let's say prompt thin this one is going to be 40 and you can move this here this is even too much but let's say 30 yep 30 will be good and then you can go all the way to here again justify this and starting at 499 for example like whatever price you want to add but brand style guides starting at 4.99 that's pretty much like if you want to promote your services on a website or on a social media post if you want this is really up to you okay so let's quickly recap we have three different visuals here two posts for social media and one post to publish on your website for example to showcase your work i have used smart mock-up directly from canva from the edit image button and i've also used smart mock-up from the smart mockup.com website as well i will leave a link in the description to smart mockups to the website so you now have two different options to create beautiful mock-ups for your visuals for your clients for your website anything you want really okay so now that you know how to design mock-ups with canva i suggest you watch the other videos of this playlist right here it is full of other canva tips and tricks that i create and diana creates and that will teach you more stuff on how to use canva thank you for watching until the end i will see you in the next video

Channel: Design with Canva

Views: 55,537

Keywords: smartmockups, canva mockup tutorial, create mockups in canva, easy mockup tutorial, how to create mockups in canva, how to make mockups in canva, smartmockups 2022, how to use mockup in canva, make mockups in canva, mockup tutorial canva, mockups in canva, mockups on canva, real life mockup tutorial, smart mockup tutorial, smart mockup video, smartmockups canva, smartmockups in canva, smartmockups tutorial

Id: qml5JUg2a6Y

Length: 30min 19sec (1819 seconds)

Published: Thu Mar 03 2022