- WordPress Tutorials
- Artisteer Tips
- Add Button Class to Widget
- Add Style to Text Widget
- Add a Sidebar in the Header
- Create Custom Post Header
- Create Unique Page Template
- Create Secondary Menu
- Create Styled Donate Button
- Create Widget Style – Part 1
- Create Widget Style – Part 2
- Hide Category Titles
- Styling Featured Image
- Styling Sheet Borders
- Using Theme Options
- Design Tips and Tricks
- Recent Projects
Making the Most Use from Photoshop and Artisteer Part 1
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. All rights reserved.
12 Responses to Making the Most Use from Photoshop and Artisteer Part 1
Leave a Reply
Like This Theme?
Make your own theme using Artisteer, then come back here for tips on how to make the most use out of this powerful design tool!
Best Image Resource
Recent Projects
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!
Thank you for the wonder tutorials. I am always looking to see what others are doing with Artisteer.
Just one suggestion on your site: I am older than the average visitor to your site most likely:) But for us older people, the green text is very hard to read. Just a little darker maybe?
Please understand not putting your design down, just a suggestion.
Thanks again,
Terry
No offense taken. I actually try to switch up my theme on occasion for variety and to demonstrate new techniques. Everyone’s computer screen displays color and brightness differently, so what might look good one screen doesn’t on another. Make sure to check out my most recent tips, as Artisteer does set things up differently for WP3.0.
that helped me alot, thanx
Your site was a God sent. Do you know of any tutorials for Artiseer that I can use to create my own custom borders and buttons using Photoshop or PSP?
I actually have some on this site. Why don’t you just look through all of the Artisteer Tips to find what you need. Basically, all you need to do is export your Artisteer theme, then edit the exported images within Photoshop or other editing program.
how do i create a footer…..not the one with the green section…but the one above it….in the black area……help would be really greatful…….i have been trying to desing something similar to ur’s but could had no idea to start anywhere…………
Thanks for sharing this. Can you tell me more about how you got the drop shadow on the page? Best regards, Lisa!
Lisa, if you are using Artisteer you can create a shadow there and even edit it to your specifications. If you are editing an already exported image in Photoshop, just add a drop shadow to that image. As stated in the Article, it’s best to already select a drop shadow in Artisteer even if you want to edit the actual image outside of Artisteer. This will ensure that the exported images are set up for a drop shadow styling already.