Tags:adobe creative suite 2,adobe dreamweaver,adobe fireworks,adobe flash 8 professional,adobe illustrator,adobe photoshop,adobe web bundle,cascading style sheets,cmyk,html,jpeg,live,mac,macromedia studio 8,microsoft windows,rgb,total training
Grab video code:
Now, we just want to add the company name to the logo and I will do that using the text tool. Let me go over and access the text tool. And we can set up some base properties of how our text is going to go in.
I will stick with the Arial Black font right now. We are going to keep this on some fonts but obviously, you can use whatever fonts, you would like since this is a logo.
We are set to 30 points which looks about the right size and we are going to be using white as our main color or all the text on the page. That is going to have simple fire design later on and help unify all these elements together. Now, our company is of course, Alien Auto and they are a custom car shop. So, let us include that as part of the logo.
Over here, I want to do a few special sizing and spacing options, so I want to access the character palette. Since I am already in the text tool, I can access it really quickly by using “Ctrl+T” but that would be “Command+T” on the Macintosh. As usual, this is going to give us access to all kinds of different spacing properties for effects.
Now, I want the Alien Auto part to be big, so let us take the “Custom Car Shop” aside things and I will drop it down to a regular Arial font. Just selecting that from the font pull-down in the character panel and we will also make it a little bit smaller, so that the Alien Auto has prominence over it. Let us say 20 points. You get it while I am at it, I am going to make this all caps.
I will retype that really quickly. Hit the Caps Lock key and that makes them much more dramatic presentation for the logo. I will tighten this up a little and we will take advantage of some of the spacing options in Photoshop.
I will just draw the spacing in just a little bit. Actually, let me tighten that up quite a bit. That is 25 will look like, let us pump that up to 50. So, we will go to minus 50 and you can see that is a nice presentation and the use of the font or tightly specifying the car logo.
Custom car shop is still kind of big here, so I am just going to use the character width property and I am going to drop that down to let us say, 80%. Now, since we are on the text tool, I am just going to hit the “Enter” key on the numeric keypad to confirm that change and we will have our text drop there.
Now, I would like to set in some mark ups or some placeholders for some of the rest of that content text that is going to be coming in. In these cases though, I specifically not going to be using any custom spacing or custom width options mostly because the text that appears down here on our webpage in the end is going to be replaced with actual HTML text which does not have the capability of some of the spacing options. So, I am going to mark up my text to reflect that.
Now, I got some placeholder text set up in a nice text file and we can access that through the Adobe Bridge just like the other assets we have been bringing in. It is right here in our Lesson 3 Assets folder and it is homepage text. That will save us a lot of typing and what we got in here is some placeholders for some sample headlines, some sample content and then a side headline that we can use off to the left hand side.
So, I am just going to bring these in, in little chunks. I will select the first two lines which will act as our headline for the page and I will just copy those and we will switch back over to Photoshop. Now, I am going to leave this open since we will be back for it a couple of different times.
And since I am all set with the text tool, I will just drag at textbox that we can paste headline text into. Now, notice our text palette has retained the last settings that we used in creating text up for our logo at the top. There are couple of things I am going to do different here.
First of all, the size is a little bit round, we will adjust that. Probably, very importantly, I am trying to mock up HTML text at this point. An HTML is not really capable of handling variable width characters like Photoshop is. So, first I am going to select that text and we will change that character width to a normal 1