Creating a Logo in Photoshop

A logo is a simple, clean graphic that can be used to create a "brand identity" for your site. A classic logo is the Nike "swoosh." A logo might be a special shape or a variation on your initials. A logo should not have too many colors and should not be too complicated. You should be able to shrink it to the size of a postage stamp and have it be recognizable.

othello logo

To the right is a logo I created for an Othello site. It has a green square with a white Othello chip in front of it. The steps I used to create this logo were.

  1. Open a test file, which I called o2, which I made 200 pixels by 200 pixels.
  2. Click on the foreground color and select green.
  3. Click on the rectangle tool (below the text tool) and select a rectangle. Draw the rectangle while holding down the shift key, in order to create a square. Because the foreground color is selected as green, this creates a green square.
  4. Click on span class = "code">layer/new/layer and check the box marked "group with previous layer." This will allow me to draw on top of the green box.
  5. Change the foreground color to white.
  6. Click on the rectangle tool and change it to an ellipse tool. Up on the tool bar, there is a little arrow next to the ellipse tool. This leads to a drop-down menu where I can specify a circle.
  7. Using the ellipse (circle) tool, put a white circle onto the green square.
  8. Now, I want to make the circle look more like an Othello disc. I go to layer/layer style/drop shadow and add a drop shadow. Then, I go to layer/layer style/bevel and emboss and add an Inner Bevel and check "contour."
  9. Finally, I save the file o2 to my local directory by going to File/save for web/. When it lets me choose color options, I choose Windows system. It creates a file called o2.gif.
  10. To preview the file, I can go to Internet Explorer and open the file o2.gif.
  11. To put the logo onto your web site, you need to upload it into your images directory. Then, you can put it on an HTML page by adding code like this:
    <img src = "/images/o2.gif" alt = "Othello logo">

For your logo, you may wish to use custom shapes, which can be found as an option in the rectangle tool. You may want to use the text tool. You may want to use the paint brush tool--note that after you select the paint brush tool, a "brush" item will appear on the menu bar at the top, and you can pick your brush size and style.

You may wish to experiment with layer styles and image effects. You can create distortion, shadows, and other effects.

Experiment!

fantasy football

Here is an experiment that did not work out so well. I tried to create a logo for Fantasy Football. The idea was to draw a cloud, like a thought balloon. Then I added a layer that was a brown oval. Then to that layer I added another layer, with the white stripes and black laces.