Yes, when you are thinking at logos, put on the top of needs the usability. On web design you need to think at usability like a face of accessibility, but when is talk about corporate identity, this affect just the client use, the owner of logo. Along with the final logo images, you should be able to provide the resource file of logo, for future editing. A logo resource isn’t a png or a big resolution image (like many clients discover that after a while). Depending on how your contract was negotiated, the client can pay an extra amount for full logo resources. Paths are the heart of logos, because those give you possibilities to engrave a logo on a pencil or to make a billboard on the block without to lose quality.

In this tutorial you can learn how to use the Path Tool and shapes to make resizable logos (path / shape) in Adobe Photoshop. Because of monogram logo tutorial done in Adobe Illustrator i had many visitors coming from search engines looking after “monogram logo” keyword, what show that are a many peoples around looking for monogram ideas. So, let’s make another monogram logo, but with a different software and style.

For this tutorial i will use an idea developed for a client some time ago. Instead his original company name, use now a generic Clock Starter company name, from where i isolate the CS characters for monogram. The CS letters will incorporate a clock look. To achieve that, i am using simple paths like circles or rectangles with “substract” and “add to area” options.

Create excellent web designs using testking 646-563 tutorials and expert testking JN0-331 videos. Our testking 642-426 training offer best web design solutions.

For beginning, start in your Photoshop a new document 640 x 480 px. Set the background color to #202020. Add a noise effect as it is shown bellow:

Make a new layer and apply a soft brush with 675px diameter, opacity to 76% and a light grey color. Then, set the blending mode of the layer to “screen”. You can play here with layer opacity. Mine is set at 70%.

Your background should look like in this image:

Before to start the play with paths, make 2 guides on horizontal and vertical positioned at 50%, what mean the perfect middle of the work area.

Now, select the Ellipse Tool and draw a shape of circle with 375px diameter and #505050 like color.

Select the “substract from shape area” option for shape, and draw another circle with 319px diameter.

Align the circles. To do that, use the Path Selection Tool (A – same key like in Illustrator), and select both shapes while you press the shift key. Align the circles to center.

Now, using the RectangleTool, with same “substract” option activated, draw a rectangle with 28px wide. Use the Path Selection Tool to move it. Place it in left of the vertical guide (use the snap). Transform the rectangle (Ctrl+T) and make it like in this image:

At this moment, the left side is our “C” letter. For “S”, we will use indicators (3 o’clock) to transform the right side of the clock in a “S” shape. Select the left rectangle. Copy / paste (Ctrl+C / Ctrl + V). Move the new pasted rectangle (after paste will be placed exact over the source) to the right of the vertical guide. Select from top bar “add to shape area”. Make the rectangle to indicate 12 hour. The bottom of rectangle will snap with the horizontal guide. The top of rectangle will not exceed the area or the circle.

Copy the 12 hour indicator, rotate and place it under the horizontal guide, on right side of the vertical guide (3 o’clock).

The right side of the clock look now like a 9 instead of “S”. Copy the 3 hour indicator and place it above the horizontal guide. Select “substract” option from top bar icon and resize it on length.

The final monogram shape should look now like this:

Look nice but is too flat. Follow this screens and apply those layer styles:

Your monogram logo look now like here:

See, wasn’t that hard to make a clock logo monogram. Just keep in mind that for very small logo applications, Adobe Photoshop isn’t ideal. For that kind of use, exist Illustrator or Corel Draw where you can transform and the texts in curves. But, like i said at beginning, for web design use logos, Photoshop is doing a great job.

Published on: December 1st in Tutorials .
Post tags: adobe, circle, clock, Design, graphic, identity, illustrator, logo, monogram, paths, photoshop, psd, rectangle, shape, tutorial