Making the Most Use from Photoshop and Artisteer Part 1
November 16, 2009
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.
Related posts:
- Beauty 4 Moms Blog Design Well, I just finished one of my favorite design projects...
- Customized Blogger Theme I just created a completely customized blogger theme for someone...
- Creating a Digital Portrait in Photoshop I did a post a couple of months ago on...
- Free Tropical WordPress Theme Hafa adai from Guam! This tropical paradise WordPress theme was...
- Brand New Blogger Scrapbook! No, I’m not posting about an actual scrapbook, but about...
Related posts brought to you by Yet Another Related Posts Plugin.
Posted in Recent Projects, Tips and Tricks, Tools of the Trade | 
Tags: blog design, Blogger, Design, Photshop, software, web design
4 Responses to “Making the Most Use from Photoshop and Artisteer Part 1”
Leave a Reply
Hi, thanks for the very informative post! I got some very wonderful ideas. I have a question though. You said you chose a transparent background for the menu bar. How did you achieve this? I see the option in Artisteer but its greyed out and I have been struggling with this for a while.
Thanks in advance!
Tee
Tee, thanks for the kind remarks. It sounds like you don’t have the most updated version of Artisteer. However, if you are still unable to see it in Artisteer, I bet you could find the code in the CSS in order to make it transparent. Let me dig around in the code on my site, and I’ll let you know what I come up with.
Stay posted, because I’m also going to do a post on how to add images or buttons to your header on top of the images you make.
Hullo,
I want to create a custom glare from an image(photo of a building) just how can i get this done in photoshop so it blends in seamlessly with artisteer..?
The options are pretty limitless. Just make sure that you have a transparent background and save your glare as a png. Really there are only a couple of other things to consider:
1. Do you want the glare to be positioned coming from a corner or centered?
2. How much of the image do you want to appear on the screen? (Considerations on screen size, page width, and top offset.)
The easiest way to align your glare image in the position you want is to create the rest of your blog design in artisteer, create a screenshot of it, then pull that screenshot into Photoshop to use as a guideline layer for creating your glare design. Once you’ve created and saved your design, pull it into Artisteer and check it out. If it’s not quite right, just keep editing until you get it where you want it.
Hope that helps!