Lessons

Lesson Info

Building a Header for ProSite

Okay, so now since we we learned that, um, the header size the logos eyes on the process that we're going to create for Frank is 990 pixels and with maximum, let's go ahead and build our hitter for Frank side, shall we? So let's pop on over to photo shop. And incidentally, you do get you don't get Frank's header file with exercise files, but you get mine ST Same. So let's go ahead and pop those open so you'll see for mine. All I did was poppin my logo. I've got my name. I've got a little bar that I used a Grady int mask. See how the bar fades out? So I added a layer mask and used our Grady in tool Trick that we learned about, uh, the other day when we were designing toe hide a portion of that line. And it's very, very simple. And all I did was decide what color and one of my background to be by adding a solid color adjustment layer here. Then, if I double click toe open the color picker, then there's my color hex code that I can put into the background and might be hand side over there...

. So I know that whatever I build over here is gonna perfectly match what my background color is over there is me, um, doing that over doing something with a transparent backgrounds and then you don't have to worry about that. There's not really one mean for this particular one. Since I did a little bit of a masking, I didn't wanna have to worry about how that was gonna be handled with transparency. So I just knew what background color I wanted. It is Dalbandin. Okay, so let's take a look at how to build. Frank's here. So this is what we're gonna make. How's he made? A little bit. So Frank is Italian, and his work, in my humble opinion looks very regal. Very old world, very european, very rich. So what we did is we started out with his logo that already had this kind of terra cotta background on it, which just screams Italy to me. And I added a little bit of a texture over here on the right hand side, and I added these olives. So let's take a look at how to create that. So let's start from scratch will do command in or control in to create a new document. And we're just gonna dial in 990 pixels right here because we know that our maximum and the high is really arbitrary. So I don't want it to be really tall. I want people to, you know, not just see his masted when they come to his pro side. I want them to see his projects, to get them to click them and look at his photography. So I made this 1 300 pixels tall again. That's not a hard and fast rule. And for a resolution, I'm just gonna make it 72 resolution. Doesn't matter is, you know by now, but photo shop will squawk it us if we don't put something in that box. So let's go ahead and click. OK, so here's our blank canvas. So now let's start pulling in the pieces that we want. And of course, when you're doing this, you would gather of your logo and your assets just like you did for the videos. So we'll choose file place and will navigate to where the files live. These are gonna be in the B hands folder if you're following along at home and we're gonna come down to the logo Art. And here is Frank's logo right here. So we're gonna get click place. Scoot that over to the left hand side. That's just a personal preference for me. You could have it centered within your masthead. However you want that. So look. So I'm actually gonna have it hang off the page. Just a touch here, and I'm going to increase the size because I really want the words to be quite visible here. Now let's go ahead and dial in. Let's add a solid color background so we can see that nice, rich color. And why did I choose the color that I did for his background Will. It's kind of like a bird sigh in, which is a popular color. So I already copy the hex code for you. So 39211 to you, and now we're just gonna drag that layer beneath his logo. Now let's go ahead and add some more artistic elements will choose file place, and I downloaded an illustration from FA Tolia. It's got all these fabulous olive branches in it just to give it a little something, something just a little something extra. So, you know, by now that bringing are in. As with the file place, command brings it in as a smart object protectively wrapped so we can resize it all day long without having to worry about anything this bizarre. It is actually a vector, so we could resize it anyway. But but with bringing in as a smart object that makes Photoshopped remember what it's file format is in any superpowers that that file format has. So I'm gonna go ahead and make it large, and you also get this re sizing box. So we're gonna call that pretty good for the moment, drag it up in our layer stack, position it. And now, because that particular piece of art that I downloaded has several aspects to its ever several elements in it. I don't want those other olive branches, so I'm just gonna hide them with a layer mask. So let's click the circle within the square icon at the bottom of the layers panel. So far in this class, we've been using the Grady int tool in our layer masks. But we really just need a tool that will lay down black paint because in the realm of the layer mask, black conceals, white reveals, black conceals white reveals. So we could just grab the regular old breast tool by pressing be your coming over here and grabbing it in our tools panel, setting our foreground color chip to black and then coming up here to where the bit of the art that you don't want to use lives and just paint a top it to hide it. So wherever you paint with black, that area is gonna be hidden on that layer. It's still there, so if you change your mind, you can always get back to it. But it just hides it, so let's call that good. Now I want to change the color of my olive branch to match his logo a little bit. So we looked at this the other day. We're gonna add a hue saturation adjustment layer by clicking the half black, half white circle the bottom of the layers panel, and you could just play around to get the color that you want. I'm gonna turn on color rise, and I'm gonna turn on the clipping icon at the bottom left of this dialogue so that that makes that one adjustment layer effect only one layer down instead of all layers down. And now we can adjust. Experiment until we get the kind of colorization that we want. We can change the blend mode to maybe something in the screen category or lighten category. I think I like it better with the colorized turned off, so a little bit of experimentation. But this is a fantastic way to change the color of an object. So basically all we did was I'll go ahead, delete that layer and do that part again. So we added a hue saturation adjustment layer by clicking the half black, half white circle the bottom of the layers panel. Choose hue saturation, and then you can either turn on colorize or not just depends on if you can get the color that you want with one method over the other. But what you want to do is click that clipping button at the bottom left to make the attach the adjustment layer, which is one layer blue. So now we can experiment with the with the hue and the lightness value to get it to what we want, and I'm gonna go ahead and change the blend mode of our olives to something in the lightning category. This isn't really a lighting category, but there's little dividing lines in between these sections. And if you think about it, blend modes control how color on one layer interacts, knocks out, cancels out blends with color on other layers. But the first word or the first mode in these top two categories give you a clue as to what they do. So anything in this category is gonna darken the image. Anything in this category is gonna lighten it. So if my goal was to make the olive branch lighter, then I could go for anything in here. And you would just experiment with which which one looks best. Each one will look a little bit different, like screen looks a little bit lighter, so this is looking pretty good. Now what we need to do is add a little bit of texture over here on this right hand side, so I've got a nice piece of concrete that will work perfectly for that. So we'll click the file menu and choose place and are concrete happens to be from Istock photo and there's our concrete. So since I'm not real worried about the quality of this image, it's not. It doesn't have really photographic detail in it that I'm concerned about. I'm gonna make it bigger so that it kind of covers the whole masthead so that I have ah, uniform texture. There we go, press return, and then I'm an experiment with blend modes. Let's come down here to overlay. So now I've got a nice texture going on throughout the piece. So now I can start masking things, So I don't want the concrete to be visible on this, uh, left hand portion. So what I'm gonna do is add a layer mask so we can click the circle within the square icon at the bottom of the layers panel. And this is where we're going to use that Grady in trick again. So I'm gonna press G to grab the Grady in tool. I'm gonna make sure that I've got a black to white Grady int because black and seals white reveals. So let's click the preset picker at the top left and make sure that we have a black to white grading by choosing that third precept. And then we want to make sure that we have linear ingredient turned on, and you probably do unless you've played with these settings before. So now I want to hide the concrete from his logo. Causes logo already has texture on It is that background color that doesn't have the texture on it. So what I want to do is click and drag to hide the concrete from that area. Now I want to add another layer. Master his logo to kind of fade that out into the concrete, and you will come up with your own masthead idea. This is just a night idea that specific four frank. So let's add another layer mask We already have. The greedy INTs will active. We already have our grating, preset picker set to the third preset. We have a linear Grady in turned on, so now we can hide a portion of Hiss logo that makes everything kind of blends together. And remember, if you are nonplussed with your first professional Grady and dragging attempt, all you have to do is keep clicking and dragging, and the further you drag, the softer the transition point will be between what's completely visible and once hidden, and you can experiment with opacity. Maybe the concrete needs to come down and opacity a little bit. Maybe the olives are a little too bride, so we'll we'll bring them down a little bit. And so you could experiment till the cows come home on this. This is where it really gets fun, is doing this kind of thing. So the last thing that we need to do is perhaps fade out the texture on the right because the background of the pro side it's gonna be, you know, flat. And it doesn't have any texture unless we were to upload a background image is a texture, but we don't want to do that. So I want to do is fadeout that edge over here? And this is a great tip for you. Because if I want to fade out the edge of all of this, what on earth layer do I add? The mast you who knows? Right, Because I've already got all these masks. What would you do if I want to fade out all of this art to the background color? The solution, Dear Grasshoppers, is to put the things that you want, a mask, all the different layers that you want to mask in a layer group. And Adam asked to the group itself, Yeah, gets tow, huh? So let's select all of the layers that we want to group. So that would be everything except for the background, because I want to fade the texture in the art to that solid background, which is my B hands background. So let's go ahead and select those layers that these four right here. Now it's press commander Control G to put them in a layer group, and I can call that masthead if I want. Now we'll add a layer mask to that group, So let's click the circle within the square icon at the bottom of the layers panel. I can feel the Internet gasping, and we've already got our ingredient tool set. So looking there. So now we have faded out all that texture and art to the solid color that we're gonna set Barbie hand side. So that's how you would handle masking multiple layers, you know that already have masks on them is to put him in a layer group and at a mass to the group. So many people don't realize that you can do that now. How do I handle the bottom? Because I want to fade out the bottom two. Well, if I used the Grady Int tool inside this mask to fade out the bottom, it's gonna undo the fading from the side. But if I can use any tool, I want to lay down black paint because black conceals, white reveals. Why not describe the brush tool? Set it to a soft edged brush that's really big and fluffy, and just paint a strip across that bottom to fade that out so it's press be to grab the brush tool. Let's make sure we have a soft edged brush by clicking the brush preset picker at the top of the options people here. It doesn't matter which one you picked, but you want one of these soft guys, this one that one or that one hopping over thes or hard as brush, so there's no softness there. There's no semi transparent pixels, so we want one of these soft edged brush is right here. Doesn't matter which one, because we can determine how big that burst is with a keyboard shortcut. So with the brush tool active, we know we've got a soft edged brush with black is our foreground color chips. And if you're color ships happen to be anything other than black and white. Just press D to set them to the default of black and white, and then press the X key to flip flop them. And if you don't want to remember any of those keyboard shortcuts, we zoom in here a little bit more. See this little icon right there that will reset your color chips to the default of black and white and see the tool tip even gave us the keyboard shortcut of D for default. And then if we click this little arrow right here, that will flip flop are color chips. And also you get the keyboard shortcut of X. When you point your mouse cursor added, if you forget what it is, so with black is our foreground color. Then we're gonna use our keyboard shortcuts, which are the left and right bracket keys next to the P key on your keyboard. And because I want this breaststroke to be perfectly horizontal, I'm gonna press and hold the shift key, and I'm just gonna paint across the bottom of that image. So now if I go full screen by tapping the F key for full screen a couple times, so there's Frank's masthead that we're gonna upload for his Behan's pro site. The only other thing that I might do or this particular design is I want to really ensure that his name is readable so I might sharpen it. But I want to sharpen it non destructively. So what I'm gonna do is create a new empty layer. Go grab the actual sharpened tool, which I don't think anybody in the creativelive classes ever used. So we can grab the sharpened tool down here. And the key to using it non destructively is to turn on the sample all layers option right here. Now, when we come over here and if we l z Middle Bitsy, hopefully you can see the difference. As I paint across the letters, see how they're becoming a little bit more sharp. So if you've got a highly detailed logo like this one, you might want to do this. I'll make the brush a little bit larger and the great thing about sharpening on the empty layer is that I can reduce opacity of the sharpening layer if I decide that I went too far. So here's the before and here's the after See how it's just sharpened up just a little bit. And like I said, if I wanted to back off the opacity of the sharpening, I could just drop that, drop that down, or if I decide I don't like it, I could just delete that empty layer. But the point is, don't ever, ever use the sharp mental on the image layer itself making new anti layer Grab the sharpened tool. Put the tool in sample all layers mode by using that check box in the options bar schools in back out here. So now we're ready to say the logo and upload it to be hands. So I'm gonna go ahead and and trend the image down. But once you do any fading like this, or even if you're dealing with it with a logo that's got a drop shadow on it, it would be incredibly difficult to use the crop tool and try to get that just right, because what if I cropped it too? close to the fade and then I kind of chopped off the fade. I'd have that problem over here. To how close toe across that. So here's another fantastic keyboard short, not keyboard shortcut, but tip for you that arguably is worth the price of the entire workshop. Any time you want to crop something down like that, you can choose image trim and you get this dialog box that asks. Well, how would you like me to turn this image? Will? I would like you to trim the image based on the bottom right pixel color. So Photoshopped, I make Photoshopped do the job of getting as close to this fade as it came without chopping any of it off. So I'm gonna say bottom right pixel color click. OK. And so I must have quite a bit of fake going on down there, but it chopped off the right hand side, so that's just a little trick. And again, that was image trim. Okay, so now let's say the sucker out. So file safer web because we are going to Web at the top right of the resulting dialogue, we can choose the format we want depending upon how many colors you've gotten your image and the kind of styling that you have created for this masthead. One of these file formats will work better than the other. J. Peg worked just fine. If you want super high quality, you might go for Ping 24. It's gonna make the file size a little bit larger. But I mean, you gotta figure that if people are cruising around on Behan's looking at photography, they've probably got a high speed connection anyway. So I wouldn't be so incredibly concerned about keeping my masthead. Let's say below 100 K or something like that, depending upon the kind of detail you've got in that that logo. If you want it to look really good and your logo is putting your you know that's the first impression. So you might be. You might want to have it as high quality as you can, and that would be paying 24. Or you could do a J peg and just pump up the the quality to very high. So I'm actually going to turn off convert to SRG V because sometimes you can get a little bit of a color shift in because we've included the background color that we're gonna dial in and be hands. So I'm gonna turn that off in the hopes that my colors will match. Exactly. And then we click save. So it's navigates where we want to save that file. They will call this one Frank. Ba hands live. And now we're ready to come over to be hands to see your site come together, huh? Yeah, I'm beside myself right here. Amazing. Just trying to keep him quiet. But he's behaving. So I was gonna quit mouse pose A for a minute. Here. There we go. Now we're safe. Okay, Civil type in Frank's email address, which is beautifully his domain name. See how nice that looks? Frank it Franka Bellafiore dot com It's not frank at hotmail dot com. It's not frank at gmail dot com. This is something you think you can dio e I e I e. But I think I think what's great is that, you know, step by step One little piece after the other really has seemed to come together, and Lisa has made it seem approachable, and I'm seeing a lot of nods around here. You can do it yourself now? Yeah. What about you, Chris? Where's your site? I know. I need Lisa's help. Teoh, sign me up Next. I'm after Frank e taking orders over here. You could do that. Same idea with a Facebook banner, right? If he wanted to be all fancy, you standardize your brand across all the social media, use the same design. It's a good idea. Absolutely. All right, we got logged in. Yeah, sweet. We're good. We're safe now, huh? All right, so here we are in Frank's site. And you can see that while I had access to his site, I followed all of my projects for him. Oh, you're welcome. Bythe. Okay, So when you first start out, we're gonna click on my portfolio and a couple of little things that you could do. You right here. We could edit the profile, um, to put in all of your basic information. So let's go ahead while we're here. Let's add a nice head shot for Frank. So we're gonna click, replace and navigate. So where we've saved all of that good stuff in the cleverly named Frank Headshots folder. So I know which has shot Frank likes the best, but I'm gonna won't use the one I like the best. Ah, now we see that our profile images remember in the in the little slide show introduction we did for B hands yesterday afternoon, we talked about profile Images cannot be larger than a medic. I wish they would say headshots can't be more than a mag, but that's what that is. So we're seeing that that one hand shot is too large. So we'll see if we've got something else in here that's a little bit smaller. And that was too big too. But we could go ahead and pop on over to photo shop pop that open his hands too big. And that was good. Holly. That was awesome thing, him beside himself, doubling up. There s So here's the hitch. How that I like this Franks. So what we can do is just coming here to the image size dialog box by person command option I or command or control all I on the PC or you can choose image image size. I don't want to crop the picture because I liked the crop. I just need to drop out some pixels, so it's not not so big. So I do want to turn on re sample because I am gonna throw away pixels here and I can see that it is pretty big file. So let's ratchet that we're right on down. I'm gonna change my unit of measurement two pixels to something in the 600 range. I see my size right here. Still a little too large. So let's just drop it on down. This is great stuff for you guys to be learning because you're going to encounter this these kinds of what would be a roadblock, you know, all the time. But no one had a handle it. You don't get that panic sensation that you don't get frustrated. So just by experimenting with the width with re sample turned on, I can see the file size right here. So once I get under a big I'm fine so I can click. OK, he's not really that microscopic, but it's still a nice big picture. Say people were to click on it, It would, you know, in large, right? That's a great shot. So let's choose file. We are going to go to the web so safer Web and J peg very high is gonna work out just fine. So click save so we can save this one in the head shots. We'll call this one. Frank had shot be hands. You don't want any spaces in these file names, so now it's come back over to be hands. We're in Frank's profile information, and we can click that one right there. And now the profile picture is being replaced. So now we have a cropping opportunity. I really don't want to cross the shot, so I'm just gonna grab the edges of this box and pull it out, reposition it, and I can continue. Behan's won't let you drag the handles beyond the the image bounds. So let's call that one pretty good right there and we can click crop and save. And now we've got a nice picture of Frank. They're Anna. Oops. I see a little bit of a type. Osama fixed that for Frank right here. And if he did have another website, we could put that in right here so we could say Frank will, ah, feel ray dot com Now, here's where we can enter all of our social media right there in your profile. So Frank has already kindly injured his Facebook information there. And if he had these other accounts, you can simply go in and do that as well. We've got an about me section down here, and if the gods of Asgard or with me, I have a text file on my desktop. Frank Spire. Yes, there we go. So it's coffee, a paste, and it is good to think about this. Treat yourself to a nice cup of tea or whatever it is. Liquid. That's your favorite. Get to your happy place and write this stuff out in the text. Document. Two reasons for that. It lets you kind of enjoy the process and craft a little bit more. You won't feel is pressured if you're in a Web form. And also, as you've seen in this class, we've had a few persnickety problems with the hands. So and it's just that's the nature of the Web. That's the nature of JavaScript. He's pop up windows and stuff, and I can't tell you how many times it's happened to me on my own website that I update via the Web. When I'm typing something in here, I will do something and I'll end up using a gesture and I'll go back a page and everything that I have written is gone. So right, this stuff in a text file, save it to your hard drive, treat yourself to sitting down in writing that stuff and then come over here to be hands and copy and paste it in. So there we've got Hiss about me section field in and again. This section is great for if, if examples of your work live on the Web somewhere else.