PROFILE DESIGN TUTORIAL KIT

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!
TABLE OF CONTENTS
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Express Profile Setup . . . . . . . . . . . . . . . . . . . . . . . 4
Build My Own Theme – Background . . . . . . . . . 5 - 6
Build My Own Theme – Colors . . . . . . . . . . . . . . 7 - 8
Build My Own Theme – Fonts . . . . . . . . . . . . . . . . . 9
Build My Own Theme – Styles . . . . . . . . . . . . . . . . 10
Build My Own Theme – Layout . . . . . . . . . . . . . . . 11
Create a Custom Marquee . . . . . . . . . . . . . . . . . . . 12
Create a Custom HTML . . . . . . . . . . . . . . . . . . . . . 13
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Move My Modules . . . . . . . . . . . . . . . . . . . . . . . . . . 15
FAQs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2
GETTING STARTED
Here are some helpful tips to help you get started creating your new profile.
1. Login to your
myspace account
2
1
3
2. Click Profile in
the dropdown menu
4
3. Select Customize Profile
4. Click Upgrade
SOME NOTES BEFORE YOU GET STARTED:
1
1.
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.
2. 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.
2
3. Even though your changes appear in real time,
your changes will not go live until you click Publish
to save changes.
3
4. 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
3
EXPRESS PROFILE SETUP
In a hurry? Build your profile in 3 easy steps!
1. Select Pick A Theme
in the profile designer
2. Choose from hundreds of
pre-designed themes.
Pick your favorite and
Select Theme
1
3. Click Publish
2
3
CHECK OUT THESE EXCITING NEW THEMES
4
BUILD MY OWN THEME
Begin creating your own unique and customized profile by selecting Build My Own Theme in the Profile Designer.
1. Select Background
2. Select Use a photo
1
4
5
3. Click Browse My Photos
2
4. Select Upload Photos tab
5. Click Browse button
Select Image from Browser
and Click Choose
3
*
6
6. Click Upload
* Stretch or Tile options
* Tiled
* Stretched
5
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.
1. Select Background
2. Select Type URL
1
3. Enter URL
4. Click Done
2
3
*
* Stretch or Tile options
4
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
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.
1. Click Edit
3
2. Click Color Square of the area
to be modified
2
1
A
3. Mix a New Color by
selecting one on the color wheel.
Or enter a color code, for example
C
D
B
E
• Black: #000000
• White: #FFFFFF
• Red: #FF0000
• Please reference slide 8
for color codes
E
C
B
B
D
A
7
BUILD MY OWN THEME
COLOR CODES
Our color tool gives you web safe
color codes to design like a pro.
1
1. Select Color from Color Chart
2. Enter Color Code
into the Color Mixer Tool
[see slide 7 for more info]
2
8
BUILD MY OWN THEME
CUSTOMIZE FONTS
1. Select Fonts
2. Select Font Size
1
2
3. Select Header Text font
3
4. Select Body Text font
4
5. Click Publish
5
9
BUILD MY OWN THEME
CHOOSE MODULE STYLES
1. Select Style
2. Select Module Border style
1
2
3. Select Module Header style
3
Module Border
Module Headers
10
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.
1. Select Change Layout
bar from Navigator
1
*
2. Select Layout style
* Add a Marquee option
see page 12 for more info
2
A
B
B
A
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 14 for more info]
B
11
CREATE A CUSTOM MARQUEE
Add a custom header for your profile (aka a Marquee) for an even more unique look.
1. Under Layout, select Add A Marquee
This adds the Marquee module to your profile
1
2. Double click on the Module on your Profile
to edit the Marquee
2
3. 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 250 px.
3
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>
4. Once you Publish, your marquee will appear in the space between
the MySpace Header and the start of your Profile
4
12
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.
1. Click Add HTML Box within Modules tab in the Profile Designer. This will add
an empty HTML module to your profile
2. Hover over your profile to show the HTML module. Click “Settings” on the
top of the HTML module
3. Insert your HTML code into this box
4. Click Save changes
1
3
INSERT CODE HERE
2
2
4
13
AVAILABLE MODULES
ADD OR EDIT MODULES
1. Select Modules bar
from Profile Designer
Status and Mood
A stream of just status updates.
1
Blog
2. Click Add to Add Module
Recent posts from your blog.
3
3. Click Remove to
Remove Module
Comments
Recent comments from you friends.
4. Adjust Features
Friends
2
Show off your friends.
Hover over Title Bar of Module
Feature Icons Will Appear
General Info
Settings
Edit Module
HTML Box
Delete Module
Create your own module with a custom title and HTML.
Music
4
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
14
MOVE MODULES
1. With the Profile Designer is open, hover over the
Module you want to move
2. Drag & Drop the module in new location
3. Save changes
1
2
3
15
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 250 px.
• HTML Box
• Right hand column, 300 px wide. Height is adjustable.
• Left hand column, 450 px wide. Height is adjustable.
For more information about the new Profile, visit http://faq.myspace.com, Browse by Category,
and select Your Profile.
16