16
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! PROFILE DESIGN TUTORIAL KIT

PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

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!

PROFILE DESIGN TUTORIAL KIT

Page 2: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

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

Page 3: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

GETTING STARTED

Here are some helpful tips to help you get started creating your new profile.

1. Login to yourmyspace account

2. Click Profile inthe dropdown menu

3. Select Customize Profile

4. Click Upgrade

SOME NOTES BEFORE YOU GET STARTED:

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.

3. Even though your changes appear in real time,

your changes will not go live until you click Publish

to save changes.

4. If at any time you’d like to go back,

click the Reset button to start from scratchor go back to your old profile.

12

3

4

1

23

4

3

Page 4: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

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

3. Click Publish

1

2

3

CHECK OUT THESE EXCITING NEW THEMES

4

Page 5: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

BUILD MY OWN THEME

1. Select Background

2. Select Use a photo

3. Click Browse My Photos

4. Select Upload Photos tab

5. Click Browse button

Select Image from Browserand Click Choose

6. Click Upload

* Stretch or Tile options

Begin creating your own unique and customized profile by selecting Build My Own Theme in the Profile Designer.

1

2

3

4

5

6

* Tiled * Stretched

5

*

Page 6: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

BUILD MY OWN THEMEADD A BACKGROUND IMAGE VIA URL

1. Select Background

2. Select Type URL

3. Enter URL

4. Click Done

* Stretch or Tile options

Scroll Background with Page

feature allows the backgroundto 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.

In addition to uploading your own photo, you can also upload a photo found on the web using a URL.

* Tiled

Begin creating your customized profile by selecting “Build My Own Theme” in the profile designer.

1

2

3

4

*

* Stretched

6

Page 7: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

BUILD MY OWN THEMECUSTOMIZE 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

2. Click Color Square of the area

to be modified

3. Mix a New Color by

selecting one on the color wheel. Or enter a color code, for example

• Black: #000000

• White: #FFFFFF

• Red: #FF0000

• Please reference slide 8

for color codes

1

2

3

A

B

C

D

E

A

B

C D

E

7

B

Page 8: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

1. Select Color from Color Chart

2. Enter Color Code

into the Color Mixer Tool[see slide 7 for more info]

2

BUILD MY OWN THEME

COLOR CODES

Our color tool gives you web safe color codes to design like a pro.

1

8

Page 9: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

BUILD MY OWN THEME

CUSTOMIZE FONTS

1. Select Fonts

2. Select Font Size

3. Select Header Text font

4. Select Body Text font

5. Click Publish

12

3

4

5

9

Page 10: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

BUILD MY OWN THEME

CHOOSE MODULE STYLES

1. Select Style

2. Select Module Border style

3. Select Module Header style

1

2

3

10

Module Border

Module Headers

Page 11: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

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 Layoutbar from Navigator

2. Select Layout style

* Add a Marquee option

see page 12 for more info

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]

A B

B

1

2

A B

11

*

Page 12: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

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 MarqueeThis adds the Marquee module to your profile

2. Double click on the Module on your Profileto edit the Marquee

3. Insert your HTML code into this box. Place HTML ONLYin this box - no other items will work.

Note: maximum spec size for this module is 960 x 250 px.

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

1

2

3

INSERT CODE HERE

4

12

Page 13: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

CREATE A CUSTOM HTML BOX

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

In addition to the Marquee, you can create your own modules for your profile with a custom title and HTML.

2

3

INSERT CODE HERE

1

13

2

4

Page 14: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

ADD OR EDIT MODULES

1. Select Modules barfrom Profile Designer

2. Click Add to Add Module

3. Click Remove to

Remove Module

4. Adjust Features

Hover over Title Bar of Module

Feature Icons Will Appear

Settings

Edit Module

Delete Module

AVAILABLE MODULES

1

2

3

4

Status and MoodA stream of just status updates.

BlogRecent posts from your blog.

CommentsRecent comments from you friends.

FriendsShow off your friends.

General Info

HTML BoxCreate your own module with a custom title and HTML.

Music

Music Player

Photos

Post Comment

Shows & Events

Stream

Video PlayerFeature a video right on your profile.

Video SliderShow thumbnails of all your videos.

Videos

14

Page 15: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

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

Page 16: PROFILE DESIGN TUTORIAL KIT - creative.myspacecdn.comcreative.myspacecdn.com/design/myspace/guide/images/profiledesign... · NEW PROFILE With the help of feedback from our users and

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