www.reflectingthedesigner.com

Design Tips and Tricks

As I was working on redesigning theStock411 Wordpress blog, I implemented two fantastic Wordpress plugins. One of these plugins is WP-Sticky. I’ve known about this plugin for a while, but had never used it. It’s a nice simple way to keep one post at the top of your blog at all times. Now, there are a couple of items to note if you are using this plugin after creating your theme in Artisteer: You must change a tiny bit of php if you want to hide the date. I found a couple of forums that had parts of the following information:

1. Go to your Main Index PHP and find the following code:
   <?php if (!is_page()): ?><?php ob_start(); ?><img src=”<?php bloginfo(‘template_url’); ?>/images/PostDateIcon.png” width=”17″ height=”18″ alt=”" />
   <?php the_time(__(‘F jS, Y’, ‘kubrick’)) ?><?php }?>
2. After <?php if (!is_page()): ?><?php ob_start(); ?>, add the following:
   <?php if (!is_announcement() ) { ?>
3. This is basically telling the theme not to show up the date if the post is a sticky post listed as an announcement specifically. This is important, because while you can choose “no date” in the WP-Sticky setting, the icon will still appear. I’m sure you could just hide the icon, and put this in front of it instead, then you would still get your little announcement banner underneath the heading without the other icon elements. However, I chose to just have a header with nothing underneath at all, so I used this method.
4. Just one more step. Because Artisteer lists the date as time, you’ll need to change that tiny part as well. This is what you’ll need to do. In that same bit of code you were just working with, change <?php the_time to <?php the_date and you are all set.

Another note on WP-Sticky. You must choose the announcement radio button on the dashboard of the post you want to be at the top of the page. If you just choose sticky, it will remain on the front page, but not necessarily the top.

The second plugin I’d like to highlight today is Custom Post Background. It allows you to add an image behind the text of your post, which is amazingly helpful. If you’ve been trying to do this by implementing a table into your post, you know how frustrating it is! This plugin solves the problem for you sooooo easily.

Below is an example of how I used this plugin to style the sticky post for theSTOCK411.

My client wanted this sticky post to stand out from the others so it looked more like a part of the main design rather than just a post. Of course, because of the information listed, he also needed to be able to edit it on a monthly basis, so just inserting an image into the post by itself was out of the question.

So, I created a background image in a png format that matched the design I created for the rest of the site. I then used the handy plugin to insert it into the post. I did have to do a little styling to the text in order to give the text inside of the image some padding rather than being pushed right up against the sides of the image. To do this, I simply added the following code in the html part of the post editor:

<p style=”text-align: center; padding-top: 20px; padding-right: 10px; padding-left: 10px;”><strong><span style=”color: #ffffff;”>my text was inserted here and then closed with</span></strong></p>

I also made sure to center the three images below the text and add necessary margin space to them so that the entire background image showed up correctly, and so that they were spaced evenly in the post. The nice part about this is that not only do Search Engines pick up all of the text in the post, but you can also easily edit the post as desired without having to create a whole new graphic.

One more thing to remember when using this plugin: You’ll need size your image appropriately in proportion to the amount of text you want to add. the image will only appear as far down as the text goes, so if you don’t have much text your image will look cut off abruptly.

SPECIAL NOTE: if you plan to copy and paste any code from this post, please make sure to do so using a text editor and change the direction of the quotation marks.

Hope this information was helpful, and please comment if you have any additional tips or questions.

There are several new prospects on the horizon for my husband and I that require my utmost attention right now, so I’ll be taking a break from any new design projects for a while. You can feel free to ask me questions, but I will not be able to take on any new customers until further notice. I have a couple of projects to finish up for some current customers, and I’ll keep you posted when I’m ready to start-up in full force again. I will still be writing the occasional blog post, and you can always feel free to comment on previous posts or ask a design question.

Take care!

I so enjoyed working with Annie from Annie Kennedy Photography as we helped to give her a presence as she starts her new business venture. Annie has a wonderful eye for photography and a great sense of style, so it was easy to come up with a great design that matches her personality with such great photos to work with as the centerpiece. First, I created her logo design and business card, then I used that logo and the styles used in the card to create a matching blog theme. A few Artisteer/Photoshop tricks used in this blog are the following:

Background Pattern

Artisteer has some tremendous pre-made background designs, but many people don’t think about editing them to create new and unique background patterns. I simply took a screen shot of both an ornate background as well as a grunge background and pulled them into Photoshop to create a completely new style. I first changed the colors to match what I wanted, then I stacked the grunge on top of the ornate and chose a blending option creating an entirely different look. I then cropped the whole image to one small column, and faded it into white at the bottom so that it could be used as a horizontally repeating background image when pulled back into Artisteer.

Glare and Buttons

Because there are so many dark colors and that rough grungy look, I wanted to balance it out with some more feminine touches. I love some of the floral glare that Artisteer has in their pre-made glares. To tie in the buttons to the theme, I again took that image, flipped and scaled it to be used in the bottom corner across the page. I then created individual layers for my buttons making them the same color as the background, but giving them a bevel so they stand out. To see more of the code in adding these to your blog, make sure to check out Blogger Scrapbook and look under the scrolling buttons category.

I was just browsing through some new twitter followers blogs, and I couldn’t help but notice some well designed themes, and some very poorly designed Wordpress and Blogger themes. Most of these have great content, but a lot don’t really make you want to stay on their site very long because they are either not friendly on the eyes or they are difficult to navigate through.

Here are some simple tips to help you make your blog or site keep more viewers. (Note: not all of these tips are even used on my own site, but should be.

Content:

• As everyone knows, content is king in the web world, and if people don’t immediately know what your site is about at first glance, you’ve already shot yourself in the foot. Make sure that your title is clearly visible, easy to find and read, and clearly communicates the purpose of your site.
• SEO: Search Engine Optimization is very important.
  
  1. While it’s great to have a beautiful title, make sure to also have text that search engines can read (whether it’s visible to the human eye or not) so that people will be able to find your site.
  2. If you are using Wordpress, I recommend checking out the Platinum SEO Pluggin.
  3. Make sure to put plenty of tags in your posts, but make them applicable to your content and not too random.You want people to come who are really interested in what you have to say or they won’t stay.
• Displaying Ads: Almost everyone wants to display ads, but most blogs are overpowered by them so that not only is it difficult to see what your site is all about, but it also just turns people away.
  
  1. Put only ads on a page that apply to that topic, and limit the number of ads to just a few really targeted ones.
  2. Try creating a separate page for resources that you use or recommend, and create a post or page for each ad telling why it’s worth looking at.
  3. If you are using Google Adsense, make sure to design your ads so that they blend in to your site, but are also in easy to find places (such as before or after posts, or close to your main content in the sidebar).
• Organization: Nobody wants to be fumbling around through your site trying to find that one post they were looking for. Let’s face it, who really cares about looking for a date of a post from a calendar or your archives? They really want to find a specific topic or category. Here are a few simple organization tips for your content.
  
  1. Make an easy to navigate menu that links to your main categories and subcategories.
  2. If you can’t make a menu, make your own menu in a sidebar widget or gadget by simply creating links to these categories and subcategories.
  3. Place the most important info or links toward the top of the page in your sidebars. If you are using a search feature, put it right at the top or in your header. Otherwise it will never get used.
  4. Label your posts very specifically, but with several different words or phrases that mean the same thing. Then, make sure to put a search box at the top of your site so that people can easily search for a word or phrase and find just what they are looking for. Quick Hint: If you want to know how search friendly your site is, do a quick search for a topic you know you wrote about a while back and see how long it takes you to find it.
  5. If you are using a 3 column design, organize your sidebar by the content you are displaying in them. For example, you can use one sidebar for info about you and your site or ways to follow you, and the other for ads and links to other sites.
  6. LESS IS MORE! The more content on a page, the shorter amount of time most people will stay on that page. This is why menus and sub-menus are soooo helpful. The main visible menu shows the main categories, and helps people focus on what direction they want to go in. Once they’ve chosen a basic direction, than you can give them more specific options within that direction.

Design Elements:

• Who doesn’t love a beautiful design?! However, your design should never overpower your content. Your design should direct the reader to the content not only by drawing their attention to it, but also by giving a visual message of what your site is all about.
• Avoid Loud colors or large graphics. Not only do they distract the eye and can overwhelm the senses, but they can also take a long time to download. If you want to use patterns, try to use a repeating pattern for the background so your page loads faster.
• Three column designs are a must if you intend on displaying a lot of widgets or gadgets. No one wants to have to scroll forever.
• Header Design: Try for a clean, uncluttered header that clearly depicts what your site is about, and contains links or buttons to what you really want people to go to.
• Footer Design: Don’t put important content in your footer that is not displayed elsewhere on your site, especially if you are using a blog. Most people don’t make it that far down the page. Footers should be eye friendly, and contain links or items that are either mentioned elsewhere already or are not as important.
• Scrolling Buttons: These are great for items you don’t want people to miss, and they also give you more room in your main content. Just make sure that they blend in nicely with your theme and don’t detract or distract from the main thing. A back-to-top button is also a great way to help people quickly get back to the header without having to scroll a long time.

To wrap it all up, here are a few questions to see if your site is welcoming and easy to navigate.

• Can someone tell what my site is about within seconds of viewing it?
• Does my theme compliment my site or detract from it?
• Does my theme match the message of my site?
• Can people easily find what they are looking for on my site?
• Are people directed to what I want them to look at immediately on my site?
• Do people see my content first or annoying ads first on my site?
• Do people ever see the ads on my site and do they compliment the content that they just read?

Those were just a few simple tips, and there are a ton more. Please leave a comment if you have other tips to add, or if you have a question. Also, let me know if you are interested in a customized Wordpress or Blogger theme design.

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=”art-Header-logo-png”onclick=”location.href=’URL TO THE LINK YOU WANT’;” style=”cursor: pointer;” title=”Home”></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):
  div.art-Header-Logo-png
  {
  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.

Here is another Christmas card that was a “spur-of-the-moment” job. I’m posting this one to demonstrate a few simple Photoshop tips that can help you turn around designs quicker for customers just like this one. As the title suggests, there is great advantage in using many layers in Photoshop. I’m just going to focus on the background of this card itself. There are 3 separate layers used just for the green background.

The bottom layer is actually a black and white plaid I found online and turned into a pattern. Need a refresher on creating your own patterns? (NOTE: if you are using Artisteer and want to know how you can make your own textures, this is it!)

• Create a new, completely square document and pull in the image you’d like to make into a pattern onto it.
• Line up the plaid or pattern so that it is completely centered and will flow in any space seamlessly when repeated.
• Once you are satisfied with the position and color, click Select All than click on Edit, Define Pattern.
• To use your pattern, simply create or click on a shape that you want the pattern to fill, and click on the fx button choosing Pattern Overlay. You should be able to scroll down and find the pattern you just created.
• You can choose the opacity of the pattern as well as the size of the repetition, and the best part is that you can transform the shape and size of your image without doing any damage to the pattern. (an example of this are the three red plaid squares in the picture above. I simply duplicated the original square used behind the photo, and I transformed them into the sizes I wanted behind the text.)

Ok, now back to this specific example and the elements that make up the background to this picture.

1. My first layer was a green square that filled the document with the plaid pattern overlay added. The overlay was actually still the black and white version, just at a low opacity.
2. The layer directly above that is a white square that filled the document space and was also set at a low opacity to tone down the pattern and lighten the image. I also chose to give it an Inner Glow that was a dark green to add some more depth to the background.
3. The final element to the background is the faint scroll pattern. It is just a cream, scroll-work jpg that I sized down to fit the document, colorized it to a slightly desaturated green color, and chose the Overlay Blending option so that it looked like it was a part of the plaid pattern.

I hope you found this post helpful, and please let me know if there are any parts that may still be confusing. As always, feel free to contact me if you are interested in print or web design.

This was another Christmas card I just did for a family who wanted a very customized look. They also needed a few different versions of the same card for their business, close family and friends, and others on their Christmas card list.

The image to the right is the family version, but you can view their business version in my gallery.

This is what they requested:

• A 4×6 and 5×7 design that is different than the average, traditional template design.
• A full color photo of the family and black and white photos of their two children incorporated into the design.
• A design that would include the true meaning of Christmas along with the text on “Our heart, Christ’s manger.”
• All of the specific text elements you see in both versions including one for their business and one just for family and friends.
• A way to tie all of their requests together into a card without making it look disjointed.

Thankfully, the photos were the easy part on this card. They were professionally taken by the very talented Kristen Gallatin. The only thing I did was to zoom into a family pic to get the requested “yawning picture” of my customers youngest son, and change both pictures of the boys to black and white.

Photoshop Tips:

• Incorporating both black and white photos into one design can sometime look sloppy or cluttered. To avoid this, I chose to create the color palette for the card to match the colors from the central photo which served as the focal point of the card. I also, faded that picture into black and white as well as faded the entire card into black and white around the edges so that all of the elements of the card have the same feel to them.
• I use a ton of layers when working in Photoshop. I make a lot of duplicate layers, especially of backgrounds, than use a feathered, and slightly transparent eraser on the top layers to create the different vignette effects used in photos and background images.
• I used the Blending option heavily on the many layers of the background I used and most especially on the image of the nativity in the upper right hand corner.

Let me know if you need some emergency help on a Christmas card going out, and I’d be happy to discuss options with you!

I just finished designing a blog for my sister-in-law who makes the most amazing and creative cakes! She also makes adorable handmade cards, and both are done inexpensively and simply (which is a key when you have a family of 6!) You can check out her blog by clicking on the picture below. Please note that this blog is just getting started, so it doesn’t have a ton of content yet and still needs some tweaks.

This blog was a fun design to make. I first created the polka dot pattern in Photoshop, I then created the ribbon pattern, sidebar sheet and main sheet, cropped them all into one horizontal layer and used that for the blog’s background. Using the ribbon image, I created a texture for the block headers as well as the main menu background. I decided to go with original title button designs for the left side of the blog for items that I know won’t change and are of the same category, while I used the template headers I created for the right side of the blog for items that can be more easily edited and changed. You’ll also notice my original post dividers, signature graphics, scrolling twitter, rss, facebook, and back to top button, as well as other little details. You can find out how to do all of those yourself by visiting my Bloggers Scrapbook blog.

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.

I just created a completely customized blogger theme for someone blogging about money saving tips. You can view this Money Matters blog by clicking here. My design was based around a vector image of a woman shopping that I purchased from istock. (As a note, your designs should always be based around one theme or element that ties the design together and sets your design apart from others). The rest of the graphics and design are my own including the signature dollar sign circle graphic.

Other edits and changes I did to this blog are the following:

1. Created and added a favicon to match the site
2. Created and added post dividers
3. Created and added a customized About Me Widget which includes an original graphic that links back to the home page of the site.
4. Edited the footer copyright text so that it includes all of my desired links as well as a Contact button that links to an email address.
5. Added a couple of advertisement graphics and text to the side bar.
6. Added Google AdSense to the bottom of the site (I’m still waiting for it to show up. I might end up having to remove or tweak that part slightly).
7. Added pages according to labels
8. Removed the Date Header from the posts so that the date only appears with my other meta data icons below the header instead of below and above the header.

This blog was also uploaded manually for those of you using Artisteer and still a little nervous about doing this. Grant it, it is a little tedious, but all I did was the following:

1. Exported my design as a folder
2. Opened the XML file in Notepad
3. Saved all of the images to Picasa
4. Edited the XML by changing the image urls to match the actual image locations. (All you need to do is open up the correct images in your web album, right click on an image, and copy and paste the image location to your xml doc.)
5. Deleted the current template HTML in blogger (I first saved it just in case).
6. Pasted the new edited XML file with the correct image urls into blogger. (Make sure that you select Expand Widget Templates first).
7. Saved my new template, and there you go!

A couple of notes on this: Make sure to click on each image individually in your Web Album. If you right click on the thumbnail for the image location, you’ll be getting that smaller sized image instead of the full size that you’ll need. Also, note that you will need to replace the url for each image in two separate places each.

Let me know if you are interested in your own customized Blogger or Wordpress theme, and I’d be happy to discuss options and pricing with you.