How to use Vector Files in Web Design

by Jay Hilgert
on March 3, 2007

Let me start of by saying that there are many different ways to do this. I’ve recently gotten a lot of emails and feedback regarding how to take the free vectors I provide, and actually use them in a web page design. There is no possible way I can entirely cover that subject with a single tutorial, so I’m going to show you a simple example to expose some key steps that might make this process a little more clear to you. It’s important to note that this tutorial requires basic knowledge of a vector graphics editor (Illustrator in my case), Photoshop, HTML, and CSS.

There are a number of reasons why vector graphics may be pushed aside in favor of photoshop when it comes to web design. One of those reasons is exactly why I wrote this tutorial. It takes a few extra steps to get an image from vector format to a webpage design, but vector graphics hold much more value in the long run. For instance, you can customize a set vector buttons for a specific website design, take all of those customized vector graphics into Photoshop, and you have your raster buttons to save for the web. However, since you started off in vector format, you can dig those buttons up a year from now and change anything you want about them, without losing a single pixel-worth of quality.

Vector vs. Raster graphics. (a short explanation I found)

This is why I always start off in Illustrator. You don’t have to worry about saving an image or a PSD and wanting to go back and change a pixel dimension 3 weeks from now. You can simply open your illustrator (vector file) make the adjustment (ex: change the width of a button) without sacrificing any quality, and re-rasterize it in Photoshop.

Let’s get started: The example I will be using is a simple button rollover, using a cutomized button from my Free Vector Web Page Elements – Part 2. I don’t use inkScape, but I assume this tutorial can be applied to that software as well.

Here We Go:

1. Download one of my Free Vector Files, unzip it and open it in Illustrator. This is what you will see if you use my Free Vector Web Page elements -Part 2

Using Vector Graphics in Web Design 1

2. Delete EVERYTHING except for the button you want to use, then save the file as a different name (still in vector format-AI).

Using Vector Graphics in Web Design 2

3. You can easily adjust the width to any size using the Direct Selection Tool (White Arrow) . Make sure none of your shapes are locked (Object Menu > Unlock all), select all of the points on one side and nudge or drag them to your desired width. Save your file once you have made any adjustments.

Using Vector Graphics in Web Design 4
Using Vector Graphics in Web Design 5
Using Vector Graphics in Web Design 28

4. Now, in that new illustrator file you just created, change the fill color of the button (for a rollover) and save that as a different file name. You should now have 2 new illustrator files, the original button, and a button with a different fill color.

Using Vector Graphics in Web Design 17

5. Now in Photoshop, go to File > Open, select your Illustrator button files and open them. Make sure your color setting is RGB while importing to photoshop, and your resolution is set to 72.

Using Vector Graphics in Web Design 8

6. After rasterizing (importing into Photoshop) you should have 2 raster images of your button with identical pixel dimensions! Because you created the 2 colors of your button from the same Illustrator file, now you have perfectly aligned images to use as a rollover in your HTML and CSS. The background is transparent, which will be ideal for many of you. If not, all you have to do is add a custom background color by creating a new layer below your button layer and filling it with whatever color you choose. If all you want is a white background, simply flatten the images.

Using Vector Graphics in Web Design 9

7. Now all you have to is in the File menu, select “Save for Web,” choose your output settings, name your files, and Bam. Instant perfectly aligned, optimized images for the web, all from a completely vector source file.

Using Vector Graphics in Web Design 20

8. Repeat steps 3-6 for any vector shape, or if you need to modify a button you are currently using. That’s also the beauty of saving each button as it’s own Illustrator file. If you are descriptive in your file naming, you don’t have to return to the original free download file, just open the vector button file you created, change something, import to Photoshop, and save.

Download the files I used in this tutorial:

Download

Includes: – AI (2) EPS (2) SVG (2) JPG (2) HTML (1)

The HTML I used for the button:

The CSS I used for the button:

Note that the actual div doesn’t have a background image, only “a” and “a:hover.” Also, by defining dimensions for your “a,” you make the entire image clickable, instead of just the text because it creates an invisible box that surrounds the Linked Text.

.button {
	height: 31px;
	width: 206px;
	line-height: 30px;
	text-align: center;
}

.button a:hover{
    display: block;
	height: 31px;
	width: 206px;
	background-image: url(images/button_tutorial_2.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	color: #999999;
}

.button a {
    display: block;
	height: 31px;
	width: 206px;
	background-image: url(images/button_tutorial.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	color: #FFFFFF;
	text-decoration: none;
}

About Jay Hilgert

Formally trained at Oklahoma State, Jay Hilgert is a graphic and web designer, font designer (Link), software developer (Brush Pilotâ„¢), and the founder of BittBox.

Top