Transcripts
1. Introduction: Hi guys. This is Meg Lewis of Ghostly Ferns. Welcome to my Skillshare class on introduction to UI design. I first want to tell you a little bit about what we're going to learn throughout this course. I'm going to first teach you a little bit about UI styles and techniques. We're going to learn things like designing various buttons, dials, avatars, containers, and then we're going to put all that together into a one-page scrolling site for a fake startup. When we put it all together, we're going to learn how to design to a 960 grid. We're going to learn about headers, the body section, photos, and then we're going to learn about breaking up the content that the client wants into various sections for the site. We're also going to learn a little bit about rollovers and interactions. Let me just tell you a little bit about Party Starters and the project that I'm going to give you guys to work on. Party Starters is a fictitious company that I have a friend of mine that desperately wants to start this company, but he is a great party starter himself, and so hopefully someday, this will become in the works. But for now, I don't really want you guys designing for a real startup because we don't want your designs getting handed out for free. You are more than welcome to design for your own company, if you're a founder of a company and if you're a designer, then you're welcome design for another company as your project, or if you're just curious, you can also design for party starters. They're cats, sorry. You can design your own Party Starters site if you want to and just submit it on the Projects tab and show me what you guys have been doing. Let me tell you a little bit about why I love designing for startups. First of all, they are incredibly passionate and enthusiastic and energetic about the product, and they usually like to have a hand of the design, and they like to really contribute to what is happening with the design and they're readily available as opposed to a lot of companies who are, maybe if you're designing for a mom-and-pop shop, who during the day, they're running the store. These startups are always thinking about their company, they're on the clock all the time, often they work weekends and nights. So they are readily available for you, and they're always just so excited about their product, that it's really fun to work for a startups and I couldn't recommend it more. Also, startups can be incredibly lucrative for you. Depending on your pricing model, I don't want to really suggest anything there, but a lot of times depending on the company, you can charge a little bit more because this design may be seen by a lot more people or then some smaller companies that are really tight on their budget. Early-stage startups are often really tight on their budget, and I often do work for these companies, so I'm really excited about the product. Sometimes I'll offer them a little bit of a price break. But usually they're very serious about the design work and they surely have a little bit of money because they're looking for investors and they want to have a professional presentable appearance. So that's many reasons why I love designing for startups, it's a lot of fun. UI design in general is really powerful. It's essentially just making shapes. As you'll learn in the tutorials, you're just making a lot of squares and rounded rectangles, but you're putting colors together and texts together and photography, and you're able to create a really powerful design. Specifically, I like creating friendly design that has a lot of color and a lot of energy and well-being, clean, easy for the user to digest and people respond really well to friendly design. Companies with friendly design are very popular right now, as you see with companies like Skillshare, and Airbnb, and Zocdoc, and even Warby Parker, you get these clean modern designs that use color in a great way and people respond really well to it. I just wanted to let you know that after we do these tutorials together, you are to design your own one-page site for a startup. You can go beyond that if you'd like and continue on with some more pages, but for this class, I only really want you to do one page. Submit that on a deadline date or you can go ahead and submit it before that. I'm always available via email at meg@ghostlyferns.com. You can shoot me questions, show me your designs early if you want to, and I'm happy to give you feedback or provide you with some extra tips. I also know that the tutorial videos are to see what I'm doing at some times because I'm not a genius screencast recorder. So if you have a hard time seeing something or want me to clarify, I'm happy to do so via email. I also have all of the resource files from the videos ready for you to download here. Go ahead and download those while you're watching the video and maybe you can click on some of my layer styles and see what I was doing. All right, guys. If you have any questions, please email me, meg@ghostlyferns.com, and I hope you enjoy this course. Thanks guys.
2. Button Styles, Avatars, Containers: Hey gang, this is Meg Lewis of Ghostly Ferns. Welcome to the skill share class on introduction to UI design. I want to first start off by saying, thanks for taking this class, hopefully you learn something valuable. You don't turn your video off and forget it ever happened. So I want to give to disclaimers first. This is a class for someone who has a basic understanding of Photoshop. If you don't have a basic understanding of Photoshop and you have Photoshop, I'll go pretty slow to where you can grab the hang of it. But I'm going to go fast enough for the folks who already know what they're doing not be completely bored. All right. Let's begin. So open Photoshop, start a new file. I'm going to give it an arbitrary size of 1,000 pixels by 1,000 pixels. Always 72 DPI for designing for the web. We're going to make an RGB also because we're designing for the Internet. So let's give this a title of PARTYSTARTERS in all caps. Why not? Open it up. Here's our Canvas. We are just designing UI elements for this tutorial. So we're going to learn things like buttons, styles, galore. We're going to do some avatars and we're going to make containers. It's going to be great. You're going to have a great time. Let's get started. First thing is first, let's design some buttons. We're going to go over eight button styles right now. The first four are going to be darker buttons on a light background. We're going to keep it white for the background. The other four are going to be lighter buttons on a darker background. First button, let's start off with a rounded rectangle. I'm going to give it a radius of five pixels. We're just going to make it a size of 245 by 50. Something to know is that I'm using CS6. So I'm getting this little handy size notification next to my mouse. So here we go. Here's our rounded rectangle for our button. I'm going to grab up here. I have preloaded our PARTYSTARTERS, color swatches. So I'm going to sample this hot pink color. What doesn't say party besides hot pink. So now it's pink. I'm going to first double-click on this layer. It opens up the layer cells column. Now, the first thing about UI design is that you're definitely going to be using this color all the time. The layer style is very important. It makes everything look like it has depth. We aren't teaching flat design necessarily today. So we are going to keep everything rounded. We're going to use lots of drop shadows, gradients, whatnot, in a tasteful way, of course. So let's first start off with a gradient overlay. As you can see, that looks absolutely horrible. So we are going to edit this gradient right here. We're going to give both N's the same hot pink color that we had before. Now I want this gradient to have a sort of harsh line in the middle. So we're going to make this top half of the button lighter pink, and this half of the button is going to stay the same pink color. So in order to give it that harsh line and I'm going to make two points right in the middle. You can see that's in the middle because our location is at 50 percent. I'm just going to make these two points on this side a lighter pink than this pink is. That looks great. So I'm going to copy this color and paste it over here as well. Our gradient is done and it looks great, perfect, everything's wonderful. The next thing to do is a stroke. So we're going to keep the stroke on the outside. I'm going to make it about eight pixels. We're going to bump this opacity down to, we're going to say 15 percent. Great. So for the button, we are done with the layer styles right now. As you can see, everything we just did is right here. So if I need to edit something, I can just click on stroke, edit to stroke and so on. But I'm going to collapse this, just make our layers palette a little bit more attractive. The next thing to do is add some text. So I'm just going to type out button text and look, our text is white so we can't see it. I'm going to go over here to the characters window and click on the color and I'm going to make it hot pink just so you can see what's going on. Let's see our font size is 18 points and we have letter spacing of 100. That is absolutely perfect for what I want to do. So we're going to drag it on top of the button and look now we can't see it. So I'm going to make the text white again. Perfect. In order to make the text just a bit easier to read, I'm going to add just a little bit of a drop shadow. So again, I clicked on a layer to open layer styles. I'm going to add a drop shadow now. So we're going to keep this at a distance of one and then spread of zero and a size of also zero. The angle here is really important. I usually use an angle of 120 or 90 degrees. For this project, I think I want to do 90. So let's make sure global light is checked and that's going to make sure that this drop shadows are all at the same angle of 90 degrees and inner shadows, anything we do from now on will always be 90 degrees. So let's bump this opacity down to 30 percent. That's great. So now you can see the text is just a little bit easier to read. Let me turn it off, back on. A lot of UI design is these little subtle changes that users can't necessarily notice off the bat, but it's definitely making their life a little bit easier. Okay. Lets put this button number 1 in a folder, and let's move on. Button number 2. Let's go with a little bit more of a harsh button. So this is also going to be a little bit more of a flat button. Now let's do another 245 by 50. Let's make it our favorite pink color. Actually I don't even like pink. I don't know why I'm using this. So I'm zooming in just a little bit so that I can get a little bit more detail oriented here with this button. I'm going to make this a Twitter button. So first of all, we're going to add a Twitter icon and some text, just to show you what that could look like. So first of all, I'm going to make a special area for the Twitter icon. I'm going to put a square shape right here. I'm just holding down shift as I drag my shape 50 pixels by 50 pixels. As you can see, it's blending in because it's the same pink as the shape behind it. So we're going to make this pink a little bit darker, just a little bit more perfect. So now I'm going to zoom back out. I'm going to open Photoshop. I'm an illustrator, ignore that. So I open up illustrator, I had this handy shape, Twitter shape, little Twitter bird. I'm going to copy him and then I'm going to go back over to Photoshop, I'm going to paste him in. Now we have some options here. I'm going to use a shape layer just because I want to be able to change the shape of the bird and I want to be able to resize it without losing some of the detail. So we're going to add a shape layer. Here he is, he's pink. We're going to make him white and we're going to put him on top of that area there. Let's zoom in to get everything perfect. Let's make him about 30 pixels. Perfect. Put him right there. Now we're going to add some more button text. So this time, this is where social buttons. So I'm going to type social button text, still white, so I'm going to drag it right here. I'm not necessarily sure if I like the spacing on that. It looks like the letters are too far apart, so I'm going to change this back to zero. That's great. Then we're just going to move it to the visual center here. Perfect. So this is a flat button, so we're not going to add any drop shadows, we're not going to add any gradients. This button style is a little bit easier for developers to do with CSS buttons. So we'll keep this as a flat button style and I'll label this button 2. Now I always go through and I name all of these layers, but in the interest of time, I'm not going to do that now. Button number 3, this is a button style that I use all the time. It's definitely a common seen button by you, I'm sure. So here we go again 245 by 50 for this. We're going to make it pink again. Let's double-click to open our layer styles. We're going to add a gradient overlay again. That looks horrible. So let's change these back to pink. For this one, I'm just going to make the bottom gradient level just a little bit darker. Perfect. We want a subtle gradient. The harsher the gradient, the cheaper the button usually looks. So this gradient is great. Now we're going to add a stroke on the inside to keep the button size and shape a little bit more concrete. It's going to be one pixel. For the color, I'm going to sample this dark pink at the bottom of the button. Then I'm going to make this stroke even darker. We want it to be a little bit defined but not too defined. This is perfect. The last step for this button is to add a slight drop shadow, and we still have our angle here of 90. For this drop shadow, I'm going to do a distance of one, spread of zero and size of two pixels. Let's just bump this opacity down to 30 percent. Great. Let's add some more text. So I'm going to take the text from the first button and I'm going to copy it. So I'm going to hold down option as I click on the button text and drag it up to above our new button. Now we can still see it's down here, but we also have it again. Let's move it down on top of our button. Perfect. This time, I don't think I exactly want it to be all uppercase. So I'm going to retype button text. That's great. One more thing is this is a subtle edition that most users won't notice, but it's definitely nice and it makes your button look a little bit classier. We're going to open up our layer styles again. I'm going to add an inner shadow this time. It starts at the top and we're going to make it white. See how our blend mode is set to multiply. Let's change that to normal so that we can see our white color. Let's do a distance of two pixels of zero and size of zero. That's a little too harsh, so we're going to scale that down just a little bit. Let's go maybe 40 percent. Perfect. Great. There's a button style number 3. Button style number 4. Same size, let's go with a rounded rectangle and let's make this radius this time 50, 245 by 50 is our magic number. Let's make it pink again. This time, we're going to do similar gradient as the last one. Let's open button 3, and, do you see where it says FX here, those are your layer styles, so you're going to hold down option, drag the FX up to the new shape and let go, and you just copied all the layer styles from the previous button to this button. Except I want something a little bit different, I want to take this stroke and I want to edit it. Instead of doing one pixel, let's go on the outside eight pixels, similar to the one we did up here. Perfect. Then we're going to keep it at this dark pink color. Now, I was thinking this inner shadow looks a little bit too intense, so we're going to take this and we're going to make it just a distance of one pixel, and we're going to tone down the opacity quite a bit, let's go with 15 percent. Perfect. Now I think this is not quite enough of a contrast as I was wanting, so let's open the stroke back up and make this just a bit darker, there we go. Perfect. Let's take the button text from last time and copy it. Again, I'm going to hold down option and move it up, and then I'm going to move this text down on top of this new button. Great, there is button number 4. Let's name this folder here and let's move on. Now, we're going to do some light buttons on a darker background. Which color should we pick for a darker background? I know, let's do hot pink. Picking an arbitrary size for the shape of this background, just making a rectangle here, let's make it hot pink, everybody's happy, let's give it a little bit more space here for our buttons. Perfect. But number 1, on the pink side, we're going to do the same kind of button we just did with a rounded rectangle of 50-pixel radius, 245 by 50. We can't see it because it's the same color as the pink background, so this time let's just make it white. Add some layer styles, we're going to do another sort style design here, and we're going to just going to do a drop shadow in rather than it being this blurred drop shadow style that we're so used to seeing, we're going to do it as a solid drop shadow. So let's change the distance to three, spread to zero, and size to also zero, and now you see how it's a very flat shadow. Let's bump this multiply opacity down, very nice, let's do 15 percent, no, let's go 20. Awesome. Now, let's add some more text on top of that, I'm going to type button text, let's make this text pink, let's not actually keep it uppercase this time, let's type just like that. Perfect. I don't want the letter spacing this time, so I'm going to take this back down to zero. Drag it on top of the button and we're golden. Perfect. There's button number 5. Button number 6. We're going to do another flat style button, this time we're going to do rectangle rather than a rounded rectangle that we've been doing, 245 by 50, there we go. We're going to keep it white, and we're going to do the same thing of a drop shadow, this time it's going to be five-pixel distance, zero spread, and another zero for size. We are going to, again, bump this down to, let's go 30. Now we're going to take the text from the last button and copy it again, move it down. Awesome. This time I actually want the text to be a little bit darker, so I'm going to take the text and I'm going to sample the color that we see down here and make it that dark pink. Button 6. Awesome. Button 7. We have a rounded rectangle tool, and we're going to go radius of five again, we'll go back to five, 245 by 50. This button style is going to be very similar to the one you see right here, it's just going to be a lighter version. We are going to take this, add some layer styles to it like a gradient. Top section is white, bottom section we're going to sample white, and then we're going to change it to just a little bit of a darker gray, it's going to be very subtle. Perfect. Maybe a little bit more, great. Now we are going to add a stroke, so let's go stroke inside again, one pixel, and we're just going to choose a darker, gray, maybe a little darker, let's go seven. Perfect. Next is to add a drop shadow to the bottom, we're going to do the same drop shadow we did on that other button, this one right here, we're going to do a distance of one, size of two, and we're going to bump those down to, let's go 40 percent. Let's see what we have here. I still think the stroke is a little bit too dark, so we're going to take that down a notch, maybe to. Little bit more. Perfect. Let's make the drop shadow just a little bit darker as well. Let's change this to normal. Great. Next step is to add button text back. In the interest of time, I'm going to copy this button text, move it down. This time I'm going to make it a dark gray. We have up here this very dark gray from our swatches, we're going to use that one and there we go. Last but not least, is a button state. For this button, what it would look like when you click it in. Let's put this into a folder, button 7, and let's copy this folder. So I'm going to drag the folder down here, copy it, then we have our button 7 copy. Let's just change it to button 8. Let's drag button 8 down. In order to make it look like it's pushed in, we're going to do something in the Layer Styles, we're going to add an inner shadow. Actually, first, let's take our gradient overlay and let's just reverse it. Instead of it going light to dark, we're going dark to light, and then we're going to add an inner shadow. We're keeping it up here at 90 degrees, and let's do distance of 4, size of 3. Perfect. Let's bump down this to 20. Great. Now our stroke is looking a little crazy because you can see this white edge here. Let's edit the stroke and we'll make it darker. Not that dark. Maybe we'll go nine. Great. Okay, one more little thing that we can do is, we can get rid of this drop shadow that we had before and let's change it to be something else. Let's change this to white, and let's just remove this size of two pixels and change it to one. Then we'll bump this down substantially. There we go, so we added just a little bit of white right here. Perfect. All right, we are done with buttons. Let's put these in the buttons folder, and let's call it a day on buttons. All right, let's move our buttons up here. Now let's move on to avatar styles. We're going to do a couple of different ones, we're going to do a circular avatar and a square avatar. Let's start with a square avatar. We're going to start with placing an avatar onto our art board here. Let's grab our friend Anthony. Anthony is a little big here, so let's make him, no offense to Anthony, a little smaller. Let's go 140 pixels square. Perfect. Now we're just going to take this layer, we're going to add some layer styles on top of it. Let's start with a stroke. We'll go inside because if you add larger strokes to the outside, see how the edge is a little rounded. If you're going for rounded edges, that might be a great idea, but we're not. So let's put it on the inside and that's going to keep the shape at 140 pixels wide rather than 140 plus eight. Let's make it white. Now you can't see it, so we're going to add a slight drop shadow at the bottom. Seeing this really intense drop shadow looks pretty cheesy and pretty cheap, so we're going to make it a little bit more subtle. We're going to add a distance of one pixel, a size of two and we're going to take this down to 30. Look at that, it's nice and subtle. The nice thing about this kind is that it looks even better when you add a light gray color behind it. Look at that. Beautiful. Here is our Anthony avatar number 1. Now let's get into some rounded avatars. This is where it gets a little tricky because I do things a little bit differently than a lot of other people do. A lot of people love to use masks, I love masks sometimes and I love masks not sometimes. So I'm going to do it my way and please just know that anything that I'm doing in Photoshop, if you know of a better way to do it and it's the way that you like to do it, please ignore me and do it your way. My way is not right, especially when it comes to masks. We're going to do 140 by 140 again. I'm just making a circle. Here it is. Just so we can see it, I'm going to make it this garish. It's not garish. It's nice. Teal color. Then we're going to take Anthony again. Here we go. Let's place Anthony and then we're just going to position him over the circle somewhere. I'm not going to make it perfect because I'm going fast here. Now we have these two layers. We have our shape here, a circle shape, and then we have Anthony. I'm going to go right in between them and hold down "Alt" or "Option" and click. That just clipped Anthony right on top. Now I know a lot of you are saying, "Why aren't you just making a mask on the circle and applying it to Anthony?" To that I answer, I don't know. This is just the way I do it. I'm going take the circle, I'm going to add a layer style to it. If you do masking, you can just add the layer styles to Anthony instead. I'm going to add a stroke to the outside this time, no, let's go inside. We're going to do eight on the inside to keep it at 140 by 140. Same thing, we're going to make it white and then we're going to add this time an Outer Glow. Not yellow, let's change it to black and change this to normal. Look at that, that's horrible. It looks awful. So we're going to take it down quite a bit to about 10 percent. Perfect. Okay, there's Anthony as a circle. Avatar 2. Avatar 3, we're going to do the same thing. We're actually going to copy this over. In order to copy it, I have this selected. I'm going to click around Anthony. Don't click now, hold down Option, drag him over. Perfect. Now I have Anthony take 2. Let's call this avatar 3. Let's open up this folder, let's click back on here and to change the layer styles. Before we use an Outer Glow, let's uncheck that. This time, let's add a drop shadow. Let's add, rather than it being a drop shadow like this avatar, we're going to make it really solid. So we're going to take the size down to zero. Perfect. So now we have those harsh line here and let's make this hot pink. Fun times. Avatars, bam, we did it. Let's take these two avatars and stash them down here for now. Perfect. Make some more room here for us. The next thing we're going to learn is a container style. Let's start off with a rounded rectangle. We'll go, radius of five is fine. Let's do here as 250 by 280. Sorry, this is boring. Behind this, I'm going to give it a background of that light gray color that we have right now. Just put it back here. Nothing perfect right now. Now we have our background rectangle six here, and then rounded rectangle, is also gray. So let's make this white just so we can see it a little bit better. Perfect. So let's make it have the same layer styles that this one did. No stroke. So we'll just add that drop shadow to this. Double-click, go to Drop Shadow. Change this to distance of one, size of two, and then we'll bump this down to, let's go 30. Perfect. Next step. Let's add an image to this. Let's use another face. How's that sound? We got some good avatars in our folder over here. Let's go with our friend David here. There he is, looking happy. He's going to be so happy. He's in this tutorial. Now we're just going to lay him over again as we did before. Go in between, hold down Alt or Option and give it a click. Now David's applied here. So you can move him up and down, put him anywhere we want, right here for now. In the interest of time, I'm just going to eyeball this and say he looks pretty right here. Now let's add some text on top of this. Say this is something like a member card or a space card, if you have spaces. You can put an image here of an apartment that you love or for Pinterest, something a bit of inspiration, an album cover, whatever your startup is, this could work for anything really. So we're going to add some text here, and we're going to put Bingo on Tuesday Nights. I don't even know why I decided to do it. Probably a horrible idea. We can barely read it. So let's change the text color to our favorite pink again, and let's make it a little smaller. So let's go with 13 points. Perfect. Now we're going to add a couple of avatars down here, circular avatars. Maybe it's people attending Bingo on Tuesday nights, maybe it's people that like Bingo on Tuesday nights, who knows? So let's make a couple of very small circles. Let's go 25. Yeah, let's do 25. Let's zoom in so we can see a little bit better here. So let's add some more faces. Let's place our friend Daniel here. Oh, he's so big. Again, we're going to do it my way and we're just going to quickly lay them on top. Click in-between. There he is. He's a little cropped, so I'm just going to make this a little smaller and put him on top. Perfect. So there's Daniel. Let's put him in his own Daniel folder. Great. Let's copy him over, loses over five pixels, 1, 2, 3, 4, 5. Here's Daniel. We're going to add Anthony back in here. So rename that, let's find Daniel and get rid of Daniel, and let's place Anthony here instead because Tuesday night Bingo has two fans, and they are Daniel and Anthony. Perfect. That's great. So we're going to add an area down here at the bottom to put some keywords, tags or maybe a little heart for you to also like Bingo on Tuesday nights. So let's first add a little separating rule down here with the line tool. We're going to make this one pixel that you can see up here, we're just going to drag this across. Perfect. Now it's white, so you can't really see it. No, it's not. It's gray. It's not gray enough out, there's a little light. So I'm going to sample this gray color from the side here. Perfect. There's our rule. I'm going to let this breathe a little bit, so I'm going to move Bingo on Tuesday Nights up five pixels, and the avatars up two pixels, let's go three pixels. Perfect. So let's start out by adding a little heart. So I'm going to open up Illustrator, grab the heart I have ready here, and I'm going to paste it back in as a Shape layer so I can resize and change the color. Let's change the color to pink so we can see a little better and make it a bit smaller. Let's go 12 pixels. Perfect. That might be a little too small. So I'm going to zoom out and see what I think. No, I think that's a great size. What about you? I can't hear you. So I'm assuming you're saying, ''Yes, it's a good size.'' So let's add some tags to the bottom now. To get this text style from the form, I'm going to copy these letters and click and paste. Let's change our tags to Single men, bingo, and fun. Apparently, Tuesday night bingo is single dude night. So let's say our link color is pink. So let's make these commas not pink because they are not links. Let's make them a gray color instead. This way, if I click on Single men, I can get taken to all the single men events. Perhaps, the iron is to draw in the ladies to this single men night. I don't know. You guys, we are completely done with all the UI styles. Hopefully, that wasn't too atrocious. The next tutorial I'm going to show you how to take all of these elements and put them together into an actual UI homepage, and it's going to be epic.
3. Creating a One Pager for a Start-up : Hi guys. Welcome to Tutorial Number 2. In this tutorial, we're going to take everything we learned in the first tutorial and apply it to a site, and we'll probably learn some new stuff along the way. For this site, we are going to be designing a one-page Squirrly site for a fake startup. The startup is called party starters. What party starters does is, if you have a lame, pathetic party that you're throwing, nobody's having a good time, or nobody is dancing, you can order a party starter to get to your party as soon as possible and get it started. I like to first start off with a photoshop document that has a 960 grid. I've put the 960.js link in your resources section on the Skillshare page, so you can go there and you can download the grid for yourself, or you can make a grid yourself. This is a standard 12 column grid though, which I always like to use. Usually, I'm super organized and pay a lot of attention to pixels, but for the sake of time, I'm not going to do any of that. I'm going to try to be very organized while also being fast, so we'll see how that goes. I usually like to start off with three folders; header, body, and footer. I'm going to divide the site up into three sections, since this is a section-based Squirrly site. For the header, we're going to start off with a little header bar here. It's going to be about 70 pixels tall, 70 and we're going to make it just a little bit wider than the actual canvases here, because we are going to add a drop shadow to the bottom, and we don't really want it showing on the sides. For this, we're going to add a drop shadow, as I said before, distance of one, size of two, and then we're going to do a little pass here of 30 percent. That looks great. What do we need next? I think we need a logo. Here I have a little resource file ready to go. It has some of the buttons styles we need, avatars, and also has our party starters logo. Now, this logo I made the balloon is separate from the actual text as you can see, and I did that just so that we can change the color of the balloon and the text if we want independent from the other part. But for now, I'm just going to keep it as pink and dark gray, and then I'm going to drag it over into our new document here. It's looking a little large, so I'm going to make it about 180 pixels wide. There we go. Come on. There. Then this line right here is the center line, so I'm going to align it here in the middle of the page. Let's hide our guides for a second and take a look at that. I think that's perfect. The next thing I want do is add a little link up here in the corner that says, "I want to be a party starter for people that also want to join and become a party starter themselves." I'm going to just off the top of my head, say we want that to be 11 points. All caps, "I want to be a party starter. " Let's show our guides, and let's put this up here, and anchor it on this guide here. That's perfect. Great. That's looking a little too large though. I want it to be pretty subtle, so I'm going to bump it down another point here, to 10. I think that looks pretty good. It looks discreet. The header is actually done that was a piece of cake. We're going to take these layers and put them in the header folder. Now, we're going to open up the body and work on Section 1. Let's show our guides. Now, the section is going to be one large browser width's photo with some important text about what party starters is, just a couple lines, and then a big call-to-action button over here. Now, I definitely want this to all be above the fold, which I'm going to say is about at least, let's say 715 pixels down the line here. I want to keep it well above that. Maybe we'll plug our image in first, and then see what happens. I'm going to place our big photo, which doesn't look so big right now, but I'm going to make it big. I'm going to stretch this out, and look how big it is. It's obviously going away passed this line which I don't really want. I want it to just be taking up this section. So I'm going to center this here a little bit. Let's move this up. That looks great. Then I'm going to make a little rectangular selection. Let's hide this cake because we don't want people thinking that the party starters always show up with a cake. We don't want that. That would be awful. I'm just going to mask that out of there. Perfect. Here's our big image well above the fold, just how I like it. Let's hide our guides and add some text. Over here in this other document, I like to keep this handy and have this ready to go, so I can reference it as I'm designing. We have our heading text memorized over here. It's ready to go, so we can just grab from it whenever we need something specific. I'm going to grab an H2 heading, and drag it on over. This is about where I want my text, so I'm just going to type a little bit about party starters. It's going to say, let's not make that caps, there we go, "Is your event not going as planned? No one is dancing, the guests aren't having fun." So that text doesn't look very noticeable on top of the photo, and this photo is going to be dynamically sizing as a user opens their window and makes it smaller. We want it to have something behind it to bridge that gap there. I am going to add a little bit of white behind the text. Here we go. I'm going to eyeball it right now. Maybe like so. Sure. Let's copy this down and drag it. With the second line matches, and then pull this over here. Let's zoom out to see how that looks. I'm going to pull this up here a little bit. That's great. Now, we're going to add one more line of text that just says, in caps, "We get the party started." Perfect. Let's go with our favorite pink color. Sample this pink up here. Let's put the text on top, and let's actually make this text white. Great. I think that looks pretty darn good. Last thing here, let's bump that over, is to add, our giant call-to-action button. So for the button, I'm going to zoom in here. I'm going to sample some of this H2 text, and paste it in, just so I can get the text here. So the button is going to say, "I need a party starter now." Exclamation point. That's looking a little big, that's going to make the button just a tab larger than I want, so I'm going to bump this down to 16 points. Yeah, that's great. Let's add the button background. We're going to do that super rounded button that we learned earlier, the one that had a radius of 50 pixels. Let's do 335 by 50. Great. Adjust this here accordingly. So for this one we are going to do a gradient, and this time we're going do teal, because I think that pink color is getting a little overused. Let's make this gradient, let's sample up here for our party starters color scheme. Let me put this bluish teal color, and let's make this bottom one here just a little darker. Perfect. Our next step here is to add that stroke on the outside of eight pixels, and then bump the opacity way down. Let's go to 10 percent. Yeah, I like that. Let's now make this text white, a little bit more noticeable. To make it even more noticeable, let's add a drop shadow under the text. The drop shadow is just going to be a distance of one, spread of zero, and size of zero. Then we'll bump down the opacity to that's cool, 35 rad. So let's move that button over to fit on our guides. Here's our button, move this over, we want everything to fit onto our grid. Let's also make sure that this text is doing okay, so let's select all of our text, and keep it in Check here. Perfect. All right. The last part of Section 1 is, we want clearly to show if there is a party starter ready to go right you, and who is that party starter. Let's draw some guides here under the photo. Let's make it 70 pixels tall. Let's go 75, and we don't want pink, sorry, we want white. Let's drag another guide to the bottom here. So there's where this next section is. The first thing I want to add here is a circular avatar. Where I'm going to take a circle, let's make it about 35 pixels. Let's make our color so we can see that. We'll bump it over to this guide here, and now we're just going to place Anthony's photo onto this circle. Make it very smaller. That's great. [inaudible] on top of the circle. Now, I'm going to do the masking technique. I'm going to hold down "Command", click on the "Circle" and then go over to Anthony and click here on this "Masking button." Perfect. Now we can erase the circle. Now I want to grab some of the H2 again. Let's grab H2, drag it over, and we're going to say, "Anthony is standing by in." Next, we want to show you that Anthony's nearby you, and also that we know where you are. Because we can base on the device you're looking at or the computer you're using. Well, location services where you are right now. We want you to know that there's a party started nearby you, specifically. In order to do that, I'm going to make a little map pin I got, and I have one open in Illustrator here, I'm just going to copy this and paste it in to Photoshop. Its white, so we can't see it. So I'm going to change it to pink. That's a little bit big, it's competing with Anthony's photo. We don't want it to look more important than Anthony, so let's make it small. Perfect. Then zoom in because I'm going to do a little effect here, I'm going to teach you how to do a reflecting effect. I've copied it on top of each other, the one on the bottom, the new shape I just created, I'm going to reflect it to here. I'm sorry, it's flipped. We're going to flip it vertically. Then I'm going to take the opacity, and I'm going to drop it down to 20. I'm going to make a layer mask on it. Have the layer mask selected, go over here and grab our default ingredient, and just draw a line right here. Anywhere is fine, but that's where I recommend it. There we go, it's nice and subtle. I'm going to put this in a folder titled "Pin". Righteous. So Anthony is standing by in, and let's copy some more text over here because we want this to say the name of your location. Hatton, New York. Lovely. So let's base that just a little bit better, not into the spacing. Section 1 is complete, so let's take everything we just did from Section 1 and put it in the Section 1 folder. Let's move on to Section 2 now. Here's our guide for where Section 1 is ending, so let's start a new background. I'm just going to eyeball it and say this size looks good for now, and I'm going to make it teal. Now this section is just going to be for a little bit of more information on what party starters is and what they do. I'm noticing now that right here, I have a little bit of my image leftover from before, because I scooted it over. I'm going to make sure that I get rid of my image. Let's pop back into Section 1, I'm going to select, show my guides again. Do you see it? It's right here. Just a little bit. I'm going to take a rectangle, then go into my layer mask here, I'm going to paint in reset their perfect. Let's collapse this section, go back to Section 2. We have a teal background, and now I want to add one section here. My party is awful, and then over here is going to be another section that says a little bit more about party starters. For the first section, show our guides, we are going to draw a shape, just a rectangle, a white rectangle, and have a little bit of a drop shadow. Let's draw a rectangle, and I'm going to eyeball the height because I know this is the width I want because I'm keeping it within the guides. But for the height, I'm just simply eyeballing it. So there's our white rectangle, let's hide the guide, take a look. Let's add a little bit of a subtle drop shadow to it. [inaudible] one, size of two, let's put a zero, and then bump this down to 30. Perfect. We want a little bit larger text, so I'm going to grab this heading, this larger heading, and I'm going to go up in the corner and I'm going to bump it down 40 pixels from the top, one, two, three, four. 40 pixels from this side, one, two, three, four. Then I'm going to make a guide here because I'm going to put some body text here, I want to make sure that I have it in the right place. Here's the body text, this Lorem Ipsum filler text. Going to drag it to these guides. Perfect. I'm going to hide the guides, and I'm going to change this to, "Help my party blows." I like how that looks. This is, entitle this, Box 1. Put these in that folder, and then we're going to show the guides, copy it by holding down the "Option" and "Shift", dragging it over. Now I'm realizing that my body copy isn't there, so I'm going to start over. Make sure my body copy is in Box 1 folder. I'm going to hold down "Option", "Shift" while I drag. Move it meticulously right there. Perfect. Hide the guides and let's change the top of this to "What is a party starter?" Here are our two sections. I didn't waste time by making copy because this isn't a real startup, but in an event that this was a real startup, I would spend hours cultivating the perfect copy for this. For now, we're going to use some filler text. This section is looking a little boring graphically, so I want to add just an icon to the center here to add some visual weight in the middle. What I'm going to do is I'm going to make a circle, let's say 55 pixels, I'm going to make sure it's in the center here, and I'm going to make it teal. Sample that. So we have this teal circle on top of both of our boxes. Now what I'm going to do is, I'm going to add the balloon from the logo into the circle. So I'm going to go up to the header into the logo, take the balloon and copy it. I have two balloon, I'm going to move the new balloon into the body section, Section 2. Collapse the header folders, so now let's bring our new balloon down. Get it in the center here. The pink on the teal is looking a little too much, so I'm going to make this dark gray. Awesome. Next is to shrink this a little bit, let's do 410. Let's do a little more. Section 2 is complete. Let's put everything into Section 2 and let's move on to Section 3. Section 3 is the most complicated one because we want to show who are the party starters. This section is going to be titled, Meet the Party Starters. We're going to show, as a carousel, a bunch of party starters that are nearby you, specifically. We don't necessarily want to show all the party starters, because if you're located in Chicago, you don't really want to see party starters in Austin. We are going to title this section, Meet the Party Starters, which I will do by taking our Heading 1, typing, Meet the Party Starters. I'm going to show my guides and moves this over to this guide right here. I'm going to make sure that it's 70; 1, 2 , 3, 4, 5, 6, 7 pixels from the top of the section. I'm going to get rid of this guide I created earlier. Perfect. Now we want to show that these are nearby you. We're going to take this pin in Manhattan, New York and we're going to bring it down to this. That was in Section 1, pin Manhattan, New York. I'm going to copy that and bring it down into Section 3 here, collapsed Section 1. Perfect. We have this again, and I want it to say this time, Near Manhattan, New York. All of the guys who are going to show, and girls, are going to be nearby you. In this case, you are in Manhattan, because that's where I am. Perfect. The next step is to show our party starters. We want to show their photo, their name, and where they're located, and how many parties they've started. Over here, I've pre-made Anthony. He's ready to go. He's sized perfectly for the grid. I'm just going to grab him and I'm going to drag him into this document here, and then I'm going to line him up real nice. Pixel perfect, right here. Then, for sake of time, I'm just going to take this one and I'm going to copy it. If I was doing this for real, I would actually do it this way. I would first copy Anthony four times to be perfect in the grid, then I'd rename the folders and change all the information for four separate people. I don't actually like to repeat any of the content for mocks because I like it to look as close to the real thing as possible. I typically don't like to use lorem ipsum or repeat images. But for interest of time, we got to do it this way because I don't want to bore you guys. So we have our four party starters lined up perfectly in the grid, looking good. Everything's great. Now we need to add some arrows on each side for the carousel. I had an arrow in my Illustrator file here. I'm going to copy it, paste it in as a shape layer, and I'm going to make it dark gray because it's white right now. We can't see it. There it is. It's pretty big. I'm going to make it a little smaller because we're going outside of the grid on this one. We're going off the grid, guys. We don't want it to go too far outside the grid. This is perfect. Awesome. I'm going to copy it and flip it around for the other side, and move it on over. Perfect. Let's step back and take a look. Nice. So we have Anthony here, he started 41 parties. In the source file that I'm going to give you guys, this will have four different people on it, so don't you worry about that. The next thing we need to do is show what it looks like when you roll over one of these. I'm thinking it would be really great if you could know when someone's available right now because these are just party starters that are available near you. They're not necessarily available right now. Maybe they're already at a party and only one of them is available right now. So we want to show that Anthony is available right now and, when you roll over, you can click and have him start your party; get it started. For Anthony's rollover, we are going take his image here. We're going to double-click, bring up the layer style, and we're going to do a color overlay. We're going to select our favorite pink color here and bump this down to 75 percent opacity. Very nice. I'm going to copy this text because I want to use the same text style. I'm going to paste it and type in, Save my Party. Bring it on top, and then right behind him, I'm going to add a background. That's too rounded. Let's go five pixel radius. Perfect. I want this to be pink, and then I'm going to make my text not gray. Let's make it white. Step back here and take a look. I like it. What do you think? I can't hear you. Hopefully, you're answering me. All right. We also want to show our developers that this is in fact a rollover, because when you get this PSD packaged up to send someone to actually code, they're going to be a little confused if you don't indicate that it's a rollover, because they're going to wonder why it's like that. In order to do that, I like to just place a cursor hand on top. Here it is, just to show that this is in fact a rollover. The last thing I want to do here is add something behind the container that just says, "Hey, Anthony is available now." We're going to take 41 party starter and we're going to copy it, paste it right here, and change this to, Available Now. A little closer here, and then behind it, I'm going to do just a rectangle behind the container that is hot pink, and then we'll change the text to white. Also, as I mentioned, we want it to be behind the container, so I'm going to drag those behind. Perfect. Let's bump them just a little closer. Nice. That section is almost complete. Remember how, in the first tutorial, I told you that it sometimes looks nice when you have these little shadowy containers if you put a very light gray background behind them? I think we will do that here. I think that'll be really nice. I'm going to go behind all these layers and I'm going to add a light gray behind. I think that'll look really good. Here's our light gray. Yeah, I'm into it. Section 3 is donezo. All right. You guys, we're on the last section, which is the footer. Normally, if this wasn't a one pager, we would probably have a lot of stuff to put down here. You could put Twitter, Facebook links, you could put terms and conditions, you can do links to the blog, other sections of the site, but for now, we just have a copyright. That's all we need to put down here. I'm going to copy from up here some of the body copy. Let's minimize all this. Put in the footer, and I'm just going to type, Option, G, which makes a copyright symbol, 2013 Party Starters. Show our guides and put this in the center. Delightful. I'm thinking let's make this footer hot pink just to make it seem a little bit more interesting, because it's looking a little bland right now. Hot pink, and that means we need to change the text to white. Let's make that a little smaller because the copyright isn't very important. Well, it is important, but you know what I mean. It's not as important as the party starters themselves. All right. There we have it. You guys, you made it through and we're done. This has been awesome. Please let me know if you guys have any questions, I'm here for you. My name is Meg Lewis. My e-mail is meg@ghostlyferns.com. Be in touch. Thanks, guys.
Meg Lewis, Designer, comedian, performer
