ShareTweet

I use Artisteer as the base for almost all of the websites I design because they do a great job of putting out compliant and flexible code for WordPress and Blogger sites (others also, but those are the two I focus on). Now, as much as I love Artisteer, and as much as they continue to improve, it is always good to learn how to design your own images, edit the CSS and sometimes the PHP as necessary to really produce some “non-template” style websites. If you don’t want to mess with the code, at least you need to learn how to creatively add your own images into Artisteer and edit images after the Artisteer build.

One really big way to add some customization and depth to your site is to give texture and/or borders to your sheet. This really is not that difficult to do using the images that Artisteer provides and editing software like Photoshop. Here are a few steps to achieve borders as I’ve used on passed designs of this site or the textures for both the sheet and posts that I did on BookRoom Reviews.

• First of all, create your template in Artisteer and make sure to choose rounded corners, a slightly transparent background,  and a fairly large evenly spread shadow.
• Next, export your theme, and find the sheet images within the exported theme images folder. You’ll see sheet-s, sheet-v, sheet-h, and sheet-c.
  * Sheet_v: the image that will repeat along the right and left side of your blog or site. (Named v because it repeats vertically.)
  * Sheet_h: the image that will repeat along the top and bottom of your blog or site. (Named h because it repeats horizontally.)
  * Sheet_s: the corners of your blog.
  * Sheet_c: the inside repeating image of your blog. (it helps to expand this image to a larger one when creating a texture. You’ll also probably need to test it a few times until you get the look you are going for.)
• Edit each as desired. It works best to create a new layer on top of the specific sheet element you are working on so that if you make a mistake, you can always fix it easily. Use that same image layer on the other sheets to ensure that your sheet borders blend together seamlessly.
• If you want more space for larger border images, you will just need to increase the height and/or width of your images. An easy way to do this and make sure things stay pretty even is to just double the height of Sheet-v and the width of Sheet-h. However, you’ll also need to find those corresponding heights and widths in your CSS and change them to match your final image size. You can find that css easily by hitting Ctrl+F on your keyboard and searching for
  background-image: url(‘images/sheet_h.png’);
  *Note the example given is for the sheet_h image, so you can simply search for the identical code with the other images to replace the size on those.

Example of a Sheet Corner Edit: Below you see the original exported sheet_s.png and directly beside it, you see the edited version of that same sheet (the style that appears in the corners of my current sheet on this site).

Note: Remember that this is for the corners of your sheet, so only a fourth of this image will appear in each corner of your sheet. Because of this, you’ll need to ensure that your additional designs stay neatly within each corner and don’t extend into any of the other four sides. Otherwise, it will appear incorrectly on your site. This same principle also applies to rounded corners on your blocks and vertical menu styling.

If you don’t have software like Dreamweaver to pull your code into to preview your site with your edits, It’s good to use an ftp client so that you don’t have to keep adding a theme to your built site in order to see and fix changes you make. An ftp client gives you access to all of the folders on your website so you can easily add, edit, and replace them. There are several free ones available, and the link above is to a free and very popular one. Using an ftp client is super helpful to you as you tweak your site especially when needed to add new php files, images, etc.

I hope that helps, and always feel free to leave any comments, questions, or suggestions.

© 2010 – 2011, Sarah. All rights reserved.

ShareTweet