In this session we demonstrate how to make a semi transparent image in Photoshop and add it to a Thesis 2 site. We show how to add a background image to the body package and then add the semi transparent image to the container package. We also discuss what file format to save the image in so that it keeps its transparency.
Member: I really just can’t figure out how to make a semi-transparent background image. I tried… I’ve been all over Photoshop and I just… I don’t know what to do.
Rick: Okay so I happen to have Photoshop open. So we’ll just say new file and let’s make it 50 by 50, 72 dpi. Background content’s transparent and say okay. Okay so you know it’s transparent if you can see the white and gray squares like this. And what you do is create a new layer. Let’s say I want to make the… make it this green color. So I’ll go ahead and control D which paints… oh maybe it’s Alt D. No, no it’s not. It’s Shift D. Oh okay forget it.
Now that I’m on the spot, I don’t remember what the… no, it’s control delete. There we go, okay. So that put the white color in. Let’s just go for a green color again. And so that’s alt delete then, I guess. Alt delete fills the space up with the green color.
And then over here, under your Layer Properties, set the opacity down to say, 50%. So we have a 50% opaque image of this color and you know that it’s opaque because you can see that black and white or the gray and white squares in the background.
And then all you do is File, save for web and devices and choose PNG 24. Okay, it can’t be GIF, a JPG, PNG-8. It has to be a PNG 24. That’s the only file format that will create a semi-transparent PNG file. And hit save and we’ll just… background green.
Okay and so we’ve got… but we now have that image created and so if we go over to our website… and let’s say I want to… oh let’s see, where am I? I’m in Thesis 2 test so let’s go over to the skin editor and we’ll go to CSS and we’ll add a body background first. Oh actually, I think I need to upload those images first. I don’t really have any images there that will work so let’s add an image or choose a file. And let’s see, just looking for something that looks like a background image.
Okay, well it doesn’t look like I have anything here that looks like a background image. Give it one more try here. Okay, we’re just going to use this one just for grins. Choose the file, open, add the image. Okay so that’s going to be my background image. It’s going to repeat itself all over my page and let’s see, let’s just go ahead and add that green color that we created. And we did that under downloads.
Okay so now we have two images here. Go back over to CSS, go to body, options, background, background image and paste my old header image. And we’re going to repeat it… yeah, we’re not going to do anything different there. And I think our canvass… okay, there’s our canvass, has that background image spread all over the place.
And now, what I want to do is in my container, I’m going to add the other background image. Save it like that and now you have the semi-transparent image laying over the top of the typical background image.
Rick: So does that make sense?
Member: Yeah, I think the thing I did wrong was when I open the file in Photoshop, I didn’t make it transparent to begin with. And so that’s why it wasn’t working. I think that’s the only thing I see different from what I did than what you did.
Rick: Well, you can always just turn off that background too, the layer 1. The layer 1 has a color in it. You can just turn the layer off and only use the layer that has that specific color in it. It will still do the job. Let’s say… let’s add the white color to this instead. Okay so… I mean, that’s what it would look had I not said transparent. But as soon as you turn that layer off you know, it still ends up being transparent. So that’s the trick.
Member: Okay. Well, thank you.