How To’s
- 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 ONE:
• Run your Adobe Image Ready and open your saved image file (File > Open or Ctrl + O on your keyboard).
STEP TWO:
• 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 THREE:
• 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 FOUR:
• Repeat step 3 for the next 2 slices. But this time, start at the end of your first slice.
STEP FIVE:
• Here’s the last slice. Now you will have 3 separate images when you save your work later.
STEP SIX:
• 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 SEVEN:
• 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 EIGHT:
•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 NINE:
• 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
STEP TEN:
• 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
STEP ELEVEN:
• 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 TWELVE:
• 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.
If you know HTML and you re familiar with CSS code, it would be great and easier for you to understand this tutorial. But if you dont, don’t worry. Google works 24 hours. Learn by yourself. aryt?
• Let’s get started. *wink*
Now go to MY PROFILE. Then click EDIT PROFILE. Select CUSTOMIZE. Now click the CUSTOMIZE WITH CSS EDITOR that would lead you to Michael’s Friendster Editor.
—HERE YOU CAN CHOOSE IF YOU WANT A PLAIN COLOR FOR YOUR BACKGROUND OR WITH YOUR OWN CHOICE LIKE PICTURE OF ANIME, ABSTRACT, CELEBRITIES AND ETC.
QUESTION: HOW CAN I GET MY OWN PICTURE?
ANSWER: YOU CAN SEARCH IT ON INTERNET. JUST TYPE THE NAMES OF YOUR FAVORITES ON THE BROWSER AND CLICK ENTER. RIGHT CLICK THE IMAGE AND CLICK SAVE PICTURES AS AND MAKE A FOLDER IN YOUR MY DOCUMENTS FRIENDSTER IMAGE FOR YOU TO SAVE THERE AND FIND EASIER WHERE YOU STORE THE PICTURE.
QUESTION: HOW CAN I GET A URL?
ANSWER: THERE ARE MANY FREE PHOTO UPLOADER ONLINE. LIKE PHOTOTOBUCKET, FLICKR, AND ETC. WHAT YOU HAVE TO DO IS TO SIGN UP. THEN, YOU CAN UPLOAD YOUR PHOTOS AND GLITTER-GRAPHICS/TEXTS. ONCE YOU UPLOADED YOUR PICTURES THERE, YOU WILL SEE THE “DIRECT LINK” AND “HTML TAG”. DIRECT LINK STARTS WITH “HTTP://” THAT’S THE ONE YOU NEED TO PUT IN YOUR PROFILE EDITOR, WHILE HTML TAG IS THE ONE THAT YOU CAN USE TO PUT IN YOUR BLOGS AND COMMENTS.
—THIS MEANS IF YOU CHOOSE A FONT STYLE AND COLOR, THAT WOULD BE THE ENTIRE COLOR AND FONT STYLE OF YOUR PROFILE. ALL YOU HAVE TO DO IS TO CHOOSE, IT DEPENDS ON YOU WHAT STYLE AND COLOR OF FONT DO YOU WANT.
—THIS MEANS THE COLOR AND THE FONT OF YOUR LINKS ARE ONE. THE SAME AS GLOBAL TEXT. LINKS ARE CLICKABLE.
—THIS MEANS THE COLOR OF A LINK WILL CHANGE IF YOU PUT YOUR CURSOR ON A LINK. EXAMPLE YOUR LINK COLOR IS RED, THEN IF YOU PUT YOUR CURSOR ON THAT LINK THE COLOR WILL CHANGE TO A YELLOW. IT’S STILL DEPENDS ON WHAT YOU WANT.
—HERE YOU CAN CHANGE ALL THE CONTENT BOXES & BOX HEADERS AT THE SAME TIME - WHATEVER STYLES YOU CHOOSE BELOW WILL BE APPLIED TO EVERY SINGLE MODULE BOX ON YOUR FRIENDSTER PROFILE. IF YOU WISH TO CHANGE THE BOXES INDIVIDUALLY, USE THE FORM FIELDS IN THE SECTION NAMED “INDIVIDUAL BOXES”.
IF YOU WANT ALL YOUR BOXES TO BE TRANSPARENT, JUST CHECK THE BOX BESIDE THE MAKE ALL BOXES TRANSPARENT. IT’S EASY TO UNDERSTAND THIS GENERATOR, BECAUSE YOU WILL JUST CLICK THE BUTTONS AND CHOOSE THE FONT STYLE, BACKGROUND COLORS, BORDER COLORS, BORDER SIZE, BORDER STYLE, AND TEXT TRANSFORM. EVERYTHING IS IN YOUR HANDS.
—THIS IS THE MAIN BOX AT THE TOP OF YOUR PROFILE - THE ONE WITH THE LARGE PHOTO OF YOU, YOUR DATA (PROFILE VIEWS, LOCATION, HOMETOWN, COMPANY, YOUR URL, ETC) AND THE CONTROL PANEL BUTTONS (SEND MESSAGE, SEND A SMILE, ADD TESTIMONIAL, ETC.)
—IF YOU SELECT ‘USE CUSTOM VALUES’ IN THE ABOVE DROPDOWN, YOU CAN CHANGE THE LOOK OF ALL THE INDIVIDUAL CONTENT BOXES - LIKE THE PHOTO GALLERY, MORE ABOUT ME, MY BLOGS, MY TESTIMONIALS, ETC. THESE STYLES WILL THEN OVERRIDE THE STYLES YOU HAVE SET FOR THE “MASTER BOXES & HEADERS” ABOVE.
— IN THE MISC-SECTION YOU’LL FIND THE STYLES FOR THE SMALL PHOTO THUMBNAILS (IN ‘MY FRIENDS’ AND ‘MY TESTIMONIALS’), THE NAMES BELOW THE SMALL PHOTO THUMBNAILS AND ALSO FOR THE GLOBAL ‘VIEW ALL’-LINKS. SWITCH THE DROPDOWN ABOVE TO CHANGE THESE STYLES.
—HERE YOU CAN GENERATE THE CODE BY CLICKING THE BUTTON GENERATE FRIENDSTER CODE, THEN THE CODES WILL APPEAR IN THE BOX AND THAT IS YOUR CSS CODE. BEFORE YOU COPY IT AND PASTE IT TO YOUR CSS BOX IN YOUR FRIENDSTER PROFILE, ALL YOU HAVE TO DO IS PREVIEW FIRST TO SEE IF YOU LIKE THE OUTPUT OF YOUR WORK. THROUGH THAT, YOU CAN STILL CHANGE IT IN ANYTHING YOU WANT IT TO BE.
PRESTO! You now have your own customized layout.
