How to Make A Friendster Overlay Profile Part 1

This tutorial will teach you how to create your own overlayed profile for your Friendster using Photoshop and Image Ready. This method lets you choose your own designs, from fonts to images, colors, etc. Even if you’re an absolute newbie, I’ll try my very best to let you understand these things the easiest way as possible. By the way, this tutorial is divided into 3 parts, Designing, Image Mapping and Slicing, and HTML coding. Its long but it has all the things you need to know and I assure you that after this, you’ll be making your own layout easily. Keep checking this tutorial often as I would update the contents and link for the next 2 parts. Comments and suggestions are highly appreciated! Thanks and have fun while you learn!

Part 1: Designing - In this first part of my tutorial, I will teach you how to design a basic layout. I’m not forcing you to follow exactly what I did in the screenshots, like the placement of images, boxes, fonts, sizes, and colors. Just get the idea and after that, create your own design.

Difficulty: Easy

Instructions

Things You'll Need:

• Adobe Photoshop 7.0 or higher (I used 7.0 for this tutorial)
• Adobe Image Ready
• Macromedia Dreamweaver 8
• Overlay Generator
• Free Web Host
• Your Brain and Patience

1. 
    

   Create a new photoshop image by going to FILE > NEW or by pressing Ctrl+N on your keyboard. For this tutorial, use this setting:
   
   Width: 900 pixels
   Height: 1500 pixels
   Resolution: 72 pixels/inch
   Mode: RGB Color
   Contents: White

2. 
    

   Open your image or wallpaper that you want to use as a header for your layout. We’ll be using this Beck wallpaper as an example.

3. 
    

   Select the Paint Bucket Tool in the Tools Panel.

4. 
    

   Fill the layer with black.

5. 
    

   Now go to your wallpaper window and press Ctrl+A on your keyboard then drag it to your filled layer by using the Move Tool.

6. 
    

   You can adjust the size and position if you want but its better if you keep it on top because it’s our image header just like this.

7. 
    

   Now type the useful links for our navigation bar. For this tutorial, we’ll just use Home, Profile, Messages, and Logout. Select the Horizontal Type Tool on the Tools Panel and set your preferred font, size, and color.

8. 
    

   This is my font settings, don’t follow this exactly, you can choose your own.
   
   Font Family: Arial
   Font Style: Regular
   Font Size: 30 pt
   Font Color: White

9. 
    

   Then make sure that Layer 1 (wallpaper) is selected on the Layers Panel located at the lower right corner of the photoshop window and start typing the links.

10. 
     

    Here’s my outcome. Remember that you can always place the texts anywhere by using the Move Tool while the layer is selected.

11. 
     

    Now let’s type the other links for our sub-menu. Again, we’ll just type the most useful links.
    Ex. Send a message, add as a friend, add comment, view my friends, and view my photos. To start, select the Background layer in Layers Panel, and start typing those links anywhere you want. Here’s what I’ve done.

12. 
     

    We will now create boxes where we can place the contents of About Me, Comments, Media Box, Friends and Chat Box (optional).
    
    First, click the Background layer in the Layers Panel and select the Rectangle Tool. I’m sure you already know how to select layers right? =)

13. 
     

    Then click and hold the left mouse button as you determine the size of your box. Here’s my outcome.

14. 
     

    I’ll teach you how to use the Blending Options so that we can give our box a different look.
    
    Right click the Shape 1 Layer and choose Blending Options.

15. 
     

    Then you’ll see this menu. Here you can adjust various options for our box. Set the Opacity to 30% and Fill Opacity to 50%.

16. 
     

    Then let’s use the Outer Glow option and follow this settings.

17. 
     

    You should get this.

18. 
     

    We will use this box for our About Me contents so use the Horizontal Type Tool and type About Me then place it anywhere within the box. I placed mine here.

19. 
     

    We are almost done for the designing part! We just need a few more boxes for our Friends, Comments, Media Box and Chat Box (optional). Now, let’s create our Chat Box, since so many profiles have their own chat box, I decided to have it in this tutorial. Now I’ll teach you how to duplicate layers so that you don’t need to do all the things we’ve done from Step 12 to 17.
    
    Right click the Shape 1 Layer in the Layers Panel and select Duplicate Layer and press OK.

20. 
     

    Select the Move Tool in the Tools Panel and move the new layer anywhere and resize it the way you want. And again, type the name for this box. Here’s mine.

21. 
     

    As for the other boxes, just follow the duplication method we used. And Here’s my final outcome!Now we’re done! For now, save your work in PSD format and wait until I finish the next part of my tutorial. ^__^ As I always say, you can do your own designs, so try to experiment using these steps. =) This is just an example of a simple layout, so don’t complain if its not that attractive. ^_^; Important is you already know how to use some Photoshop elements and how to make an overlay profile from scratch.
    
    In the next part, I’ll teach you how to slice images and make those texts linkable using Adobe Image Ready. Hope all of you enjoyed reading it and please give credit for my hard work. =)If you have questions, you can leave a message / comments here or through my Friendster or my email = [e-mail]
    Comments and suggestions are welcome. =) Thank You and Good Luck!
    
    ---------------------------------------------------------------------
    If you want to use my tutorials, please contact me first thru my Friendster or Yahoo! Thank You!