How to Create Friendster Overlay Profile Part 2

How to Create Friendster Overlay Profile Part 2

Difficulty: Easy

Instructions

Things You'll Need:

• Things you need:
• Adobe Photoshop Image Ready
• Images -You can use the images i provide on part 1. Just download this file it includes the step by step images i created so I hope you can follow my steps easily. http://rapidshare.com/files/

1. 

   Run your Adobe Image Ready and Open your overlay document. If you don't know what is Image Ready is, first open your document in Adobe Photoshop and then on the lower part of the toolbox (see image), click on the "Jump to Image Ready" button. You can also press Ctrl + Shift + M.

2. 

   We will now put links on our menus and navigation links.
   
   First, click the Zoom Tool so that you'll be able to see clearly the navigational links and menus. Then Select the Rectangular Image Map Tool and select the Menus starting from Home up to the Add Comment text. Then after you map those text links, assign a url for that link. Here is a list of URL you can use for the navigation links and menus:
   
   Menu Links
   
   Home
   http://www.friendster.com/home.php
   My Profile
   http://www.friendster.com/user.php
   My Friends
   http://www.friendster.com/friends.php
   Blogs
   http://www.friendster.com/blogs.php
   Groups
   http://www.friendster.com/group/mygroup.php
   Messages
   http://www.friendster.com/messages.php
   Log Out
   http://www.friendster.com/logout.php
   
   Navigation Links
   
   (for the My Photos, Send Me Message, Add as Friend and Add Comment)
   Add As Friend
   http://www.friendster.com/addfriendrequest.php?uid=YOURID
   Send Message
   http://www.friendster.com/sendmessage.php?uid=YOURID
   Add Testimonial
   http://www.friendster.com/testimonials.php?action=add&uid=YOURID
   Add Bookmark
   http://www.friendster.com/bookmarks.php?action=add&uid=YOURID
   Send a Smile
   http://www.friendster.com/sendmessage.php?uid=YOURID&action=sendsmile
   Invite to Group
   http://www.friendster.com/group/inviteone.php?uid=YOURID
   Add Comment
   http://www.friendster.com/publiccomments.php?uid=YOURID
   View All Comments
   http://www.friendster.com/publiccomments.php?uid=YOURID
   View All Testimonials
   http://www.friendster.com/testimonials.php?uid=YOURID
   View All Friends
   http://www.friendster.com/friends/YOURID
   View All Photos
   http://www.friendster.com/photos/YOURID
   
   I almost forgot. Also create Image Map for the Picture Box and use the http://www.friendster.com/photos/YOURID url for this.
   
   *Change the YOURID word in the given url with your own ID. To get your friendster ID, simply put your mouse over your primary photo and on the lower right of your screen you will see the url and your user id links. See image.

3. 

   Now, we will start slicing the document using the Slice Tool. Select the Slice Tool from the Toolbox then start slicing your whole document into three parts. Be sure to Zoom Out your document so that you can see the whole part of the document before slicing. Refer on the image

4. 

   Now its time to save your work and test our overlay document. Save your Document by clicking on File > Save Optimized As... Then your document will now be save as HTML document. You can open it by double clicking the HTML file on the folder where you save your work. See the image.

Tips & Warnings

• Now we are almost done for our overlay document.For the last part, I will teach you how to place all your friendster comments on your comment box using the friendster script module and be sure that you already downloaded the Dreamweaver application because this is where we edit our HTML codes for our overlay. If you have questions, just message me or comment here and I will answer it within 24 hours. I hope you enjoy this tutorial I created. Just wait for the final part.

[redfoxhound]

on 10/20/2008 DUDE! where is the code? where is the part 3? can you just do it in Dreamweaver cs3????