◆ Photoshop · export

Align Icons For Nav

Produce pixel‑perfect icons and align them into a navigation mock: create icons as smart objects, ensure consistent gr…

2heights
2tasks
1roles do it
See the prompt↓More export workflows

The same job, four prompts

do it · improve it · decide · become
AExecute — “help me do it”Produce pixel‑perfect icons and align them into a navigation mock: create icons as smart…+
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.
when the reply comes backPush once: ask it to sharpen the weakest part, and to say what it assumed.
BImprove — “do it better”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.
when the reply comes backPush once: ask it to sharpen the weakest part, and to say what it assumed.

How to do it

the tool · the steps · what to avoid
The tool
Export As

The Export As feature in Adobe Photoshop allows you to save your images in various formats and adjust settings for different uses.

  1. 1

    Open your file in Photoshop.

  2. 2

    Go to File > Export > Export As…

  3. 3

    In the Export As dialog box, choose your desired Format (e.g., JPEG, PNG, GIF, SVG).

  4. 4

    Adjust Scale, Canvas Size, and other settings as needed for your output.

  5. 5

    For print, go to Image > Mode and select CMYK Color before exporting.

    Best practiceFor high-quality printing, set the resolution to 300 dpi or higher in Image > Image Size.

  6. 6

    To prevent color shifts, ensure your color profile is consistent across your workflow.

  7. 7

    Click Export All to save your image with the chosen settings.

Use File > Export > Quick Export as (image format) to quickly export the entire document using your default preferences.

Photoshop actions can automate export workflows, including using File > Export > Save for Web (Legacy) for batch exports.

Glossary

words on this page
Smart ObjectsLayers that contain raster or vector image data, preserving source content with all its original characteristics.ExampleScaling a Smart Object up and down multiple times won't degrade its image quality.
Canvas SizeThe total printable area of an image, which can be adjusted to add or remove space around content.ExampleYou can increase the canvas size to add more white space around your photograph.
CMYK ColorA color model using cyan, magenta, yellow, and black inks, primarily for professional printing.ExampleA magazine cover is typically printed using CMYK color inks for accurate reproduction.
AutomateTo perform a sequence of predefined tasks automatically, often using recorded actions.ExampleYou can automate the process of converting a folder of images to a different file format.
ActionsRecorded series of commands that can be played back to automate repetitive tasks in Photoshop.ExampleYou can record a set of Photoshop actions to apply the same effects to many images.

The real tasks

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

Who does this

1 roles
UX / Web Designer

Questions people ask

honest answers

Because you rarely think 'I want the redaction tool'. You think 'I have to share this without leaking the client's details'. Start from the need, and the feature finds you.

Real. Every job here was drawn from what people in real roles were actually seen doing in Photoshop — not a feature checklist.

No. Each page gives you a ready prompt you can paste into an AI assistant, plus the plain steps to do it yourself. Start with either — the goal is the finished job, not the tool.