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.

A great tip for Artisteer is to choose a nice solid background image or texture as a canvas for buttons and a logo you add to the code later. Note: Always make sure to make your header text as small as possible, the same color as your background, and put it in an out of the way spot in your header. This way, search engines will still find the text, but you will also be able to add a graphic as your main title.

WordPress Trick:
Because I had a relatively plain header to start with, I was able to add my own clickable logo button and social icons to make the header look complete and give it nice interactivity. To do this, simply follow these steps:

• Create your images and upload them to your theme’s image folder.
• Add appropriate div classes and links to your Header PHP. It should look something like this (added code in orange):
  <div class=”art-Header>
  <div class=”logo-png”><a href=”url” title=”Your Title”</a></div>
  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.
  
• Add  code to your CSS to display your images in the way that you want. Go to your Style Sheet CSS and find this /* 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):
  .logo-png a
  {
  position: absolute;
  z-index:0;
  top: 13px;
  left: 5px;
  width: 503px;
  height: 206px;
  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, and most importantly make sure that your img url is the name that you saved your image is into your themes image folder.

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.

WordPress Pluggin:
I made good use of the Display Pluggin available through WordPress. This pluggin allows you to decide which pages you want certain widgets to be displayed on. Very helpful, and you could really have a lot of fun displaying a different graphic button for each page if you wanted to. (The images I added to the sidebar of the About and Welcome page is just some html I added to a text widget.)

I hope you enjoy this new theme, and please let me know if you are interested in a customized WordPress or Blogger theme with setup included.

© 2009 – 2011, Sarah Roberts – Reflecting the Designer. All rights reserved.