Build Your Own Business Website header image

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.

Lesson 5 – Part 2 – Create the Background Images from the PSD File

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The first thing we’re going to do is to create these background images from this PSD file. The easiest way to do that is to turn off everything that’s not relevant. I’m going to turn off this background color and I’m actually going to turn off that background color. We’re going to start off with the top shadow so I’m going to turn off the dimples and that’s leaving only the shadow in place.

I’m going to bring my crop tool over here and come down here and crop. Let’s bring that crop up here just to make sure we get where it is. Let’s just turn this color back on just to make sure we didn’t miss anything.

Creating a Background Shadow

Now, let’s just recrop this because we’re excluding that top color anyway and turn off our background color here. It’s now semi-transparent and what we’ll do is redefine this canvas size here for just a second. It’s 30 pixels wide, we’ll just make it 20 pixels wide so it just clips the image down a bit.

Now, we have what’s going to become the background shadow so we’re going to save for web and devices and we’re going to save it as a PNG-24 with transparency because that’s the only image type that can be semi-transparent and we’ll save. At the moment, we’re going to call it background-shadow.png, save it then we’re just going to step back.

The next thing we’re going to do is turn off absolutely everything except for the dimples. This is the dimples, this is the shadow, let’s turn that white back on for a second. Now, this is trickier because you can see there’s a white line here, we want to make this thing repeat but we don’t want that line to become evident. We’re going to zoom in on this for a second here and let’s turn on our grids so there appears to be about 2 pixels in between these things.

Creating a Background Texture

What we’re going to do is come up 1 pixel and use line to crop to then we’re going to do the same thing here. This probably is 3 pixels, isn’t it? It is 3 pixels which is going to be tougher to crop to but we’ll try it. In fact, we probably should just do that very same thing here, we should probably just bring this up  a half a pixel. I’m not sure that’ll crop to half a pixel but we’re going to move that up a half a pixel anyway.

I think we’ll just come down here, this is going to be a bit of an experiment because this is not actually how I get it but this is probably better than the way I did it. We’ll come down here to 1 and a half pixels and let’s just bring this one over here to the same place to make sure that we come over to that 1 and a half pixels.

Let’s see if we can just crop to this. We can’t crop to the half pixel so we’ll come down 1 and we’re already at the 1, now we’ll come over to that half and we’re already at that half so I think we’re good to go with this. I think we now have what should be an evenly repeating pattern. Looks like it. Let’s turn off that background, save for web and devices, it’s a PNG-24 again and we’re going to say this one’s going to be background-texture.png.

Creating a Footer Bottom Background

We have background-texture and background-shadow. Let’s edit, step backward, step backward, let’s step all the way back out of this thing. Then we’re going to turn that footer back on again and we’re going to do a similar thing here, we’re going to come down here and cut it, zoom in on it. See that there’s this dark and a light and a dark then it gets the normal color?

What I’m going to do is try to crop while retaining that dark, light, dark pattern there. I’m cropping it down to that and we’re going to set the canvas size again, its height is 63, we’re going to set the canvas size to 20 and proceed. I’ll save for web and devices, this is going to be footer-bottom-background.png and step backwards.

For the moment, we’re just going to stop with the PSD file and let’s add those images to our child theme. Here we are on our child theme and what we’re going to do is stick those images here under images.

I’m going to open up Windows Explorer and background-shadow, background-texture and footer-bottom-background. We’re going to drag those over and drop them into images. Because these are theme specific images, we’re putting them inside the images folder of our theme and what we’re going to do is just upload those real quickly.

Save $200 on Membership Now!

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

Leave a Comment