Somebody asked me what is Web 2.0 Design, and how to design it. You can read about the web 2.0 design at wikipedia.


By this time I will teach you how to make a Web 2.0 Design which can be use in Web Designing, Logo Designing and other Web Interface Design. In fact, this my commonly used design for my clients. These sample of Web 2.0 Design stuffs can be seen at my portfolio.

From a hobby, now a habbit. A well-matched blog and design always comes in pair. Here are couples of criteria in designing a blog.

♥ Wu Chun Photo Scrap Tutorial Using Photoshop ♥

Wu Chun’s Photo Collections

Before we start, do you want to know Wu Chun’s Profile and Biography?
Continue Reading 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