Navigational CSS Layout Plus Designing Tutorial

Requirements:
* Adobe Photoshop in any Version
* Notepad
* Creativity
* Patience

Think and imagine first on what would be the design of your Friendster Layout.
As the tutorial will start, this is just my own desire. Choose your own and be creative.

By this time I’m using Adobe Photoshop CS3, but you can follow the step if you have other Version of Adobe Photoshop.

Click the plus sign to see the screen shots.

In my case I used Pink and Violet, they are one of the good color combination. So I come up with this Friendster Layout in future.

FOR BACKGROUND

Step # 1
Go to File > New. [+]
Width: 100px » Height: 100px [+]
(If not mentioned leave it default, don’t change)
Click OK.

Step # 2
Use Paint Bucket Tool. Change Foreground to Pattern then choose the pattern you want to be the background of your Friendster Layout. [+]

Then fill/color the document.

Output

Step # 3
Go to File > Save. [+]
Type the file name you want. I used “bg” as my file name. And format of GIF. [+]
Then click SAVE.

Step # 4
You may now close your “bg.gif” to avoid confusion.

We are already done in Background of our layout! EASY right?

Technique: The most Important in making a background is the color combination and the texture. It must fit the last output of your Friendster Layout. We use GIF as an image format for fast loading for your layout. But it’s actually can be PNG or JPG/JPEG but these are larger image size than GIF.

FOR HEADER

Step # 1
Go to File > New. [+]
Width: 800px » Height: 200px [+]
(If not mentioned leave it default, don’t change)
Click OK.

Note: Height can be larger than what I use as an example. By this time I used 200px in height.

Step # 2
Use Paint Bucket Tool for coloring/filling the document. Change Pattern to Foreground. [+]
On Layer 1, I used #141414 Foreground color for the background of my header. [+]

Step # 3
On Layer 2, using Rectangular Marquee Tool, I selected the middle of the document with approximately 1 inch in height. And filled it with color pink using Paint Bucket Tool. [+]
Then press CTRL + D to deselect the pink rectangle.

Step # 4
Now, from the Layers Palette, double click Layer 2. And Layer Style Box will appear. [+]

Click and select the Gradient Overlay then follow this gradient style → [+]
OK.

Click and select the Stroke then follow this Stroke Style → [+]
OK.

Then click OK for Layer Style Box.

It’s like a 3D Pink Rectangle right? You now have something like this → [+]

Step # 5
You can now add any other detail design for you header. It’s up to you what to put on your header. It can be Photoshop Brushes, text, your name, favorite number or anything else. But make sure every input of design details you’ll always create a new layer from layers palette. [+]

My Output Design

We used the PSD format for the design revision. If you want to revise your design, it can be used by using your PSD format.

Then repeat saving for the Header JPG/JPEG.
Go to File > Save As. [+]
Type the file name you want. I used “xsabrina” as my file name. And format of JPG/JPEG [+]

Done in designing!

Proceed in Coding.

CSS CODING

Step # 1
Open your Browser and go to Friendster Profile Editor or Friendster-Tweakers.

Step # 2
By this time, I will use Friendster Profile Editor.
Fill up all the Friendster Styles:
The Background, Fonts and so on..

Step # 3
On the Page Background:
Upload your bg.gif in Tinypic or Imageshack. Get the Direct Link and put it in Image URL and follow the rest of these → [+]

Then fill up the rest. Don’t forget to think the good color combination for the better result of your layout =)

Step # 4
Then after setting your layout style, the colors, background, fonts and etc., click Generate Friendster Code. And click Preview if you want to see the result of your future layout. [+]

WHERE IS THE HEADER???

Step # 5
After Generating your code, Select All (ctrl + a) the code on the box > Right Click > Copy. [+]

Open notepad. On your desktop go to Start > Programs > Accessories > Notepad

Then Paste (Ctrl + V) your code on notepad. Then Save it, File > Save > File name: yourfilename.css
In my case xsabrina.css [Extension name of .css must be indicated]

Step # 6
Get this code for your Navigation / Header:
Code from FriendsterMagic

CODE

/* FRIENDSTER MAGIC */
#navigation {
background-image: url(YourHeaderURLhere.JPG);
height: 65px !important;
position: relative !important;
margin: 0;
padding: 200px 0 0 0;
background-attachment:scroll;
background-repeat: no-repeat;
background-position: top left;
background-color: transparent;
border: 5px dashed #c70067;
}

Explanation:
padding: 200px 0 0 0; What ever you header height, that would be the padding
background-attachment:scroll; Just make it scroll
background-repeat: no-repeat; It can be Repeated or not Repeated
background-position: top left; Much better to use Center
background-color: transparent; It can be transparent of has a color
border: 5px dashed #c70067; Do want borders on you header? If not, delete this line.

Copy and paste CODE on your notepad. [+]

Step # 7
We’re done in coding! Go to File > Save. In notepad, it’s automatically overwrite you previous saved file.

You have now your own layout.

Techniques:
1. In designing your layout, think first what would be the style, colors and images to use.
2. Combining your colors must be a good color combination. Maximum of 3 color combination is better. But if your layout is too much colorful, then you may use multiple colors. In my case I used Pink and Violet, they are one of the good color combination.
3. Just make it simple. Not too much exaggerated.