PaintShop Pro using FrontPage 2000 Themes
 
 
By GIF Animator from Ulead (14K)

A discussion of creating banners and buttons should at least begin with some examples, yes? I made these specifically for this presentation to provide an idea of the diversity of tools that can create banners and buttons. Because some of the creation tools can be used for other objects, like icons and GIF animations, there will be a small amount of duplication here with the GIF Animation and Using Text Fonts topics. The purpose of this section is to demonstrate how totally different types of software  can produce these same two types of  web elements. This is software you may even have at your disposal now but didn't think of using. Then at the end of this topic, I have an important discussion of how to deal with a common problem creating web graphics; one that's not universally understood and will plague the new web designer. I call this problem "The Jaggies". First, I'll identify various types of software that I've used to make banners and buttons and then show you some examples and review the technique used to produce them. The really neat thing about making these is the virtually unlimited number of ways you can do it. We'll see that we can use any of the following: HTML Editor applications, like FrontPage 2000 and Dreamweaver   Image Editors, like PaintShop Pro, PhotoShop and PhotoImpact   GIF Animation programs, like Animation Shop and GIF Animator   Special purpose 3D programs like Cool 3D and Simply 3D   Java Applets, like those from ConsultCom and Coffeecup Software   Greeting Card programs, like PrintShop, along with their vast clip art collections   Combinations of the above programs   Many Java Applets are available like the one below from ConsultCom.Com for free or for fee, depending on personal vs. commercial use. You can really dress up a web page and add good utility function with Java banners and buttons. See Java Boutique in Sites to Visit as one good starting point. You must have Java enabled in your browser to view this holiday greeting. A very useful feature of the above Banner (Marquee? News ticker?) is that it reads its text input from a file. If you want your client to be self-sufficient in preparing new messages, this is a nice application feature. Frontpage 2000 and other HTML Editors can create buttons from either your images like 'the kitty' which is a Java applet or 'Rodney', which is a thumbnail JPG file. Check out features like these in whatever HTML editor you're using. Look in the documentation of your HTML Editor or on the CD for useful templates. PageMill had undocumented 'style' libraries on its CD-ROM and FrontPage 2000 incorporates 67 themes into its editor. If you haven't seen Web Theme Samples yet, you'll enjoy spending some time there. If you saw the theme called Blocks and whipped out your Image Editing program and a cool font, you might throw together a web page for an architectural firm that would look like this: . By the way doesn't PaintShop Pro do an admirable job creating a banner? Drop shadows are a really nice 3D effect, especially on a white or light background. I thought programs like PrintShop would not be too suitable for creating banners and buttons, but once I tried doing it, I was very impressed. These programs are now extremely easy to use and have many image editing features and special effects.. They also facilitate creating a banner that incorporates graphics along with text. Here's something I just concocted  for this web site: If any of you try doing artwork like this with PrintShop or a similar program, here's a tip on how to get a nice looking graphic. While in PrintShop, make the artwork as large as possible and copy it to the clipboard. Then paste it into your image editor (PaintShop Pro, in my  case). Make sure it's 24 bit color and then resample it smaller, finally then making it transparent. It seems that the resampling down from a very large graphic makes all the edges of text smoother and improves the clip art as well. One of the most fun things to work with is the banner creation component of GIF Animation programs. I mentioned in the GIF Animation topic that most of these programs have a subset that will create banners and enable you to apply a 'transition' effect to the text. They can also apply transitions to images. As an example, I needed a banner for the discussion board of my son's web site. I decided to see what would happen if I took a simple text banner and created a transition to it from his logo. After I did this, I decided it would look better if I created a second transition from the text back to the logo and I wanted the two transitions to be different. Here's what I started with:   and the result:  In my topic Image Editing, I made a statement that it's easy to have too many image editing programs. Well, I don't believe that's the case with GIF animation programs. Their animation building capabilities are certainly redundant to a large degree, but their transition building capabilities are not. I keep 3 or 4 around to draw upon for their various effects. They are very easy to use and very inexpensive. In fact, I never paid money for one! Animation Shop was included with PaintShop Pro starting with Version 5. GIF Animator was included with Ulead's PhotoImpact. At this time I'll stop showing off what I've been able to accomplish with banner and button creation.  My point to those of you beginning the web design journey is that "it's OK to be artistically challenged", as I am. With the proper tools and some imagination, that won't stop you, and I know you know that now! I'll conclude this topic by explaining the phenomenon I've been calling The Jaggies. As you read the explanation which follows, you can click on any of the Xes and I'll show them to you considerably enlarged. This will help you understand. Look carefully at these graphics below and notice that the two Xes  in column A have a rough, non-smooth outline. That's because they are created using all solid colored pixels. The two Xes in column B have been applied with a process called 'anti-aliasing'. Anti-aliasing changes the coloring of the pixels around the edges of the shape to blend it into its background color, providing a smoothing effect. A B C D The Xes in column C have been made transparent. The transparent X that was made from the white background had some off-white pixels around its edges and they do not show on a light background. However, look how they show up in column D where I've made the background black. The exact same effect happened in the second row, as you would expect. The transparent X made from the blue background had pixels around its edges that were various shades of red and blue, and therefore they do not show against a dark background, as in column D. But they do indeed look bad against the light background of this page, in column C. Sometimes The Jaggies are much worse than with the example above. Look at what happened to some icons I made using Ulead's Cool 3D program. Guess which icons were made using a black background. So, these are "The Jaggies"! It startled and frustrated me the first time I experienced it and I did not know how to make it right. It took me a week of research to understand that this 'jaggie effect' is quite commonplace. We just need to recognize it for what it is, and create our transparent GIF files using backgrounds which are close to the background they will be set against on the web page.