Internet Marketing Tools Part Four Graphics Basics
by Shelley Lowery
Graphic design is an intimidating subject for many Internet entrepreneurs. However, most of us must learn some basic design techniques in order to avoid the high costs of hiring a professional designer.
In order to create or edit your graphics, you'll need to invest in a good graphics-editing program. The most popular program used by Internet marketers is Paint Shop Pro. This powerful program is the only program you'll need to design professional looking graphics. You can download a free 30-day trial and register the software for only $99. http://www.jasc.com/
Image Formats
The most popular image formats used on the Internet are GIF and JPEG.
Graphic Interchange Format, better known as GIF, uses a maximum of 256 colors and is best suited for images such as logos, buttons and bullets.
GIF images can be saved in two different formats:
- 87
- 89a
The 89a format is the preferred GIF format, as it has the following benefits:
Transparency
Images saved in the 89a GIF format can have a transparent background. This will enable the canvas of an image to be transparent and enable the background to show through.
Interlacing
Images saved in the 89a GIF format can be saved as interlaced. This will enable your image to display as it is being loaded into a web page. The image will gradually become clearer as the page loads.
Animation
Images saved in the 89a GIF format can be used to create animated images. Animated images are simply several GIF images compiled into one GIF image file that loops. In order to create an animated image, you'll need a special editing program.
Joint Photographic Expert Group, better known as JPEG, is the best format for photographs. JPEG images can contain millions of colors and allow you to specify the degree of compression.
Although there are many graphics programs available on the Internet, this tutorial will focus on using Paint Shop Pro 7.01. If you are using a different version of Paint Shop Pro or another graphics program, the graphic tools mentioned below will not be located in the same places.
Editing Images
When working with images in Paint Shop Pro, you will have the ability to save your image in PSP format. This format will enable you to begin working on an image, save it in PSP format and finish the image at a later time. It will preserve all of your work without any changes.
If you would like to edit an image that has been previously saved in the GIF format, you must first increase the image's colors to 16 million. If you don't, your colors will be limited. Go to "Colors" - "Increase Color Depth"- "16 million colors (24 bit)" to increase your image's colors.
Resizing Images
If you'd like to resize an image in JPEG format, you can do so in one of two ways -- through your graphics program or within your HTML. You can resize your image within your HTML by changing the HEIGHT and WIDTH values. To retain your images original characteristics, make sure you adjust the height and the width equally. In other words, if your original image dimensions are 50x100 (width 50 and height 100), to reduce your image to one half the size, change the width to 25 and the height to 50.
If you'd like to resize an image in JPEG or GIF format, go to "Image" - "Resize" and select "Percentage of original." Type in your selection in the first box and click on "OK." There's no need to fill in the second box, as it will be filled in automatically. For example. If you would like to reduce your image to half the size it is now, type in 50. This number is telling the program that you'd like to reduce the image's size by 50%.
If you would like to increase your image's size, type in a number over 100. Your original image is considered to be 100%. If you would like to increase your image's size by 50%, type 150 in the first box.
Rotating Images
If you'd like to rotate an image, go to "Image" - "Rotate" and select your preferences.
When rotating an image, it may lose some of its clarity (become blurry). You can correct this problem by sharpening your image. Go to "Effects" - "Sharpen" - "Sharpen". If after sharpening your image it still appears a little blurry, simply sharpen it again.
Working With Text
If you would like to use text within your image, your first step will be to select your text color. The "Styles" boxes are located on the right hand side of your screen. The top box should be set to Null (off) and the bottom box should be set to Solid, which will look like a paintbrush. To change the style of each box, click on the black arrow and make your selection.
To change the text color, click in the center of the bottom box and select your preferred color. Your text will be displayed in the color within the bottom box.
If you would like to outline your text in a different color, click on the black arrow of the top box and select the paintbrush. Your text will be displayed in the color your bottom box contains and outlined in the color your top box contains.
Text Tool
Once you've selected your text color, click on the text tool on the left-hand side of your screen. This will launch your text window. Select your font and text size from the drop down menu and type in your text. Make sure you select Antialias and Floating then click "OK."
Antialias will smooth out all of the rough edges of your text and blend it in with your background color. You will use the Antialias setting with various graphic tools when designing your graphics, so it is important to remember its function.
You will now see your text with, what looks like, marching ants around it. If you'd like to move your text, click and hold your left mouse button directly over your text to drag it to your desired position. Try to center it as well as possible, but don't deselect it.
If you would like to rotate your text, now is the time to do it. Simply follow the same instructions (above) used to rotate an image.
If you make a change to your image and you're not satisfied with the outcome, you can undo your last change by going to "Edit" - "Undo." It will only undo the last thing you did.
Adding a Drop Shadow
Your next step will be to add a drop shadow effect. With your text still selected, go to "Effects" - "3D Effects" - "Drop Shadow." Your selected text will be displayed in the window. Try different settings until you achieve the effect you'd like. Click on OK. When you're satisfied with your text, right click on your mouse to set it.
Now that you have a basic understanding of graphics, take some time to learn some additional techniques. There are many free tutorials available on the Internet. Not only will it assist you in creating professional looking images, but it will also save you a great deal of money.
Copyright © Shelley Lowery 2002.
About the Author:
Shelley Lowery is the author of several successful ebooks including Web Design Mastery - An in-depth guide to professional web design. Ebook Starter - A Complete Ebook Design Kit, and eZines: A Complete Guide to Publishing for Profit. Subscribe to Etips and receive a free copy of her highly acclaimed ebook, "Killer Internet Marketing Strategies." http://www.web-source.net
You have permission to publish this article electronically, in print, in your ebook or on your web site, free of charge, as long as the author bylines are included.
Part Three
Part Five
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
More Website Marketing Articles
More By Developer Shed  developerWorks - FREE Tools!
|
<a href="http://zeus.developershed.com/shonuff.php?blackbird=3853&zoneid=442&source=&dest=http%3A%2F%2Fwww.ibm.com%2Fdeveloperworks%2Fspaces%2Fjazz%3FS_TACT%3D105AGY31%26S_CMP%3DDEVSHED&ismap="><img src="http://images.devshed.com/corp/img/news/jazz01.gif" alt="developerWorks Jazz space" align="left"></a>You've heard the buzz about Jazz... want to know more about it from a developer's perspective? Check out the Jazz space on developerWorks. This space is an up-to-date resource for developers, including technical information about Jazz and products built on Jazz, like Rational Team Concert Express. The Jazz space includes content from a wide variety of sources, including links, feeds, and comments from experts.
FREE! Go There Now!
| | | |
Learn field-tested SOA principles, methodology, technology and implementation from the global SOA market leader - in a new e-book by an IBM SOA expert. Written by IBM Certified SOA Solution Designer Bobby Woolf, "Exploring IBM SOA Technology & Practice" is the ultimate insider's guide to SOA - a PDF e-book packed cover to cover with IBM's specific advice on how to make your SOA implementation a success.
FREE! Go There Now!
| | | |
Achieving true agility is a never-ending effort. We will showcase how you can become agile incrementally, a few practices at the time.Which practices should any agile team strive to adopt? What additional practices should you consider based on your needs to scale? Adopting practices are however made much easier with the right tool support. What about if your tools adapt to your practices? We will take a look at how the Jazz technology can be leveraged to make your process change the behavior of your tools.
FREE! Go There Now!
| | | |
You probably have thousands of lines of COBOL code loaded with business intelligence and being used to run your business, along with an army of developers maintaining these applications. Learn how to prepare your applications and developers so you can keep that competitive edge and move to a service-oriented architecture with the IBM Rational Enterprise Modernization solutions. Replay is available for 9 months.
FREE! Go There Now!
| | | |
This whitepaper presents the benefits of successfully introducing static analysis into your organization using IBM Rational Software Analyzer. Additionally, it identifies some common pitfalls that can hinder the effective use of static analysis tooling as well as presents 10 simple strategies designed to help you quickly realize the value of static analysis using Rational Software Analyzer.
FREE! Go There Now!
| | | |
Visit IBM developerWorks to download a free trial version of WebSphere Business Modeler Advanced V6.1.1, IBM’s premier business process modeling and analysis tool for business users that offers process modeling, simulation, and analysis capabilities. IBM WebSphere Business Modeler helps you visualize, understand, and document business processes for continuous improvement.
FREE! Go There Now!
| | | |
Download a free trial version of IBM DB2 9.5 for Linux, UNIX, and Windows. DB2 9 is the result of a five-year development project that transformed traditional (static) database technology into an interactive data server that merges the high performance and ease of use of DB2 with the self-describing benefits of XML.
FREE! Go There Now!
| | | |
Visit IBM developerWorks to download a free trial of the Rational Host Access Transformation Services (HATS) Toolkit. The HATS toolkit provides a set of plug-ins for the IBM Rational Software Delivery Platform to help you easily extend your legacy applications. HATS makes your 3270 and 5250 applications available as HTML through the most popular Web browsers, while converting your host screens to a Web look and feel and it also enables you to develop new Web, portal, and rich-client applications.
FREE! Go There Now!
| | | |
Listen to this webcast to get an overview of Info 2.0 and a technical demo of how to quickly build an enterprise mashup. IBM's Info 2.0 technology leverages emerging Web 2.0 technologies such as mashups, feeds, AJAX, and JSON in order to simplify assembly of information using feeds and services. Come learn about the technical elements of Info 2.0 including the Feed Generation framework, Mashup Engine, and mashup assembly components. Learn how to pull information from databases, departmental information, and the Web to create mashups critical to your company’s success. We will also discuss best practices to help you get started.
FREE! Go There Now!
| | | |
Join this Rational Talks to You teleconference, to hear how Enterprise Generation Language (EGL) eliminates the need for tedious and error-prone low level coding, so developers can focus on business requirements. EGL extends the Rational software development platform with a simplified programming language that enables developers who have little or no experience with Java, Web technologies or Service Oriented Architecture, to create enterprise-class applications and services quickly and easily. It also allows developers who may have little or no mainframe programming experience to quickly create traditional mainframe components.
FREE! Go There Now!
| | | |
All FREE IBM® developerWorks Tools!
| |
