Subscribe or Login to watch video

Login or Subscribe to watch video

39 - How to make Semi flat 3D icons & ui design using Adobe Illustrator CC


Questions & Comments

No comments

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hey there, in this video we are going to use Illustrator to make this kind of semi flat design. We'll use these icons on the left to get started, then we'll do some more interesting things with the App Design on the right. Let's go and learn how to do that now in Adobe Illustrator. 

First up, open up the icons document in your exercise files. What we're going to do is, we're not going to-- these icons here, we're not going to kind of 3D rotate them at the same time as these guys. We want these to have an extreme depth. We want these guys just to kind of plaster to the top. So first of all I'm going to select all these circles. So I can hold 'Shift' and keep clicking, so I'm going to do that. I got them all selected. What we're going to decide now is the effect you want. So if I go to 'Effect', '3D', and go to 'Extrude & Bevel', when they're not grouped, turn Preview 'on'. What ends up happening is, these guys rotate, but kind of irrespective of the kind of total group-- let's have a little look. I'll switch it this way around. 

They're just kind of doing their own thing. I'm going to do a little screenshot here so you can see what I mean because if I hit 'Cancel' and say I'm going to group them first, and go to 'Effect'-- actually I'll bring in that graphic, that's my screenshot. We could use the magic of editing, Dan. No, must do it all here. So I've got this background, I've grouped it, the difference is, if I go to '3D', and go to 'Extrude & Bevel', and I do the exact same thing; turn Preview 'on', can you see, they are now, there's more of an Isometric group. I'll rotate you around. Can you see? they kind of know where each other are in the world, whereas these are all individual. Hopefully you get the idea. 

So decide where you want to do it, where you want these things to lay down. Decide on the depth, I'm going to have mine quite thin. Try to forget looking at all the random circles everywhere. I'll kind of try and steer through them. So once you got a kind of how you want, you can decide as well-- at the moment I'm going for this kind of linear flat, semi flat Isometric kind of drawing, where there's no perspective. You could though go into here, and say actually I want Perspective, and crank it up. So there's this kind of full depth. You can play around with the lighting as well, and how this works, but at the moment I'm going to turn 'off' the Perspective and have them like this. I'll move mine right back to the top. 

So we're kind of there. Now we need to do the same thing with the icons, but the icons use a different mode, so not using Extrude. What we do need to do is, remember, these angles. I'm going to take a screenshot of this, again using my-- if you're on a Mac, it's 'Command-Shift-4'. You can drag a box around that. Ends up on your desktop. On a PC I think it's just 'Print Screen'. You can just paste it into Illustrator. Either way, let's click 'OK'. We need to make sure these guys are grouped as well, if you've grouped the background. So we've grouped the circles, so we also need to group the icons, which I've already done for you. So, the slight different effect is 'Effect', '3D', we're going to use 'Rotate'. Turn Preview 'on'. 

What we need to do is match what we had before, and I didn't bring in that extra screenshot. Let's grab a screenshot. You, 'Effect', '3D'. 'Rotate'. Preview 'on', and just type out these, this one's '36'. '-35'. '18'. If you had Perspective, which we don't, you can match them as well. I'm going to click 'OK'. You can see now, they match the background stuff. We might have to do just a little adjustment to get them right in the center there. That's how to do semi flat icons. 

Now, what I'll quickly do though is we'll do a Shadow on it, then we'll get into that thing you saw at the beginning of the application. So skip over here if you don't want to learn how to do a Shadow. So what we're going to do is, I just want the circles. I'm going to make a duplicate of it, because I don't want-- we're going to fake a shadow. You could use the Drop Shadow Tool. I find I never get good success with that. So 'Effect', 'Stylize Shadow', if you want to do that. What I'm going to do is, first of all expand these, because the-- they're driving me mad, so 'Object', 'Expand Appearance'. Now I want to join them all up. To join them all up we need to make sure they're not grouped so I'm going to click off in the background. And you are all grouped, so I'm going to right click, 'Ungroup'. They're ungrouped, these guys are grouped. 

So I'm going to select them all, ungroup them again. What are we left with? Now it's a kind of a testing. So they're all ungrouped, I know this is probably not going to work. So grab my 'Shape Builder Tool', and drag a box around them all. It meant to join them all, if it doesn't do that it just means some of the parts, like this guy here is-- right click, 'Release Clipping Mask'. There's some-- 3D ends up with some artefacts, so I've got all these guys. If you're doing it with squares, I tested this before, it didn't have this problem. 'Release Clipping Mask'. You might have to do some ungrouping, releasing Clipping Mask. Now I've got them all, Shape Builder Tool, Fill color, I'm going to pick black. I'll hold the 'Shift' key down, just drag them all, and hopefully it's going to stem into one giant thing. 

So now what I want to do, I want to group them, just for no good reason. Grab the right tool, the Black Arrow, I'm going to put them just underneath. This is what I'm doing for Shadows. And with them selected, under 'Effect' I'm going to go to 'Blur', and I go to 'Gaussian Blur'. Turn Preview 'on', and just adjust this radius until you feel happy. It's going to be too dark to start with. I want kind of a light one there. You can either play with the Fill color, or the Opacity, and just turn it down, so it mixes well with the background. What you also might do is play around with-- under 'Opacity', under these Layer Modes you might find one of these that works better with the thing underneath. Ours is going to work just fine under 'Normal' because we have a really flat background color. 

How much do we like those? Not sure. I'm going to try and find these guys. We don't mind, we just want to get on to the next bit. Let's get on to the next one. The next one is, I've made an Artboard, and I've kept it quite far apart from the first one just because, remember, flipping things around, we need a little bit of extra room. I'm going to bring in the App mockups. Now I've mocked these up in a program called Adobe XD. You can mock them up in Illustrator or Photoshop, it doesn't matter. But I've done this job, now I want to kind of make this Isometric laid down thing. So I'm going to bring in all four images. It's in your 'Exercise Files', under 'XD Mockup'. Bring him in, click once, twice, three times, four times. Now, 'Black Arrow', click off. I want you, I'll use him later on. These three guys I would like to lay out now. I'll use my shortcut, remember, I'm selecting all of these. 'Command-Function-F12' is my 'Distribute these Centers'. 

So to get started, I want to group these because I want them to be kind of operating together. Then we go to 'Effect', '3D', 'Extrude & Bevel'. Turn the Preview 'on'. Because we're using images now, and not just vector it is going to freak out your computer a bit. So if you're finding it really slow you might have to go and close down every program you can to kind of try and facilitate this. So I'm rotating it around, I've got a little bit of Perspective in this one. How much? Cursor in there, just using my up arrow. Little bit of Perspective. See, it's taking its while to catch up, because it is-- I'm just going to type it in. I'm trying to record using screen capture software as well, which is stressing everything out, 3D, it's all going nuts. So that's what I really want to do, a little bit of Perspective and get the angles how you want them. I'm not sure I'm happy with them yet. Yes, looks good. So don't want more Perspective. So let's click 'OK'. 

Next thing to do is, either Drop Shadows. We'll now as well do the Drop Shadows now before we do this thing. It's essentially the same as this first up. I'll show you a couple of extra tricks as we go. It's worth hanging around for. So what I'm going to do is duplicate these guys. Duplicate these guys, so I've got an extra copy. Get that guy out of the way. And we're going to-- remember, exactly like we did before. And I go to 'Object', 'Expand Appearance'. So they're no longer editable 3D. And what we'll also do is, right click, ungroup. We want to use the same trick as we did before. I'm right clicking, ungrouping. There's probably going to be some tricks we need to do. 

I've ungrouped them a few times, let's give it a whirl. Let's go to Shape Builder Tool. Hold 'Shift', and say, "All of you fellows join up." And all undid, except for the one I didn't select. Awesome! This, I'm going to give them all a Fill color of black. And what we're going to do is, there are some bits underneath. It's kind of weird when you work in 3D, there's all sorts of Clipping Masks, and bits going on. I don't need you, just want you three. And I group them, then I go to my cheap Drop Shadow trick. 'Effect', 'Blur', 'Gaussian Blur'. 'Preview'. It works for me. And I'm going to stick them underneath. And what I'll do is lower the opacity in a second once we get the other image underneath. 

So now this guy, I need to work out what angle to put him on. I didn't take a screenshot, so I can go back in, select it, click on '3D Extrude & Bevel'. Now, screenshot. 'File', 'Place' that screenshot. You're thinking, "It better be worth me hanging around." Because it's the same thing over, kind of is. There's a gem at the end, I promise; skip to the end. So we're going to go to 'Effect'. We're going to go to, not that one 'Effect', '3D', and we're going to go to 'Rotate'. And in here, I'm going to copy, '59'. '-26', '8'. And the Perspective was '25'. I'll leave Preview off, stop it freaking out. I'm going to try and adjust it. All right, you, done your job. And you should be the same Perspective as this stuff. 

What I might do is just scale it up. I'm going to crop it at the end. Scaling it up freaks it out. If you're wondering how to speed up, if you're doing a lot of this, there's a whole video series on how to speed up Illustrator. In this case it's going to be 'Effect', 'Rasterize Settings'. At the moment we're doing it too high, they're 300dpi but I'm just dealing with it. I'm going to push this to the back. What I might do with this is, I'm going to crop it all out in a second. 

There's a couple of things I want to do. One is, I want to move these guys so they're kind of just off screen. So you, plus-- it's a little hard to grab. So you fellows, I want to be a little bit bigger. Prepare for freaking out. Scanning is the worst offender. I want to come off. It's really even hard to see my Artboard now. I wanted this kind of effect, you saw at the beginning. Cool, my Shadows. A couple of things we didn't do. One was, in my Shadows here I just left-- so I'm trying to get a hold of my Shadows underneath. There they are. Cool. I'll lower the Opacity, or you can go-- because there's something underneath it now we can go to 'Opacity' and have a look at some of the Blending Modes. Soft Light's probably going to work. Maybe not what I wanted. Overlay. Dan, you should have practiced this first. 

I'm going to go back to 'Normal', and just turn the Opacity down. Yes, looks good. You're waiting for the secret trick. So what I'm going to do is draw a big rectangle out the back here. I'm going to lower the opacity, because I want this background image to be not as strong as these. So I'm going to send it backwards until I've kind of-- maybe it's a bit too dark now. If I've lost you with this 3D mess here it's okay, I'm a little lost myself. Basically I wanted this gray box to make this big shape at the background just a bit darker, so that these apps which are that kind of focused seem a bit more in focus. We'll speed this up. 

So, the trick that I was holding at the end here, it's kind of a nice trick when you've got really busy stuff here. We were all confused, what's masked, what's not. I wanted to just clip it down to the Artboard. There's a cool trick in Illustrator, if I draw a box the same shape as my Artboard, that was pretty close. If we go to our Layers panel, what we'll do is select everything on this Artboard here and we'll put it on its own Layer, so I'm going to make a new Layer, I'm going to drag this blue dot, the green dot, and now I want to have three, let's lock this old Layer. That's these guys that we're working on over here. Now if I twirl down this Layer and I make sure that new rectangle I drew is at the top. Here he is, along the top, if he's not, just drag him up. And the cool thing about it is, if you click the word 'Layer 3', you don’t click anything else, click 'Layer 3', and there's an option here. This is 'Make Clipping Mask'. Just a cool thing where it makes everything on that Layer, it takes that first object, and turns it into a Clipping Mask. My box wasn't quite ready there but this might be something—

It's quite useful because you might have seen this in-- what's really nice as well, they're all still kind of individuals in there. So I can grab the Shadows in the background here. I'm not going to move it because that thing there takes forever to move around, but they're all kind of just hiding through this window. We're not having to do it for every shape. If you're like me, in the past you would have just drawn like you would have five boxes, and then Clipping Masked all at separate parts. So this way is just a nice little extra trick. Worth waiting for? I hope so, but anyway I'm not super happy with my layout but you're all watching me the whole time so I can't even get a chance to kind of stick the tongue, and go, "Yes, I want a bit more of this." And the patience with the 3D Revolve I guess, because we're videoing. I don't need that anyway. That's it for this one, let's look at the-- let's go on to the next video.    

ALL ACCESS: $12 per Month + Cancel anytime