Build Your Own Business Website header image

Create a WordPress Site from a PSD File Using Thesis – Part 2 – Extracting the Graphics From PSD File

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we extract the graphics from the PSD File and optimize each of the images before we go on to add the background images on the site.

Video Transcript

And so I’m going to turn off everything here except for my… turn off the main copy, turn off the tagline entirely and then go back down and turn on that watermark. Okay so here’s our main background image. Does it extend beyond… yes, it does. It actually goes all the way to the edge. So we’re going to just make an image that is really, 1200 pixels wide by however many pixels tall this is.

Now because it’s a transparent PNG… well, because it’s transparent, it has to be a transparent PNG and because of that… well, we could actually do it this way if we wished. We could save it as a jpeg or as a gif like this. But this page is actually probably going to be smaller if we just used this as a transparent PNG because it’s only got one color. Let’s try that and see.

So we file, save for web and devices. We’re using a PNG 24… oh actually, it’s pretty big, 144.2 k. We don’t really want it to be that big so we’re not going to do it that way. Let’s turn this on, file, save for web and devices. Now we’re not going to use any transparency so we’re going to transparency off. We’ll select the PNG 8 which is probably going to be smaller. 32 colors, let’s try 64, just in case and we could use 64 colors. Obviously, it’s very very light gradation. That’s only 45 k. If we take it down to 16 colors… oh yeah, you see a little bit of ghosting or lines so we’re not going to use 16. But I don’t think… I don’t see a 32 so I think that’s probably good enough. If we did it as a PNG 8 with 32 colors and no transparency, it’ll be 34 k. If we do that as a gif, it would be 49 k so the choice is PNG 8.

So here’s our first image, this is the background image and we’re going to hit save and come over here and save it where I’m using it. Websites, Tailoring the Web, clients, Marina, graphics and this is going to be the infinity symbol. Obviously, you all know, no spaces in the file name, right? If you have to have a space, you’ll use a hyphen.

So there’s our infinity symbol and before we get too far down the road, we’re going to go ahead and create our gradient and that does have to be transparent because we need to be able to see through it to the image below. We’re going to keep our… we want to get that drop shadow out of that tagline. So the next thing we’re going to do is first, we’re just going to cut or crop the image down like this. Let’s turn our background on just to make sure that we don’t have any green there. We don’t. I need to zoom in on it to really crop it down because I want to… yeah, I think I’m just going to keep it to there. Enter that… actually, I want to make sure, I want to absolutely make sure that I get all of the drop shadow and none of the yellow. Okay so my line actually is there so I can count on snapping to my guide here.

And so now this is… oh we’re going to actually make it even a little bit smaller. We’re going to go to image and canvass size and we’re just going to crop it down to 20, say okay to that. Okay and then we’re going to save… this one will be saved as a PNG 8 because it has to be semi-transparent so save for web and devices. PNG 24 transparency… you can see here it’s only 3.4 k so that’s okay. We’re going to hit save and this is going to be the content background. Hit save again and then we’re going to just step back because we don’t really want to crop all this stuff. Let’s see, yeah okay so we don’t really want to crop all that.

However, the next thing I want to do is do my header area so we’ll crop this and then we’ll zoom in on it then we’ll just make sure that we’re cutting down to my… it doesn’t look like I quite got my contact there. Let’s see, okay. Let’s just grab to there. You know, this is the tricky bit when you’re making these cuts is making sure that you get that cut perfect and at the moment, it is not perfect. I need to lose 1 pixel so I’m going to lose that 1 pixel using the image size or canvass size. First, we only need it to be 20 pixels wide and second, we only need it to be 336 pixels tall and we’re going to cut it so that it trims off the bottom. Okay, perfect.

Okay so we’re going to File, Save for web and devices. This… well, we’ll leave it as a PNG. Really, it’s only 204 bytes. It’s so small. It’s only 2 colors and only 20 pixels wide so go ahead and hit save and we’ll call this one header background. Okay, let’s just step backwards again, get back to our full image again.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment