My-Photoshop: Tutorials, Templates & Software

Semi-Transparent Panel Backgrounds

One of my own personal favorite modifications, semi-transparent backgrounds in your IMVU home page panels let your cool page backgrounds show through. It's better than full transparency because it still sets the sections apart - but lets everything look cool.

This tutorial will help you create a panel background that works like this:

Are you not seeing these kind of cool backgrounds on imvu home pages? You're probably still using Internet Explorer, am I right? Check it out - get Firefox and not only will you be able to see pages the way they were meant to be seen, but you'll also have a much faster, more reliable and secure browser.

Difficulty Level:

Beginner

Time Needed:

10-20Minutes

PDF Version:

Download

New Canvas

Open a new canvas, sized 50 pixels by 50 pixels, with a transparent background.

Step One - New Canvas

New Layer

Make a new layer (layer, new, layer) and fill it with the color that you want the transparency to be. I'm using blue in this example. Your layers and canvas should now look like this:

Step Two: New Layer

Lower the Fill

At the top of your layers palette is an option named "Fill". Lower this setting to about 50%. After you have it on your page and can preview it, you might want it even lower, but this is a good setting to start with. Your canvas should now look like the illustration at left, and the illustration at right shows where the Fill setting and slider are located:

Save for Web

It's time to save! Click "File" and choose "Save for Web". In the dialogue, apply these settings:

Upload

This step, I can't really tell you "how" to do. You will need to upload your new semi-transparent background to the Internet. If you have a website, you can host the image there. You can also use one of many free image hosts. The point is that you have to have the image online before you can use it on your page.

Edit IMVU Background

Once you have your image uploaded, hit your IMVU home page and get ready to edit the background. You'll notice that each of your "sections" has an "Edit" button. Click "Edit", and then choose "Body Background".

Apply Your Settings

This pops up a new dialogue. You will want to apply the following settings - below is a description of what each setting means:

Step 7: Apply Settings

1. URL for background image: This is where you uploaded your image to. So if I uploaded my background to www.my-photoshop.com, my background URL would be http://www.my-photoshop.com/bg.png - you do need to use the http://.

2. Tiled Image / Non-Scrolling Image: If you are using a big background that you don't want to "move" or "expand" when your box gets bigger, then you would use the Non-Scrolling Image box. This is the box that you use when you don't want your page background to scroll, for example. For the type of background we're using, though, we want the little image to fill in the whole background. So, tick "Tiled Image".

3. Background Color: Because we want the background to be semi-transparent, we can't have any background color already in the section. We want the page background to show through. So, click the "Set to Transparent" link and the box below will fill in automatically.

4. CSS: This box will fill in for you as you make changes to the above settings. You really don't need to worry about it at all.

5. Apply Setting to all Panels: If you tick this box, you won't have to go through every single panel on your page and make changes to the background. Of course, if you want to use different backgrounds on different sections, don't click this box.

6. Example Text: As you make changes to the settings, this whole area will change. It shows you exactly how your panel background will look - right now, mine shows that it will let the page background show through, and that my text is black. Perfect!

7. Save / Cancel: When all your settings are done, you must click Save or the settings won't be changed. If you did something silly and aren't sure what you did, you can click Cancel and everything will go back to the way it was before you messed with anything.

Site Search:

Semi-Transparent Panel Backgrounds