How to Create a MySpace Overlay in Photoshop
MySpace Div Overlays are dynamic, HTML coded, layout designs that are used to cover the existing default layout template for customizations. Photoshop is used to develop and design the actual overlay, which includes a customized background, HTML-coded color scheme, text boxes, navigation menus, buttons, and photos. Assuming you know the design basics of Photoshop, creating an overlay can take anywhere from 45 minutes to several hours or days, depending on your proficiency with Photoshop functions.
Other People Are Reading
Instructions
-
Set the Overlay Measurements
-
1
Open Adobe Photoshop by double-clicking its icon or going to its direct file folder location.
-
2
Click the "File" tab or press and hold the CTRL+N keys on the computer's keyboard until the document setup dialog window opens.
-
-
3
Set up the new document templates for the Myspace Div Overlay. Change the Width data form box to 1000 pixels, and change the Height box to 3000 pixels.
-
4
Click "OK" to open the new blank template. When the blank template opens, it should be at 16.67 percent, and it should look like a bookmark.
Creating the Overlay
-
5
Click the black or white color tab at the bottom of the tool bar to choose a foreground color for the overlay that will match the design color scheme you want.
-
6
Move the narrow lever up on the right side of the color table to view more colors. Click the colors on the table to make a selection to navigate through the color table. Stop on the color you want to use, and click "OK" to make a selection.
-
7
Click the paint bucket icon in the same toolbar on the left side of the screen. Then, click on the canvas, and the HTML color should appear on the canvas.
-
8
Click the "Image" tab at the top of Photoshop, and select the "Canvas Size..." Click on the drop down bar next to the Width, and change the measurement option from Inches to Pixels. The height should also change with this action.
-
9
Type "1800" in the Width box, and click "OK." The template should now display to blank sides on the outside of the colored region. Now, you have the content area, and the background regions for the Myspace Overlay.
-
10
Press SHIFT+CTRL+N, and click "OK" in the New Layer pop-up window. In the layer tab on the left side of the screen, highlight Layer 2 and drag it below layer one. This places the background behind the foreground to create the Overlay effect.
-
11
Use the Paint Bucket tool and resources to choose a different color for the background, or click "Open" and load a picture from your hard drive to design the background of the layout.
-
1
Tips & Warnings
Whenever you add a design element, always make it a layer, so if you make any mistakes or you decide to change something later, you'll have the ability to do so. If you create everything in 1 or 2 layers, you can't change or erase much without removing other design elements.
It is highly recommended that you keep the foreground color neutral. You must keep in mind that the middle section is where all of the content will go, and you'll want it to be seen. Stay away from bright, wild, or dim colors, because it takes the attention away from the content.
For more Myspace Overlay customizations, tutorials, and tweaks, visit the Graham Phisher Photoshop tutorial site for further assistance.
Do not make the width of the document less than 900 pixels, because the Overlay will not cover the entire default template.
Do not alter any of the default Resolution and Color Mode settings when creating the blank template in Photoshop. These particular changes will make the file size much larger than it needs to be.
These instructions explain how to create the Overlay, but not the design itself or its coding. Instructions for the actual design cannot be provided, as this is based on your own creativity. For further assistance on design and Photoshop design basics, see the resources below.
