Today I thought I would share a quick tutorial on how you can make a hand drawn myspace header image and then show you a way that you can quickly add that header image to the top of your myspace. (If you are only looking for the code that adds an image header to your myspace page, see step 10 at the bottom).
To see the Header in action go check out Myspace.com/MatthewMcAvene
Making a Myspace Header:
First things first, the standard width for a myspace site is 800 pixels. Your header can be larger or smaller, but it’s good to know the standard. McAvene’s Myspace holds some images and video that cause his page to be wider than 800 in the middle. For sake of simplicity, this has been left as is. There may be another blog about reasons for keeping a standard width throughout the page and things one can do with the background when their myspace content is uniformly 800 pixels wide.
STEP 1: SKETCH YOUR DESIGN
Draw and draw and draw. Even when you have a cool idea, draw other ideas. The difference between a good design and and great design is the amount of thought and preparation that goes in to the piece. I sketch out thumbnails first to get a layout, then I move to sketch individual parts, then I make one sketch of all the parts together.
STEP 2: SCAN YOUR IMAGE HIGH RES
Take your final drawing and scan it at around 300 dpi. If you’ve drawn the image to size, you will only truly need it to be 72 dpi, but your image will be smoother and cleaner if you scan it at a high resolution and then lower the resolution on your computer.
STEP 3: CREATE A NEW PHOTOSHOP DOCUMENT at 72 DPI THAT IS AS WIDE AND TALL AS YOU WANT YOUR HEADER TO BE.
Take your scanned image and drag it over to this new document and resize as necessary.
STEP 4: GETTING JUST THE LINEWORK FROM YOUR SCAN
We want to add layers of color and texture under our hand-drawn artwork, so we need to get rid of that white paper background. This is really simple. In the Menu Bar, go to Image>Adjustment>Levels or simply hit (Command) L.
A levels window will open like the one below. Under the bar graph (technically called a histogram), there are three little tabs, black grey and white. These three tabs basically control the amount of black grey and white in your image. If you take the white tab and slide it left, there will be more white. If you slide the black tab right, there will be more black. If you slide the grey tab toward the black, the blacks in the image will begin going grey. If you slide the grey towards white the whites go grey. (This is an oversimplification but it is enough to get you started).
Take your scanned drawing and adjust the white black and grey levels so that you have a black and white image with strongly definied linework that is still smooth and clean looking. (Tip: make sure the preview box is checked in the levels window so you can see what is happening to your image as you adjust the levels.)
Once that is done, hit OK. Select your scan layer in the layers panel and click on the blending mode drop menu and set the blending mode to multiply (as seen on the image below).
STEP 5: ADD SOME COLOR
Create a new layer in photoshop and place it below your scanned linework. With this layer selected, open the brush tool and add some color to your image (it is helpful to create a color key with the specific colors you want to use in your project). For color scheme help and inspiration, check out sites such as colourlovers.com. Since you have set your linework layer to multiply, you will be able to see the color beneath your black linework. I chose to not brush within the lines because I like my work to have a messy, handmade quality (and because that’s the kind of child I am).
STEP 6: TEXTURIZE THE COLOR
On the layers panel, add a layer mask to your color layer (see image below).
with the Layer mask selected, choose the brush tool, and a nice grundgy looking brush (while the layer mask is selected, your selected colors will turn to black and white automatically. When your brush is black, the image will be made invisible where you brush. If you use white, any parts of the image that were hidden will be brought back. Play around with the brush opacity. If your brush is at less than 100 percent opacity your image will only be partially removed or added.
I used one of my grundge brushes (search online to find them). This is how my layer mask looked when I finished.
And this is the before and after effect it had on The colors.
STEP 7: FINISH COLORING THE BACKGROUND
Create a new layer below the first color layer and fill out the color in the background.
STEP 8: ADD SOME TEXTURE
At this point, I liked the image, but it didn’t pop enough. To bring this image home, I added some texture. 3 ones to be exact.
I added the first texture on a layer beneath the linework. I set the blending mode to Darken and Changed the layers opacity to 33 %
My second texture went on a layer above the linework and was set to Color Burn and 33 % Opacity
My last texture layer was placed as the top layer and was set to Saturation at 11% Opacity.
STEP 9: SAVING YOUR IMAGE FOR THE WEB.
At this point you have your final image. To save it, go to the menu and click File>Save for Web and Devices. In the options panel on the right, choose JPEG make sure optimized is checked and set the quality at the lowest percent that still looks good. 60% is usual a safe percentage. (The lower the percentage, the smaller your file will be and the faster it will load on your myspace page).
Save it and your done with your lovely image that should look like this!
STEP 10: THE CODE THAT PUTS A HEADER ON YOUR PAGE
This is already a long blog post, so I won’t go into image mapping and making clickable links in your header, but if you know basic html, this should be easy for you. I am just going to give you the CSS that you need to put your header image up at the very top of your myspace page.
First, you need to upload your image to the internet. If you have a website, then simply add it to your web host. If not, then there are services such as Photobucket where you can upload your image. Once you have uploaded your image, get the url for the image and copy it.
Open your myspace account and insert this code into your about me section.
<div class="header">
<center>
<img src="URL OF YOUR IMAGE" />
</center>
</div>
<style>
body {
margin-top: Height of your image + 20 px;
}
div.header {
position: absolute;
top: 0;
left: 50%;
margin-left: -Half of the width of your image px
width: Width of your image px;
height: Height of your image px;
}
</style>
Replace all bold text with the information for your image and save it and you are done!
EXAMPLE OF CODE
If your image is called headerimage.jpg and is 800px x 600px and located on this site, then the info should look like this:
<div>
<center>
<img src="http://www.solutionsfordreamers.com/headerimage.jpg" />
</center>
</div>
<style>
body {
margin-top: 620px;
}
div.header {
position: absolute;
top: 0;
left: 50%;
margin-left: -400px
width: 800px;
height: 600px;}
</style>
That’s all! Have a great day!
