How to create a hi5 skin

Check Hi5 skins Tag for more stuff about this!
If you are a hi5 user, I suppose you want to have your own skin, I don't say you can't choice one already done but... sometimes you want to be proud by your own work. It's so easy, idea it's to design something nice and slice the layout in images required.
If you like that skin you should read and download this!
But let's start with downloading hi5 skin template from hi5.com. Inside the archive you will find a .psd file, open-it in photoshop and choose a theme. For this tutorial I choose a dark fairy theme.
hi5 skin
Now click on the eye from the layer tab to hide example text and image. We just hide the text from layout.
Press M to select Rectangular Marquee tool. Now we set the style to fixed size with 956px width and 65 px Height. hi5 skin tutorial




Select with this setting the header-main and navigation main(I delete these layers). Press ctrl+shift+N to add a new photoshop tutoriallayer.Now fill that selection with a gradient which have first color #6d593f the middle one #afa98b( location 70% ) and the last color #3f3d31.
Deselect and now we must take the fairys, from somewere. Download a new brush with fairyes from here. Now we have the brushes. Feel free to download another brushes from that beautyfull site, you will need it for other projects. Again for Rectangular Marquee tool with fixed size we add 956px for width and 500px for height. Select the background main and fil with color #6d593f. Deselect, again with the same width for marqee tool but only 60px height we select the main footer, add a new layer and we fill with the same gradient like the header and navigation for main. Deselect, add a new layer and let's paint some fairyes inside the main module with #353534 color.Ok, now we must have something like in follow image.
photoshop tutorialNow we have the main module ready, it's time to go to the next step and create images for mini module. Again we hide the example text, for that module this time. Set the marquee tool 470 Width and 60 height and select the header of minimodule, fill with the same gradient. Add new value for marqee tool: 470px W and 25px H, select the nav menu and fill with #6d593e. Deselect and add a fairy on the right end. photoshop tutorial

Again with marqee tool set 470px W and 350px H select the background of minimodule, fill with #6d593e, deselect. We have just few steps before reaching the end. It's time to use again marqee tool with 470px W and 30px H we select the footer for mini module. Fill with gradient we used before, and add some fairyes. Deselect and fill the background layer with #afa98a.
We are so close to end this skin. Select slice tool, set style to fixed size and cut images as follow:
-Main Header 956x35 pixel
-Main Navigation 956x30 pixel
-Main Background 956x500 pixel
-Main footer 956x60 pixel
-Mini module header 470x60 pixel
-Mini module Navigation 470x25 pixel
-Mini module background 470x350 pixel
-Mini modul footer 470x30 pixel.
From File menu select save for web from the new window set quality to high and save.photoshop tutorial
Only step to do is upload the resulted images to hi5, set color of background to #afa98a set the good font and colors for your skin and that's all. Hope like it! Use your imagination and create a new skin! And remember to leave a comment about this tutorial! Want new hi5 skin? Just leave a comment and tell me what you want and as soon I can I will design it!
See all my tutorials!
If this tutorial was useful please give me a backlink or leave a comment to see if it worth!

2 comentarii:

Dekyi said...

Great.........
Thanks for this tutorial

Flash Faces said...

hi can you send me the files in psd please ?

flash.faces@gmail.com