How to Create an App Icon in Photoshop

Building an app icon combines a few very specific Photoshop skills: the rounded rectangle tool, a custom gradient sampled from real reference colors, precise alignment, and exporting with a transparent background. This tutorial covers building the icon’s rounded rectangle shape, coloring it with a sampled gradient, centering a logo inside it, and finishing with a drop shadow and a transparent PNG export.

Creating a Square Working Document

A large, perfectly square document gives an app icon enough resolution to scale down cleanly to any size it’s actually used at.

1. Create a New Square Document

   Press Cmd/Ctrl+N and set both width and height to 1000 pixels.

2. Set a Background Color

   Fill the background with a neutral color, such as dark gray, as a temporary reference while building the icon.

Building the Rounded Rectangle With the Properties Panel

The Rounded Rectangle tool’s Properties panel offers precise numeric control over size and position instead of relying on dragging by eye.

3. Draw an Initial Rounded Rectangle

   Select the Rounded Rectangle tool and drag from the top left to the bottom right of the document.

4. Set the Exact Width and Height

   In the Properties panel, type in the exact width and height needed, such as 950 by 950 pixels for a 1000-pixel document.

5. Set the Exact Position

   Set the X and Y position, such as 25 pixels each, to center the shape evenly within the remaining space.

Setting the Corner Radius and Removing Fill and Stroke

The radius sliders control how rounded the corners are, and the fill and stroke options can each be turned off to leave a clean, unfilled shape ready for a gradient.

6. Adjust the Corner Radius

   Drag the radius sliders, or type in a specific value such as 140 pixels, to set how rounded the corners appear.

7. Set Fill to White or None

   Choose a fill color, such as white, or set it to none using the diagonal slash option, depending on the current step.

8. Remove the Stroke

   Click the stroke color swatch and choose none to remove the default black outline.

Sampling Colors From an iOS Screenshot Into a Custom Gradient

Sampling exact colors from a real iOS screenshot with the eyedropper, then saving them as a gradient preset, gives the icon an authentic, on-brand color scheme.

9. Bring In a Reference Screenshot

   Open a screenshot of an existing iOS app icon with the colors to reference.

10. Open the Gradient Editor

    Press G for the Gradient tool, then click the gradient preview to open the Gradient Editor.

11. Sample Each Gradient Stop From the Reference

    Click each color stop, click its color swatch, and use the eyedropper to sample the corresponding color directly from the reference screenshot.

12. Save the Gradient as a New Preset

    Name the gradient and click New to save it as a reusable preset in the Gradient Editor.

Applying the Gradient With a Clipping Mask

A new layer, clipped to the rounded rectangle, keeps the gradient contained to the icon’s shape instead of covering the entire canvas.

13. Create a New Layer Above the Rectangle

    Add a new layer directly above the rounded rectangle layer.

14. Clip the Layer to the Rectangle

    Right-click the new layer and choose Create Clipping Mask.

15. Apply the Saved Gradient

    Select the saved gradient preset, choose the Linear Gradient option, hold Shift, and drag from the bottom to the top of the shape.

Why the Gradient Needs a Clipping Mask

A gradient painted directly onto a new layer fills the entire layer regardless of the rounded rectangle’s shape underneath it. Clipping that layer to the rectangle restricts the gradient’s visibility to exactly the rounded shape, so the color stays contained within the icon instead of spilling across the whole canvas.

Centering the Logo With Select All and Alignment Tools

Selecting the entire canvas before using the Move tool’s alignment options is what lets a logo be centered against the whole document with a single click.

16. Drag the Logo Into the Document

    Click and drag a logo file into the icon document.

17. Select the Entire Canvas

    Press Cmd/Ctrl+A to select the entire document.

18. Use the Move Tool’s Alignment Buttons

    Select the Move tool, then click the horizontal center and vertical center alignment buttons in the options bar.

19. Scale the Logo to Fit

    Press Cmd/Ctrl+T and scale the logo down to a size that fits comfortably within the icon, press Enter, then press Cmd/Ctrl+D to deselect.

Why Selecting All First Makes Alignment Work

The Move tool’s alignment buttons line the layer up with the active selection. Selecting the entire canvas with Select All before clicking the alignment buttons guarantees the logo aligns to the true center of the whole document, rather than to some other reference point.

Adding and Fine-Tuning a Drop Shadow

A Drop Shadow layer style, adjusted for size, distance, and opacity, gives the icon a sense of depth as though it’s sitting on a real home screen.

20. Open Layer Styles on the Rectangle

    Select the rounded rectangle layer, click the fx icon at the bottom of the Layers panel, choose Blending Options and check Drop Shadow.

21. Increase Size and Distance

    Raise the Size and Distance values so the shadow spreads out and looks convincingly cast rather than tightly hugging the edge.

22. Lower the Opacity

    Reduce the shadow’s opacity for a softer, more realistic look.

23. Reduce Settings if the Shadow Extends Past the Canvas

    Lower the size, distance, or opacity further if the shadow gets cut off at the edge of the document.

Checking the Icon Against a White Background

Temporarily switching the background color to pure white makes it much easier to spot any issues with the drop shadow or edges before exporting.

24. Turn the Background Back On

    Make the background layer visible again temporarily.

25. Set the Background to Pure White

    Right-click the background color swatch, choose a custom color, and select pure white.

26. Inspect the Result Closely

    Zoom in and check for any issues, such as a drop shadow being clipped at the document’s edge.

Saving as a Transparent PNG and Previewing on the Web

Save for Web’s PNG format keeps the icon’s background transparent, and the Preview option confirms exactly how it will look once it’s actually online.

27. Hide the Background Layer

    Turn off the background layer’s visibility so the canvas shows the transparency checkerboard.

28. Open Save for Web

    Go to File > Save for Web.

29. Switch the Format to PNG

    Change the format from JPEG to PNG to preserve the transparent background.

30. Preview in a Browser

    Click Preview to check how the icon looks and confirm its final pixel dimensions in a browser window.

31. Save the File

    Click Save, choose a location, and give the file a clear name.

Why a Large Icon Beats Scaling a Small One Up

Scaling a small image up to a larger size stretches its existing pixels and quickly introduces visible blurriness or pixelation. Building the icon large from the start, then scaling down for whatever size it’s actually needed at, always preserves crisp detail, since reducing an image’s size never causes the same quality loss that enlarging one does.

Why This Approach Works

Building the rounded rectangle with exact numeric values in the Properties panel, rather than dragging by eye, keeps the icon precisely centered and proportioned from the very first shape. Sampling real colors from an existing app icon grounds the custom gradient in an authentic, already-proven color combination instead of a guess. Exporting large as a transparent PNG, after confirming the result in an actual browser preview, ensures the icon looks sharp and clean wherever it eventually gets used.

Final Thoughts

Between the rounded rectangle, the sampled gradient, careful centering, and a subtle drop shadow, this workflow produces an app icon that looks like it belongs on a real home screen. The same combination of precise shape tools, sampled color, and transparent export works for building any icon, logo, or app-style graphic, not just one modeled on iOS 8.

Quick Reference: Keys, Menus and Settings

• Square documentCmd/Ctrl + N, 1000 x 1000 pixels
• Rounded rectangleProperties: W and H 950 px, X and Y 25 px, radius 140 px; Fill white, Stroke none
• Sample a gradientG, Gradient Editor: click each stop’s color, sample the reference, name it, New
• Fill the shapeNew layer, right-click > Create Clipping Mask, Linear gradient, Shift-drag bottom to top
• Center the logoCmd/Ctrl + A, Move tool, align horizontal and vertical centers; Cmd/Ctrl + T to scale, Cmd/Ctrl + D
• Drop shadowfx > Blending Options > Drop Shadow: raise Size and Distance, lower Opacity
• SaveHide the background, File > Save for Web, PNG, Preview