Creating a Webset


A webset contains, one or more backgrounds, link buttons, banner, a divider and author logo. This lesson will show how to create each part of the webset. Once you are able to create your own graphics you are no longer caught in the entanglement of giving credit for the work of another, you are no longer at risk of being slapped with a copyright issue because the person you obtained a graphic from lied to you and said it's free for the taking. These are the chances we take whenever we use any graphic that is not our own. We don't know if the person offering the graphic is the actual author of that graphic, so we are taking chances with our sites and our reputations. Peace of mind comes with learning to create your own graphics, along with the reward of knowing everything is authentic and you did it yourself! The background you see at Ask Maggy Mae was designed by playing with tubes and placing them randomly on the screen. I then used the effects tools to twist and blend the colors until I saw something that I really liked. When it was in it's initial stage there was a distinct line showing where the background image repeated itself but then I played with the object a little more and using Eye Candy I chose an effect that offered the seamless tile option.


Although most tutorials offer a graphic to use and the instructions given are specific to that graphic, I would prefer that you use your imagination and create your own. But before you do this you need to imagine for yourself what your finished product would look like. Once you know what you want you are ready to start designing. The webset on this page took me approximately 5 hours to complete. The finished product is not far off from the original idea I had. But when it came to making he buttons and welcome banner I realized that the flowers I did put together did not go well with the color scheme of the backgrounds I had created. Although I planned to use a certain flower bouquet I had created, it had nothing to do with my backgrounds. The backgrounds are what you want to start creating. I started with a simple 100X100 graphic with a pink background like the one on the right of this screen. From there I used the airbrush to add a little color, eventually after playing with different effects the 5 backgrounds below came from one simple pink square.


The third and fifth backgrounds are actually the same background only the third one was rotated 90 degrees. The fourth background is a copy of the first background with the Eye Candy water drops filter used and then a slight adjustment with the brightness and contrast. Background 2 is again a copy of background 1 then the use of the water drops filter again. With background four, the last step was using Eye Candy water drops filter with the seamless tile option checked. Likewise background one was done with the final step being Eye Candy's swirl filter with the seamless tile option checked. These two backgrounds appear on a page without  visibly seeing the small square, they appear as one large background. The other 3 backgrounds give a definite line showing how the background repeats. To make a seamless tile you will need either Eye Candy or another filter that will give you the option to make your tile seamless


The next step is to create your header or logo and your other web buttons. As I said above, I did create a bouquet of flowers but they did not go well with the backgrounds so I quickly changed to the flowers you see below. This flower was a tube and I just created a new image and used the tube tool to add the graphic to the image. Then I created several other new images and used the text tool to create the names for each button and the welcome banner. I then took the entire set and moved it to Animation shop and placed each name with the flower then cropped the button to compact the graphic as small as possible. The background and parts of the text are transparent and they blend in with the page you are creating. I chose the Sterling font as I was going through my long list of fonts this font stood out above the rest.





You may notice that the Guestbook button has both view and sign on it and may be thinking, why has she done this. The lesson on Image Mapping will deal with this graphic.


Finally, to make the divider graphic below I created a new image 600 pixels wide and 100 pixels in height. I then used the Pattern option in Styles and chose background 2 above for the stroke pattern. I then erased some of the background from the top and the bottom leaving a line in the middle of the graphic. Then I used the buttonize effect on the remaining graphic and finally I shrunk the flowers to a size to fit on the bar I had just created. I then moved the image from PSP to AS and made it a transparent image.

That is it, you now have all the images needed to create a website. A wise thing to do when you do create websets is to provide information on a page for what font, coloring, etc you used for your webset as you may not use it right away and in the future when you do use it, if all this information is readily available you are prepared in case there is something else you would like to create to go with the webset. For example, some people who build websets for use by others will provide a blank button so they can add more button links with names that they prefer, if the font information was not included it would be difficult to match the font. The tutorial on Image Mapping will show you how to use the guestbook tag.



   Site Map

    Copyright © 2001-2005 Margaret Walker