g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Kidney Disease
Today in History
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

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.

Add Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop to Twitter Add Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop to Facebook Add Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop to MySpace Add Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop to Del.icio.us Digg Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop Add Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop to Yahoo My Web Add Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop to Google Bookmarks Add Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop to Stumbleupon Add Adding+Text+to+a+Predesigned+Web+Logo+in+Photoshop to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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.


g features
Moodboards for Web Designers lynda.com

Fixed Layout eBook Options

Calendar Wizard for InDesign

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor