friendsterTalk - Friendster Forum

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

step 1 Run your Adobe Image Ready and open your saved image file (File > Open or Ctrl + O on your keyboard).

step 2 First, we’ll start slicing our image into three parts so that it will load faster when we view it on the web. Select the Slice Tool on the Tools Panel.

step 3   Now, start slicing the first part which includes the image header and the navigation bar by dragging over the area where you want to create your slice.

step 4 Repeat step 3 for the next 2 slices. But this time, start at the end of your first slice.

step 5 Here’s the last slice. Now you will have 3 separate images when you save your work later.

step 6 We’re done with the slicing, let’s now proceed to the Image Mapping. Select the Rectangular Image Map Tool in the Tools Panel.

step 7 Without wasting time, go to our Navigation Bar texts and start selecting the area that we are going to image map. I started mapping the Home text.

step 8 After mapping a text or image, you’ll notice that this panel (located on the lower left part of the Image Ready window) will be ready for editing. You can now type a Name and the URL for the mapped text or image. After you have typed a URL, this text will now be clicked when viewing on the web. Here’s what I’ve done.

step 9 Same procedure for the other texts but you must type a different URL or address for each text you’re linking. Here’s the list of URL you can use on your Navigation Bar. For example, our next text to be mapped is Profile, type Profile for Name and use the My Profile address which is http://www.friendster.com/user.php for the URL.

Home
http://www.friendster.com/home.php
My Profile
http://www.friendster.com/user.php
My Friends
http://www.friendster.com/friends.php
Explore
http://www.friendster.com/explore.php
Search
http://www.friendster.com/gallery.php
Video
http://www.friendster.com/video.php
Review
http://www.friendster.com/reviews/
Blogs
http://www.friendster.com/blogs.php
Groups
http://www.friendster.com/group/mygroup.php
Invite
http://www.friendster.com/invite.php
What's New
http://www.friendster.com/splash.html
Messages
http://www.friendster.com/messages.php
Settings
http://www.friendster.com/editaccount.php
Help
http://www.friendster.com/custhelp.php
Log Out

step 10   After you’re done mapping your whole Navigation Bar texts, we’ll now proceed on mapping our Sub-Menu texts so we can also make them linkable. But it’s a bit different when it comes to the URL for this menu. We need to get your Friendster USER ID or ID NUMBER. Where do we get this you ask? In your Friendster’s Home page, just hover the mouse cursor on your primary photo and your USER ID will be displayed on the status bar. See the image. Just change the USERID in the given URLs with yours and just typed it on the URL field for your image map and you’re done.
Add As Friend
http://www.friendster.com/addfriendrequ…uid=USERID
Send Message
http://www.friendster.com/sendmessage.php?uid=USERID
Forward to Friend
http://www.friendster.com/referafriend.php?refer=USERID
Add Testimonial
http://www.friendster.com/testimonials.…uid=USERID
Add Bookmark
http://www.friendster.com/bookmarks.php…uid=USERID
Send a Smile
http://www.friendster.com/sendmessage.p…=sendsmile
Invite to Group
http://www.friendster.com/group/inviteo…uid=USERID
Add Comment
http://www.friendster.com/publiccomments.php?uid=USERID
View All Comments
http://www.friendster.com/publiccomments.php?uid=USERID
View All Testimonials
http://www.friendster.com/testimonials.php?uid=USERID
View All Friends
http://www.friendster.com/friends/USERID
View All Photos
http://www.friendster.com/photos/USERID

step 11 When you’re done mapping your Sub-Menu texts, it’s time to save our work! To do this, click File > Save Optimized As. I suggest to make a new folder and save it there. Because this time, you’ll get an HTML file and a folder containing your sliced images so its better if you save it all in one folder.

step 12 To view and test your work, go to your folder and open the HTML file. You can now see that the texts in our menus are now clickable. It means that you are now ready for the next part!

For the last part of my tutorial, we will now view our layout on Friendster! I’ll teach you how to make our empty boxes show your comments and testimonials, about me, chat box, your photos and your friends using Macromedia Dream Weaver. I’ll also teach you how to use Marky Trigger’s Overlay Generator. For now, look for a free web host that has an online HTML editing and sign up for an account. I use freewebtown.com for my layout files.


credits: http://www.ehow.com/how_2261401_friends…-part.html

Last edited by gerlyn_wangzi (2008-07-04 21:29:41)