In this tutorial, we will guide you through updating the fill properties of a layer in AppMockUp Studio.
// At the end of this guide, you will be able to update the fill type, set the fill color, gradient, and image of a layer in AppMockUp Studio with ease. //
Before You Begin:
In order to view the layer properties in the Properties Panel you need to select a layer in the Layers Panel.
// Note: The layer is selected when highlighted in blue in the Layers Panel. //
Update Fill Type
// Based on the layer type, you In the 'FILL' section under 'Type', you can choose from 2 or more different fill types: //
Fill Color
// // Available for all layers. //
Fill Gradient
// // Available for all layers. //
Fill Image
// // Available only for main screenshot and instance screenshot backgrounds, panoramic background & icon layers //
Fill Panoramic
// // Available only for the main screenshot and instance screenshot backgrounds. //
Update Fill Color
There are multiple ways to set your desired color:
Method 1: Direct Input
- Enter the HEX code (e.g. #FF0000) in the input field
// • Use natural language (e.g. 'red', 'blue') to quickly select a generic color in the color input field //
Pro Tips:
In the HEX input field, use keyboard shortcuts to quickly adjust colors:
// ↑ / ↓ - Cycle through color shades //
// Shift + ↑ / ↓ // - Cycle in larger increments //
Method 2: Color Picker
// Click the color button // // // // next to the HEX input field to open the color picker: //
// • Drag the color control // // // // // // // // // // // // // // // // // // around the canvas to select a color //
- Adjust Hue and Opacity using the sliders
- Fine-tune using RGBA value inputs
// • Use the color picker button // // // // to select a color from your screen //
Update Fill Gradient
When selecting 'Gradient' as your Fill Type, you will access the powerful Gradient Editor that allows you to create custom gradients.
// Click the gradient button // // // // // // // // // // // // next to 'Linear' to open the Gradient Editor: //
Using the Gradient Editor
The Gradient Editor allows you to create custom gradients with multiple color stops and angle controls.
// Color Stops //
- Click anywhere on the gradient bar to add a new color stop
// • Click a color stop // // // // // // // // // // // // // // // // // // // to select it and change its color using the color picker //
- Drag color stops to adjust their position
- Enter precise position values (0-100%) in the input field
// • Delete a selected color stop by clicking the // // // // // trash icon //
// Gradient Angle //
// • Drag the start and end control points // // // // // // // // // // // // // // // // // // to adjust the angle //
- Color stops maintain their position relative to the gradient angle
// Quick Actions //
// • Use the flip button // // // // // to reverse color stop positions //
// • Click the rotate button // // // // // to quickly rotate by 45° increments //
Pro Tips:
// Hold Shift while dragging color stops to snap them to 10% increments for precise positioning. //
Update Fill Image
// The Image Fill type allows you to use images as backgrounds for your Main Screenshot, with powerful controls for adjusting how the image appears. //
Adding Images
There are two ways to add an image:
- Click 'Select From Computer' to upload your own image
- Click 'Generate Mesh' to create an unique image using the Mesh Generator
// Scale Modes //
- Fill: Covers the entire area while maintaining aspect ratio (may crop)
- Fit: Shows the entire image while maintaining aspect ratio (may show background)
// Image Adjustments //
// • Invert the image by pressing the 'Invert' button // // // //
// • Rotate the image by 90° increments using the 'Rotate' button // // // // //
// • Flip the image horizontally // // // // or vertically // // // // // // // // // // // using the 'Flip' buttons //
- Opacity: Control the transparency (0-100%)
- Brightness: Adjust image luminosity (0-200)
- Contrast: Modify difference between light and dark areas (0-200)
- Hue: Shift the color spectrum (0-360°)
- Saturation: Control color intensity (0-200)
// Background & Overlay //
- Set a background color to show behind transparent images
- Add color overlays to tint the image
- Apply gradient overlays for creative effects
Pro Tips:
Double-click the sliders to reset to default values.
In the number input fields, use keyboard shortcuts to quickly adjust values:
// ↑ / ↓ - Increment / decrement the value by 1 //
// Shift + ↑ / ↓ - // Increment / decrement the value by 10 //
Step 5: Using Panoramic Fill
// By setting the Main Screenshot background to panoramic, you can create a continuous background that spans across all your screenshots, creating a seamless visual that // will make your app screenshots stand out in the App Store and Google Play. //
Learn about the different fill types available in AppMockUp Studio and how to use them effectively in your designs. Choose from solid colors, gradients, images, or create panoramic backgrounds that span across multiple screenshots.
Color Fill
Solid color fills are perfect for creating clean, minimalist designs or establishing strong visual hierarchy. Use the color picker, input HEX codes, or sample colors from your screen.
Quick Overview:
- Input colors using HEX, RGB, or natural language
- Use the color picker for visual selection
- Sample colors from anywhere on your screen
For detailed instructions on working with color fills, see our color fill guide.
Gradient Fill
Create smooth color transitions with linear gradients. Add multiple color stops and control angles for sophisticated effects.
Quick Overview:
- Add and customize multiple color stops
- Control gradient angle and position
Learn more about creating custom gradients in our gradient fill guide.
Image Fill
Use images as fills with precise control over how they appear. Adjust scale modes, apply effects, and add overlays to create unique visuals.
Quick Overview:
- Choose from multiple scale modes
- Apply image adjustments and effects
- Add color or gradient overlays
Discover all image fill options in our image fill guide.
Panoramic Fill
Create continuous backgrounds that span across all your screenshots. Available for Main Screenshots and Instance Screenshots, this special background type helps create cohesive, professional layouts.
Quick Overview:
- Select the device component to access panoramic settings
- Choose from various fill types for the panoramic background
- Creates seamless transitions between screenshots
Learn how to create stunning panoramic backgrounds in our device panoramic guide.