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.
-
Create the canvas and draw a circle
- Open Online PS (zaixianps.cc) and press
Ctrl+Nto create a canvas. A suggested size is800×800 px, with the background set toTransparent. - 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 isNone.
- Open Online PS (zaixianps.cc) and press
-
Warp the circle with Bulge (to form the flower centre)
- Select the circle layer and press
Ctrl+Tto 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
Enterto confirm.
- Select the circle layer and press
-
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°, scale100%, style Linear. - Click OK and the circle fades from dark to pale.
-
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+Eto 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.
-
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), opacity100%. - Right color also
#ffffff, opacity0%. - 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
Screenand set the size to around20px.
-
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+Tto trigger Free Transform Duplicate. - Once the transform box appears, hold
Altand 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. - Make sure the active tool is still the Move / Free Transform tool (
-
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+Tto 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.
- Turn on View → New Guide (
-
Overall size and final export
- Select every layer (flower centre and petals), then use
Ctrl+Tto scale the whole icon to a suitable size. - When you're done, choose File → Export As → PNG (transparent) and save it locally.
- Select every layer (flower centre and petals), then use
References
- Online PS
- Adobe official documentation
- PS tutorial sites