Okay. In this tutorial, we are going to create our tablet version. It's gonna look very similar. We're gonna play with some  of the padding on the sides here,  so it's not so far indented. We're gonna rearrange the stacking order of these thumbnails  and yeah, little bits and pieces,  but we'll get ready for tablet. Okay, so let's get started.

Now, I've already kind of planned through what I want  to do in my wire frame,  so it's gonna be easy to follow that. Um, what I also find is, uh, um, the wire frame's kind  of close to what I want, but I end up actually changing it  quite a bit as I'm kind of working  with the actual copy and the actual images. So, yeah. All right. Um, so first of all, I'm gonna turn on my guides. So I'm using command, uh, semicolon  or control Semicolon on a pc.

And you can see I've decided remember  to use three columns instead of 12. Okay? There's meant to be 12,  but it's just visually too hard to work with. So what we're gonna do is use our, um, yeah, use R 12 here. So first of all, let's move the background along. So what we might do is see down here my layers panel.

You might have to go to window layers to see this. I'm gonna lock the artwork layer  and unlock the background layer. And what I want to do is  maybe select all three of these guys. Okay? So, and I'm gonna,  all I'm gonna do is hold down the alt key while I drag it,  it makes a copy, okay? And just kind of move it over here  and it's gonna end up on this art board, okay?

And what I'm gonna do is, how am I gonna size this? I'm probably, I'm gonna have  to adjust this again afterwards, probably. So what I'm gonna do is I'm gonna grab all three  of these guys, stick them in the top corner to get started. That'll get me going. Okay? And then I'm going to adjust them one at a time.

So I'm gonna grab you, snap you to the edge. Now you can see mine's not snapping. And I was kind of, I was  just kind of fidgeting it for a second. I'm like, wonder it's not snapping  and frame to worked out earlier in a, uh,  the previous tutorial I turned off Smart guides. Smart guides are really useful. And it means that when I can line these things up,  watch snappy doodle.

All right? Yes, I said snappy doodle. All right, so we're gonna drag that one in. That's the green box. Drag in the black box,  and then we're gonna drag in this one. Now if I drag this one in, you'll notice  that it just kind of compresses.

That's not what I want. So we're gonna double click  it to go inside. Grab the edge of this. So this is my crop box. I've kind of gone inside of it now. Okay.

Um, I've double clicked it to go inside this, um, group  where I clipped it before or made a mask  and I can decide on how I want this to work. I'm probably gonna get this image in the middle to center. That's how I'm gonna do it. And code at least. Um, okay. And do I need it to be smaller?

Probably. Okay. It's gonna resize a little bit down  to the sort of size there. Nice. Alright, double click the background  to get back out and we're back to it. Square one.

Um, one thing it didn't do is  what I might do is just tidy this up. Here you go. Nice. Alright, so there's my background graphic. I'm gonna have to probably change that a little bit. I'm gonna grab this big gray box, drag him across as well.

Grab that corner, lock him in. And the height of this is gonna change quite a bit,  so don't spend too long on it. I'm gonna lock those guys, unlock artwork  and start moving this top bit across. I'm gonna grab, maybe these bits not grabbing at all just  to make life easier. Okay? And what I'm doing for tablet is I'm actually gonna  leave the navigation kind of there.

I'm gonna grab these three guys. Oh, make sure you, you hold halt  and don't drag the whole thing across like I just did. So I'm gonna grab that and copy it  and then I'm gonna undo put it back there. And I'm gonna come over here and go to edit. Oh, and go to edit paste in front. So holding alt while you drag it,  you don't just move it across.

Nice. I'm gonna grab these three. Okay. I've grabbed all of them, including the background. If I hold shift and click this one  that I don't want selected. I've just got these guys left, copy  and paste them, come across  and they're, they still fit nicely enough there.

And I'm gonna continue with that. All of this stuff's gonna come across holding alts,  lying it up nice. And yeah, all looks good. Not changing much for the tablet. You can see. I'm just gonna do this, turn you on and off.

You can see the difference that I am doing though is  that there's padding in this one. 'cause I've got a bit of freedom of space. So I've got this kind of inset,  but on desktop, sorry, on uh, tablet. I'm just gonna get it to line all the way up here. And yeah, the height works for me. Um, the difference is going to be these guys.

So I'm gonna grab all of six of these ones. Hold, hold, drag 'em across. And um, the difference with these ones is  that I'm gonna stack them two by two. Okay? So I need to, they need to resize a little bit. So this guy here is gonna come up  and you'll notice snapping to lots of things.

I'm moving these guys outta the way. Smart guides is handy. You can see it's not matching up  'cause it's a different size. I'm gonna have to hold shift and drag it  down so it meets my guide. The zoom, if you're finding it snapping to too many things,  I find it's always easiest just to come in nice and tight  and it will forget about lots  of the other things it's trying to snap to, okay? And kind of focus.

Focus. So I like that guy. But how do I match all of these at the same time? It's easiest as with it selected. You can see it's a width of this, okay? It's, uh, 3 6, 9 0.5 pixels.

Okay? So I'm gonna grab that, grab you. Can I do the more one go? I count. So I'm gonna do you, okay? And I'm gonna select it.

I'm gonna make sure that it's linked. Okay? So when I change the height, it changes. Sorry, when I change the width, it changes the height. Head enter. You can see it kind of scaled down.

So you my friend gonna be the same width and height. You can see they're just getting proportionately smaller. You,  you and you. All right? So you my friend, how did this go? You, you, it becomes a little hard if you wanna,  wanna shuffle the order, okay?

When you're using, it's easy obviously to do an illustrator,  but when you come to web design it becomes tough. So try and keep it the same kind of flow. So you, you, you then this one, then this guy,  Then this guy. Nice. All right. Uh, I've got my line down the bottom here.

Actually. I've got this gray box. It's a lot longer. I'm gonna have to extend my art board. Go massive. And we can adjust this gray thing afterwards.

And I'm gonna bring in, I'll bring in all three of you. I Can go in there. This line needs to be a lot shorter. Sometimes it's hard to grab this line and bring it in. Okay? Um, so you might need to zoom in.

Um, I find that's easier when  you're trying to grab some of those points. Okay? So you,  and I'm gonna grab you, one thing I didn't put in the last  bit is I wanted to add the little copyright notice  to the desktop one as well. It's gonna say copyright  2017. And we're gonna put  in, we did do this. I felt like we did the copyright thing earlier on.

Did we do it? Eh? Okay, let's go. We must have deleted them. Type glyphs. We did.

I remember this debacle. Okay. And copyright. I find it first time this time. Damn it. Double click it, it appears down the bottom there.

I must have deleted it. Okay? And this is Dan's portfolio. You put in your company name if you have one  Limited. Okay? And I'm gonna use our font that we're using,  which is open sands condensed.

And I'm using bold,  I think. Great. All right, so I'm gonna grab you guys. Nope, just these three. Copy paste them. Boom.

Across here. You go there. And what we might have to do is the ordering  of this is still gonna span, well, it's gonna span what? Six now. Okay, let's take them all. I've tuck that in one in, so we're all gonna span six  and we're gonna distribute centers  horizontally or vertically.

I can never remember. Okay? And that's what it's gonna look like over here. All right. Um, so that's it for my tablet version. I'll just tidy up the art board before we finish off  and move on to the mobile one.

That's kind of about right. I'm gonna unlock the background  so I can get this gray thing to slide down. And actually there's a bigger gap  in here that I want to kind of mimic. So I'm gonna lock the background  Maybe you guys down a little bit. Lovely. Alright.

Uh, that's our tablet version. Let's move on to the mobile.