www.reflectingthedesigner.com

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:

• Created and added a favicon to match the site
• Created and added post dividers
• Created and added a customized About Me Widget which includes an original graphic that links back to the home page of the site.
• 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.
• Added a couple of advertisement graphics and text to the side bar.
• 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).
• Added pages according to labels
• 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:

• Exported my design as a folder
• Opened the XML file in Notepad
• Saved all of the images to Picasa
• 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.)
• Deleted the current template HTML in blogger (I first saved it just in case).
• Pasted the new edited XML file with the correct image urls into blogger. (Make sure that you select Expand Widget Templates first).
• 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.

OK, so I somehow managed to fix the issue I had with my image showing up in IE. After scouring internet forums, I discovered that this is a common issue with IE users, and there are multiple potential issues at work. I made sure of a few common ones first, which solve the problem completely for most people. Those issues are the following:

1. Make sure that your permissions settings in your ftp folder are set correctly. Not only does the folder that contains your images (such as “wp-content” or “images” or wherever your images are stored) but also the image itself needs to be set to 755.
2. Make sure all of your images are RGB and not CMYK. (This seemed to be the issue for one guy and it resolved his problem.)
3. Make sure that your image is the appropriate dimensions for your sidebar in IE (or wherever else it is displayed).

Now, I first fixed all of these, but I was still frustrated to see that my image was not showing up. So, I played with the code itself in my Text Widget. Now, keep in mind that my images have always appeared just fine using Firefox. I first tried removing the code I placed at the beginning to link the image to one of my pages. After doing that, my image magically appeared in IE. I was still a little surprised that the link would be the issue as I have a linked images using the same code (or so I thought) in my blogspot blog. So, I copied the code from my blogspot blog image, and found that it has an extra /> immediately before the closing </a>.

Finally, success at last! When I edited the code, I was able to put a working link back into my image code and it appears just fine in both IE and Firefox. Apparently the problem had something to do with how my blogspot blog transformed the code in a way that IE understands. So, if you are having this issue, simply copy and paste code from an existing, working image and just replace the urls. If you don’t have one to do that with, try the above mentioned techniques as well as the extra code snippet I also mentioned above, and you should be set.

As a note, your permissions will definitely need to be set correctly regardless in order to view your images. Now I just need to figure out how to fix the couple of images that are not showing up in my Gallery. I’m hoping a simple delete and re-upload will fix those issues.

Please let me know if this post was a help or if you have other related questions.

I did a post a couple of months ago on this topic when I was working on one picture of a set for a customer. I’ve now finished the other picture which is of his precious baby. This one is done in black and white to match the other, and also has a deep vignette. It will also be printed onto a gallery wrap canvas, so most of the dark edge will be wrapped around the sides and top of the picture.

This is an example of how you can take a small and pixelled photo and turn it into wall art. There are a few things to remember, though.

1. Up-size your photo using Photoshop’s Actions. By only up-sizing the image in 10% increments you will greatly reduce the overly pixeled look of the final product. (Let me know if you are not sure of how to do this)
2. Create a new layer on top of the layer with the photo, and do all of your editing on that layer so that if/when you make a mistake you don’t have to start from scratch.
3. Match colors found in the original (you may want to adjust the color, brightness, hue, and/or contrast of the original first) and use appropriate sized paint brushes with a very low opacity and with no hardness on the edges to “paint” over the original smoothing out edges and creating the desired effect.
4. The easiest way to add the vignette without affecting either of the photo layers is to add a new layer and fill it with the color you want your border to be. Then, simply using an eraser with a low opacity and no hardness, erase away the middle to reveal the picture beneath.

That’s the simple version. Of course, depending upon how much editing needs to be done will depend upon how long it takes to finish your picture. It can be a slow and tedious project, but it is well worth the effort. Click on the picture to see both the originals and edited versions located in my Photo Gallery.

Ok, so I’ve been googling this question for a while and getting absolutely no where. Finally, I just figured out how to do it myself, and I was shocked at how easy it was and that I couldn’t get an answer anywhere online. So, here’s all you need to do.

1. Go to the Editor and locate the Archive php toward the top of the right hand column.
2. Go inside, and look for the following code <h2 class=”pagetitle”><?php printf(__(Archive for the ‘&#8216;%s&#8217; Category’, ‘kubrick’), single_cat_title(”, false)); ?></h2>
3. If you want no text at all to appear, simply delete that line of code and Voila! You have removed it.
4. If you want only the title of the category to appear, as I have my site set to, simply delete only the part that begins with the underscore up to  single_cat_title. Keep that part and change the (“,false)); to (“,true)); so, your code should now look like the following: <h2 class=”pagetitle”><?php printf(single_cat_title(”,true)); ?></h2>
5. Note: you can also change the size of the title by changing the heading tags surrounding the code <h2> and </h2> to a different number.

I’m learning tons about the backend editing of WordPress and hope to be able to design some awesome complete websites using WordPress alone. I’m actually working on a site right now for a church, and all of the changes should be finished soon. They’ll have to put in the content, of course, but the theme and layout will be ready for them.

Stay tuned for other great tips!

Adding a Graphic Signature to Your Blogspot Blog

I just got a blogger account and have been playing around with it to give myself more options. I really like it a lot! Grant it, you don’t have nearly the flexibility or options that you have in WordPress, but for a freely hosted blog, it’s really got some sweet stuff! You can check out the blogspot I designed by clicking here.

This is the post I just posted on that site. This is the easiest way to add a signature with an image onto your blog. Of course, this would preclude that you already have a graphic with your image and signature that you want to use or have the ability to make one. (by the way, you easily make one in Paint which is pre-installed on most computers even if you don’t have any other type of editing program. Just make sure to save your image in the size that you want it to appear and as a PNG, or GIF if you don’t have a solid background on your blog, or make sure that the background color matches your article background.

There are two ways to do this, but I highly recommend the second way. Once you have an image, you’ll need to save it to the web. You can always just insert it into a blog post. Make sure to click on Large for the size, and click on either Right or Left depending upon where on the post you want the signature to appear. Now, preview your post and right click on the image. Click on “Copy Image Location.” Make sure to paste that to a notepad document right away and leave that doc. open. YOU WILL NEED THIS SOON! The First Way

The first way is to simply add a little bit of code into your Post Template. You can find this by clicking on Settings, then Formatting on your Dashboard. At the bottom of the page, you’ll see a field that says Post Template. Simply copy and paste the following code into that box and replace (Your Signature URL) with the url you just pasted into the Notepad doc.

<img src=’YOUR SIGNATURE URL HERE’/></a>

*The Second Way (The Best Way)*

Ok, this is the best way, because if you’ve had your blog going for a long time, and you’re just now getting around to a signature, this will automatically put your signature graphic into all of your previous posts! Yay! Also, it helps your blog load faster.

1. Go to your Dashboard and click on Layout, then click on Edit HTML. Make sure to click Expand Widget Templates and first make a copy of the entire thing and save it just in case. Next, hit Ctrl+F and find the following code: <data:post.body/> or it might be <p><data:post.body/></p>
2. Directly after that code, paste this code:  <p><div align=’left’><img src=’YOUR SIGNATURE IMAGE URL HERE’/></div></p>
3. Simply replace the words (Your signature image url here) with the url you copied onto the Notepad doc. and voila, your’e signature will now magically appear on all posts of your blog as well as on every new post you make. To change the graphic, simply put in the new url of your new image. If you want to make your image a button that links to your email address, just add the following code directly before <img src…but don’t leave any spaces. <a href=mailto:YOUREMAILADDRESS”>

Adding a Graphic Signature to Your WordPress Blog

For WordPress, it’s not quite as simple to manually add a signature to each post, but there are a few options.

1. Manually add the signature to each post. This is the easiest thing to do, although, if you’ve had a blog for a while, you will either have to manually edit old posts, or just not worry about the signature in the older ones.
   • Simply create your graphic as a png or gif file and save it to your site.
   • In a post, add that graphic as an image to the bottom of the post (like you would add any other image)
   • In the HTML setting, just copy the code and save to use on other posts or pages that you want.
2. Add a signature to each single post (in other words, your signature will only appear on individual posts that are clicked on, but not on each post listed on the main blog page).
   • Simply copy the following code into a Notepad document and replace the img url with the url to your hosted image and replace the link url to the link you’d like your image to…well, link to. <a href=”THE URL YOU WANT THE IMAGE TO LINKE TO”><img src=”THE URL OF YOUR IMAGE LOCATION” alt=”" width=”102″ height=”46″ /></a>
   • Save this notepad file, and use it to copy and paste into the end of each new post (make sure you click on HTML).
3. Add the signature plugin from WordPress. I have not tried this out, but it’s gotten good reviews. I just didn’t want to add one more plugin and would have preferred to have found a way to manually enter code that would make the graphic appear automatically on each of my previous posts and future posts. Oh well. The nice part about copying the simple code over each time onto a post, though, is that you can choose when you add your signature more easily. The great part about the plugin is that it automatically inserts the signature into all of your posts past, present, and future.

Please leave a comment to let me know if this was helpful.

I’m currently working on a project that will hopefully be a very special Christmas gift for someone I’ve never met. A man serving in our armed forces who is deployed right now wanted to do something very special for his wife for Christmas, and he enlisted my help in turning a couple of small snapshots into artwork. What a sweetheart! He’s going to get major brownie points for planning this far ahead! I’ve completed one of the pictures (seen here) and am now working on the second which will be a full color picture of their precious baby.

This is what I like to call digital painting. The original pictures are very low resolution and extremely pixeled. In Photoshop, I upsized these pictures, cropped them to the desired dimensions, than I created a new layer above the photo and “painted” over the first layer giving it the appearance of a handpainted picture. This will be printed on gallery wrapped canvas, and I wish I could see the final product, but I’ll have it shipped directly to my client. I LOVE what a photo looks like printed on canvas, and it automatically creates such a great piece of artwork that doesn’t even need a frame.

Let me know if you are interested in a digital painting of your own shapshot or any other photo editing or design needs. Click on the images below to see larger versions.

Some good friends of mine were just married in December, and while they had a beautiful pictures taken, Becky wasn’t sure that she wanted to decorate the house with a Christmas theme. So, she asked if I would edit them and change the backgrounds on some of her favorite professional pictures and snapshots. Thankfully she purchased all of the rights to her professional shots. As a note if you are getting married, MAKE SURE TO PURCHASE THE RIGHTS TO YOUR PICTURES!!! That way, you can edit, print, and use them however you like.

Here is a sampling of what I did. I also added full black and white and sepia versions of both edits, too. Please contact me at info@reflectingthedesigner.com if you are interested in professional and affordable photo editing with a quick turn around time.

This is another example of how you can turn a simple snapshot into a portrait style picture with some edits in Photoshop. This took me less than 30 minutes to complete. The beauty of Photoshop is that you don’t have to pay for expensive Photo Shoots or worry about the time or hassle to set up an appointment for family portraits.

While this is an extremely simple example, the possibilities for edits are really endless. You can have different backgrounds, superimposed images, artistic effects, color changes and blending, and you can fix those little issues that need to be fixed. You’ll notice that my beautiful mother got a “trim” of her hair in the edited version since she hadn’t had a chance to get a hair cut before the photo was taken.

A Few Tips and Tricks When Editing in Photoshop

• If you are going to add a different background, make sure that the light is coming from the same direction in the new background as it is in the original photo you are adding to the foreground.
• Make sure to think about the angle that the picture was taken from if you are going to add a scenery background. For example, if a picture of a field or trees was taken from above looking down at an angle, you won’t be able to add in a picture of your subject taken straight at eye level.
• Make sure that the saturation and brightness of the background matches the saturation and brightness of the original photo, or edit the photo to match. Always do this first, even if you are going to turn the photo into a black and white or sepia image.
• Blurring the background is the easiest way to bring out the subject that you want to highlight.
• When you have finished your edits, make sure adjust the canvas size to common print sizes (4×6, 5×7, 8×10).

Please, let me know if you are interested in photo edits no matter how simple or complex. I’d be happy to discuss design options and prices with you, and most edits can be finished and back to you within a couple of days time.

.gallery { margin: auto; } .gallery-item { float: left; margin-top: 10px; text-align: center; width: 50%; } .gallery img { border: 2px solid #cfcfcf; } .gallery-caption { margin-left: 0; }