Web buttons are one of the most important things in web design. Their style changes constantly to follow current trends. Find out what’s important to keep in mind while creating button templates for dynamic imaging.
View more web button examples at:
- Freebies Round-Up: Icons, Buttons and Templates at smashingmagazine.com
- Collection of 90 free Web 2.0 Style Buttons from blog.spoongraphics.co.uk
- Cool Web 2.0 icons at axialis.com
- 39 Photoshop Button Tutorials You Should Have in Your Arsenal at designvitality.com
- Extensive archives of classic buttons at gtmcknight.com
- Free modern web icons and buttons at webfruits.it
Things to consider:
- Size – pick sizes and shapes that can be easily used in different web designs;
- Color space – use RGB;
- Button colors – use layers to make the buttons change colors easily;
- Icons – Assign a selection of icons (symbols) as image options.
Types of web buttons
Web buttons can be categorized into:
Read more about types of web buttons.
When creating buttons for website menus, keep in mind that in some cases, buttons are not only identified by the text on them but from the icon (symbol) as well. Learn how to assign a selection of icons in a web button template.
The buttons must flow with the rest of the website design they are used in. Apart from their size and shape, the most important thing to ensure they fit the rest of the design are the colors.
Make your web button templates as generic as posible by layering the objects in way that the user is required to change a single background image or color to get a button with the desired color.Learn how to make chameleon web buttons.
Depending on the goal you’re trying to achieve, you can:
- assign a selection of images as the background color, texture or pattern variations or
- assign a color picker to the image field giving users the option of picking any color from the palette.
Use RGB color mode. All PC displays function this way and to make sure the colors in the button are the same as the ones you chose on your monitor, use RGB colors.
PC displays have 72DPI or 96DPI of resolution. Same as most web-to-web templates, the image placeholders inside it should have 72 DPI or 96 DPI of resolution.
Image and HTML buttons
There are 2 ways of making nice buttons or any other web page elements:
- Preparing images, slicing, laying out;
- Placing HTML text over them.
The limitations are the fonts and the way the text looks. For example you cannot make the text go vertically or on an angle.
You may also find these resources usefull:
- 72 Free Vector Glass Buttons and Bars at bittbox.com
- Free vector icon pack at vecteezy.com
- 77 Vector Buttons hot off the press at gosquared.com
- Tons of free stylish icons in PNG format at customxp.net
- 30 Amazing Free Vector Icons, Buttons, Stickers, Banners, Labels and Speech Bubbles at speckyboy.com
- 60 Free Vector Icon Packs for Design Professionals from vector.tutsplus.com
- Master List of Free Icons at icondock.com
- Free developer icon sets at outlawdesignblog.com
- Types of web buttons
- Web tabs
- Web banners
- Tabbed web designs
- Business cards
- CD/DVD case covers
- Greeting cards
- Wrapping paper
- Newspaper Ads
- Outdoor signs
- CD/DVD labels
- Free signage web-to-print templates
- Books for web-to-print
- Book sizes
- Outdoor sign sizes
- Card & letter sizes