How to Create Friendster Overlay Profile Part I

Though this tutorial will need some HTML and Photoshop Skills, the steps here will guide you to learn some of the HTML and Photoshop basics so it's okay if you don't have any basic knowledge about these two applications. But it is required that you have Adobe Photoshop installed on your computer but if you don't have any, I provide the download link here. Or if you don't own a computer, you can try following steps here by renting on the computer shops near you. It will only spend you 1 - 2 hours for this tutorial. I hope after this tutorial you will be able to create and design your own and unique overlay profile. Goodluck.

Difficulty: Easy

Instructions

Things You'll Need:

• Adobe Photoshop 7.0 or higher (I used 7.0 for this tutorial).
• Macromedia Dreamweaver (The download link is provided under this)
• http://mssunday.x10hosting.com/filezilla/mssunday.php?i=1
• Images
• http://rapidshare.com/files/133233443/overlayimages.rar.html
• Winrar (to extract the Image Files)
• http://www.rarlab.com/download.htm

1. 

   Create new Photoshop document by pressing Ctrl + N on your keyboard then use this setting:
   
   Width: 900 pixels
   
   Height: 1500 pixels
   
   Resolution: 72 pixels/inch
   
   mode: RGB Color
   
   Contents: White

2. 

   Select the paint bucket tool (see the image) and fill the whole document with black.

3. 

   Open the image you want to use as your Overlay header (or you can use the image I provide name header.gif) by pressing CTRL + O on your keyboard. Press Ctrl + A to select the whole image. Then Drag it on your document and Resize it using the Move Tool (see image). Notice that in the right side of photoshop application you'll see that another Layer is added (named Layer 1). You can rename it by double clicking the layer name and type the name "Header". This layer naming will be very usefull as we go on in this tutorial.

4. 

   Now we will create our navigation bar for Home, My Friends, Messages, and Logout links.
   Press Ctrl + Shift + N to create new layer and name it "Menu". Then select the Horizontal Type Tool and set its font size to 47pt, font type is "Monotype Corsiva" and font color is white. Then write the Menu's on the bottom position of our header image. Refer on the image

5. 

   The next step is by adding our background with image. Lets use the background.gif image on the image file I provide in the Resource section.
   
   Open this image on photoshop by pressing again the Ctrl + O. Then locate the background.gif image and press Ctrl + A to select the whole image then drag it again on the document. Name this Layer as "Background". Place this image under our Menu Items.

6. 

   Then we will be adding some effects on our background image by lowering its Opacity. Select the Background Layer by clicking on that layer (to make sure it is the selected layer, check the "Show bounding box" on the Move Tool options.See image). Then on the Layer window, lower right of your screen, click the arrow next to the Opacity. The default value of this is 100%, set its Opacity to 45%.

7. 

   Now we will add our Picture Box on our Overlay Document. Add new Layer by Pressing Ctrl + Shift + N. Then in the Toolbox, select the Rectangle Tool and place it on the Upper Left side of our Background Layer. Name this Layer "Picture Box". See image.

8. 

   We then add glowing effect on our Picture box.
   
   First select the Picture Layer then on the Layer window right click on that Layer and Choose the Blending Options.

9. 

   Now its time to add navigation links for our overlay. This are the My Photos, Send Me Message, Add As Friend and Add Comment. But this time lets add this link an icon. We use the gun.gif picture here.
   
   First select the Horizontal Type Tool then type the My Photos, Send Me Message, Add as Friend and Add Comment Text under our Picture Box Layer (Font type = Monotype Corsiva, font size 48pt, font color = White). Be sure that each of this links are Separated Layer. So when you type first the My Photos, press the Ctrl + Shift + N then name the Layer "My Photos" then type the My Photos text on the document.
   
   When you encounter that the Text color is not white. The problem is on the Layer window. Rearrange the layer positions. Make the Background Layer under the other Layer. See image

10. 

    Now lets add our icon for the navigational links. Open the gun.gif image on the image folder I provided by pressing again Ctrl + O (I hope that this time you already memorize this Open File Shortcut.), then Drag it on our overlay document. Rename this Layer to "Gun1"
    
    Then using The Move Tool, Put the image on the left side of our Navigation Links. Since 4 images will be needed for this links. You can use the Duplicate Layer when you right click on the Gun1 Layer.
    
    When you use the Duplicate Layer. The Duplicate copy of the Gun Layer is place over the Original Layer so you can get this duplicated copy by using the Move tool and place it on the left side of the Navigation Links. Note that the Navigation Links are 4 so you'll need 4 Gun Layers named "Gun1", "Gun2","Gun3" and "Gun4".

11. 

    For our right side content, we will put the About me and Comments Box there. We will start first for the About Me Box.
    
    Create a new layer (Ctrl + Shift + N) name it "About Me Box" then select the Rectangle Tool and draw a rectangle on the right side of your document. Note that the About Me Box that you draw has the same Style as the Picture Box. We will fix it by right clicking the About Me Box Layer and selecting the Blending Option.
    
    Uncheck the Stroke Effect, then click the Color Overlay Effect and set its color to 3BC0B2 (the circle there is number 0). See image.
    
    Then add also add Comment box using the Duplicate Layer and put it under the About Me box. Set their opacity to 5%.

12. 

    Now let's create a title text for the About Me and Comment Box. Create a new Layer (Ctrl + Shift + N) name it "About Me Title". Then select the Horizontal Type Tool then type the word "About Me" on the top of the About Me Box. Set the Font options to Monotype Corsiva, font size is 47pt, font color is white. Do the same way on the Comment Title above of the Comment Box.

13. 

    Then the final step for this part is adding the About Me Content. It depends on you of what content you like to add here. In my example I put my Name on the top, Age, Interest, Hobbies and About Me Sentence.
    
    In creating this content see the image I taken and follow the Layering I create here. The Name, Age, Interest, Hobbies and About Me sentence are in different Layers.

Tips & Warnings

• That's all for this part of my tutorial and I promise you that tomorrow or on the other day, the part 2 is already published here. I hope that I give you a very easy to understand tutorial and share a basic knowledge about Photoshop. In part two we will add links to the Navigation Bars and the Menus and add the Comments on our Comment Box. If you have questions or having difficulty following one of my step. Let me know. Just ask it here and I will be proud to answer you within 24 hours. That's all. If ever I already published my Part 2. I will inform you all by posting a shout out on my friendster Profile and by posting on bulletin board.
• Don't forget to comment for this article. Thank you.
• If you have any questions, you can message me at my friendster profile "friendster.com/gabby546" and please add me... my email is [e-mail] thanks if you ever create overlay using this tutorial. Please leave a credit by adding this tutorial link to your profile. Thanks again

[daritadipagi]

on 12/10/2008 can i use adobe photoshop cs3?? i dont know,its old versions or another versions of adobe photoshop...t.q