How to Make A Friendster Overlay Profile Part 2

Part 2: Image Mapping and Slicing

Welcome to the second part of my tutorial! This time, I will teach you how to Image Map (making those images or texts linkable) and Image Slice (dividing images into parts) using Adobe Image Ready.

Difficulty: Easy

Instructions

Things You'll Need:

• - 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

1. 

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

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.

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.

4. 

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

5. 

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

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.

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.

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.

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
   http://www.friendster.com/logout.php

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/addfriendrequest.php?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.php?action=add&uid=USERID
    Add Bookmark
    http://www.friendster.com/bookmarks.php?action=add&uid=USERID
    Send a Smile
    http://www.friendster.com/sendmessage.php?uid=USERID&action=sendsmile
    Invite to Group
    http://www.friendster.com/group/inviteone.php?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

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.

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. You can also use this web host if you want. Hope that you enjoyed reading my second tutorial. If you have questions, you can leave a message / comments here or through my Friendster page. [e-mail]
    Comments and suggestions are welcome. =) Thank You!
    
    ---------------------------------------------------------------------
    If you want to use my tutorials, please contact me first thru my Friendster or Yahoo! Thank You!
    
    
    Technorati - axei9wms2h

Resources

• How To Make A Friendster Overlay Profile Part 1
• How To Make A Friendster Overlay Profile Part 3
• WinRAR
• My Friendster Profile Page

[raymund04]

on 6/28/2009 hi chrisfake1, please help me, i cant download the overlay codes,everytime i click the link, it said that the file was removed by the uploader, please send me the overlay codes.. [e-mail] .. . thank you very much

[marchyde078]

on 6/23/2009 for your questions, please send me an email or contact me on friendster. thank you

[jeybi0126]

on 5/25/2009 sir.my problem ako.evrytime n ioopen ko kse ung HTML tpos i page source ko.hnd xa npupunta sa notepad so hnd ko maedit.panu b ggwin ko?..tagalog e noh?.haha, hirs my e-add [e-mail]

[tsukoyumi]

on 5/19/2009 hi,.!!. well i've got a problem here, well it's the step no. 8 i don't have that in my image ready how's that???, please reply as soon as possible. well just reply in my e-mail [e-mail] tnx!!. i'll be waiting!!

[noj17]

on 4/14/2009 hi! i found your tuts very easy to follow for beginners like me...thanks!can you pls send me the password of the rar files?cant continue till the last step without it..here's my email:[e-mail] and more power!