1.Changing the background image

Location of the background image can be found in the css document right here:
body {
background:#000 url(img/bg.jpg) no-repeat left top;
.....
}
For making this background I used some nice pictures and some photoshop brushes, and I mixed them up in photoshop.
Here are some snapshots of pictures I use and the final result:

Before:

After:

Depending on your final background size you can set the position of your blog content by changing the padding of your main container area (style.css):
#main_container {
.....
.....
padding:100px 0 0 150px;
}
2.Changing logo and titles

Logo can be found in header.php document at these lines:
<div style="float:left;">
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/img/logo.gif" border="0"/></a>
</div>
I made it a transparent gif so you can make it with any font you like .
To change this edit the photoshop file logo.psd

Titles are also transparent gifs; for changing them just edit psd files.
Most of these titles can be found in sidebar.php:
<h2><img src="<?php bloginfo('template_directory'); ?>/img/archive.gif" border="0"/></h2>
<h2><img src="<?php bloginfo('template_directory'); ?>/img/meta.gif" border="0"/></h2>
......
When you save these files don’t forget to set the background of your gif the same as the background you want to place it.
Here is a screenshot of my logo:

3.Changing buttons and bullets navigation
In the .zip document you will find psd source for any button and bullet and changing them is pretty much the same, just edit the .psd and export with the same size.

For example the right menu bullet’s location can be found in style.css at this lines:
#sidebar ul li ul li {
background: url(img/bullet.gif) no-repeat 0 6px;
padding-left: 23px;
line-height: 23px;
}
You can modify position of the bullet also by changing these lines :

..no-repeat 0 6px;

4.Other areas like posts, comments, footer can be modified by changing style.css

For example I use a jpg file for background of post details (date,author,nr comments) which can be easily modified by changing post_details.psd.
Lines that contain post details information can be found in style.css here:
.post_details {
padding: 0 15px;
background:url(img/post_details.jpg) no-repeat left top #0e0e0e;
}
For any questions don’t hesitate to contact us.

CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.

Download CSSVista (v0.15, Windows XP/Vista only, 8.9mb. Uninstaller included.)

Please note: This is a very early version of the software. It probably won’t explode, but it may not work perfectly 100% of the time.

abrViewer is an external application that allows you to preview Photoshop brushes without going through Photoshop application. This standalone application is particularly useful for those who downloaded free brushes from the internet but have little time to go through each one every one of them. It generates a small preview the brushes so you’ll have a clue with to be loaded into Photoshop to use.

Windows Users

abrViewer for Windows requires Microsoft .NET Framework 1.1. Click here to download abrViewer.

Mac and Linux Users

To use abrViewer on Mac or Linux, download the Java version from easyelements, and launch the application with the following shell command:

java -jar ABRView.jar

Source: http://www.hongkiat.com

VistaIcons.com is a collection of free Vista Style icon sets of over 2500 high quality icons in png and ico format.

From VistaIcons.com you can freely download 256×256 PNG icons for Windows Vista.

Icons in Windows Vista visually represent programs, objects, actions, and concepts that help users to recognize and grasp meaning and purpose, identify places and items, and find their way through the UI with visual landmarks.

Source: http://www.smashingapps.com

Step 1:

Open Photoshop and create a new document with 500X500 and transparent background. Then using a photoshop brush make a nice frame just like in this picture:

(I use deviantart.com for a nice brush)

Then cut out the center of the frame using Rectangular Marquee Tool , and using another brush make an old paper effect with 50 % opacity, and place it in the center of the frame just like below:

Then export the frame and save it png-24 whith transparent background, call it frame.png

Step 2:

We know that IE 5.5 and 6 doesn’t support PNG alpha channel so we’ll use the AlphaImageLoader, and javascript for browser detection.

For browser detection i use a script from
http://dithered.chadlindstrom.ca/javascript/browser_detect/index.html
browserdetect_lite.js
And for opacity i use opacity.js

Step 3:

Next open dreamweaver or what program are you using for html and css coding and make a new html page.
In the head of the page don’t forget to include the javascript:
…..
<script language=”javascript” src=”browserdetect_lite.js” type=”text/javascript”></script>
<script language=”javascript” src=”opacity.js” type=”text/javascript”></script>
</head>

Make a new div whitch will contain the background photo (use any photo you want to put in the frame).
I use this photo:

The photo must be the size of the center area of the frame so it could fit perfectly.
Then display the png using Variable Opacity Rules:

<div style=”background:url(picture.jpg) no-repeat center; width:344px; height:396px;”>
<script language=”javascript” type=”text/javascript”>
od_displayImage(’myImg1′, ‘frame’, 344, 396, ”, ‘Variable Opacity Rules’);
</script>
</div>

Step 4:
Test your page , new no matter if you are using IE or Firefox you png frame will look perfectly:

Download example: demo.zip

Good luck