Introduction

Since the number of the Internet users rapidly increases day by day, creating graphics specifically for web pages has become a separate and important branch of the art of computer graphics. This part of the tutorial is going to show you how to create web graphics easily with Ultimate Paint.

But first of all we would like to give you some general advice. When you create your spectacular graphics, always keep in mind that you have to find the harmony between the content and the look of your homepage. It means that some more colorful graphics does not provide necessarily a more professional look. The design must fit with the content. Another important thing is the format of your image. Since early browsers supported only GIF and JPG, these two formats have become the most popular ones for web pages. Now PNG is also widely supported, but you should always think of the users with older browsers. The filesize of the image is also very important on the Internet especially when the user has got slow connection, so you have to compromise between quality and size. Save optimization helps you to find the optimum.

1. Background image

In this section you will learn how to choose or create background images and how to make them suit your needs.

A wisely chosen background image may greatly improve your homepage. For example, if you are creating a web page that deals with financial subjects, you should choose an image related to finance or economics. Our example picture could be a possible solution.


Let's make our picture suitable for being in the background. It means that the image's contrast should be strongly lowered, so that the text above it remains perfectly readable. The background image should look like a watermark in the paper. So apply Image / Color / Brightness/Contrast filter (in our example we used the values: Brightness = 20, Contrast = -70). You may also need to change the color or shade of the image to fit the mood of your homepage. According to different surveys the users prefer warm and soft colors in the background, but if the page's subject requires colder colors, do not hesitate to use them. To change a picture's color generally, use Image / Color / HSV Adjust filter. (In our example we gave the values: H = 130, S = -10.)


When you choose the text color of your web page, pay attention to harmonize its color with the colors of the background image. Another important aspect that it must be perfectly readable.


There is another possibility for creating background images. If you don't want a specific picture, you can put some abstract pattern on your page just for ornamentation. Ultimate Paint has lots of effects which generates patterns. Check out the filters placed in Image / Generator. We used Sine Blobs I to generate the example picture, then we applied the Brightness/Contrast filter to soften the image.


2. Buttons, banners

Buttons and banners are common graphical objects on web pages nowadays. Their main purpose is to draw the users' attantion. They often hold advertisements. The standard button size is 88x31 pixels, while the standard banner size is 468x60 pixels.

Let's create an example banner that advertises Ultimate Paint. First we need to do the background. It can be one-colored, but some pattern is certainly more interesting. Use the effects under Image / Generator to make your professional background. We used the Starfish filter here.


After creating the background you can place the additional graphics and textual information on your banner. In our example we cut the drawing hand from the splash screen of UP, made a brush out of it, decreased the size of the brush to fit the banner, then placed it and a vertically mirrored one on the two ends of the banner. Be sure to have the Anti-alias option turned on on the Preferences / General page.


Since there is not much room on a banner (there is even less on a button), the textual information you can right on it is strongly limited, so write just words or simple phrases, but give them an attractive look to draw the users' attantion. Here we wrote 'Ultimate Paint' on a new blank image carefully selecting its color, font and size. Then we made a brush out of it, applied Brush / Bend / Up-and-Down and placed it in the center of the banner. Then with having the text selected, we used the Image / Stylize / Glow effect.


We are almost finished. We've got a few more text to place on the banner, but these are simple ones, just choose the appropriate font, size and color (and whichever property you want to modify), then click Ok on the text dialog to place them on the image.


Just a few more advice: You'll get better image quality if you create your banner in double size (936x120), then just before saving the final version, use Image / Stretch/Mirror with High quality turned on to halve the size to 468x60 pixels. This way the edges on your image will be smoother.

3. Save optimization

Ultimate Paint's save optimization dialog helps you to decide which format and sub-format would be ideal according to the size and quality constraints.

It is very important to keep the image's filesize as low as possible while on the other hand, the quality should satisfy most users' needs. To find the optimum quickly and easily, use Ultimate Paint's save optimization feature. Here in the picture you can see the optimization dialog, which will appear if you click on the Optimize... button in the Save As dialog. You can specify four different settings. Clicking on Preview will show how would actually look your image and how many bytes would be its filesize if it was saved in the given format with the specified settings. In our example you can see an image with different JPEG quality values. The top-left is 75, the bottom-left is 10, the top-right is 5, while the bottom-right is only 2. Naturally as the quality value is decreasing, the filesize gets smaller, but towards low values the picture's quality become unacceptable. When you think you have found the best compromise, click Accept then finally save your image.

Back to Tutorials