How to Create Web Buttons With Illustrator

Written by julia klaus
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create Web Buttons With Illustrator
Adobe Illustrator is often used for vector-based illustration. (designer place image by araraadt from

Adobe Illustrator is the graphic design industry standard for vector-based illustration. Illustrator is an effective program for creating graphics for the Web. Illustrator can render to all common image formats, allowing for simple integration of vector graphics into Web design. Utilise other Adobe products, such as Image Ready, to optimise Illustrator files properly for Web-ready graphics.

Skill level:

Other People Are Reading

Things you need

  • A code compiler or web design program

Show MoreHide


  1. 1

    Use paper and pencil to design ideas and plan the Web buttons. Take time to understand what the buttons will need to be used for and if alternate buttons will need to be made for a rollover image. Pick fonts, colours and textures that will work with the site's design.

  2. 2

    Open Adobe Illustrator and create a new document. Set the unit of measurement to pixels. The size will depend on the needs and limitations of the website design. Set the colour mode to RGB colour to guarantee colour accuracy.

  3. 3

    Create the text for the buttons using black letters and a white background. Adjust the font, height, weight and spacing until the text is aesthetically pleasing and clear to read. Designing the text in black and white allows for typographical clarity.

  4. 4

    Add colour to the Web button design. For an existing site, select appropriately bold and striking colours from the site's existing colour scheme. If the buttons are not for an existing site, select a popular colour scheme or create a new one. Subtle variations of colour will create visual interest.

  5. 5

    Create a distinctive shape for the buttons so that website navigation is simple and straightforward. Rounding one, two or four corners of a rectangle is a popular method of creating Web buttons.

  6. 6

    Create alternate colours and design elements for rollover buttons. A rollover button is two images that interchange when the user places his cursor on the button. Rollovers are often used to indication an active page or link in a Web design. Simple rollovers, such as the text changing colour, are effective.

  7. 7

    Add texture to the buttons. Texture is a popular method of adding visual interest to a website. Make a custom texture by using a scanner or digital camera.

  8. 8

    Add drop shadows, cross hatching, gradients and other finishing touches to the Web buttons.

  9. 9

    Make a new layer for each new button to simplify the exporting process. Name layers to differentiate similar elements.

  10. 10

    Export the buttons by clicking "File," "Export" and saving to the website's Images folder. Save buttons that use transparency as portable network graphics, or .png. Save buttons with high amounts of detail as .jpeg and all others as .gif.

  11. 11

    Add the buttons to your website via uploading and coding. Test to ensure that links work before launching the site publicly.

Tips and warnings

  • Plan the design as much as possible before using the computer.
  • Adobe Illustrator renders any graphics that exceed the limits of the art board. It may be necessary to use Adobe Photoshop or another bitmap editor to trim the final graphics.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.