I’m currently working on a project where I want to use a grayscale photo of a keyboard as a screened background image. This background will be used on various large scale banners and poster at an upcoming trade show.

The image I’m starting out with only really shows one key and I want to “zoom out” a bit more to expose more of the keyboard.

I’m going to start by opening my stock photo (right) in Photoshop. Since my photo is defaulted to a “Background” in my layers palette, I need to first make it a normal layer by right clicking the background layer and selecting “Layer From Background” from the menu.

Now my stock photo is on it’s own layer, but I still want to have a background to use for editing purposes (more on that later) so I’m going to add a layer and name it “BG”.

I want my finished image to be roughly 2 1/2 times lager on each dimension so my next step is to increase the size of my canvas. By clicking on Image –> Canvas Size (alt+ctrl+C) and I’ll bump the dimensions up as I see fit, in this case I’m checking the bottom right corner as my anchor so that when the canvas grows, my image stays in the bottom right.

Whenever I can, I always like to have my original photo to easily go back to should I make a mistake so I’m going to copy the background layer by right clicking and selecting “Duplicate Layer” or you can drag the layer to the page icon at the bottom of the layers palette.

As you can see I now have one full key with the shopping cart image and 3 parts of other keys. I’m going to start by filling in the key to the left. I begin by making another copy of my original layer. To make all the edges blend easier I’m going to use my eraser with a really fuzzy edge and erase the hard edges of this layer. I usually like to have the center of the brush on the edge, put the opacity at 100% and by using the shift key to constrain my movements to 90 degrees and go over each side.

Next I’m going to set the layers opacity to something like 75% and try to position it so that the key lines up over the next key. The reason I drop the opacity is just so I can see where I’m  going. Once it’s lined up I’ll turn it back up to 100%. Now, I don’t really want 2 shopping cart keys so I need to get rid of the one on the new key. There are several ways to do this, but I’m going to use the clone stamp tool. Begin by finding a good area on the key that’s just white and while pressing ALT click the area to sample it. Now use the stamp tool to paint over the shopping cart. I’m doing this on the same layer but you can use a different one if you want. I ended up sampling various places on the key to get my results, your mileage may vary.

Okay now it’s time to fill in the space on that key. I did this by using the lasso and grabbing a similar area on the key to the right of it, pasting it in and then using the eraser to feather out the edges. Different photos will need different techniques.

From there it’s just a matter of using the key you just made to make more keys. I’m going to now make a row of keys in front of the row I just worked on. I’ll make a copy of the layer we were just working on. For this row I’m going to make the keys about 50% larger than the row we just did. Press CTRL+T to transform and hold the shift button as you resize it by dragging out one of the corners. Next I’ll move it down and line it up with the sliver of the key you can see on that row.

Now to do a row above the original row. Same story as above, I’ll make a copy but this time I’m going to transform it and make it smaller and line it up the best I can with the row above. This row required a lot more finesse with the eraser, a brush and the clone stamp. I can’t really tell you how to get things to look realistic, you’ll just have to work on your technique.

  From this point it’s just a matter of filling in the blanks. If I have a transparent chunk between parts of the images, I like to use the BG layer discussed above to sample the color next to it and fill it in.

Now that my background image is complete. I plan to use Illustrator to put my banners and posters together.

I've been wanting to set up a blog for awhile now, mostly just for my own reference but if one of my posts helps a fellow designer out then that can't hurt anybody right? I can't help you with installing blogengine to your hosting site because I took the lazy route and let someone more qualified set it up for me but I can tell you how to modify a theme if you're interested. This tutorial is mostly going to help those of us who are a little less technical but you'll need to know how to access your FTP and I wanted a custom look to my theme, but there is no way I wanted to start from scratch.

First step is to find a theme with a layout that closely fits your needs, there are many to choose from so take your time and find one that works best for you. Try not to pay too much attention to the colors or imagery, you're going to change all that. Once I found the theme that would work best for me, I grabbed the folder containing it from my hosting using the free FTP client Filezilla so I had a copy on my local.

At this point I just renamed the folder to something else, but you might want to make a copy just in case you mess up and need to replace a file with the original. I then opened it up and looked around for something to break. It didn't take too much poking around to find what I needed. The main things you're going to be modifying are the styles.css file (a working knowledge of CSS is going to come in really handy here), possibly thesite.master file and the contents of the images folder (shown below).

From here I found the images I wanted to modify.  Using Photoshop I changed the header, the footer and the background pattern. As you can see the theme I chose was pretty light on graphics.

When I was finished changing the images, I uploaded the whole folder to the "themes" folder on my FTP, selected the theme from the Settings menu. The first thing I noticed was just what I was expecting, some of the font colors look a little off. This is where it may get more complex depending on how comfortable you are tweaking CSS.

Luckily the theme I started with had a pretty clean CSS file. I knew I wanted to make a background pattern so I created that and saved it as bg_pattern.png to my "images" folder. I opened the CSS file and modified the body tag to reference the background image using Dreamweaver. You can use notepad or whatever else you like.

From here I wanted to change the font colors and it was just a lot of trial and error finding the right styles in the CSS and changing their hex colors to something that matched my new look. I'd make a change or two, upload the new CSS, refresh the page and repeat as needed until I had the results I was looking for. I did have the firebug extension installed in Firefox which made things a lot easier to track down. You'll need some patience at this point.

The last thing I did was to open up the site.master file and edited the footer text. I'm sure I'll poke around in it a little more until things are fine tuned, but it only took an hour or two and I have a nice "custom" theme to match my other website.

I still find it interesting that Photoshop CS4 cannot natively save out a .ico file for use such as a favicon. In case you are unaware, the little custom icon that sits next to a websites URL is called a favicon or favorite icon. They are very small, as in 16 x 16 pixels and can be a challenge to make them look good if you’re working with an image having much detail.

Download the Plugin
Saving them out takes just a couple extra steps. I found a nice and easy pluging from Telegraphics. Download the correct version for your operating system. Follow the instructions on where to put the file. Restart Photoshop and the option to save as an .ico format will now appear in the SAVE AS dialog.

Create Your Icon
Next, create your favicon image with the 16×16 pixel dimensions in Photoshop. Since this is a very small canvas, you’ll probably want to cut down on the detail.

Saving and Uploading
When you’re happy with your image save it with the name “favicon.ico”. T ake the saved file and upload it to the root of your website or the same place your index.html file is located. Most browsers should be able to find the file automatically, but I’ve found that it can take awhile to show up even after your clear your browsers cache and refresh.

Other broswers might have a harder time, to help them you can try putting <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”> in the head of each page you want the favicon to show up on.