Creating a Website Layout Design in Adobe® Photoshop® Part 2


Learning Design in Adobe® Photoshop®


Lesson Info

Creating a Website Layout Design in Adobe® Photoshop® Part 2

So we've done fonts way have fought management roughly at least a font styles we have this particular design done, and I can start to carry this over into the other pages as well. So all right, that looks that looks pretty good. All right, here's, another thing I want to show you guys like, um check this out. This is a this is a pro tip is well, and I can start to clean up these various layers and everything, but in essence, I want to make this page longer. This is what people do they go into, like, canvas size, right? They'll anchor it to the top because I want to make it longer down at the bottom. So do you, like, twelve hundred and then all hits? Okay, right. And it's not that white color anymore. Like, look what it does any time you resize your page, it doesn't keep the color of the background. It just takes this separate color back there if that makes sense. Like, like, for instance, even if I had, even if I fill this in again watch, I'm like, oh, no, I wanted that to be white fil...

l it in again let's, you know, change the canvas size again, you know, oh, no, I need the page to be longer uh huh and then I would have to go in and fill it and it's annoying right? That's cz the little things check this out though watch we go down in here if I select and add a new layer I can add a solid color layer or a grady in't layer right? But check this out all at a solid color layer you know whatever it could be read okay? It adds that color field so I'm gonna get rid of the background so this solid color is my new background okay? And now any time I changed the size hey cam besides going to be different is going to be super long it's always going to be that one color. So this is what you should be doing for your backgrounds and quite frankly, I think it should be fall to this this color phil same thing for the great if this is a grady in't it's always going to scale, you're not gonna have to worry about having that box and those issues around that. Okay, so you jump in here and take a look at my page. That page is not bad. I can add some more to it like I just jump in and start to add a little more like content right down here there's my box you know, paste in some text right? And here in fact, jump up here you know, click and drag, you know, you know, paste in some texts make this look smaller. Let's, turn this off. Okay? So I'm pasting in some of that text in general, um way we go. So this is just some text. I'm in a grab because this is what you'd use is lauren gypsum and another pro tip what I just opened up there we go is called text expander. So I have shortcut keys I just typed in epsom that's my shortcut key and pace in all this text at pace in laramie ipsum so that's not it's it's not photo shop it's something else but that's how I have it set up anytime I talked in ipsum it drops in that laura myths and text actually doesn't drop in laura missem I've added drop in a hipster ipsum is what this is called so food truck whatever vegan messenger bag he read it you like you got to be kidding me. This is hysterical, but anyway, so I drop in some text. I'd pick a text when it comes to this text. Another another rule you need to keep in mind is like you typically don't want any text box to be say wider than a definitely not whiter than a dollar bill has traditionally been the rule right I would say a lot less I think online I think it's more like forty two characters or something like that but in general you want to make sure that you don't have text spread all the way across you want to keep it small and easy to read and in this case I would not use bold I just makes a nice regular text in this case with this and start to use it that way and a lot of times I think even as you start to play with the, um the paragraph uh the letting typically you can make something look more elegant by the leading that you add so as I've added more letting you can see it actually just makes it look a little more elegant right? And kind of fills out that page more right and that's what I do I jump in here I've been added another element right here in fact I'm going to jump out and show you another just a designed tip that you can use I will grab this violin right? This is what I want to use I will do just make it bright just like that now you guys did see this earlier but I'm this isn't just another sort of design um uh trick that I want to d'oh like at least a design trend someone emerged those two layers in essence I'm just even taking this raster layer and I did show this the last hour, but especially for the people online that have just tuned in I'm going to jump out to three d and I'm gonna make a three d extrusion from this shape and I've just made that three d extrusion and I can start to play with its amore so at this point I can adjust I did this earlier ninety degrees and hold on actually change this to top and this is the extrusion that I did I'm going to take this and do ninety degrees right here I've just made this three d shape again remember this is all based on and asset that I pulled from creative cloud market oh, thank you um and uh, so at this point I could start to play with the shadow and everything so that's what I'd do, I'd move it to the ground and start to adjust the shadow however I want to do that the lighting, if you will and get that nice look and even shrink it down a cz well, so this already is a very nice again. I like this style since we're talking about design I think this would be good just tow have this element like so and, uh, you know, move it where I want to move it in this case let's just bring it right over there okay so this could be a nice design element and just like I did earlier if I do want to fill it with a photo I could do that so that's where I jump in and grab say for instance any one of these and why frankly it's going to be a picture of mari and drop it right in there there she is there she is just like that ok did that really fast what did I just do guys look at this what's going on here right? I took a basic shape I said ok let's go ahead and make it more interesting rather that than it being flat right let's drop in a photo how did I do this this in this case this is going to be a clipping mask right so I can I can do a layer mask like I did before but really check this out I want this photo just reveal that photo inside of the object below it okay, so this photo just be in that violin right? So how do you do that? I do the shortcut which is holding down the option key right? And that gives you this little icon says hey, I'm gonna make this photo is going to be clipped by the object below it or you could just do right click create clipping mask boom just like that what does that give? You still have that flexibility look I can't move that around all day long and it's still a nice element that could be used right there. And since this is three d let's, not forget that at any time, I want to jump in and change that light source. I can change that light source, and I get more of it. Look, see, so that works out pretty well again. That's. Just design aesthetic thing I was working on for this space.

Class Description

Adobe® Photoshop® is a powerful graphic design tool. You can use it to layout websites, make posters, and produce design elements. Learn all about the features tailored for graphic design and how to use them in Learning Design in Adobe® Photoshop®.

Paul Trani will cover setting up files, creating graphics, adding fonts, and managing all your layers and assets so making updates is easy. Paul will demonstrate pro tips that will help you make great designs and feel like an expert.

Software Used: Adobe Photoshop CC 2014.2.2


Andrew Pardue

As an intermediate Photoshop user, this course was very helpful in learning several ways to not only improve my design work but also save a lot of time in the process.