Images + Text - Logo Lesson

This lesson deals with combining images and text. To create the logos shown on this page does not require any advanced Photoshop techniques. Simply place the text and images on layers and then experiment with the layout. The trick to creating these types of images is selecting just the "right" image and then manipulating it to the size, shape, and color you need.

Before you begin I would like to offer some "friendly advice" regarding the selection of clip art images which will be part of a logo.

• Do not spend over 1 hour looking for the right clip art image
• Be prepared to have to spend a while resizing and cleaning up images
• Simplify clip art that is complex and detailed
• Select an image which represents the product or philosophy of the company
• Edit the images in RGB even though they may have been downloaded as indexed GIFs and will be saved in that format

Here are some logos which have incorporated a shape or clip art into a logo.

The getsmart logo uses simple exclamation marks to add interest to the logo. The use of 2 strong colors for the text also helps define the words and reinforce the company colors.

This geometric shape combines the images of a piece of paper and the loop, reinforcing the corporate name. In this example the weight of the text is used to separate the words and add a design element to the logo.

Snapfish uses a very simple silhouette of a fish, and then adds bubbles to make the image more interesting. At the actual Web site the bubbles are animated.

This is the example I created which uses clip art and text

Before we begin let me clarify what I mean by the term "image" in a logo. Simple, clean, clip art graphics are best for a logo. A complicated line drawing or photo will be so busy that is distracts from the logo and will not resize well. I will be creating a logo for a lumber company and so I went looking for a redwood tree. Here is what I found.

                       

The first 3 images are too detailed, when I resize them they will turn into a mushy mess of pixels. The 4th and 5th images have potential so I download those 2.

I opened a new Photoshop file width 250 hight 100. I choose a wide sans serif font (Gill Sans Ultra bold) size 72pt, and a color which represents wood (CC9966). I typed in ERS.

Next I opened each tree file, made a copy of the image, and used the magic wand to select the white background and remove it. You want to work with clip art which is on a transparent background.

I resized each image so it was 50% of the original size. Here is how they looked after being resized.

     

At this point I am having doubts about the tree on the left. When it was scaled I lost the jagged edge detailing I had liked so much. I place each tree on its own layer and use the color overlay style to turn the trees green. Here is what the logo looks like with each tree.

     

I decide to eliminate the triangle-shaped tree and proceed with the other tree. I like the shapes created by the multi-limbed tree as it overlays the letter E. Before I finalize the logo I decide to place a copy of the tree which is larger (scaled at 705 instead of 50%). Here are the 2 looks:

     



I prefer the more dramatic effect of the larger tree, but notice that there are a few random pixels which need to be cleaned up. This image came to me off the Web as a JPEG, although it should have been saved as a GIF. When the image was small the pixel distortion did not show, now it does. I go in with the magnifying tool and the block eraser and clean up the tree.

I decide to erase the base of the tree and just let the tree trunk display. I add the name of the company in a darker green, (Gill Sans, 18pt) Here is the finished logo.

To view this file as a Photoshop document access the CD > CIS 58.53B Advanced Class > PSD > logo > logo-tree.psd