Web Design Background 1.0: Aim

What are the basic componants of a web site background?

What are the proportions of a computer screen? What is 1080P?

What color harmony principles guide text qualities and readability against the background?

What are three different color harmonies that can be created from the many available?

FattaCast™ Library



File New

In Illustrator select File New. In the prompt, title the document Background_web1, set the document's units to Point, the Width to 1080pt and the hight to 792. Select RGB Color with a sideways orientation and click OK.

Graphic Styles

Create a rectangle that fills the entire page. Open Graphic Style window and choose an Effect from the Scribble Effects window. Notice the appearance window depicts the colors used within the effect.

Appearance Window

To change a particular color in the effect, click to highlight the color and click a new color from the Swatches window. In this example I replaced the yellow and purple within the pattern with various values of green.


For text to be legible against the new background, we need to lighten the image using the transparency setting.

To change the Transparency of the shape, click to highlight Path in the appearance window and slide the Opacity setting to the left to make it less than 50%


Create a rectangle 150 pixals wide to create a navigation frame. Folow the procedures to change the colors in the Effect and the Transparency settings. Go to Optimize Images to learn how prepare the image for your web site. Repeat the process several times creating a variety different color harmonies.