WEB GRAPHICS © 2008
Web Graphics ? But is it Art?
"When the flush of a new-born sun fell first on Eden's green and gold,
Our father Adam sat under the Tree and scratched with a stick in the mould;
And the first rude sketch that the world had seen was joy to his mighty heart,
Till the Devil whispered behind the leaves, "It's pretty, but is it Art?"
from Rudyard Kipling's The Conundrum of the Workshops.
Graphics may have had their beginning as noted above, but based on all of the documentation, Graphics had their beginning way back with the Egyptians when ?Wall Graphics? and ?Tomb Graphics? were all the rage.
Leap forward to the present.
Humans tend to be visual creatures, and the Web reflects who we are. The Internet in its infancy was a text-only medium. Hard to imagine now, isn?t it? A bit like TV with captions, but no pictures or sounds!
Passionate visual creatures that we are, this situation soon changed with a vengeance! Along came the Web and the Web Browser, and suddenly the online world was teeming with graphics. Some of the graphics are useful and functional, while others are empty and sometimes just plain annoying. With just a little knowledge, you can make sure that all of your graphics fall into the useful and functional category.
Graphics are about more than a ?pretty picture? to a web page including its header, footer and subject matter. You will find graphics incorporated in more ways than you might at first realize. Guess what? All of your prayers have been answered with the timely arrival of this Web Graphics Report.
General Description
A presentation on a surface consisting of one or more of the following graphic elements: image, photograph, clipart, symbol, etc., resulting in the enhancement of the presentation.
When presented on a computer monitor in conjunction with the Internet, the presentation may be described as ?Graphics on the Web? or ?Web Graphics?.
The term Graphics refers to the Images themselves.
The use of text on an image or on a photo helps in defining the overall presentation.
Text only, especially when rendered with special effects, may be considered a form of Graphics,
thus the term Text Image.
Associated Terms
Some of the elements described below are often used interchangeably; in fact, each element could be defined as an Image.
Image ? A reproduction of a person or an object.
Photo/Picture ? Generated by a camera.
Clipart ? Ready-made element of printed or computerized graphic art that can be electronically copied.
Symbol ? A printed or written sign used to represent an operation or an element.
Background ? A Background may or may not be considered an element depending on how it is used.
Uses
Template ? A Template may identify a portion of a page or even a complete page layout by determining
where graphics and text are positioned on the page. Templates are sometimes defined by their use. A Template may be configured for a general use, but can be edited or reconfigured for a specific use.
Header ? A Header is used at the top of a web page, sales page, article, report, etc. It typically consists of one or more images and text.
Footer ? A Footer is similar to a Header, but used at the bottom of a page. It is usually less populated than the Header.
Banner ? A Banner is equivalent to a Header, and sometimes is used in place of a Header.
Logo ? A Logo is a reflection of a person or company. A Logo can be stand-alone with no background or may be placed on a Banner or Header. A Logo may also be Clipart.
Button ? A Button is typically used on a web page as a link to another page. Buttons usually contain text, are colored, and come in a variety of shapes. Another popular use is on a sales page for generating an action such as ?buy now?.
eCover (eBook Cover) ? Computer generated visual cover for an eBook using special software or special design techniques. Usually created in 3D.
Graphics Software
Adobe ? Versions in active use ? Photoshop 5.0, 6.0, 7.0 (released in 2002), Elements 4.0 (released in 2005), Elements 5.0, Elements 6.0, CS (could be called Photoshop 8.0), CS2 & CS3 (most recent). All are capable of ?Actions? except early versions of Elements, and possibly early versions of Photoshop 5.0. Photoshop 7.0 is very popular and widely used. It is by far the most expensive.
I use Photoshop 7.0 on a limited basis mainly to create eCovers using the ?Actions? mode and for editing eCover Templates and website Headers and Footers.. I also do work using layers. It is such great software that it is fun both learning and doing specific applications. There are literally hundreds of free tutorials on the Internet covering a variety of applications. There are sources where an OEM version of Photoshop 7.0 can be purchased for under $75. I have one.
Although not specifically software, there are two outstanding manuals titled ?Photoshop 7.0 Killer Tips? and ?Photoshop Productivity Toolkit? (includes a CD). These two are a MUST.
Corel Paint Shop Pro - I have it installed, but use it only minimally. One feature this software has is the ability to remove backgrounds from images (make transparent). Photoshop is much more complicated in background removal. It can be done in just a few clicks using Paint Shop Pro. This software can be purchased in the low price range. Check with ebay.
Serif PhotoPlus 8 - This is good software that can be purchased for around $10.
Serif PhotoPlus 6 - Free. Good basic software and includes layers somewhat similar to Photoshop.
Gimp ? Very good software, plus it is FREE. A great feature of this software is that images in Photoshop format (.PSD) can be edited.
Macromedia Fireworks ? Very sophisticated software. I have evaluated a trial version, but have done very little actual work using it. It is relatively expensive.
Adobe PhotoDeluxe Home Edition 4.0, 4.2, and 4.3.
Adobe discontinued sales and support of this software in 2002. Good basic graphics software. It has been reported that it may not operate correctly with Microsoft Vista, but I believe that it might be OK. Can be purchased on eBay and Amazon plus private sources.
Adobe PhotoDeluxe Business Edition
I have left this software for last. I consider this very good graphics software. It precluded all of the Photoshop software, and can do many of the basic features other than ?Actions?, but can handle layer manipulations.
A great feature is the ability to edit templates or other elements that are configured in PSD format. PhotoDeluxe BE was released many years ago. Sales and support were discontinued in 2002. Not long after the initial release, it was included as a bonus CD with a purchase of another product. An example was the purchase of an expensive digital camera. Almost all of the bonus CD?s include web design software ?Adobe Page Mill?, very popular web design software at one time.
I use the Business Edition nearly every day. It is extremely easy to use, but has a few minor glitches that are easily overlooked. I purchased the CD through a private source.
I have used this software on both the Microsoft XP and Vista operating systems. The software loaded and installed well on my Dell computer that uses the XP operating system. The software also loaded well on my Dell notebook computer that uses the Vista operating system, but some of the options failed to load. All of the graphics capabilities worked well on the Vista system, but had the same glitches that appear on the XP system. Prior to the actual installation on the notebook computer, there was a dialog box indicating a non-compatibility issue, but I had the option of installing regardless of the issue.
My experience to date has been good. I believe the good operation on my notebook computer is helped by the 1K megabytes of Ram, and I am using less than half of the overall capacity of the 160 Gigabyte hard drive. Working with images requires a vast amount of available memory that my computer with the XP system does not have. The speed of operation during graphics applications on my notebook computer is far greater than on my desktop computer.
Web Graphics Creator by Laughing Bird Software
This is great design software. Not only can eCovers be created with this software, but also logos, business cards, headers, plus other items. No Photoshop is required for any of the designs. I based one design around an eBook and created a spinning image of the eBook. I also created a neat logo starting with one of the Logo templates. The price is $39.95 that is cheap if all of the capabilities are utilized. I am a bit disappointed with the lack of easy to follow tutorials, but the tremendous capabilities are well worth the effort of learning how to use it. There are many templates included in the package. Another great feature is that logos can be created with transparent backgrounds. There are no RR.
Analysis
None of the above software is easy to use other than PhotoDeluxe. I suggest that you pick whatever fits into your budget and concentrate on learning how to use the features that are specific to whatever is required for your basic needs. My choice is an inexpensive version of Photoshop 6.0, 7.0, CS, CS2, or CS3.
Based on your needs, a later version of Elements may also suffice. Gimp (for sure) and Adobe PhotoDeluxe
Business Edition are good companions as is Paint Shop Pro.
I have often given copies of my Business Edition CD as a bonus for specified purchases from my large inventory of graphics products and other resources.
In order to have a complete Graphics Design System, I suggest you include Web Graphics Creator.
Graphics Packages
There are many Graphics Packages available ranging in price from free to over $90. These packages consist of a variety of graphics types. Some of the more popular elements are arrows, banners, bullets, buttons, clipart, eCovers, footers, headers, seals, stars, and templates.
No package that I have discovered has all of the popular elements. Some packages contain only a few, others contain many. One of the best packages has an Index, a very important feature.
I have accumulated over 15 of the lower priced and free packages, and have analyzed them in depth.
I have also analyzed many of the more costly (over-priced) packages based on the literature available. I have determined that there is little difference, other than quantity, between low cost and the very costly.
My personal website contains a more detailed Report than do the three paragraphs above. See the Resources at the end of this article.
Other Products of Interest
The following products, although not strictly graphics in nature other than the Wizard, involve items that are screen oriented. I keep all of them on my desktop for immediate use whenever the situation arises.
Jedee Image Converter ? Quickly and easily converts files of most any format (PSD, JPG, GIF, PNG, etc) into files with most any other format.
Photo Re-sizer ? Easy to use and works great, plus it is FREE. Adobe PhotoDeluxe Business Edition and Photoshop also have easy to use resizing features.
Screen 2 Video Generator ? Terrific program that does it all. Takes a bit of practice, but is fun and practical after becoming familiar with the many features.
Screen Shoot-it - This is one of my favorites. An easy to use ?print screen? product. Do not pay for this product. Look for a source offering a free download.
Graphics Wizard-Cool Tool ? I have recently added this great graphics item to my desktop. This product includes many COOL tools.
eBook Covers ? eCovers
Electronic books are one of the more popular items on the Internet and are referred to as eBooks. The cover of an eBook is referred to as the eCover. The production and sales of eBooks total millions of dollars. Most eBooks are presented/displayed with a 3D cover.
Cover design is a broad field that includes many options for the method of design. Plain covers with ordinary text is no longer an acceptable option.
The present market expects eBook covers to have eye-popping graphics plus a variety of high quality text fonts and text effects where applicable. A great looking cover is also expected for CD/DVD's, Software Boxes, Reports, Articles, Ezines, Membership Cards, etc.
Design Considerations.
Pay for the design.
It is widely noted on the Internet that a professional designer may charge up to $97 for a typical eCover. This may or may not be true based on my experience. I had a cover designed for $25 (may be higher now) with a 2 day turnaround. The design included 4 cover sizes, plus the front and the spline.
Design the cover yourself.
If your requirements are for one cover now and none in the future, I would not recommend this option with the following disclaimer. Once you acquire one cover, and continue to work on similar projects, you may decide you want this cover modified. Perhaps while working on another project, your requirement may be for a completely different cover. If you visualize these situations happening, you should try to become a ?do it yourself? eCover designer, even if only for your own personal needs.
Design Requirement Options
a. Acquire Photoshop 6.0 or higher, preferably 7.0 if financially able. CS, CS2, and CS3 are also options as is Elements.
b. Acquire Gimp or similar free or low cost graphics software.
c. Acquire Adobe PhotoDeluxe Business Edition.
d. Acquire an eCover design package that requires Photoshop. Should include Templates and Action Scripts.
e. Acquire an eCover design package that does not require Photoshop, usually Template oriented. How about Web Graphics Creator?
At the very minimum, options b and e will suffice.
For the best results, options a and d should be considered, and possibly option c, but is not a necessity.
eCover Software Design Packages
There are many Cover Design Packages available today ranging in price from free to over $90. You will note that these prices are similar to the Graphics Packages. A great majority of these packages require Photoshop software especially when Action Scripts are included in the package.
There is a wide variety of items contained in the various eCover packages. Most packages contain Templates and Action Scripts. The main difference in the packages is the number of different type
covers that can be created, and whether Photoshop is required. There are at least 12 different cover types. Some of the packages have tutorials and some include font variations.
I have acquired 20 or more of the lower priced and free packages, and have analyzed them in depth.
My personal website contains a more detailed Report than the paragraphs above. See the Resources at the end of this article.
Action Scripts
Actions is an abbreviated expression for Action Scripts.
Actions is a word associated with Photoshop.
An Action is referred to as a recording of a series of commands used to capture repetitive tasks.
Actions is a very important ingredient in eCover design.
These commands are to be applied to a series of files and will guide users in a step-by-step manner. It also allows play back recording. Any user with broad Photoshop experience can create an Action. One of the major reasons that actions are so important for eCover creation is that many specific Action Scripts have already been created.
The use of Actions requires very little Photoshop experience. Cover creation from start to finish using already created Action Scripts may take only a few minutes. The total time, of course, depends on whether you are using Templates or starting with a blank cover, plus the degree of editing involved.
Step by step cover creation using an Action Script
I prefer Action Scripts that make use of Templates.
Open Photoshop
Step 1 - Copy the script to a named folder or to the Desktop.
Step 2 - Make actions palette visible.
Step 3 ? Locate ?load action? on the actions palette (upper right arrow), and click it.
Step 4 - Select the just loaded script from the named folder and click load.
Step 5 ? Locate the script on the palette & click on 1st action step and than select ?play?.
Step 6 - Following ?play?, the flat cover (Template) should appear and is now ready to edit.
Step 7 - Make text and image changes. Layer manipulation simplifies much of the editing.
Step 8 ? Click on 2nd action step, click on play, and in a few moments the completed 3D cover
should appear.
The above steps have been somewhat oversimplified.
The Anatomy of an Image as I see it
As a basis for this analysis, I am considering a Template, Header, Banner, Photo, Clipart, and other similar Elements as Images. Images appearing in 3D are not part of this discussion.
All Images appear to be flat even though they may or may not consist of layers. Most extensions, except for PSD and PDD, are an indication that the Image actually is flat. A PSD extension (indicating Photoshop) and PDD (indicating PhotoDeluxe) indicates that the image has layers and can be edited. If the extension is PNG, the image may have a transparent background.
An Image when generated ?from scratch?, as in a photo, consists of only one layer. Adding text to a photo and/or adding a background adds one or more layers. The resulting Image would typically be saved in a JPG, GIF, or similar format. The text now become permanent and can be edited only by using a special erasing procedure. If this same Image is saved with a PSD or PDD extension, the Image will have a text layer that can be edited.
One point about an Image is the transparency aspect. For example, depending on the Image format, the Image itself may have a visible background (non transparent and usually white).
The white background, or any other color, when removed creates a more pleasing image. A clipart usually has a permanent background, and in some cases can be made transparent. A way to correct this is by making the Image transparent. Corel Paintshop Pro is by far the easiest and quickest way to create image transparency. After transparency, the image must be saved in either GIF or PNG format (never JPG).
By the way, one of the features of the Web Graphics Creator is that images such as a Logo can be saved in a transparent format.
Text Images
A layer with text by itself (no basic image involved) is called a Text Layer. Creating text with special effects (a Photoshop option) creates what I consider to be a Text Image. This is a relatively easy application to perform especially during layer manipulation.
Recently a very intriguing product was introduced allowing the creation of special text effects without the use of Photoshop or any other program with the capability of creating effects. This program is called Quick Web Creations. It is a stand-alone program that makes use of the creation company?s server where all of the creations are stored after creation. There are several hundred Text Templates each having been created with different effects. By editing these Templates a similar or exact Text Image can be created. The program is easy to use, however, there is much trial and error involved in creating the Text Image exactly as desired. Good on screen help is available as is good customer support. As I am writing this Report, I believe this product is being upgraded.
Before I leave this subject, I want to mention another very interesting product that I purchased and am evaluating. This product is called Killer Text, and it really appears to be a ?killer?. Do not pay over $5.00
for this product. It is a product that anyone can create using Photoshop; however, the tedious work has been done by the product creator.
The Anatomy of Layers as I see it.
One of Photoshop?s most powerful features is the use of Layers. Each Layer in a Photoshop element is a
separate Image or a separate line of text that can be edited apart from any other Layer. Each Layer
can be pictured as an Image or text on a sheet of clear material. Together, all Layers (could be many)
form the final Image as viewed on the screen.
Layers can be manipulated using most major graphics software including Gimp.
Images must have a .PSD or .PDD extension in order to allow Layer manipulation.
The use of Layers during eCover design is an important concept. Layers are often manipulated during
Step 1 of the Action procedure.
MINISITES
I am going to comment briefly because this subject requires more space than I want to allocate in this Report. I have acquired more than 25 Minisite packages, and intend to analyze many of them completely in a future Report. These packages include Squeeze Pages, Landing Pages, Optin Pages, Sales Pages, etc.
I have expanded greatly on this subject in the Report on my personal website. See Resources link at the end of this Report.
One of the current ?fads? in website design is the 1 or 2 page Minisite. These sites are typically graphics oriented, and often a complete site consists of a single Template. The distinction between a regular Website and a Minisite is becoming hard to define, and I am in hopes of filling in the gaps with my upcoming Report.
Do not purchase a Minisite Template Package unless you understand some of the basics. Many Minisites are actually complete Websites, and each requires a domain name and hosting in order to be fully functional for online activities. Even if you have your own Website, a Minisite Template cannot become an integral part of the Website without major changes to the Template that is in itself a Website Index Page (home page).
My suggestion is when buying a package that includes a Template, be sure that the package includes separate images for the header, footer, and all of the other images making up the Template. You now have two choices, either use the Template as a new Website, or if you have a Website, you can construct your own Template using the one that came with the package as a sample. This newly created Template can now reside on any page in your website without causing problems to your existing website.
Most Minisite Templates will require some editing, especially if you need to add or change the text. Many of the Template Packages come with the images in two formats, JPG and PSD (Photoshop). If you have Photoshop software (Elements or above) you can easily edit the Template. If you have basic Image software, you may be limited to what you can edit. If you do not have Photoshop software, I suggest that you get a copy of Gimp (free) which works well with Photoshop formats with some limitation.
Common Extensions
There are many popular extensions such as JPG, GIF, BMP, and TIFF. I had used only these until I became involved with eCover design and other graphics applications.
My new extension friends are PSD, PDD, and PNG.
Graphic Applications (not necessarily web oriented)
The following programs are high level and are for users with a great amount of training/experience.
Paint Programs
Illustration/Design Programs
Presentation Graphics Software
Animation Software
CAD Software
Desktop Publishing
Please go to http://game4all.com/info_pakks.htm
for a more complete Web Graphics Report plus
information about an Ultimate Reference Package ? the ePAKK.
PAKKMAN
