g
Printer Friendly Version

editor  
BellaOnline's Digital Art and Design Editor
 

Adding Text to a Predesigned Web Logo in Photoshop

There are many places on the web where you can purchase web graphics designed to be used with the popular DIY web site builders, such as DIYeStoresTM and Kinfolk Crafts. Once you have received your webset, if you are like me, you can't wait to put your name on your new logo graphic. This tutorial we show you how easy it is to do this in PhotoshopR.

  1. Open Photoshop.

  2. Click File Open to browse to your new logo graphic and double-click on the file to open it into the workspace.

  3. You will probably want to add your company name at the top of the logo design. Select the Horizontal Type tool from the Tools panel (looks like a T) and then click on the logo in the center of the empty top area. You will get a blinking cursor. Type your company name. Now that you have typed in your company name, drag your mouse over the name to select all the letters.

    First we need to format the text. Formatting text in Photoshop is very similar to MicrosoftR Word. First we will want to choose a typeface, called a font, and then set the style, size, alignment and color. At the top of the workspace is the Options Bar that has some controls that we will use for making our choices.

  4. The first drop-down list in the Options Bar is the font list. When you click on the small downward arrow, you get a preview list of fonts. Choose a font that you think will look good on your logo. A good choice for a logo is Arial.

  5. The second drop-down list in the Options Bar gives you your style choices. Depending on the font that you have chosen, you might have several choices including Regular, Italic, Bold and Bold Italic. Choose the one you like best.

  6. With the next drop-down list, you will set the size of the text. The best size to use will vary depending on the length of your company name and the font that you have chosen. Experiment a little here to find the best choice. For the Arial font, a size of 30 pt is a good choice.

  7. Our next task is to set the alignment of the text. You will see three small icons representing Left, Center and Right alignment. Because we clicked the Type tool in the center of the empty space, we will use the center alignment. Click on the Center icon.

  8. The last thing that we need to do is to choose a color for our text. Click on the color square next to the alignment icons to open the Select Text Color dialog box and choose a color. If your logo has a light background, you might want to use a dark color or black.

    Now we are ready to set all of our choices. On the right of the color square you will see a small checkmark. Click on this checkmark to set our text.

    If you want to add a tagline to your logo, repeat the steps above. You might want to place the tagline at the bottom of the design and reduce the size of the text to around 14 pt.

    That's all there is to customizing your new logo with your company name. Now we will save the file in a format that is ready for the web.

  9. From the Menubar, click File Save for Web and Devices. Set the Preset drop-down menu to JPEG or GIF, depending on the instructions that came with your webset, and click Save. You will want to keep the original name of the logo file. For example, if your original logo file was logo.psd, then your finished logo will be either logo.jpg or logo.gif.




Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor