Subtitles of the Movie

OK, the only thing we're missing now is just the text for our layout. Now, unfortunately this is going to be a little bit tricky on my end because I can't see the entire header on my screen. Hopefully on your side you can see your entire header but let's give it whirl here anyway. I'm going to hit the T Key on my keyboard and of course that flips me over to the Type Tool and what I'll do is I'll single click on my Menu Bar about here I think should be just fine and then go ahead and type in About Servos Droid Mill. About Servos Droid Mill; OK, now unfortunately our text is coming out huge so what I'm going to do here is I'm going to hit Command A or Control A to select all of my text and then from the Options Bar I'm going to go and reduce my font size, maybe all the way down to about 14 points so we can actually see what we're doing here. OK, great. That's wonderful. Now, make sure to click at the end of About Servos Droid Mill, Now what I want to do is I want to put in a divider or a separator that's going to separate all of my buttons, all of my text objects, right? Now, there's a whole bunch of different ways to do this but let me show you kind of a cool way that I usually use. After the word Mill, I'm going to hit the Spacebar twice and then what I'm going to do is I'm going to add in a vertical pipe. Now, you might not know what that is on your keyboard. Try holding down the Shift Key and hitting your Backslash Key on your keyboard. Not your Forward Slash but your Backslash. The/that leans to the left and that should give you a vertical line or what's called a vertical pipe. That's going to serve as our separator. OK, great. So once you have your vertical pipe in there, hit the Spacebar twice again and we'll type in our next text object which is News and Events. Great. Two spaces, vertical pipe, Shift Backslash, two spaces. Alright. Now for the next guy; View the Catalog, two spaces, vertical pipe, two spaces, Custom Order Parts, two spaces, vertical pipe, two spaces and then finally Contact Servo. OK, wonderful. No need for a vertical pipe at the end of the Contact Servo. Now in the real world obviously you'd add in your own text. This is of course just sample text that we're using for our fictitious website. Now the next thing that I want to do here is I'm going to hit Command A one more time to select all of my text. I want to do a little bit of formatting here so what I'm going to do is I'm going to go and change the color of my text up on the Options Bar. I'm going to click on the Color Swatch and I'll change the color of my text to white and then go ahead and click on OK. Now for the tricky part. We actually want to try and fit this text into our web header or into our Menu Bar so here's what I'm going to do. I'm going to flip back to my Move Tool and what I'll do is I'll use my Free Transform. We talked about using the Free Transform for resizing your text way back when, right? So I'm going to hit Command T or Control T over on the Windows side and you might have to move around a little bit inside your document. Of course I have to here. Now make sure you're holding down Shift while you do this and make sure you're dragging from a corner because you don't want to distort your text or anything like that, right? Now I'm completely guessing here and I'm completely eyeballing it. That's why I'm leaving my zoom, by the way, at a hundred percent. We just talked about that not too long ago. So that looks ago to me. That still looks legible. I think that should be fine. I'm going to hit Enter to lock that in and I know that I have this massive gap of space here still over on the right-hand side so here's what I'm going to do. I'm going to hit the T Key on my keyboard to go back to the Type Tool. I'll single click anywhere inside my text and then I'll hit Control A or Command A to select everything and what I'm going to do is I'm going to go and adjust the tracking for my text. If you don't know what tracking is, essentially what it is is it's the space between the characters inside your selection. So with all of your text selected, head up to your Options Bar and click on this fella right here. Remember this guy from earlier; the Character and Paragraph Panels, right? Now make sure you're on your Character Panel and it's this option right here that we want. This guy here is going to control our tracking or the space between all of our characters. Now, what value, what setting should you use? Well, you're going to have to experiment here a little bit. I think when I was testing this out, 160 seemed to work well for me so I'm going to try 160 and I'll see how that works out now. Just give me a second here. I'm going to go back to my Move Tool and I'll pan over here a little bit. Yup, that seems to look good to me. See how I have just a little bit of space there now over on the right-hand side. I'll move back over to the left, about the same over there. That's good. So it's nice and centered there. That's how you do it. Now again, you might have to fiddle around just a little bit on your own to get this sitting properly but I think what I'll do at this point is I'm going to go and collapse my Character and Paragraph Panels just by clicking on that Double-Headed Arrow. Hopefully all good and the next thing that I want to do is I want to make sure that my text is nice and centered so here's what I'm going to do. I have the Text Layer selected. I'm still on my Move Tool and I'm just going to tap my Down Arrow on my keyboard or my Up Arrow just to nudge that text inside the Menu Bar, right? So it looks nice and centered vertically but what about centering it horizontally? Well, check this out. Here's what I'm going to do. I still have the About Servos Droid Mill or that Text Layer selected. I'm going to hold down Control or Command here on the Mac and I'll select the Menu Bar Layer and then up on my Options Bar I'm going to click on this fella right here, which is Align Horizontal Centers and what that will do is that will align the two layers with one another so they're nice and lined up. Now, you might want to double check that, both on the left and on the right-hand sides. I think we're looking great here. OK, we're almost done. I'm going to single click back on my Text Layer, the layer that contains all of the Menu Text of course and then back into my Styles Panel and I'll click on the second last item there, Jeff's Type Effect. That applies that type effect that you and I had created way back when. So there you go; looks pretty darn good to me. Now, of course, at any point you can go and adjust all of your settings that we've done here together and this is really meant to give you an idea of how web development and web design takes place here inside Photoshop. I hope you learned lots and lots and if you want, be sure to go back and watch these videos again so you can really master this stuff and really get it down.