Well, as you can see if you’ve visited my site before, I’ve just updated the theme again. I like to create new design themes for my own site both for variety as well as to demonstrate some nice Artisteer, Photoshop, and WP tweaking techniques. I’ll list a few of those techniques in this post.

Photoshop:
Designing your own site elements really helps to tie the whole site together completely. By creating your own glare image, buttons, header images, etc. you can give your site a completely customized look without much work. For example, I created the background pattern using Photoshop. All I did was grab a plaid image off of the web (make sure you always only use copyright free images or pay for stock images!) I then, added the green, semitransparent crisscross stripe on a 100px x 100px image of the pattern. I also made sure to define it as a pattern so that I could use it in other elements of the design.

Artisteer:
The beautiful part of Artisteer is that it allows you to easily add your own graphics as texture, backgrounds, glares, etc. I uploaded my 100px x 100px image of the plaid and chose a tile repeat. I also chose the Overlay setting for the blending option in Artisteer and gave it a tiny bit of transparency so that the gradient I chose for the background would still show through nicely.

Artisteer comes with its own texture and pattern designs as well, which are nice to use. The header, button header, and footer are all sporting one of the many built in Artisteer texture graphics.

Artisteer comes with the ability to add your own header background image as well as an object which is perfect for adding your logo image to. However, you may want your image to link to your site’s home page, and you may also want to add some other clickable images to the header (such as social icons, etc.) Below are some instructions on how to do this.

Making Your Logo (or Header Object) a Working Link
1.) Go into your exported theme’s header.php file (or if it’s already live on your site, go to Appearance, Editor, header.php within your Dashboard.)
2.) Find the code for your header object which should look like this:

<div class="header-object"></div>

3.) Add a link to it so that it now looks like this:

<div class="header-object"><a href="desiredurlhere" title="Title here"></a></div>

Adding More Linked Images to your Header
Basically you are going to duplicate the code above as many times as desired changing the class name, the url, and the title to match the items you are trying to add.
1.) Create your images and upload them to your theme’s image folder.
2.) Add appropriate div classes and links to your Header PHP just below the header div. It should look something like this:

<div class="art-Header">
<div class="logo-png"><a href="url" title="Your Title"</a></div>

Again, you’ll need to copy and paste this same code for as many images that you want to add. Just make sure that you label them each based on what they represent, and of course change the display title url to match. You’ll need to use the exact name for the CSS.

3.) Add  code to your CSS to display your images in the way that you want. In your theme folder, find style.css, and look for /* begin Header */ Here is an example of the CSS code you should add for the example above (note, make sure to keep the div order the same as it is in the Header PHP):

div.logo-png a
{
position: absolute;
display: block;
z-index:5;
top: 5px;
left: 5px;
width: 500px;
height: 200px;
background-image: url('images/header.png');
}

You’ll need to make the width and height appropriate to your image size, change the position as desired (right now it is positioned 5px from the top left corner of the header), and most importantly make sure that your img url is the name that you saved your image is into your themes image folder.

4.) Always make sure to save the php file before doing any editing in case you make  a mistake. You’ll most likely need to tweak the CSS several times in order to position your graphics exactly where you want them.

© 2009 – 2012, Sarah. All rights reserved.