Belly's Custom Userpage Tutorial- Transluscent backgrounds and semi-transparent boxes edition.
Hello fellow MT'ers! Welcome to belly's new tutorial!
This tutorial will show you how to do the following:
1] construct a transparent background for your userpage.
and
2] teach you how to make semi-transparent boxes on your page.
First off, If you are new to making userpages, please refer to these links:
-Userpage Skins- Photoshop Edition by exentric
-Userpage Skins- Paint Shop Pro Edition
by belmikry
Now, my tutorial is based on Photoshop, but transparent backgrounds are possible on PSP too, and use basically the same things.
lets start making our userpage!
1] first off, pick out your design and scan for the userpage layout. For this tutorial, I'm using a fantastic vector by macky which is originally HERE. I wanted to choose something with a white background, just to make it easier for newcomers to transparent backgrounds ;)
2] Next, open the image in PS, along with your file of the Photoshop Skin Template which is loacted in the skin
package.
[side note: Personally, I get rid of the task bar layers on the Photoshop Skin
Template, because I dont use them, so don't panic if you don't see them on my tutorial :) They are usually
there! :) ]
3] Next, lets resize the vector so it will fit accordingly onto the skin.
[IMAGE/IMAGE SIZE/*APPROX. 700PIXELS WIDE**]
- I then transfer this image over to my skin by using the rectangular marquee tool
[LEFT TOOLBAR/RECTANGULAR MARQUEE]
and highlight the whole image. Then using my keyboard, I hold CTRL-C [COPY] to
copy it.
- Now, click on the skin and key in CTRL-v [PASTE] and using the selection tool
[LEFT TOOLBAR/SELECTION TOOL]
I move the new image over my skin accordingly to where I which to place it. IMAGE
[ note that I make the image large enough to fit approx 2/3 or less of the userpage. Also please note that I move the picture according to the amount which does not show up on the MT browser. This is usually and inch on the left and top of the slice, so I try to incorporate that so my picture/text isn't cut off ]
4] Now, before I start editing and adding text and the like, I want to know where the boxes will be on the MT page right? and how do I do this?
Easily! Basically all we have to do is upload the skin onto our site to see! :)
This is how we do it:
- save the file in a new folder [mine is called newskin.psp] remember, it isn't necessary to flatten the image yet!
- now, go to FILE/SAVE FOR WEB. [ PSP users: save and go to EXPORT/SLICER and follow the slicing instuctions in the PSP tutorial ]
- save the file under the name 'newskin' as well. This file will become an html file [newskin.html]
- open up MT on your FireFox Browser. Go to:
CUSTOMIZE USERPAGE: LAYOUT/BACKGROUND IMAGES.
- Upload the slices you saved [they will be under the new file, which now has a new folder in it called IMAGES. These images are as follows: BG01.jpg - BGo7.jpg. Upload each according to the number [refer to the PS tutorial if you are confused]
- A new browser pops up with the color codes. Put in colours you'd enjoy [either from [url=hex color codes]hex color codes[/url] page or using your EYEDROPPER TOOL , right click on the colour of your choice and hit "COPY COLOUR AS HTML".
Fill in all of the appropriate colors for you image, but make sure you leave the box for BOX BACKGROUND empty. This is what makes the userpage boxes transparent.
View mine here: picture.
- hit apply and preview. Another browser will pop up with your almost done userpage. Here's how mine looks: PICTURE [ you may have to hit refresh a few times. ]
5] Now as you can see, our transparent boxes are up! [hooray!] but you may be thinking:
"that's all well and good bel-san, but I can't really see the links or
the writing with the image right there! ]
Hoo boy, do I hear ya! that's why we are going to put in SEMI-TRANSPARENT BOXES XD
SEMI-TRANSPARENT BOXES
1] First off, we need to take a picture of our lovely userpage! go top the top of the page, and hit the keyboard button PRINT SCREEN [PRNT SRCN]
- Head back to your PS skin, and hit "CTRL-N/ENTER" [TO MAKE A NEW FILE] then hit CTRL-V [PASTE] the image you took of your screen shot will appear.
- Now, using the marquee tool [LEFT TOOLBAR/RECTANGULAR MARQUEE] and highlight
half of the top of the image until you reach 2 cm below the second left hand box.
PREVIEW.
- Hit CTRL-C [COPY] and then click on the skin you are making and hit CTRL-V [PASTE]. This will make another layer, this time with a portion of your userpage/boxes PREVIEW.
2] Now using the selection move tool [LEFT TOOLBAR/MOVE TOOL] zoom into the image 100-200 percent, and move the new layer to fit over the skins image perfectly [line up the image] You will now in the next step if it is lined up properly.
- Using the marquee tool [LEFT TOOLBAR/RECTANGULAR MARQUEE] highlight the area in the first left hand box PREVIEW.
- Now hit CTRL-X [CUT] to remove the text in the box. The image should not have shifted while you did this.
- Continue doing this for each box, the top center one, the second center one. When you reach the second left box and center box, just remove any text showing, since the boxes aren't completed.
- Make a new layer by hitting CTRL+SHFT-N [NEW LAYER]. Using the pop up window, make the layer opacity at 70 percent. Hit Enter.
- Now, highlight the top lefthand box once again. This time, after highlighting, click on the eyedropper tool, select the background colour [mine in this example is white] and then hit the paint bucket tool [LEFT TOOLBAR/PAINT BUCKET {G}] Fill in the highlighted box with white paint. You should see something like this: PREVIEW.
- Continue to make the boxes for each box in this new layer. When you get to the bottom boxes [SECOND BOX AND BOTTOM CENTER BOX] just make the boxes reach the very end of the skin, this will make sure if you have a different color box [ours is not in this example] that the boxes continue for infitiy, as long as your page is.
3] Now we need to remove the old box layer, since we will not be needing it anymore. on the right hand toolbar side, go to LAYERS, select the layer above your scan/image and right click on it. Select DELETE LAYER.
- The copied image should now be removed, and you are left with your white semi-transparent boxes!
4] Now, you can tweek your page however you choose! Make text, edit colours etc, let your imagination shine! just
remember, a whole new set of options open up for semi-transparent boxes, look for example the ones made by some of the
helpful designers at Userpageskindesigns!
http://cifiryn.minitokyo.net/
http://merma.minitokyo.net/
http://dianas.minitokyo.net/
http://zaira.minitokyo.net/
http://bluemitsuki.minitokyo.net/
just to name a few! ;)
END OF TUTORIAL: I hope that helps out! >_<
belsan
EDIT: There is another way to set up semi- transparent boxes if you find this way too intense. This is courtesy of haia and darkaeon. Although this way you cannot make colour gradients and have less options :P... but still, it works for percentage whole colours.
Quote: div.inner {
background-color: #efbe8f !important;
border: 1px dashed #FFB2B5;
margin: 1px !important;
filter:alpha(opacity=80) !important;
-moz-opacity:0.80 !important;
opacity: 0.80 !important;
}
