logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Moving From Photoshop to Illustrator - Layers

Creative Cloud Classroom with Mike McHugh

Adobe KnowHow Learning Center

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor