Skip to main content

Creating Buttons and Icons

In This Lesson

Introduction to Buttons and Icons

Buttons and icons are fundamental interactive elements in digital interfaces, serving as visual cues that help users navigate and interact with websites, applications, and other digital products. These seemingly simple elements require thoughtful design to effectively communicate their purpose, attract appropriate attention, and provide visual feedback.

Think of buttons and icons as the doorknobs and signposts of the digital world - they guide users through spaces, indicate where actions can be taken, and establish expectations about what will happen when they're engaged with. Just as physical buttons and signs must be instantly recognizable and intuitive to use, digital buttons and icons must communicate their function clearly and operate predictably.

The Importance of Buttons and Icons

Buttons and icons play several critical roles in user interfaces:

flowchart TD A[Buttons & Icons Functions] --> B[Facilitate Interaction] A --> C[Guide Navigation] A --> D[Communicate Function] A --> E[Create Visual Hierarchy] A --> F[Establish Brand Identity] B --> B1[Provide action points] C --> C1[Create visual pathways] D --> D1[Use recognizable metaphors] E --> E1[Highlight important actions] F --> F1[Express design language]

Facilitate Interaction

Buttons and icons serve as the primary interactive elements through which users accomplish tasks and navigate interfaces.

Guide Navigation

Well-designed buttons and icons create visual pathways through digital spaces, helping users find what they need.

Communicate Function

Icons use visual metaphors to instantly communicate meaning, while buttons indicate where actions can be taken.

Create Visual Hierarchy

The styling of buttons and icons helps establish importance, guiding users toward primary actions and away from destructive ones.

Establish Brand Identity

Custom buttons and icons contribute to a cohesive visual identity, reinforcing brand recognition.

When designed effectively, these elements fade into the background of user consciousness while powerfully shaping the interaction experience.

Button Design Fundamentals

Effective buttons share several key characteristics:

Affordance

Buttons should look clickable or tappable - they should visually suggest their interactivity. This is typically achieved through:

  • Dimensionality (shadows, gradients, or borders)
  • Color contrast with surroundings
  • Familiar button shapes (rectangles with rounded corners)
  • Hover effects that respond to user interaction

Clarity

Buttons should clearly communicate their function:

  • Concise, action-oriented labels ("Submit," "Download," "Learn More")
  • Appropriate icons that reinforce the text
  • Consistent positioning within the interface
  • Appropriate sizing based on importance

Hierarchy

Different visual treatments indicate button priority:

  • Primary buttons: Most prominent, using brand colors and high contrast
  • Secondary buttons: Less prominent but still visible
  • Tertiary buttons: Subtle, often text-only or outlined
  • Destructive buttons: Warning colors for irreversible actions

States

Buttons should visually respond to different interaction states:

  • Default: Normal, resting appearance
  • Hover: Visual change when cursor moves over the button
  • Active/Pressed: Appearance while being clicked
  • Focused: Appearance when selected via keyboard
  • Disabled: Visually indicates when a button cannot be used

These fundamental aspects work together to create buttons that are intuitive, accessible, and effective at guiding user behavior.

Default Hover Active Disabled Secondary Delete

Icon Design Principles

Effective icons follow these essential principles:

Simplicity

Icons should communicate a single concept clearly:

  • Use minimal details and clean lines
  • Remove unnecessary elements
  • Focus on the essential characteristics of what's being represented
  • Work effectively at small sizes

Recognition

Icons should be instantly recognizable:

  • Use familiar visual metaphors and conventions
  • Build on established patterns (e.g., gear for settings)
  • Maintain distinguishable silhouettes
  • Ensure they make sense across cultural contexts when possible

Consistency

Icons within a set should share visual characteristics:

  • Consistent weight and stroke thickness
  • Similar level of detail throughout the set
  • Unified perspective (front view, 45° angle, etc.)
  • Common stylistic approach (outlined vs. filled, etc.)

Scalability

Icons must work at various sizes:

  • Simple designs remain recognizable when scaled down
  • Consider creating size-specific versions for extreme scaling
  • Test at all intended display sizes
  • Optimize pixel alignment at smaller sizes

Well-designed icons function like a visual language that communicates meaning clearly across language barriers and enhances user understanding.

Filled Outline Flat Gradient ♥ Glyph

Setting Up GIMP for Button Design

Before creating buttons, prepare your GIMP workspace:

Document Setup

  1. Create a new document that's large enough to accommodate your button design:
    • For web buttons: 200-300px wide, 50-100px tall is a good starting point
    • For high-density displays: Consider working at 2× the final size
    • Set up at 72-150 ppi for screen-based buttons
  2. Enable the grid for precise alignment (View → Show Grid)
  3. Set up guides to mark button boundaries and centers

Layer Organization

For efficient workflow, organize your layers:

  • Background layer: For context or transparency
  • Button shape layer: The main button form
  • Highlight/shadow layers: For creating dimension
  • Text layer: For button labels
  • Icon layer: If including icons
  • Group related layers for each button state

Selecting Tools

Key tools for button creation:

  • Rectangle Select Tool: For creating button shapes
  • Path Tool: For precise, editable button outlines
  • Gradient Tool: For dimensional effects
  • Text Tool: For button labels
  • Layer Effects: For shadows, overlays, etc.

This preparation ensures an efficient, organized workflow for creating consistent buttons.

Creating Basic Buttons

Let's walk through creating a simple, modern button:

Flat Button Design

  1. Create a new document (300×100px)
  2. Use the Rectangle Select Tool to create a selection (200×50px)
  3. With the selection active, create a new layer named "Button Base"
  4. Fill the selection with your primary color (e.g., #4285f4)
  5. Select → Rounded Rectangle to add a subtle corner radius (5-10px)
  6. Deselect (Ctrl+Shift+A)
  7. Add a Text layer with your button label (e.g., "Sign Up")
  8. Position the text in the center of the button

Adding Subtle Dimension

  1. Create a new layer above the button base layer named "Highlight"
  2. Select the button shape by Ctrl+clicking the Button Base layer thumbnail
  3. Contract the selection by 1-2px (Select → Shrink)
  4. Create a gradient from white to transparent (Gradient Tool)
  5. Apply the gradient from top to bottom
  6. Reduce the layer opacity to 20-30%
  7. Add a subtle drop shadow to the button layer (Filters → Light and Shadow → Drop Shadow)

Creating Button States

  1. Duplicate your button layers (right-click → Duplicate Layer)
  2. For hover state:
    • Brighten the button color slightly
    • Increase the highlight opacity
  3. For active/pressed state:
    • Darken the button color
    • Reduce or remove the highlight
    • Adjust the drop shadow to appear closer
  4. For disabled state:
    • Desaturate the button color
    • Reduce opacity
    • Remove shadow effects

These steps create a clean, modern button design with appropriate visual states.

Button Style Variations

Different interface styles call for different button treatments:

Skeuomorphic Buttons

Mimicking physical buttons with realistic 3D effects:

  1. Create the button shape as before
  2. Apply more pronounced gradients (light to dark from top to bottom)
  3. Add a stronger highlight at the top edge
  4. Create a distinct "lip" or edge with a darker stroke
  5. Add more pronounced drop shadow
  6. For the pressed state, invert the gradient direction and adjust the shadow

Outlined Buttons

Minimal buttons with just an outline:

  1. Create a transparent button shape with a colored border
  2. Select the button shape
  3. Select → Border to create a 1-2px border
  4. Fill the border with your color
  5. Use the same color for the text
  6. For hover state, add a light background fill
  7. For active state, fill with a darker version of the color

Ghost Buttons

Ultra-minimal transparent buttons:

  1. Create a transparent button with a very subtle border
  2. Use colored text that matches the border
  3. For hover state, add a very light background fill
  4. For active state, increase the background opacity

Gradient Buttons

Modern buttons with color transitions:

  1. Create the button shape
  2. Apply a gradient between two complementary brand colors
  3. Add a subtle highlight layer
  4. Use white text for contrast
  5. For hover/active states, adjust the gradient colors

These style variations allow you to match buttons to different design aesthetics while maintaining usability.

Creating Icon Sets in GIMP

Now let's explore creating consistent icon sets:

Planning Your Icon Set

  1. Determine the icon style:
    • Filled vs. outlined
    • Flat vs. dimensional
    • Level of detail
    • Perspective approach
  2. Establish a consistent canvas size (e.g., 64×64px)
  3. Create a grid template with center guides
  4. Define a color palette
  5. List all icons needed for your set

Drawing Basic Icons

Creating simple, consistent icons:

  1. Start with basic shapes (circles, squares, triangles)
  2. Use the Path Tool for precise outlines
  3. Maintain consistent stroke weights throughout the set
  4. Keep details minimal, especially for smaller icons
  5. Align elements to the pixel grid for sharpness
  6. Use the same corner radius across icons

Creating Filled Icons

  1. Draw the icon shape using the Path Tool
  2. Convert to a selection
  3. Fill with your chosen color
  4. Add subtle details as needed
  5. For dimensionality, add very subtle highlights/shadows

Creating Outlined Icons

  1. Draw the icon shape using the Path Tool
  2. Convert to a selection
  3. Select → Border to create a stroke of consistent width
  4. Fill the stroke with your color
  5. Ensure consistent line weights across your icon set

Consistency across these techniques is key to creating a professional, cohesive icon set.

Consistent Style, Weight & Detail Level

Creating Specific Icon Types

Different icon categories require specific approaches:

Navigation Icons

Icons for menus and navigation should be:

  • Exceptionally clear and universally recognizable
  • Simple with strong silhouettes
  • Consistent in style with other interface elements
  • Examples: hamburger menu, home, back arrow, search

Action Icons

Icons representing actions should:

  • Clearly suggest the action they perform
  • Use widely understood visual metaphors
  • Provide visual feedback when activated
  • Examples: save, delete, edit, send, download

Status Icons

Icons indicating status should:

  • Use intuitive color coding (red for errors, yellow for warnings)
  • Be instantly recognizable at a glance
  • Clearly differentiate between states
  • Examples: success checkmark, error, warning, loading indicators

File Type Icons

Icons representing document types should:

  • Share a common base shape
  • Use distinctive elements to indicate file type
  • Balance recognition with consistency
  • Examples: document, image, video, audio, PDF

When creating icons for specific purposes, balance conventional metaphors with your design style to ensure both recognition and aesthetic harmony.

Icon Size Variations

Icons often need to work at multiple sizes:

Creating Size-Specific Versions

  1. Start with the largest size you need (e.g., 64×64px)
  2. Design with appropriate detail for that size
  3. Create a duplicate and scale down to the next size (e.g., 32×32px)
  4. Manually optimize the smaller version:
    • Simplify details that become too small
    • Ensure strokes aren't too thin
    • Align to the pixel grid
    • Adjust spacing for optimal legibility
  5. Repeat for additional sizes (24×24, 16×16)
  6. For the smallest sizes, consider radical simplification

Pixel-Perfect Optimization

For crisp icons at small sizes:

  • Zoom in and adjust elements to align with the pixel grid
  • Avoid half-pixels that can cause blurriness
  • Ensure straight lines are perfectly horizontal or vertical
  • Test on actual devices when possible

Common Icon Size Standards

  • Favicons: 16×16px, 32×32px
  • App icons: Multiple sizes from 16×16px to 1024×1024px
  • Interface icons: 16×16px, 24×24px, 32×32px
  • Social media icons: 24×24px to 48×48px typically
  • High-density displays: Create 2× versions of all icons

Size-specific optimization ensures icons remain clear and effective at all scales.

Button and Icon Exporting

Proper exporting is crucial for buttons and icons:

File Format Selection

  • PNG: Best for most buttons and icons
    • Supports transparency
    • Lossless quality
    • Good color reproduction
  • SVG: Ideal but limited in GIMP; consider using paths as a basis for SVG export
  • ICO: For favicons (multiple sizes in one file, use plugins or external tools)

Transparency Handling

  1. Ensure your buttons/icons are on transparent backgrounds
  2. Hide any background or guide layers before export
  3. When exporting as PNG, make sure "Save alpha channel" is enabled
  4. Test transparency against different backgrounds

Optimizing File Size

  • Crop canvas to the exact dimensions needed
  • For PNG, use compression level 9
  • Consider specialized tools for further optimization (TinyPNG, etc.)
  • Remove any unnecessary metadata

Creating Button/Icon Sprites

For web performance, consider creating sprite sheets:

  1. Arrange multiple buttons or icons in a single image
  2. Organize in a logical grid
  3. Document the coordinates of each element
  4. Use CSS to show only the relevant portion of the sprite

Proper export ensures your buttons and icons display correctly in their intended environment.

Animated Buttons and Icons

Adding animation enhances user feedback and engagement:

Creating Button Hover Animations

  1. Create your base button design
  2. Create a second variation with subtle changes (color, size, shadow)
  3. Export both states as separate images
  4. Use CSS transitions to animate between states: 
    button {
  transition: all 0.3s ease;
}
button:hover {
  /* Changed properties */
}

Creating GIF Animations

  1. Create each frame of your animation as a separate layer
  2. Name layers sequentially for organization
  3. Use Filter → Animation → Playback to preview
  4. Export as GIF with appropriate timing settings
  5. Optimize file size by limiting colors and frames

Loading Indicator Icons

For animated loading indicators:

  1. Create a sequence of frames showing the loading progress
  2. Keep the animation simple and lightweight
  3. Consider the standard conventions (spinning wheel, progress bar)
  4. Ensure the animation doesn't distract from content

Animations should enhance usability, not distract from it - subtle, purposeful motion creates a more dynamic and responsive-feeling interface.

Real-World Example: Button and Icon System

Let's examine creating a coherent system of buttons and icons:

Project: Dashboard Interface Elements

  1. Define the Visual Style:
    • Modern, flat design with subtle dimension
    • Primary color: Blue (#4285f4)
    • Secondary colors: Green (#34a853), Red (#ea4335), Yellow (#fbbc05)
    • Consistent corner radius: 5px
    • Uniform shadow style: 2px blur, 30% opacity
  2. Button Hierarchy:
    • Primary Actions: Solid blue buttons with white text
    • Secondary Actions: White buttons with blue borders and text
    • Destructive Actions: Red buttons with white text
    • Disabled State: Gray (#e0e0e0) with light text
  3. Icon System:
    • 20×20px canvas size with 2px padding
    • 2px stroke weight for outlined icons
    • Consistent corner radius of 2px
    • Solid fill for active/selected states
    • Outline style for default states
  4. Implementation:
    • Create button templates for each type
    • Design core navigation icons first
    • Extend to action icons following the same style
    • Document standards for future additions

This systematic approach ensures visual harmony, reduces design decision fatigue, and creates a more intuitive user experience.

Accessibility Considerations

Accessible buttons and icons work for all users:

Color and Contrast

  • Ensure sufficient contrast between button text and background (4.5:1 minimum ratio)
  • Don't rely solely on color to indicate function or state
  • Test designs in grayscale to verify they work without color

Size and Spacing

  • Make buttons large enough to be easily tapped on mobile (minimum 44×44px touch target)
  • Provide adequate spacing between interactive elements
  • Ensure icon details are distinguishable at intended viewing sizes

Text Labels

  • Include text labels with icons when possible
  • Ensure button text clearly describes the action
  • Use appropriate text alternatives for icons that stand alone

Focus States

  • Create visible focus indicators for keyboard navigation
  • Ensure all interactive elements can be accessed via keyboard
  • Design clear hover and active states for visual feedback

Accessible design isn't just a requirement—it creates a better experience for all users, especially in challenging contexts like mobile use or bright environments.

Tips for Professional Results

  • Consistency is Key: Maintain uniform styling across your interface elements
  • Less is More: Keep designs simple and focused on function
  • Document Your System: Create style guides for future reference
  • Test in Context: View buttons and icons in their actual environment
  • Seek Feedback: Test with actual users when possible
  • Iterate and Refine: Be prepared to adjust designs based on feedback
  • Stay Current: Be aware of platform conventions and trends

Professional button and icon design combines technical precision with an understanding of human perception and interaction patterns.

Practice Activity: Button Set Creation

Let's practice creating a set of related buttons:

  1. Create a new document (800×400px)
  2. Design a set of buttons for a fictional application:
    • Primary action button ("Submit" or "Sign Up")
    • Secondary action button ("Cancel" or "Back")
    • Destructive action button ("Delete" or "Remove")
  3. For each button:
    • Create both default and hover states
    • Use appropriate colors and contrast
    • Include text labels with suitable fonts
    • Apply consistent styling across the set
  4. Export the buttons as PNG files with transparency

This exercise will help you develop a cohesive button style that maintains appropriate visual hierarchy.

Extended Practice: Icon Set Design

For additional practice, create a basic icon set:

  1. Create a template document (64×64px)
  2. Design a set of 5 related icons:
    • Home
    • Settings
    • User/Profile
    • Search
    • Menu
  3. Apply a consistent style across all icons:
    • Choose either filled or outlined style
    • Maintain uniform stroke weights
    • Use the same level of detail throughout
    • Align to a common grid
  4. Create both 64×64px and 32×32px versions of each icon
  5. Export as individual PNG files with transparency
  6. Create a sprite sheet containing all icons

This extended practice will help you understand the challenges of creating a consistent, scalable icon system while building a useful resource for future projects.

Conclusion

Buttons and icons are fundamental elements that bridge the gap between visual design and user interaction. By understanding the principles that make these elements effective and learning the techniques to create them in GIMP, you gain the ability to design interfaces that are both visually appealing and intuitive to use.

Remember that the most effective buttons and icons often go unnoticed by users - they're so intuitive and well-integrated that they fade into the background of consciousness while guiding behavior. This invisibility of good design is the mark of success in creating these essential interface elements.

In our next lecture, we'll build on these skills to explore web graphics and UI elements more broadly, expanding our toolkit for creating effective digital interfaces.

Additional Resources