Align Icons For Nav

Align Icons For Nav in Adobe Photoshop — with two ready prompts: the immediate one, and the one that makes it stick. 1 real situation leads here.

2prompt heights
1situation
1role does it
Open it in the interactive atlas →

The moments that lead here

If one of these is your afternoon, you are in the right place.

Produce a set of pixel-perfect icons and align them into a navigation mock so developers can code exactly what was designed.

2 ready prompts

Written for the moment this actually comes up.

Execute — do the immediate task

+
Produce pixel‑perfect icons and align them into a navigation mock: create icons as smart objects,…
Produce pixel‑perfect icons and align them into a navigation mock: create icons as smart objects, ensure consistent grid and spacing, align into the nav frame to developer specs, and export [svgs] and a layered [psd] for handoff.

Improve — make it easier to accept

+
Before I deliver to engineering, remove ambiguity: confirm icon grid, stroke weight, and…
Before I deliver to engineering, remove ambiguity: confirm icon grid, stroke weight, and [snap=24px/32px] pixel snapping, provide an annotated [psd] with exact spacing values and export settings, and include a zipped folder of optimized [svgs] named for each nav item so developers can code directly.

Who does this, and with what

The same task is different work inside a different job.

UX / Web DesignerAdobe Photoshop (vector shapes + pixel-snapping)Figma (handoff and developer specs)also: Design Pixel-Perfect Iconsalso: Prepare Dev-Ready Specs

Next to this one

Other create work people do in Adobe Photoshop.

Every task here came from the work, not from a feature list — which is why the prompts name what you want done and never the button that does it. The tool changes; the work does not.
Copyright © LLOS.ai · 2026 — original pedagogy, voice, and design — all rights reserved.

The rest of the map

Same library, five ways in.