How to use Vector Files in Web Design
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
2. Delete EVERYTHING except for the button you want to use, then save the file as a different name (still in vector format-AI).
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.
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.
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.
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.
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.
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:
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;
}
Related Posts:
- Illustrator Tutorial: How to make a Vector Glass Button
- 30 Free Fading Background Images
- How to Make Vector Grunge
- Illustrator: Using Swift as a powerful 3D Illustration Tool
- Free Vector Web Page Elements - Part 3
- Free Vector Glass Bar Set - Diagonal Striped
You can reduce your some of your css and add a background color incase the images don’t load all in one line!
background: #000 url(images/button_tutorial.jpg) left top no-repeat;
Cawlin,
I love comments like this, thank you. I am by no means a CSS expert. There is always room for improvements, thanks!
~BittBox
You really ought to try using Fireworks. It keeps all your files in vector format and exports directly into a format of your choice. It also has some pretty slick effects on vectors. I use it for all my app UI work as well as web graphics.
I will definitely check that out. I have Fireworks, but never use it. Sounds like I’ve been missing out. Thanks Al!
Al Luckow,
I have tried to open them with fireworks8, but it opens the rows bitmap without levels…
Why?
[...] How to use vector files [...]
I have to agree with webnicola, Fireworks converts Illustrator files to bitmap upon import.
At least as far as I can tell.
~BittBox
yes fireworks doesn’t handle .ai files well.
however, you can create vectors in almost the same way in fireworks and export it in most formats.
photoshop is the numero uno with bitmaps and illustrator with vectors, but fireworks does “sufficiently” with both formats and is much better to work with for web design. with photoshop i particularly dislike having to send images to imageready when exporting for the web.
thanks for the illustrator tute.
Bittbox,
You don’t even need Fireworks, Illustrator will do a “Save For Web”, the same as Photoshop.
-Gautch
Gautch,
Yes, you can save for web directly from Illustrator, But I like using Photoshop because it has better antialiasing when it converts to a bitmap. Also, as long as your vector image goes unchanged as far as size, Photoshop will clip it to the exact pixel dimension of the image (CS) no matter where you button happens to lie on the artboard.
CS2 gives you options like Bounding Box, Art Box, Trim Box. Bounding Box would be the equivalent import option in CS2 I believe.
~BittBox
It’s true, Illustrators save for web is pretty brutal. It would be nice if in CS3 they would use imageready the way photoshop does.
Have you covered how to create a reflective logo like yours yet? If so, can you link me, or if not. Could you through something together. I love your BLOG btw.
Another great post! This may be a basic question, but why do I want to make sure that the resolution is 72 pixels per inch? Are the vector images created using inches as the scale? I’ve never fully understood the purpose of resolution when using photoshop for web design.
@ Lance Fisher
yeah, this can seem confusing but screen resolution is 72 pixels per square inch. There a a couple of reasons to use 72 for web graphics: First, since screen resolution is 72, anything higher would be increasing your file size. Second, since you typically design websites at 100% scale, there is no need to be able to zoom in, so to say.
As for the vector question, in Illustrator preferences, you can set your unit measurements to pixels to make thing easier. Or you can right click on your ruler and select “pixels.”
Did that answer your question?
~BittBox
Hey BittBox, good stuff.
I just started checking your site on a regular basis, so this is coming a little late, but I have a tip regarding this that you/readers might find helpful. You can take the button image, and the rollover image and place them in the same file, with the button image at the top, and the rollover state directly below it, so the image is now 62 pixels high. The CSS looks something like this:
.button a {
display: block;
height: 31px;
width: 206px;
background-image: url(images/button_tutorial.jpg) no-repeat 0 0;
color: #FFFFFF;
text-decoration: none;
}
.button a :hover{
display: block;
background-image: url(images/button_tutorial.jpg) no-repeat 0 -31px;
}
What happens is the background image is shifted up 31 pixels (the two numbers let you manipulate the position of the background from the left and top respectively), so we see the bottom half, or the rollover state, of the image. This helps reduce the number of image files you use, and since the button and its rollover load at the same time, you won’t get any weird bugs. Hope that made sense…I can re-explain if I confused anyone :).
Beau,
I like that method a little better, but when you place your images a few pixels off you lose the effect, right?
Hi,
Do you know of any tutorial websites that can help me take adobe illustrator files and turn them into vector files? I do promotional products and I have several customers that just keep sending me the incorrect artwork and it’s looking like I’ll have to learn it myself to save time and money. Any information would be greatly appreciated.
Regards,
Sharie Kearns
@Sharie Kearns
Illustrator files are vector files. You might look into inkscape. (it’s a free vector editor)
http://www.inkscape.org/
~Bitt
thanks for this tip bittbox.
Great Tutorial
This is the second tutorial that I found on your site that I really like!
the other tutorial was the web 2.0 reflection with illustrator. Keep up the good work!
p.s I also added a banner for your site in the links section of my blog.
does anyone know of a good place where i can get some free flash /dreamweaver templates, i fancy playing around with the web design a bit and i find it hard to find anything thats any good for a good base to play with. you help please?
thanks
Keith
@bittbox
All I can say about your blog is that its overwhelmingly wonderful. But I am more of a fireworks chap and fireworks uses its own kind of png.
Since you are good with AI and PS, your transition to fireworks would be seamless. Just give it a try.
@keith
you can get good web design templates at oswd.org
For flash templates, just google flashmo.
obscurely malacopod flier aboundingly heptaphyllous protorosaurus scyphulus octocentennial
Character Above All: Richard M. Nixon
http://www.cnn.com/books/beginnings/9911/eisenhower/index.html
obscurely malacopod flier aboundingly heptaphyllous protorosaurus scyphulus octocentennial
MDA Technology
http://www.topix.com/city/paonia-co
Pretty cool stuff. Thanks for sharing this information with us. That’s the thing I love about your website… I’m constantly learning.
Keep up all the informational posts.
TJ
Boston Web Design