FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Create the Basic Elements

Hi, everyone. In this lesson, we are going to start designing our mockup that we are going to use for our prototype in InVision. And this is all going to happen in Photoshop. It allows us a very quick way to mockup the screen that we want, and we're going to actually create multiple screens in this one document in Photoshop. That way, we can flip between even some user interactivity thoughts before we even get into InVision. So it's nice that it all happens in there. So I want to show you first and foremost what we have going on here. We have Photoshop open. I want to show you that we also have assets that we're going to use. And this means that we have the background image. So this is what we're going to use for our background image, it's just a nice sort of street scene. And you'll see how this vertical landscape type, this vertical cityscape really works with the design that we have going on. We also have some icons here that we're going to use at the bottom of the screen, and then we have our white logos. We're going to create a dark version of our background so we need some really light logos for our website to pop off of that. Now we are creating a mobile version of the site. So you may think that there is a desktop version of the site that exists and we're just creating a mobile version of that. But we have something very specific in mind, thanks to our project brief and the user features that we thought of. We really want this to be a subscription form. So if anything else, it's a landing page subscription form for this particular website. So let's go ahead and get started. What I'm going to do is just right-click on this and open this in Photoshop, since I have it here. I'm using the latest version, but you are free to use whatever it is that you have. So I'm just gonna go ahead and full-screen that so that we can move around. So this is the background image that we have that we're going to pull from. And if you are working from a background image, you can actually just open this up and do some edits with this and then drop it into your mobile application that we're going to create. And we are going to do that first. So we're going to go up here to File > New, and we're going to create our document. So let's go ahead and say Mobile-Mockup for the name. And this is where the width and the height come in. Now, we're creating an iPhone-friendly mobile version of this so there's a specific pixel size that goes with that. Unfortunately, there is no standard, so this is something you'll have to consider for the device that either your mobile app is geared towards or even your site is geared towards. That's one that's nice about responsive sites is they scale. But this is definitely targeted for mobile, so we are gonna be very specific in this being an iPhone application of sorts. So with that in mind, we have a 640 pixel width by 1136. Now, this is double of what the traditional iPhone 4 and older versions were, 320 by about 480. This is double, this is gonna help double the resolution for Retina displays, but it's also going to just give you a better picture overall to double this. So that's where those dimensions come from. You can go ahead and leave this to 72. And then we're going to work from a white background. It doesn't really matter, because we're going to fill that in. So go ahead and hit OK, and then you see here that we now have our screen sized to fit. Now, one thing that I am going to do throughout this is really keep this layers palette over here very organized. It comes in handy later on when we are working with all of the files and all of the layers to keep that going right away. So let's go ahead and drop in this image. So I'm gonna come and drag this in. You saw how to bring it into Photoshop if you wanted to edit it, but we're just going to work on it from this. And then I'm going to hold down Shift and drag this out just to sort of fill the frame like that. And already that kind of creates a really cool, narrow screen for us. Now, putting a bunch of content on this is going to be a little bit difficult. We're not going to see this text on top of it because there's a lot going on in this image, so we're actually going to dilute the image a little bit. And what I mean is, we are gonna take and create a new layer, and over we're gonna make sure that this is black. If you have a different foreground and background color, go ahead and hit D and it'll auto change that for you. Hit X to make sure that black is the background. Hit Cmd+Delete or Ctrl+Backspace, and it's going to fill that for you. Now, obviously we can't see the background, so we need to bring the opacity down a little bit. And you can play with this just by bringing down the opacity. You can also go ahead and set this to Overlay and do different blending modes if you want to. I'm actually going to leave it at Linear Burn and then just bring this down even more. What this does is it just sort of gives a black overlay for us so that it's easier to put items on top of it. And now we have our background ready to go. One other thing that I'm going to do here is, I'm going to blur out a certain element of this background about halfway down. Our core content is going to be in the center of this image, and then we have footer information down here. So the footer information is really going to rest on this area. So to enhance it so we can see that text even better, what I'm going to do is I'm going to rasterize this layer. It's okay, because we're not really going to mess with the background anymore, and we don't really need it to be a smart object for what we're doing specifically. And it's just going to allow me to blur this out. So what I'm going to do is I'm going to grab the marquee tool and I'm going to select an area about the center down. It's a little, yeah, actually right in the center down. And then what I want to do is actually feather this selection to about 10 pixels, just slightly feather it. And if you need to, set your feather and then redraw so that you see that feather. If you wanna make sure that you have it, if you click this preview really quick, you can see that we have a nice feather up here. It's just going to soften that selection for us. So when I come out of here, I'm going to come over to Filter > Blur, and we're going to give this a Gaussian blur. So you can see it before and after. And really, we're going to put content on top of this, so it's not really crucial that this be perfect. Because really, we're just more focused down here so that that's blurred out enough so we can, Again, it'll highlight the items. And you can see here if I zoom in, that that feather effect sort of faded that blur a little bit, just so you don't get a harsh line with that. And this is what it looks like at 100%. So now what I'm going to do is, I'm just going to actually remove this white layer. We don't need it as a layer, so it's best just to get rid of it. So then I'm going to Shift+click both of these, hit Cmd or Ctrl+G to group them, and immediately we're going to call this, Background. So now we have our background ready to go, it's grouped and out of the way. So now we can continue to build content on top of this. And we're going to do that in the next lesson.

Back to the top