Creating Buttons and Icons

Module 5: Text & Design Elements - Friday: Design Assets (Lecture 1)

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:

Clarity

Buttons should clearly communicate their function:

Hierarchy

Different visual treatments indicate button priority:

States

Buttons should visually respond to different interaction states:

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:

Recognition

Icons should be instantly recognizable:

Consistency

Icons within a set should share visual characteristics:

Scalability

Icons must work at various 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:

Selecting Tools

Key tools for button creation:

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:

Action Icons

Icons representing actions should:

Status Icons

Icons indicating status should:

File Type Icons

Icons representing document types should:

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:

Common Icon Size Standards

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

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

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

Size and Spacing

Text Labels

Focus States

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

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