Icon Layer Overview
In this tutorial, we will guide you through updating the icon properties of your Main Screenshots in AppMockUp Studio. Follow these simple, step-by-step instructions to bring your icons or images to life.
Before You Begin:
The icon layer is more than just a container for your app icon - it's a versatile shape that can be used to create compelling visual elements throughout your screenshots. To access its properties, select the icon from the Layers Panel.
Note: You'll know the icon layer is selected when it's highlighted in blue in the Layers Panel.
Step 1: Mastering Basic Icon Properties
Let's start with the fundamental settings that form the foundation of your icon's appearance:
Position and Alignment
Icons can be positioned using Auto Layout (the default system) or manual positioning. Auto Layout helps maintain consistent spacing automatically, while manual positioning gives you precise control using percentage-based positions.
Quick Guide:
• Use Auto Layout (default) for automatic spacing and alignment
• Enable "Ignore Auto Layout" for manual percentage-based positioning
• Align and margin controls help fine-tune the position
For a comprehensive guide on positioning, including detailed explanations of alignment, margins, offsets, and rotation, see our layer positioning guide.
Size and Proportions
While the default 128x128 pixels works well for app icons, don't feel limited by these dimensions. The size controls can help you create various elements:
• Create a small 64x64 pixel icon to highlight a feature without overwhelming the screen
• Expand to 256x256 pixels for a hero image that commands attention
• Use non-square dimensions for decorative elements or backgrounds
Pro Tip: Enable the aspect ratio lock when working with app icons to maintain perfect proportions. Disable it when creating custom shapes like wide rectangles for text backgrounds or tall accents for side decorations.
Step 2: Color Fill
The Color Fill option allows you to set solid colors for your icons using RGB or HEX values. You can input colors directly, use the color picker, or sample colors from your screen.
Quick Guide:
• Enter HEX codes or color names in the color input field
• Use the color picker for visual color selection
• Sample colors from anywhere on your screen
For a comprehensive guide on color fills, including opacity controls and keyboard shortcuts, see our color fill guide.
Step 3: Gradient Fill
Gradient fills create smooth transitions between colors. You can create linear gradients with multiple color stops and precise control over angles and positions.
Quick Guide:
• Add multiple color stops for complex gradients
• Adjust angle and position with visual controls
For detailed instructions on creating and customizing gradients, see our gradient fill guide.
Step 4: Image Fill
Image fills allow you to use images as backgrounds for your icons. You can adjust how images are displayed with various scale modes and image adjustments.
Quick Guide:
• Upload images from your computer
• Choose between Fill and Fit scale modes
• Adjust brightness, contrast, and other image properties
For complete details on working with image fills, including advanced image adjustments and overlays, see our image fill guide.
Step 3: Shape Customization - Creating Distinctive Visual Elements
The shape customization options allow you to transform basic rectangles into sophisticated design elements. Here's how to make the most of these features:
Corner Radius
The corner radius settings are crucial for creating modern, approachable designs. Different radius values can completely change the feel of your elements:
Understanding Corner Styles:
• Sharp corners (0px): Create precise, technical feelings - perfect for professional apps
• Slight rounding (8px): Offer a modern, friendly appearance - ideal for most applications
• Pill shape (64px): Great for buttons and callouts - especially popular in social apps
• Custom corners: Create unique shapes for distinctive branding
Real-world example: Creating an iOS-style app icon:
1. Set uniform corner radius to 22px for current iOS style
2. Add a subtle shadow (blur: 8px, opacity: 20%)
3. Apply a slight gradient overlay for depth
4. Maintain consistent corner radius across all icons
Pro Tip: For Material Design-inspired elements, use 4px, 8px, or 16px radius values to maintain design language consistency.
Stroke Effects
Strokes can define boundaries, create emphasis, or add decorative elements. Here's how to use them effectively:
Practical Applications:
• Solid strokes: Create clear boundaries for important elements
• Dotted strokes: Indicate interactive areas or selection zones
• Dashed strokes: Suggest movement or flow in your design
Example: Creating a Feature Highlight
1. Set stroke style to DASHED
2. Use a width of 2px for clarity
3. Set dash length to 4px and gap to 8px
4. Apply your brand color at 80% opacity
5. Add a subtle blur to the stroke shadow
Pro Tip: When using strokes with images, match the stroke color to a prominent color in your icon for a cohesive look.
Shadow Effects
Shadows are powerful tools for creating depth and hierarchy in your designs. Here's how to use them effectively:
Shadow Techniques:
• Subtle Elevation: X: 0, Y: 2, Blur: 4, Opacity: 20%
• Floating Elements: X: 0, Y: 4, Blur: 8, Opacity: 25%
• Dramatic Depth: X: 0, Y: 8, Blur: 16, Opacity: 30%
Pro Tips for Professional Results
1. Consistency is Key
• Maintain the same corner radius across related elements
• Use a consistent shadow style for similar depth levels
• Keep stroke weights uniform unless intentionally different
2. Color Management
• Use your app's color palette for fills and strokes
• Maintain consistent opacity levels for similar elements
• Consider light and dark mode variations
3. Spacing and Alignment
• Use consistent margins (try 16px or 24px)
• Align elements to a grid system
• Maintain equal spacing between repeated elements
4. Performance Considerations
• Limit the number of heavy effects on one screen
• Use shadows sparingly - they can impact render time
• Optimize images before using them as fills
Related articles
How to Reorder Layers
How to Rename Layers
How to Position Layers
How to Resize Layers
How to Update Layer Fills
How to Update the Fill Color
How to Update the Fill Gradient
How to Update the Fill Image
Effects: Strokes, and Shadows
How to Add and Update Screenshot Highlights
How to Update the Text Layer Background & Decoration
Icon Layer Overview
Text Layer Overview
Device Layer Overview