Designing Web Forms Using Graphic Styles and the Appearance Palette in Illustrator CS5

Paragraph styles in Adobe InDesign allow designers to maintain a typographic style across very large documents, while (in most cases) maintaining their sanity. Similarly, Illustrator offers a very powerful tool called graphic styles that allows the designer to define styles and apply them to Illustrator objects.

In this tutorial I'm going to demonstrate how the use of Graphic Styles in Illustrator can make it easier to build complex web forms and will assist you in developing rapid mockups.

Creating a new file

Create a new file, select Web under New Document Profile and choose the 800 x 600 preset
Ensure you are using Pixel Preview (View → Pixel Preview)

Making a background

Ensure you have both the Color and Layers palette available (Window → Color, Window → Layers).

Simply creating a background colour for our project to sit on.

Draw a rectangle that covers the entire artboard
Select 'Web Safe RGB' from the dropdown in the top right of the Color palatte
Set the fill to: R 77; G BB; B 55
Set the stroke to transparent
Lock the path you just created in the Layers palette.

Create a 'textfield' Graphic Style

Ensure you have both the Graphic Styles and Appearance palettes available (Window → Graphic Styles, Window → Appearance).

Setting up an Object

Draw another rectangle sized 256px x 32px, fill it white with a black stroke
Ensure your new white rectangle is selected
Within the fx menu at the bottom of the Appearance palette, go to Stylize → Round Corners
Set a radius of 5px

Creating an Outline and a Highlight

Here we're going to add a dark outline around the object with a one pixel highlight underneath.

Within the Appearance palette select the stroke
Click on the word Stroke, select Align Stroke to Outside
Open the stroke accordion menu, set the Opacity to 30%
Open the fill accordion menu, set the Opacity to 20%
With the fill row selected go to Distort & Transform → Transform under the fx menu in the Appearance palette
Set the vertical scale to 105%, the vertical offset to 1px

Making a Background and Shadow

Ensure you have the Gradient palette (Window → Gradient).

We're going to use the appearance palette to create a secondary fill as a gradient. We will set up the gradient so that it appears to be a shadow within the rectangle. To do this we will first set three colour nodes along the gradient slider then move the nodes so that it creates a hard line.

At the bottom of the Appearance palette click the Add New Fill button
Drag this fill below your first fill
With your new fill selected, choose Linear from the Type option in the Gradient palette
Set the angle of the gradient to -90
Double-click the left-most node on the Gradient Slider and change the colour to K 30%
Click just below the Gradient Slider somewhere in the middle to add a new colour node
Change this node's colour to K 20%
Change the last colour node to K 10%
Ensure the left-most colour node is against the left edge of the Gradient Slider
Select the middle colour node (single-click) and change the location to 6%
Move the furthest right colour node to 6.25%

Saving this Appearance as a Graphic Style

Creating a new graphic style will allow us to use this style on other objects in our project.

Ensure your textfield is selected
Click the New Graphic Style icon on the bottom of the Graphic Styles palette
Double-click your new style to give it a name

Creating a 'button' Graphic Style

In this section I'm going to show you how to use a previously established style as a starting point for creating a new element with similar attributes.

Start from our last object

Select your textfield
Press option + drag to a new location
Change the width to 96px

Reverse the Lighting and Add Colour

Ensure the textfield is selected
Select the gradient fill
Add a new colour node on the right of the gradient slider
Spread out the colour nodes across the gradient slider
Set the first node K 30%, opacity 20%
The second node K 70%, opacity 20%
Third node node K 90%, opacity 20%
Fourth node K 100%, opacity 60%
Move the first node to location 0%
Second node to location 6%
Third node to location 6.25%
Fourth node to location 100%
Create a new fill underneath the gradient
Shift-click the colour picker in the fill option to get Alternate color UI
Select Web Safe RGB from the dropdown in the top right of the Alternate color UI
Set the fill to: R 88; G EE; B 66
Move the white fill to the bottom
Change the white fill to black, set the opacity to 60%

Saving this Appearance as a Graphic Style

Ensure your new button is selected
Click the New Graphic Style icon on the bottom of the Graphic Styles palette
Double-click your new style to give it a name

Using this method you will be able to create other elements for your designs. These graphic styles will allow you to quickly change and iterate on your design without having to carefully reposition as many objects. Well defined graphic styles can also be shared between designers to ensure visual congruency. Thanks to Steven Aston for showing me this trick.

Calvin Tennant