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.
- 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!
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.
thanks, I was trying to figure some of that stuff other day, and you got right
to the point! But the 2 last images are not openning! at least not for
me
Quote by toxictea23Awesome tutorial
Bellie^.^
heheh a lot of people have been asking about how to do that^.^
Thanks
p.s
Bellie, there are errors with your 2 last preview images, and that is
because you added a space after the world image and then the
number..^.^
Quote by levezzaliWow Belly-San!!
thanks, I was trying to figure some of that stuff other day, and you
got right to the point! But the 2 last images are not openning! at
least not for me
thanks again!!!!
thanks guys, all fixed now! [hopefully ] i didn't noticed, belly's so bad at html
Wow... I learnt at least one thing I didn't know today o.o You can get HTML
color codes from Photoshop? I've been doing all that extra work going to my
favorite HTML color chooser too... http://www.zspc.com/color/index-e.html
It's really an awesome tool though... allowing you to see how your colors
interact with each other and all.
There's a disadvantage from using this method. *Everything* in the page will be
set to translucent. So its best to set opaque setting to 75% or more. Any lower
and stuff gets harder to see.
Umm....I got lost around step 3, of the first part
Anyway, it looks like a great tutorial for those who have Photoshop; with all
these tutorials MT is sure to have many lovely unique userpages ^^
Thanks for the long tutorial, I bet it'll come to use when I start making my
userpage ^^
Still havent got the patience yet. Grateful that i have photoshop.
Thanks!!
omigoodness Belly-san!!! Thankyu Thankyuuuuuu!!!! I was looking at Saki's just
now going "how did she do that" nowww
meee knowsss!!! All thanks too miss Belly Button!!!
Quote by IyasisUmm....I got lost around
step 3, of the first part
Anyway, it looks like a great tutorial for those who have Photoshop;
with all these tutorials MT is sure to have many lovely unique
userpages ^^
awww sorry about that! all 3 says is to resize
the image so it fits on the page! should i re-word it?
Quote: - 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.
I dont never gotten a box like that to make all those chnages like in her
picture why?
The code for transparent boxes works, how cool it is... But how do you fix the
problem with the subheader ? When i used this code some part of the subheader
disappeared, and as i can see there're people have this problem too...
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.
They
are usually there! 
]
[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
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.
Awesome tutorial Bellie^.^
heheh a lot of people have been asking about how to do that^.^
Thanks
p.s
Bellie, there are errors with your 2 last preview images, and that is because you added a space after the world image and then the number..^.^
Wow Belly-San!!
thanks, I was trying to figure some of that stuff other day, and you got right to the point! But the 2 last images are not openning! at least not for me
thanks again!!!!
There is an easyer way bel ^_^ I recently talked to Haia and asked her how she did it.
Replace the colro with the color of your box background and have fun. Thanks to Haia for the code ^_^
thanks guys, all fixed now! [hopefully
] i didn't noticed, belly's so bad at html 
Wow... I learnt at least one thing I didn't know today o.o You can get HTML color codes from Photoshop? I've been doing all that extra work going to my favorite HTML color chooser too...
http://www.zspc.com/color/index-e.html
It's really an awesome tool though... allowing you to see how your colors interact with each other and all.
There's a disadvantage from using this method. *Everything* in the page will be set to translucent. So its best to set opaque setting to 75% or more. Any lower and stuff gets harder to see.
Thank you so much for the tutorial ^-^!! I'll have to try it sometime later though, it seems too hard and complicated
!!
Umm....I got lost around step 3, of the first part
Anyway, it looks like a great tutorial for those who have Photoshop; with all these tutorials MT is sure to have many lovely unique userpages ^^
Thanks for the long tutorial, I bet it'll come to use when I start making my userpage ^^
Still havent got the patience yet. Grateful that i have photoshop.
Thanks!!
thank for the tutorial, it so helpful
thanxies 4 the tutorial
i'll try it sum time ^^
omigoodness Belly-san!!! Thankyu Thankyuuuuuu!!!! I was looking at Saki's just now going "how did she do that"
nowww
meee knowsss!!! All thanks too miss Belly Button!!!
awww sorry about that! all 3 says is to resize the image so it fits on the page! should i re-word it?
Great tut bell :P indeed usefull!
great
cool tutorial bel-san! ^^ certainly helped me out. i'm going to follow it later though.
thanks so much for posting this, you saved lives.
This is great! I've always wanted to do that! You should report this and tell a mod to pin this up.
Y is it that when i cut the words out of the pic, the words still remain? N what do u do to put it on MT after finishing with it?
I dont never gotten a box like that to make all those chnages like in her picture why?
merged: 04-27-2006 ~ 10:42am
http://www.geocities.com/userpageskindesigns/image02.jpg
thank you so much for the information ^^ It hapls out a lots
but I wanna ask how to put a video file or a audio file to my userpage ?
The code for transparent boxes works, how cool it is... But how do you fix the problem with the subheader ? When i used this code some part of the subheader disappeared, and as i can see there're people have this problem too...