PS Online Tutorial: Minimal Lotus Icon

About 11 min read

Home/ PS Tutorials/ PS Online Tutorial: Minimal Lotus Icon

A lotus icon goes together fastest from vector shapes. A gradient overlay lays down the color, inner glow makes it look translucent, and rotated duplicates generate the petals. Every shape warp and layer style value is listed, which is plenty for UI icon work too.

  1. Create the canvas and draw a circle
    • Open Online PS (zaixianps.cc) and press Ctrl+N to create a canvas. A suggested size is 800×800 px, with the background set to Transparent.
    • In the left toolbar choose Shape tool → Ellipse (U), then click and drag in the centre of the canvas to draw a complete circle.
    • In the options bar, make sure the fill color is #2c3e50 (deep blue / deep grey) and stroke is None.
  2. Warp the circle with Bulge (to form the flower centre)
    • Select the circle layer and press Ctrl+T to enter Free Transform.
    • Click Warp (the small grid icon) at the top left of the transform bar to reveal the warp control points.
    • In the Shape warp dropdown at the top, choose Bulge.
    • Drag the centre control point inwards so the middle of the circle sinks slightly (about 30% warp strength), then press Enter to confirm.
  3. Add a layer style – Gradient Overlay
    • Double-click the circle layer to open the Layer Style dialog.
    • Check Gradient Overlay and click the gradient bar to edit it:
      • Left color #2c3e50 (dark), opacity 100%.
      • Right color #95a5a6 (pale grey), opacity 0%.
      • Keep the angle at 90°, scale 100%, style Linear.
    • Click OK and the circle fades from dark to pale.
  4. Build a single petal shape
    • Create a new blank layer and use the shape tool to draw two identical circles (a radius of about 20% of the overall width works well).
    • To make them easier to see, first lower the fill opacity of both circles (say 30%), then check how much they overlap.
    • Select both circle layers and press Ctrl+E to merge them into one layer.
    • Switch to the Path Selection Tool (A) and make sure the shape is selected in the Paths panel.
    • In the Pathfinder (top toolbar) choose Intersect and click the overlap of the two circles to generate a new shape — the petal outline.
    • The path is now merged into a single shape component.
  5. Add fill and a Gradient Overlay to the petal
    • Select the petal shape layer and open Layer Style.
    • Set the fill color to #000000 (or drop the opacity to 0) so no solid color shows through.
    • Check Gradient Overlay and build the following gradient:
      • Left color #ffffff (white), opacity 100%.
      • Right color also #ffffff, opacity 0%.
      • Set the angle to 90° so the white fades out from the base of the petal towards the tip.
    • Add another layer style, Inner Glow:
      • Pick a blue-grey slightly lighter than the background, for example #d0e0e5.
      • Keep the blending mode at the default Screen and set the size to around 20px.
  6. Duplicate and rotate into a full ring of petals
    • Make sure the active tool is still the Move / Free Transform tool (V), not the Path Selection tool.
    • Press Alt+Shift+T to trigger Free Transform Duplicate.
    • Once the transform box appears, hold Alt and drag the transform centre to the **tip** of the petal so the rotation pivots around that point.
    • Type **30°** into the angle field in the options bar (or whatever spacing you want); confirm and a new petal appears.
    • Keep pressing Ctrl+Alt+Shift+T (repeat the last free transform) — each press copies and rotates the previous petal by the same angle.
    • Repeat until the petals wrap all the way around (about 12–14 of them). Delete any surplus petal layers you don't need.
    Tip: don't duplicate with the Path Selection tool, or the new petals get added to the same path component and become hard to edit individually later. Stay on the Move / Free Transform tool and every petal becomes its own layer.
  7. Check symmetry and fine-tune the details
    • Turn on View → New Guide (Ctrl+R) and drag a horizontal and a vertical guide out from the centre of the canvas to check left-right symmetry.
    • If some petals sit off-position, select the layer and use Ctrl+T to nudge the rotation angle or position.
    • Select all petal layers (Shift+click) and set **opacity 95%** in the options bar for a softer overall look.
  8. Overall size and final export
    • Select every layer (flower centre and petals), then use Ctrl+T to scale the whole icon to a suitable size.
    • When you're done, choose File → Export As → PNG (transparent) and save it locally.

References

  • Online PS
  • Adobe official documentation
  • PS tutorial sites