How to Use the Artboards Feature of Adobe Photoshop CC

What Are Artboards in Photoshop?

An artboard is a bounded design area within a larger Photoshop document. A single PSD can contain several artboards, each with its own dimensions, background settings, layers, groups, text, shapes, Smart Objects, and images.

In the Layers panel, an artboard appears as a special group. Layers placed inside that group belong to the artboard and are normally clipped at its edges. This means an oversized photograph can extend beyond an artboard internally without appearing outside its visible boundaries.

What Are Photoshop Artboards Used For?

Designers commonly use artboards for projects such as:

• Desktop, tablet, and mobile website layouts
• App onboarding screens and interface concepts
• Instagram posts, Stories, banners, and carousel slides
• Display ads in several required dimensions
• Email header and promotional image variations
• Product mockups with alternate colors or messages
• Presentation slides or campaign storyboards

The biggest advantage is context. You can zoom out and see whether several screens feel like one visual system rather than a group of distant cousins who happen to share the same logo.

Artboards Versus Regular Layer Groups

A normal layer group organizes content, but it does not create an independent canvas. An artboard adds width, height, position, background, clipping boundaries, and export behavior. Think of a layer group as a labeled drawer. An artboard is more like a labeled desk with drawers attached.

How to Create a New Artboard Document in Photoshop CC

The cleanest way to begin is to create an artboard document from the New Document window.

Step 1: Open the New Document Dialog

Choose File > New. You can also use Ctrl+N on Windows or Command+N on a Mac.

Step 2: Choose a Suitable Preset

Select a category such as Mobile, Web, Film & Video, or a custom preset. Choose dimensions that match your intended output. For a mobile interface, for example, you might begin with a current phone-screen preset and modify its dimensions as needed.

Step 3: Enable Artboards

Turn on the Artboards option in the document settings. Confirm the width, height, orientation, color mode, and resolution before selecting Create.

Photoshop opens a document containing the first artboard. Its name appears both above the canvas and in the Layers panel. Rename it immediately with a useful label such as “Home-Mobile” or “Ad-1080×1080.” “Artboard 1” is technically a name, but so is “Thing,” and neither is especially helpful during a deadline.

Choosing Resolution and Color Mode

For screen-based artwork, use RGB color. Resolution is less important than exact pixel dimensions for most digital exports, although 72 or 144 pixels per inch is commonly used in screen-focused documents. For print work, confirm the printer’s required dimensions, bleed, resolution, and color profile before building the project.

How to Add Artboards to an Existing Photoshop Document

You do not have to start from scratch. Photoshop can convert selected layers or an existing layer group into an artboard.

Convert Existing Layers Into an Artboard

1. Open the document and display the Layers panel by choosing Window > Layers.
2. Select the layers you want to place inside the new artboard.
3. Right-click the selected layers.
4. Choose Artboard from Layers.

To convert an entire group, right-click the group and choose Artboard from Group. Photoshop places the selected content inside a newly created artboard container.

Draw a Custom Artboard

1. Select and hold the Move tool in the toolbar.
2. Choose the Artboard Tool from the hidden tool menu.
3. Click and drag in the workspace to draw an artboard.
4. Enter precise dimensions in the Options bar or Properties panel if necessary.

You can also choose a preset size from the Size menu instead of drawing freely. Presets are safer when the final output must match an exact device, advertisement, or social media format.

Add an Artboard Beside an Existing One

Select an artboard with the Artboard Tool. Plus icons appear around its edges. Click a plus icon to add another artboard in that direction. Photoshop creates the new canvas beside the selected one, which is convenient for building screen sequences or rows of design variations.

How to Duplicate, Rename, Move, and Resize Artboards

Duplicate an Artboard With Its Content

Duplicating is ideal when several layouts share a common structure. Select the artboard and hold Alt on Windows or Option on macOS while clicking one of the plus icons around it. Photoshop creates another artboard containing copies of the original content.

You can also right-click an artboard in the Layers panel and select Duplicate Artboard. Rename the copy before editing so it does not become one of six identical entries called “Home Copy.”

Rename Artboards Clearly

Double-click an artboard’s name in the Layers panel and type a descriptive replacement. A consistent naming structure makes exporting dramatically easier.

Useful examples include:

• Landing-Desktop-1440
• Landing-Tablet-768
• Landing-Mobile-390
• Promo-Square-Version-A
• Promo-Story-Version-B

Artboard names can be included in exported filenames, so sloppy naming eventually escapes the PSD and begins roaming through shared folders.

Move an Artboard

Select the Artboard Tool, click the artboard name or boundary, and drag the entire artboard to a new position. Moving the artboard also moves its nested content unless specific position-locking behavior is active.

Arrange related artboards logically. For an app, place screens from left to right in the order a user would encounter them. For responsive design, stack desktop, tablet, and mobile versions vertically or arrange them from widest to narrowest.

Resize an Artboard

Select the artboard and use one of three methods:

• Drag its boundary handles manually.
• Choose a preset from the Options bar.
• Enter exact width and height values in the Properties panel.

The Properties panel can also display the artboard’s X and Y position. For pixel-based design, whole-number dimensions and positions help reduce accidental soft edges or unexpected extra pixels during export.

How Layers Work Inside Photoshop Artboards

Every artboard contains its own layer hierarchy. You can add text, images, adjustment layers, vector shapes, Smart Objects, masks, and nested groups just as you would in a conventional Photoshop document.

Automatic Layer Nesting

When you drag visible artwork into an artboard’s boundaries, Photoshop may automatically move its layer into that artboard’s group. Dragging the object outside can remove it from the group. This auto-nesting behavior is useful, but it can be surprising when a layer suddenly relocates in the Layers panel.

Use the Layers panel to confirm where each object lives. Photoshop also provides an option to prevent automatic nesting when you need to move objects without changing their layer hierarchy.

Use Smart Objects for Repeated Assets

Convert shared elements such as logos, product images, icons, navigation bars, or reusable cards into Smart Objects. A Smart Object can be transformed repeatedly without immediately discarding its original image data.

Linked Smart Objects are particularly valuable in multi-artboard projects because a shared asset can be updated from one source. Change the logo once, refresh the linked content, and avoid manually correcting it on twelve separate screens like a designer trapped in a particularly dull time loop.

Use Artboard-Specific Guides

Guides and grids can help maintain consistent margins, columns, and spacing. Photoshop can associate guides with individual artboards, allowing them to move with the artboard rather than remaining fixed to the overall document workspace.

For a responsive layout, you might use a 12-column grid on the desktop artboard, fewer columns on tablet, and a compact margin system on mobile. The visual language stays consistent even though the available space changes.

Practical Example: Create a Responsive Landing Page With Artboards

Suppose you are designing a landing page for desktop, tablet, and mobile devices.

1. Create the Desktop Artboard

Start with a 1440-pixel-wide desktop artboard. Add the navigation, headline, call-to-action button, hero image, feature cards, and footer. Organize the major areas into clearly named groups.

2. Duplicate the Design

Duplicate the desktop artboard twice. Rename the copies “Landing-Tablet” and “Landing-Mobile.” Resize them to your selected tablet and mobile widths.

3. Reflow Instead of Merely Shrinking

Do not scale the desktop layout until it becomes a tiny website wearing an uncomfortable belt. Reorganize it. Stack columns, shorten line lengths, enlarge touch targets, simplify navigation, and crop images for the narrower format.

4. Compare All Three Layouts

Zoom out and review the artboards together. Check whether typography, color, imagery, button treatment, and spacing still feel like parts of the same brand system.

5. Export Each Version

Export the artboards as separate image files for review, or create a multipage PDF that stakeholders can examine in sequence.

How to Export Artboards From Photoshop

Artboards become most useful when Photoshop turns them into neatly separated deliverables.

Export Artboards as Individual Files

1. Choose File > Export > Artboards to Files.
2. Select a destination folder.
3. Enter a filename prefix.
4. Choose whether to export only the artboard contents or include overlapping areas.
5. Choose whether the artboard background should be included.
6. Select all artboards or only the selected artboards.
7. Choose the required file type and related settings.
8. Run the export.

Use PNG when transparency or sharp interface graphics are important. JPEG is practical for photographic previews and smaller review files. PSD output preserves editable Photoshop structure for workflows that require separate working documents.

Use Export As or Quick Export

For a faster workflow, select an artboard or its content and use Export As or Quick Export. Configure Quick Export preferences first so Photoshop knows your preferred format and destination behavior.

Export Artboards as a PDF

Choose File > Export > Artboards to PDF. Photoshop can create one multipage document containing all selected artboards or generate a separate PDF for every artboard.

A multipage PDF is useful for client reviews, screen flows, campaign presentations, and design approvals. Review the page order before exporting, because a beautifully designed onboarding sequence loses some charm when it begins with “Payment Failed” and ends with “Welcome.”

Common Photoshop Artboard Mistakes and How to Avoid Them

Layers Appear on the Wrong Artboard

Check the Layers panel. The object may be nested inside a different artboard even though its visible position suggests otherwise. Drag the layer into the correct artboard group.

Content Disappears at the Edge

Artboard boundaries clip nested content. The layer may still exist but extend beyond the visible canvas. Move it inward, transform it, or resize the artboard.

Exports Have Unexpected Extra Pixels

Fractional positions and scaling can produce off-by-one-pixel results in certain workflows. Keep artboard dimensions, positions, and important shape boundaries aligned to whole pixels. Recheck the Canvas Size values in the Export As dialog when exact output dimensions are mandatory.

The PSD Becomes Slow

Many high-resolution images, complex Smart Objects, filters, and dozens of artboards can create a very large document. Use appropriately sized assets, remove unused layers, and divide an enormous campaign into several logical PSD files when necessary.

Every Variation Is Edited Manually

Repeated manual changes defeat much of the feature’s value. Use Smart Objects, shared naming conventions, reusable groups, and carefully duplicated layouts. Build a system first; decorate the system second.

Experience-Based Lessons From Working With Photoshop Artboards

Artboards look simple when a project contains three tidy rectangles and a cheerful sample logo. Their real personality appears when a campaign grows to twenty sizes, four messages, two languages, and one stakeholder who asks whether the button can “feel more Friday.” The following lessons come from the practical realities of managing multi-layout Photoshop work.

Start With a Naming System Before Designing

The most valuable habit is naming artboards before the document becomes crowded. A structure such as “Channel-Size-Version” makes it easy to understand and export the project. For example, “Instagram-1080×1080-Sale-A” is far more useful than “Artboard 17 Copy 3.”

Layer names matter too. Groups such as Header, Product, Price, CTA, Legal, and Background make each variation faster to inspect. Clear naming feels unnecessary for the first ten minutes and essential for every minute after that.

Design One Reliable Master Before Making Copies

A common mistake is duplicating the first draft too early. Once there are ten copies, every correction must be repeated ten times. Finish the visual foundation first: typography, colors, logo size, image treatment, button style, spacing, and required legal copy. Then duplicate the artboard and adapt it.

This does not mean every variation must be identical. It means they should begin from a stable system rather than ten slightly different accidents.

Use Smart Objects Selectively

Smart Objects are excellent for logos, product photography, packaging, and reusable interface components. They are less helpful when everything is converted automatically and simple edits require opening a stack of nested windows.

A practical approach is to make genuinely shared assets smart while leaving one-off text and decorative elements easy to edit. The goal is flexibility, not winning an award for the largest number of tiny Smart Object icons in a Layers panel.

Review at Both Close and Distant Zoom Levels

At 100 percent zoom, inspect sharpness, pixel alignment, masks, and typography. Then zoom out until every artboard is visible. The distant view exposes inconsistent color balance, uneven visual weight, wandering headlines, and one variation that somehow looks as though it belongs to an unrelated campaign.

For interface work, follow the intended screen sequence. For advertising, compare all dimensions together and confirm that the central message remains obvious in wide, square, and vertical layouts.

Test the Export Workflow Early

Do not wait until delivery time to discover that filenames are confusing, transparency is missing, an artboard is one pixel too large, or the chosen JPEG quality turns text into oatmeal. Export two or three sample artboards early and inspect the actual files.

Confirm dimensions, color appearance, naming, transparency, compression, and page order. Early export testing takes a few minutes and can prevent the traditional final-hour ceremony of opening every file while whispering, “Why is this one 1081 pixels wide?”

Know When to Split the Document

Keeping related designs together is useful, but one giant PSD is not automatically an efficient PSD. Split the work when artboards serve different campaigns, require unrelated assets, or make the file difficult to navigate and save.

A practical campaign might use one document for social media graphics, another for display ads, and a third for landing-page concepts. Artboards provide organization inside a file; they are not a legal requirement to place the entire marketing department inside one document.

Build for the Final Medium

A mobile screen should not merely be a compressed desktop screen, and a vertical Story should not be a square post with taller background scenery. Each artboard should respect its destination. Consider reading distance, touch targets, safe zones, cropping behavior, platform overlays, and the amount of time viewers will spend with the design.

Artboards make adaptation faster, but thoughtful adaptation still requires design judgment. The tool organizes canvases; it does not automatically tell the headline to stop covering the model’s face.

Conclusion

The Artboards feature in Adobe Photoshop CC turns one PSD into a flexible workspace for multiple screens, layouts, dimensions, and creative variations. You can create artboards from a new document, convert existing layers, duplicate completed layouts, resize canvases precisely, organize independent layer stacks, and export each design as an individual file or PDF page.

The best results come from combining the feature with clear naming, Smart Objects, consistent grids, disciplined layer organization, and early export testing. Used properly, artboards reduce file clutter and make it easier to evaluate an entire design system at once. They may not eliminate every “final-version-7” filename, but they can at least make it feel embarrassing enough to discourage future use.