- Adobe Photoshop 7.0 or higher (I used 7.0 for this tutorial) - [b]Adobe Image Ready[/b] - [b]Macromedia Dream Weaver 8 - Overlay Generator - Web Host - Your Brain and Patience [/b] [b]step 1[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/1_Thumb.jpg[/img] Run your Adobe Image Ready and open your saved image file [b](File > Open or Ctrl + O on your keyboard).[/b] [b]step 2[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/2_Thumb.jpg[/img] 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 [b]Slice Tool [/b]on the [b]Tools Panel[/b]. [b]step 3[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/3_Thumb.jpg[/img] 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. [b]step 4[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/4_Thumb.jpg[/img] Repeat step 3 for the next 2 slices. But this time, start at the end of your first slice. [b]step 5[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/5_Thumb.jpg[/img] Here’s the last slice. Now you will have 3 separate images when you save your work later. [b]step 6[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/6_Thumb.jpg[/img] We’re done with the slicing, let’s now proceed to the [b]Image Mapping[/b]. Select the R[b]ectangular Image Map Tool[/b] in the [b]Tools Panel[/b]. [b]step 7[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/7_Thumb.jpg[/img] Without wasting time, go to our[b] Navigation Bar [/b]texts and start selecting the area that we are going to image map. I started mapping the Home text. [b]step 8[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/8_Thumb.jpg[/img] After mapping a text or image, you’ll notice that this panel [b](located on the lower left part of the Image Ready window)[/b] 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 [b]URL[/b], this text will now be clicked when viewing on the web. Here’s what I’ve done. [b]step 9[/b] 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. [b]Home[/b] http://www.friendster.com/home.php [b]My Profile[/b] http://www.friendster.com/user.php [b]My Friends[/b] http://www.friendster.com/friends.php [b]Explore[/b] http://www.friendster.com/explore.php [b]Search[/b] http://www.friendster.com/gallery.php [b]Video[/b] http://www.friendster.com/video.php [b]Review[/b] http://www.friendster.com/reviews/ [b]Blogs[/b] http://www.friendster.com/blogs.php [b]Groups[/b] http://www.friendster.com/group/mygroup.php [b]Invite[/b] http://www.friendster.com/invite.php [b]What's New[/b] http://www.friendster.com/splash.html [b]Messages[/b] http://www.friendster.com/messages.php [b]Settings[/b] http://www.friendster.com/editaccount.php [b]Help[/b] http://www.friendster.com/custhelp.php [b]Log Out[/b] [b]step 10[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/9_Thumb.jpg[/img] After you’re done mapping your whole [b]Navigation Bar[/b] 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 [b]Friendster USER ID or ID NUMBER.[/b] Where do we get this you ask? In your Friendster’s Home page, just hover the mouse cursor on your primary photo and your [b]USER ID[/b] will be displayed on the status bar. See the image. Just change the [b]USERID [/b]in the given URLs with yours and just typed it on the [b]URL [/b]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 [b]step 11[/b] [img]http://i208.photobucket.com/albums/bb69/gerlyn_02/11_Thumb.jpg[/img] When you’re done mapping your Sub-Menu texts, it’s time to save our work! To do this, [b]click File > Save Optimized As.[/b] I suggest to make a new folder and save it there. Because this time, you’ll get an [u]HTML[/u] file and a folder containing your sliced images so its better if you save it all in one folder. [b]step 12[/b] 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. [b]credits: http://www.ehow.com/how_2261401_friendster-overlay-profile-part.html[/b]

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