My approach was to make the dog look tough, but not necessarily overtly mean.

I just submitted this to the client this morning for review so we’ll see if he would like to see any changes.

Update (11/17/2011): Here is the final version, the only changes the client requested were to add spikes to the collar and commented that the bone looked too pristine. Since these logos are reproduced in rubber and adhered to the tire’s sidewall, I decided that it was best to remove the gradient from the text.

But there was always one big issue. Almost every time, people reviewing the screens would get caught up on the look of these concepts and it was never easy to remind them that we weren’t looking at these screens to get an idea of how the final piece of software was going to look but as a concept of the workflow.

Since this approach made changes difficult on both ends it was time to search for another way. We also needed a method that allowed analysts to make changes and Illustrator definitely didn’t fit for that need. After reviewing a few trials of prototyping applications I finally settled on Balsamiq. It’s not perfect and there are a few issues I have with it but for the price and ease of use it stood out to me.

The beauty of Balsamiq is the hand-drawn look similar to what you might see if these were mocked up on a whiteboard. This definitely keeps people from assuming they’re looking at the final product and keeps the focus on elements and placement.

Balsamiq allows you to link screens together to show workflow and export to an interactive PDF. UI elements can be taken from a built in library and there are also commuity generated components which I have yet to have a need for so I can’t comment on them.

I find Balsamiq is great for showing what is possible for the final product without the issue of people getting caught up on a look and feel that isn’t necessarily what the final will look like.

A few problems I have with it are:

1) Large projects can quickly get complicated to edit. If I need to change the name on a button in a screen that appears in a few different variations, I need to go through one by one and change it. One work around I’ve found is to group all the elements in the first screen and if a change needs to be made I can change it once and then copy & paste the whole group when I need to. This works, but it’s still a pain, if Balsamiq supported masters or backgrounds this may no longer be an issue.

2) I wish Balsamiq supported layers. In Illustrator if I wanted to show a pop-up over a screen I could just create a layer for the pop-up and leave the main screen on the layer below it. It’s also nice if you want to show a drop down menu in various states to just put it on another layer instead of having to show this in two separate screens.

3) Each screen saves as a separate file which adds to possible confusion when your project folder eventually looks like this:

You can have multiple screens open in the interface and easily switch between them with tabs,

Overall though, I think Balsamiq is a great tool for rapid wire framing that allows everyone to forget about what the project might look like and allows them to focus on how it will work and somehow it’s very *fun* to use. For smaller projects I recommend checking it out.

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 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 next to it. 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 about 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.

Original Jumble Bugs Logo

I honestly thought that original logo was pretty decent, I loved the idea of the little eyes in the letters but I agreed that it could use some color and further customization. I started out with a “sketch” in Illustrator using colors from her website as a starting color palette. Most of my time to this point was spent on the word “JUMBLE” and not so much on “BUGS” but I sent it off to get some feedback to make sure I was headed in a favorable direction.

She liked the direction and had some great and detailed feedback on what else she’s like to see. I continued to work on the logo and after a few more iterations we finally ended up with the logo you see below. If only every project could go this smoothly, she got a logo she’s really happy with and my kids each got a couple of her amazing and unique creations.

Here’s how it looks implemented into her website, if you check out the actual site you’ll notice a very lively header where the image behind the logo changes from a sun to the rainbow pictures and then to a moon. I think the new logo looks great on all three.

Once your artwork is complete follow these steps. Shutterstock requires both an EPS file and a JPEG preview file.

Step 1

It’s a good idea to not have any art work hanging off the artboard, if you have some that extends, draw a box that matches your artboard, select the box AND the piece that’s extending past it (grouping the piece is a good idea) and then right clicking and selecting MAKE CLIPPING MASK. Do this for any groups of images that extend past the art board.

Step 2

To clean things up, you should get rid of any color swatches you’re not using. Click the drop menu in the Swatches palette and then click “Select All Unused” then click the trash can to get rid of them.

Step 3

Now you want to make sure all your fonts are outlined. This is a simple one. Press CMD + A to select All, then “Create Outlines”.

Step 4

Now you need to save your file as an Illustrator 8 or 10 EPS file to ensure backward compatibility with older versions of Illustrator. File > Save AS  Name it and press “Save” to get the following diaglogue box. Just to be safe I always save as Illustrator 8 and leave the defaulted check boxes as they are.

Step 5

Now you need to make a JPG preview. To do this, I usually open the EPS file up in Photoshop. Hit Image > Image size and then change longest dimension to 500 the other dimension if constrained should follow suit. They like you to keep the preview image close to 500 x 400 pixels. The names for both files should be identical except for the extension. Ex: hardware_black.eps and hardware_black.jpg.

Step 6

Now you’re ready to upload your images. You can use Shutterstocks browser plugin, I prefer to use their FTP. I use the free FTP client called Filezilla (Google it).

Fire up Filezilla and put ftp.shutterstock.com in the ftp host: field.

Login with your email address and password associated with your Shutterstock contributor account and upload your files.

When you’re done, go to  submitted photos to keyword, categorize, upload any necessary releases, and submit the photos for final approval by our staff.

That’s it!

I like Joomla! quite a bit and use it for my companies website without any problems, but it seems to run pretty slow on my hosting especially on my Portfolio page where I have a lot going on but that could just be the way I have it set up. Time will tell if using WordPress is a better experience.

So bear with me, this new site is still under construction and my portfolio is currently down. If you would like to view my work in the meantime you can visit my previous site here.