When creating buttons for website menus, keep in mind that in some cases, buttons are not only identified by the text on them but by icons (symbols) as well. Learn how to give users an option of choosing the appropriate icon for each button type in a single web menu button template.
Checkout the web buttons product guide.
Web menu button icons
You can create as many button icons for your web menu button template as you wish. The most common and useful button symbols that are used in website menus are:
- Home (About)
- Shopping cart
- Sign up
- Log in
- Sign out
- Site map
To make your button template more generic and complete, add a few generic types of symbols in your web menu button templates that can be used for other buttons. Read more about types of web buttons.
Export the EPS icons
Lets create a few icons for our web menu button template.
Draw or import your icon (symbol) for the button in CorelDRAW.
Select all the shapes that form one icon and click on the Export icon in the top menu or press Ctrl+E.
Choose EPS – Encapsulated PostScript as the file type, select the Selected only check-box and click Export.
In the EPS Export window, use these settings.
Note. Our web-to-print software can handle most EPS files up to PostScript Level 3.
Download the EPS icons we used in this example.
EPS files are the best choice when you have vector icons but you can also use any other image files as a colection of icons. Since in most cases icons are not perfect squares, you can use image formats that retain transparency (Ex. PNG, GIF, TIFF etc.) or simple JPG images when you don’t need transparent parts in the icon.
After you have all the icons as EPS images, place one on the button, convert it to a bitmap (Bitmaps/Convert to bitmap) and turn into a variable image field.
Upload the exported EPS icons to your image library in a separate folder and assign it to the dynamic imaging template as an image selection.
The user will see the selection of icons below the template preview and be able to pick one for each button type.
Download the free CorelDRAW template file we used in this example.
Try this web menu button template.
Here are a few links to useful resources:
- Free vector icon pack at vecteezy.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
- Master List of Free Icons at icondock.com
- 60 Free Vector Icon Packs for Design Professionals from vector.tutsplus.com
- Free developer icon sets at outlawdesignblog.com
- Free icon set at designious.com