PROFILE DESIGN TUTORIAL KIT

Transcription

1 PROFILE DESIGN TUTORIAL KIT NEW PROFILE With the help of feedback from our users and designers worldwide, we ve given our profiles a new look and feel. The new profile is designed to enhance yet simplify the experience for friends visiting your profile. We ve also introduced some new customization tools to help personalize your profile. NEW FEATURES INCLUDE: Cleaner, more simple look Dozens of new themes and a new Theme Gallery Create your own custom marquee header Easier navigation with all your stuff in one place Your profile design on your photos, videos, and other pages FLIP THIS PAGE TO GET STARTED!

2 TABLE OF CONTENTS Getting Started Express Profile Setup Build My Own Theme Background Build My Own Theme Colors Build My Own Theme Fonts Build My Own Theme Styles Build My Own Theme Layout Create a Custom Marquee Create a Custom HTML Modules Move My Modules FAQs

3 GETTING STARTED Here are some helpful tips to help you get started creating your new profile.. Login to your myspace account. Click Profile in the dropdown menu. Select Customize Profile. Click Upgrade SOME NOTES BEFORE YOU GET STARTED:. If you had custom CSS in your previous profile make sure to copy and save all the code into a text document for reference. This will come in handy when creating your HTML boxes and Marquee.. The Editor will stay open and the changes you make to your profile will appear in real time. You can click the Bar Icon in the upper right hand corner to minimize the editor.. Even though your changes appear in real time, your changes will not go live until you click Publish to save changes.. If at any time you d like to go back, click the Reset button to start from scratch or go back to your old profile.

4 EXPRESS PROFILE SETUP In a hurry? Build your profile in easy steps!. Select Pick A Theme in the profile designer. Choose from hundreds of pre-designed themes. Pick your favorite and Select Theme. Click Publish CHECK OUT THESE EXCITING NEW THEMES

5 BUILD MY OWN THEME Begin creating your own unique and customized profile by selecting Build My Own Theme in the Profile Designer.. Select Background. Select Use a photo. Click Browse My Photos 5. Select Upload Photos tab * 5. Click Browse button Select Image from Browser and Click Choose 6 6. Click Upload * Stretch or Tile options * Tiled * Stretched 5

6 BUILD MY OWN THEME ADD A BACKGROUND IMAGE VIA URL In addition to uploading your own photo, you can also upload a photo found on the web using a URL. Begin creating your customized profile by selecting Build My Own Theme in the profile designer.. Select Background. Select Type URL. Enter URL. Click Done * Stretch or Tile options Scroll Background with Page feature allows the background to stay in place as the viewer scrolls down the page * Background Position: To experiment with different background positions, click this button and it changes in real time. * Tiled * Stretched 6

7 BUILD MY OWN THEME CUSTOMIZE COLOR PALETTES We ve already created some color palettes you might like. You can select one of ours, or create your own.. Click Edit. Click Color Square of the area to be modified. Mix a New Color by selecting one on the color wheel. Or enter a color code, for example A E B C D Black: # White: #FFFFFF Red: #FF0000 Please reference slide 8 for color codes E C B B D A 7

8 BUILD MY OWN THEME COLOR CODES Our color tool gives you web safe color codes to design like a pro.. Select Color from Color Chart. Enter Color Code into the Color Mixer Tool [see slide 7 for more info] 8

9 BUILD MY OWN THEME CUSTOMIZE FONTS. Select Fonts. Select Font Size. Select Header Text font. Select Body Text font 5. Click Publish 5 9

10 BUILD MY OWN THEME CHOOSE MODULE STYLES. Select Style. Select Module Border style. Select Module Header style Module Border Module Headers 0

11 BUILD MY OWN THEME CHOOSE LAYOUT You can choose between a two column layout or a two column layout with a module at the bottom.. Select Change Layout bar from Navigator. Select Layout style * Add a Marquee option see page for more info * A B B Layout B allows you to format a module that will run across the bottom of your profile. In order to do this, you will need to drag and drop the selected module in place. [see slide for more info] A B

12 CREATE A CUSTOM MARQUEE Add a custom header for your profile (aka a Marquee) for an even more unique look.. Under Layout, select Add A Marquee This adds the Marquee module to your profile. Double click on the Module on your Profile to edit the Marquee. Insert your HTML code into this box. Place HTML ONLY in this box - no other items will work. Note: maximum spec size for this module is 960 x 50 px. INSERT CODE HERE Sample Code: Here is an example of code you can use for an image that is hyperlinked to appear in your header. <a href= INSERT HYPERLINK HERE ><img src= INSERT IMAGE URL HERE ></a>. Once you Publish, your marquee will appear in the space between the MySpace Header and the start of your Profile

13 CREATE A CUSTOM HTML BOX In addition to the Marquee, you can create your own modules for your profile with a custom title and HTML.. Click Add HTML Box within Modules tab in the Profile Designer. This will add an empty HTML module to your profile. Hover over your profile to show the HTML module. Click Settings on the top of the HTML module. Insert your HTML code into this box. Click Save changes INSERT CODE HERE

14 ADD OR EDIT MODULES AVAILABLE MODULES. Select Modules bar from Profile Designer. Click Add to Add Module. Click Remove to Remove Module Status and Mood A stream of just status updates. Blog Recent posts from your blog. Comments Recent comments from you friends.. Adjust Features Hover over Title Bar of Module Feature Icons Will Appear Settings Edit Module Delete Module Friends Show off your friends. General Info HTML Box Create your own module with a custom title and HTML. Music Music Player Photos Post Comment Shows & Events Stream Video Player Feature a video right on your profile. Video Slider Show thumbnails of all your videos. Videos

15 MOVE MODULES. With the Profile Designer is open, hover over the Module you want to move. Drag & Drop the module in new location. Save changes 5

16 FAQs What happened to all of my CSS elements? Based on user feedback we ve received, we ve removed CSS from the new profiles, and instead offer you better customization tools to personalize your profile. What are the ideal spec sizes to use in the new profile? Marquee The maximum spec size is 960 x 50 px. HTML Box Right hand column, 00 px wide. Height is adjustable. Left hand column, 50 px wide. Height is adjustable. For more information about the new Profile, visit Browse by Category, and select Your Profile. 6