Your own silhouette in template's header!
Posted on Tue 07/24/07 in Meaningful labor
Did you ever wanted to put your own photo right into your blog’s header? In ‘my wishful thoughts’ template you can easily swap the default brown body outline with your own photo! In this post I’ll tell you how to do this.
If you have some experience in working with image editing software like Photoshop, you shouldn’t have problems with customizing the template’s header. However, if you’re unfamiliar with computer graphics, then maybe one of your friends, who knows all of those ins and outs of image editing, can lend you a hand?
Before we start you should know what things you’ll have to prepare.
- Your picture, preferably on some uniform background (it will be easier to crop). The important thing is that the height of main subject of the photo (e.g. you) should be about two times greater than the width. In addition, your head should fit loosely in the upper half of the photo.
- Photoshop or other image editing software.
- Access to
images/layout/directory on your server.
Additionally, you may download an image template file: silhouette.psd. It will serve you as an example and also it will facilitate the whole editing work.
‘my wishful thoughts’ template was originally created for female blogs but it doesn’t mean that it can’t be used by men. To prove it, I’ll take my own photo to create new header image:) So let’s get it started!
- Open the
silhouette.psdfile or create a new document in Photoshop (width: 211px,height: 444px,background color: #b8a088). 
Open your photo, cut out the background to get only your body’s silhouette and copy it to clipboard.
Paste your body’s silhouette to the silhouette.psd(or to the file you’ve created in step 1). Scale your photo uniformly until there’s minimum 30px of empty space between left, top and right image edges and the silhouette. There should be no empty space in the bottom of the image.- Copy style from
originallayer to your photo’s layer. If you don’t use thesilhouette.psdfile, you have to add the outer glow style manually. Use these settings:opacity: 35%,color: #ffffff,spread: 5%,size: 30px. - Save your new silhouette in JPEG format and name it
silhouette.jpg. - Go to the
images/layout/directory on your server and back up the existingsilhouette.jpgimage. Then upload your new header image and check the effect in the browser!
Of course, if you’re good at Photoshop and know the basics of the XHTML and CSS, you can play with the header image (and the whole template) much more! A great example of such a customization can be the site of Stephanie Hider.
Because ‘my wishful thoughts’ was designed for female blogs but not only women want to use it, I decided to quickly prepare a male version of the silhouette on basis of my photo from this tutorial. Of course, if you have a totally different posture that mine, this version will still be useless. In other case just download the silhouette-male.jpg file, remove the -male suffix and upload it to the images/layout/ directory on your server. Now, the original header image should be replaced by the new one.
I hope this quick tutorial helped you a bit in customizing your template:)