All right, in this video we're gonna be at this one  for a little while 'cause we are going  to translate everything from our desktop to our mobile. You might be building mobile first  and you might be doing the opposite, kind of unpacking it  and giving it space to work and use on a desktop. We're doing it the other way around. So I've moved my first  block along, which is called box navigation and box Hero. So I'm going to get rid of copy  and I'm gonna start working on this one here. There's lots of elongation that's gonna happen.

There's some font sizes that I'm gonna have to play around  with and some alignment to do. So let's get into it. So I'm gonna zoom in control plus  use my space bar to move around. Maybe zoomed in a little bit too much. Great. First thing is I'm gonna use, let's make this happen.

Grab the font size and drag it down. This is all right. What I might do is get it to break onto two lines actually  'cause it's getting quite small there. So I'm gonna select it, bring it back up to a font size. So it's gonna break down to that. When it's on mobile, this bit of lower ipsum needs  to come down and needs to get a lot.

The box needs to get a lot smaller fit  with some padding on the sides here. It's gonna break to what? Five lines. Okay, that's okay. Font size. I'm gonna leave as is set to 16 pixels,  which is a big enough font.

When you're keeling with font size on mobile,  you need to really test really. But as a guest thirteens about as small as I want to go. And sixteen's quite a big font but quite legible. And because this is more kind of sales text,  it's happy to be that size. So I'm gonna make it just a tiny bit that great. Okay.

My more box is gonna have to come down  and this whole container's gonna have to get bigger. So what I'll do is my, I've got two parts to do. I've got my um, box, which is the underlying, okay,  underneath my clipping pass there. Okay. And close that down. So make it easier.

And I'm gonna make this bigger first. Okay? And you'll see that it's actually  way off the sides of the pages. It's up to you. It doesn't really matter  for our mock-up, okay? But just to make everything a bit more usable,  I'm gonna drag it in and it's gonna be  about that much bigger.

You might have to resize the bricks image as well  or reposition it depending on where you want it  to be or scale it down. Okay? So I've used CTRL T  and I'm gonna scale it down  to fit just so you can see a bit more. You'll notice that the blurs disappeared,  but when I click enter, the blur will come back eventually. All right, zoom in. Okay, I'm gonna move both of these holding shift  to click both of them all and move 'em around.

That's going to be the hero box moved across. Next one is to deal with the the who box. Okay, so I'm gonna grab him,  hold down alt while I'm dragging it across, move it across. And where am I gonna position it? Kind of. I'm just gonna start so I can see it all.

So I'm gonna but it up the bottom, the hair box. I'm gonna zoom in and how am I gonna do this? What you're gonna have to do is make some tough  decisions when it comes to mobile. What's gonna make for a great experience. And for me, I've decided that I'm gonna get rid  of the word copy and I'm gonna decide  that actually these two are gone, which is the rectangle  and the image that sits over the top of it. So I'm just gonna use who we are  and the Lauren Ipsum there.

So who we are needs to get smaller. Okay? So grab my type tool, click in here,  I'm gonna select it all and bring it down. It's fine. Grab this one, move it in. Gonna grab the Lauren Ipsum, move it in.

Okay, use my type tool. Just shrink the sides in. Okay. And how close to the edge do you want to get? Just kind of doing it by eye who we are. Okay, that kind of padding, it's gonna work for me.

Now this box is gonna have to get a little smaller whereas  the there, here's my transform tool. And what I might do is do what I did on the other box,  zoom out and just shrink it in  so it's a bit more appropriate. Next one we're gonna do is the services box. So I'm gonna find my services box there is there  and I'm gonna zoom out and I'm gonna alt drag it across. We might as well start. Doesn't really matter where you start.

Here we go. We've got lots to do in this one here. So I'm gonna grab the purple box. So it's called box services. I'm gonna transform, that's great  and we're gonna have to do some stuff with these icons. So first of all, I want to get the icons  to kind of stack above each other.

Then I'll work on the text. So all my icons, there they are. Now these little boxes here,  I'm gonna twirl down just to make them tidy up. Okay? It's the color overlay. So I'm just gonna twirl it up.

Still there just means it's a little,  looks a little prettier on my layers. I'm gonna select all of them. And  what I might first do is actually  just scale it down a little bit. So I'm gonna use my transform tool. How big? It's probably a little small 'cause I  wanna stack them on top of each other.

So I want 'em to be kind of roughly about there. Click into. Now what I'll do is you can see my ones have kind  of flown all around the place in terms of my document. Okay, where are they all? There's  one there, there's one there. It's because I was dragging 'em around.

They ended up on different boards  and that's kind of one of the common problems  with this new outboard system. So what occasionally what you have to do is kind  of re drag them just to get 'em back into the same place. Watch this. I'm just gonna drag them kind of back to  where it was and they all kind of group back, right? So I've got my print, I've got my app there  and my photography and the video. So the app one is gonna go there, I'm gonna go underneath.

Then the photography one. Where is he? There he is all the way over there. Come back. And then the video one, where is he? There he is there.

So it's quite good to be out this far when you are dragging  icons that are a little bit lost on the outboard. 'cause you notice before if I undo that,  when I started dragging it, it appeared kind of up there. And if you zoomed in too close, you'll never see it. No. Never know which way to drag it. In terms of lining them up.

I'm going to go, print's gonna be about there  and I'll grab all of these guys. And there's an option here that says align. Okay? And they're all line up in terms of distribute centers. There's this option here. Now it never works perfectly.

Distribute centers. You can feel if I zoom in  for me the feels like there's those gaps are even. But this one here is a lot bigger. So even though you have done that,  I'm gonna just make 'em a little bit bigger. So I'm gonna make video, tap him down, I'm gonna go to  photography, tap him down,  I'm tapping it down using my keyboard  and the app, using that to tap it down as well. Great.

Now comes the text. So I'm gonna keep print. I'm going to, I've decided in this case  that the lower ipsum down here, the text is actually going  to be ah, too small to be usable in this field. I'm gonna use uh, just the high level bits of text. So Lauren Ipsum, Lauren Ipson, Lauren Ipsum, Lauren Ipsum. I'm gonna bin.

Okay, so I'm just gonna use these three,  sorry these four and to try and get 'em all on screen. I'm gonna left the line. Them there, they all are. What I'll do is print, move up, app, move to over there,  photography, move down, video move down. In terms of the size, they're pretty much determined  by this photography one that's the largest of the gang. And he hangs off the side.

So I'm gonna do a couple things. I'm gonna select them all, move across a bit. I wanna grab all my icons,  push 'em across a bit, okay? And back to my print with these guys across. And I'm gonna now grab my type tool and  because they have them all selected, I'm gonna be able  to change them all the same. So I'm gonna click and hold and drag.

Okay? And I'm gonna make sure they're all left aligned. Okay, go back to my move tool,  line them all again on the left  and go back to my type tool in terms of font sizes. Actually back to my move tool, move across. That's about me for the sizes. Okay, I'm happy with that.

It's at what? 23 point. Okay. And it all lines up. It all fits. There's nice clear distances  between them to be able to tap them.

Okay? To jump to the services pages. Next is gonna be portfolio. Now you'll notice in my desktop view I've got quite a big  set of portfolios. Okay? So we've got eight different blocks.

What I'm gonna do is I'm going to hide half  of them when it gets into mobile to give it a sense,  a good sense of what we do,  but not have this epically scrolling page. 'cause I'm gonna have um, one box on  stacked on top of each other. You could try and do two. Okay? They're gonna be quite small. I prefer in  this case to do one.

And so I'm just gonna do four on top of each other  and exclude the other four. So what we're gonna do is move them across to here. So first of all, what I'm gonna do is str  dragging the whole bunch of them across. I'm gonna drag them all over one at a time  to make it a little easier on myself. This one here is up above my desktop view. This is under my portfolio.

And first thing I wanna do is  I'm, its right down the bottom here. It's this here. The box portfolio,  which is this colored box in the background  and hold alt, drag it across, get it kind of lined up,  transform tool, get 'em in there. You'll notice that my mobile view is too short. So I'm gonna grab my art board tool. Click on it once.

Okay? If that doesn't work, you've gotta click the edge. Actually, if that doesn't work though,  you just click the high level list here on the navigation. Drag it right down, okay? 'cause how big is this gonna be? It's probably gonna be a little longer than  my actual desktop view.

When you're finished, just go back to the move tool. So how big should this colored box be? Probably quite long. It's gonna fit all my portfolios in there. So let's go up. We've got, what we do is portfolio one.

I'm gonna drag him across. So I've selected the box  underneath and the image that's clipped to it. And I'm gonna hold down my al key, drag it across. That's that guy. I'm then gonna grab two  and I'm gonna all drag it across. I'm not scaling them yet.

I'll try and do them all at the same time. Grab three, I'll drag it across  and then four, I'll drag him across. So they're all in here. Now what we need to do is transform  them all to be about the same size. So I've selected them all and here I clicked the bottom one. Then hold shift and click the top one  and it selects everything in between.

Let's use the transform tool  and hold shift to make sure it's all perfect And I'm gonna  get them up to a size that looks like it's gonna  fit about there. Move around. Okay, nice and big to fit in the mobile view. So now I just need to line them all up. So I'm gonna grab number two, okay? And zoom in and hopefully get 'em to snap together  or at least line centered.

I'm gonna grab portfolio three,  remind 'em out to be centered. And the same thing with portfolio four. Great. I'm gonna make sure that this is a little bit shorter, okay? So it fits everything. I'd be moving them  around quite mechanically if you want to join them up so  that you can do things like distribute centers.

'cause if I select all of these and do distribute centers,  it's not gonna do what we want. Okay? It kind of shifts the boxes separate from the images. So what you need to do is select each of them,  right, click them, okay? Or if you're on a Mac or a MacBook Pro  with no right click hold control on your keyboard  and then click them and go  to convert the smart object, sticks 'em together. It's kind of like grouping,  but what you can do later on,  if you wanna get 'em apart again, you right click.

And there's one that says edit contents. And what happens is watch Photoshop edit it. It opens up a separate tab  with these little two guys by themselves. That can be a little confusing when you're new. So only, maybe only use smart objects when you're a little  bit more experienced with Photoshop. Smart object.

These guys convert to smart object. That's it. Great. Now they're core locked together. I can now use that. Distribute centers.

Let's look at the next bit, which is our teams. So I'm gonna bring these across. So I'm gonna actually bring the whole thing  across the teams box. Okay? And I'm gonna drag it across holding alt  and bring it all the way across to mobile view. I'll start with this first.

One more then in our team box. Okay? What I might do is group all of these guys. So I've selected them all. I'm gonna go to group. And this one here is my box.

What is it called? Uh, box. Box portfolio. Okay. Box team, copy, get rid of team, put OCD. Okay?

And in here we've got,  and we'll grab developer John Smith. And where's our face? So there's our circle team,  circle two, I think that's all the guy. Little bits great. I'm not gonna resize this 'cause it fits nicely in mobile  and though I'm gonna have to make the page even longer. Okay?

But remember clicking the edge and then zoom out  and I'm gonna make it really big. Okay, go back to the move tool. And what I want to do now is find Jane the  designer, Jane Smith. And she was team three. Bring her across there she goes, zoom in  And make her in the middle. Okay, it looks like I've left off the bit  of text for our man here.

So where is he? He is John Smith. Where is that text? Bring him in. What I  might do is make the text a little bigger. So we're kinda stuck with Daniel being the longest one.

We'll do Daniel Jane Smith and John Smith. Okay. And I grab my type tool and drag them a little bigger. That works. Daniel still fits in there. Let's go design a, develop a founder.

Let's maybe make it up to 20, okay? Just make a little more legible and mobile  and then grab all the Twitter handles. Let's grab. And from 17, let's put it up to  not 204, let's just do 24. Go back to move tool, tap 'em down a little bit. Okay, just to make it a little easier for mobile.

Great, everything's in its little boxes. Let's have a look at our contact form. So I'm going to select contact form  in my desktop view. Zoom out, hold on, alt, drag it across. I'll start with all of these guys. Okay, grab the green box.

Green box needs to get bigger and less wide. Now all of these guys, so there is form, name, form,  email, form, iPhone. I'm gonna transform them and zoom them in a little bit. What I might do is bump them across just  so we use as much space as we can. I've selected them all, transfer them all on one big go. Means they're all gonna line up.

And then while we up to, up to form message. So I'm gonna have to grab form message,  drag him down, Okay? Transform him, get him to line up with these guys. Grab message. He's around there somewhere. There he is.

Get him to line up with these guys. These are all probably a little too far to the left now. So I'm gonna grab you email, name, phone  and drop you across. There you go. And last thing is the submit button. Okay, I forgot to name it.

This is gonna be my button. I've got the submit. Where are you? And what I might do for this one is just make it  the full width. Okay? So selecting just the  button, make it wider.

Okay? Submit button across. Okay, shrink down the green bit. Awesome. That's gonna be my form. Last bit is the footer.

Suppose zoom out. I've got my footer here. So I'm gonna grab the footer where there, it's there. Alt, drag it across. I'll start with that side  because these kind of, there's one of the icons there. Grab these icons, move 'em across.

Great. Make the footer a little bit taller. Bring in that so it's not so wide. And what have we else? We've got social icons and there was something else there. It is there.

The privacy and pieces. So we zoom in. Great. So I'm going to make that, I might break that into two lines  and make the font a little  bit more legible on mobile. So that's probably too big. Let's just make a 16.

It's not super important. Let's get it down to a nicer size. Transform my footer, make him in the right size. And now let's get my outboard in. Come on outboard. Yep.

And just get him to snap to the bottom there. Back to the move tool. Click off somewhere else. See a little bit of white line there. I'm gonna tap that up. Excellent.

That is my mobile version. Now this is a pretty quick mockup of our mobile layout. Now this video is really a how to make a mobile version. Now if you want to look at why you build different things on  mobile versus desktop,  you wanna start looking into the world  of user experience or UX design. You'll also have to start working with the website  and prototyping it so that you can see  what it actually looks like on a website. It's one thing to design and Photoshop  and it's another to see it working on a mobile device.

And the different kinds of mobile devices,  whether it's a really big who a g seven like I've got,  or one of the little mini Samsungs that are around,  you'll need to play around with both of them to make sure  that your site is actually usable. Last things I'll do before I leave this version is I'm gonna  tidy up my folders. So I've got my footer, he should be in there. My submit button should be in, uh, that, that, that,  that should all be inside my contact form. Okay? And there's all my buttons with my mobile dropdown  that can be turned on and off.

Alright, that's it for this video.