Backgrounds and Glare

I purchased Artisteer back in the spring, and it has more than made up the money I invested into it by the ease at which it allows you to create templates for WordPress, Blogger, Dot Net Nuke, Joomla, and Drupal. I use it all the time, and actually just used it again to give this site a little refresher. The beauty about Artisteer is that it allows you to implement your own designs into the template completely so that the design is all yours from the background images, textures, and glare all the way down to the individual icons. Now, while Artisteer is a great tool, I wouldn’t be able to accomplish an original and customized look without the use of design software like Photoshop. This post will explain just a few of the steps in creating a great, customized look using both of these tools.

The Background

You’ll notice that I have a great bead board background as well as a semitransparent sheet with a shadow and a yellow sidebar column with a pattern in it and shadow as well. You’ll also note that using Artisteer alone, it is impossible to get one sidebar background to look different from the other, and it is also impossible to get a drop shadow around the main sheet alone and not the header. In order to accomplish this, I needed to create a vertically tiled background that accomplished all of this for me. The first thing I did was to search online for bead board image. When I found the the style I wanted, I pulled it into Photoshop, and selected only about 1 pixel tall and as wide as the image was and Defined it as new a Pattern.

I then created a box and using the fx toolbar created a Pattern Overlay using my newly created bead board pattern. I could than re size that image however I wanted without losing my pattern. I used that layer as my background, then created the other elements on top of it. I created grid lines for my header height and sheet width, than created my semi transparent sheet with a shadow and my yellow column with a pattern overlay. (Hint: for the pattern in the column, I just copied and pasted the screen shot of Artisteer using one of their textures, than I created my own pattern out of it in Photoshop).

When my basic background was completed with the beaded background, the sheet, and the column, I again cropped the image in such a way that it would repeat seamlessly when stacked vertically. I went to Insert Image or Texture from file, centered it, and chose repeat vertically to complete the background. I then made sure that my sheet and footer in Artisteer were transparent so that my background “sheet” and “column” would show through as if they were the main sheet and side bars.

Using Glare

Now, even though I could make a header image using that same bead board pattern for the background, I still had a shadow on either side of the header because of my main background image I created. The easiest way to fix that, is to create a custom glare to cover up that shadow! The ribbon, and small squares of the bead board on either side of the header served as my glare and helped give the appearance that header blends in seamlessly to the background. Also, note that I chose a transparent background for the menu bar so that it looks like my ribbon is the menu bar. (Hint: You’ll need to make sure that you create a png for your glare, and that you size it to fit exactly to correct width and height of your header. Also, make sure to center it on your sheet in Aristeer. This can be a time consuming process to get it exact, but it is well worth it.)

I hope that this was helpful. Please leave a comment if you enjoyed this post, or if you have any questions or suggestions on creative ways of using Artisteer. Please email me if you are interested in an original and completely customized WordPress or Blogger Theme design.

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