Creating New Files & Designing on a Grid System

Topics Covered in This Photoshop for Web Design Tutorial:

Setting Preferences & Workspace, Creating a New Document, Creating a Grid, Designing with Bootstrap's Grid, Creating Colored Backgrounds for Text, Importing & Styling Text, Viewing at Accurate Size

Exercise Preview

Exercise Overview

Professional designers rely on grid systems to create cohesive, visually structured layouts that translate seamlessly from design to development. When web developers receive grid-based designs, they can implement them more efficiently using established frameworks, reducing development time and ensuring pixel-perfect results across devices.

Grid systems become essential when designing responsive websites that must adapt flawlessly to smartphones, tablets, and desktop screens. Rather than guessing at alignment, grids provide a mathematical foundation that streamlines both the design process and subsequent coding phases. In this exercise, you'll master Photoshop's grid capabilities and learn to work with Bootstrap—the industry-standard framework that powers millions of websites. You'll construct a professional 2-column desktop layout that serves as the foundation for mobile adaptations in the following exercise.

Setting Preferences & Workspace

Before diving into design work, we need to configure Photoshop specifically for web design. Unlike print design, which relies on inches and points, web design operates entirely in pixels—the fundamental unit of screen-based media.

1. Launch Photoshop.
2. Go to Photoshop > Preferences (Mac) or Edit > Preferences (Windows) and choose Units & Rulers.

3. Configure your measurement units for web design precision. Under Units, set the following two options:

   Rulers:	Pixels
   Type:	Pixels

4. On the left, click on the Type category.
5. Check on Use ESC key to commit text. This workflow enhancement allows you to quickly finalize text edits without reaching for the mouse.
6. Click OK.

7. Go to Window > Workspace > Graphic and Web. This workspace optimizes your panel layout and tool selection specifically for web design projects, hiding print-focused features that would otherwise clutter your interface.

8. To ensure you're working with the standard configuration, go to Window > Workspace > Reset Graphic and Web.

Creating a New Document

Setting up your document with the correct dimensions and settings from the start prevents issues down the line and ensures your designs translate accurately to the browser.

1. Create your project file by going to File > New or hit Cmd–N (Mac) or CTRL–N (Windows).

2. At the top of the dialog that opens, click on the Web tab.

3. Under Blank Document Presets, click the View All Presets + button.

4. Click once on Web Small (1280 X 800 px @ 72 ppi).

   NOTE: These presets represent common screen dimensions (pixel width X height). Modern web design demands responsive layouts that adapt to everything from 320px phone screens to 4K desktop monitors. We're starting with desktop dimensions because it's easier to scale designs down than up. While you might notice a preset called Web Most Common, we're using 1280px width because it represents a significant user segment—designing for this width ensures your layouts work beautifully on both 1280px screens and larger displays.

   Remember that Photoshop forces us to work with fixed dimensions, but your final coded website will fluidly adapt to any screen size. Don't overthink the initial choice—the principles you'll learn apply regardless of starting dimensions.

5. On the right, make sure Artboards is checked on. Artboards allow you to design multiple screen sizes within a single document—a crucial workflow for responsive design.

6. Verify these essential settings for web design:

   • Resolution: 72 Pixels/Inch (Web standard—higher resolutions are unnecessary for screen display)
     
   • Color Mode: RGB Color (Screens emit light in RGB; CMYK is exclusively for print)

7. Click Create.

8. Let's organize our workspace with descriptive names. In the Layers panel, click on Artboard 1 to select it.

9. Double–click the name Artboard 1, type Desktop and hit Return (Mac) or Enter (Windows).

10. Now we'll add artboards for tablet and mobile designs. At the top of the Tools panel, select the Artboard tool .

11. Notice the Add New Artboard buttons appear on each side of the artboard.

12. To the right of the artboard, click the Add New Artboard button .

13. In the Options bar at the top of the screen, notice that the Size menu is set to Web Small—new artboards inherit the dimensions of their parent by default.

14. Let's configure this artboard for tablet viewing. In the Options bar, from the Size menu select iPad Mini.

    NOTE: The iPad Mini preset (1024 X 768 px) represents standard-resolution tablets. Avoid the Retina iPad presets for now—we'll cover high-DPI design considerations later in this course when we address asset optimization for various screen densities.

15. Switch to portrait orientation for our tablet design—the more common tablet browsing orientation. In the Options bar, to the right of Height click the Make Portrait button .
16. In the Layers panel, double–click the name Artboard 1, type Tablet and hit Return (Mac) or Enter (Windows).
17. Add the final artboard for mobile devices. To the right of the Tablet artboard, click the Add New Artboard button . If the button isn't visible, ensure the Tablet artboard is selected in the Layers panel and scroll to see the empty space to its right.
18. Configure this artboard for smartphone dimensions. In the Options bar, change the Size to Mobile Design.
19. In the Layers panel, double–click the name Artboard 1, type Phone and hit Return (Mac) or Enter (Windows).

20. Go to View > Fit on Screen to see all three artboards and appreciate the dramatic size differences you're designing for.

Creating a Grid in Photoshop

While Photoshop includes basic grid functionality, understanding how to create custom grids gives you the foundation to work with any design system. Let's explore Photoshop's built-in options before moving to industry-standard frameworks.

1. In the Layers panel, select the Desktop artboard.
2. Go to View > Fit Artboard on Screen.
3. Access Photoshop's grid creation tools by going to View > New Guide Layout.

4. From the Preset menu choose 12 Column.

   NOTE: Twelve-column grids dominate professional web design because they offer maximum layout flexibility. With 12 columns, you can create 2-column layouts (6+6), 3-column layouts (4+4+4), 4-column layouts (3+3+3+3), or asymmetrical combinations like 8+4 or 9+3. Contrast this with a 10-column grid, which works for 2 or 5 columns but can't be evenly divided for 3 or 4 columns—severely limiting your design options.

5. Increase visual breathing room by setting Gutter to 30 px. Adequate gutters prevent content from feeling cramped and improve readability across all devices.

6. Click OK. Your grid foundation is now ready to guide precise element alignment.

Designing with Bootstrap's Grid

While Photoshop's built-in grids provide a starting point, professional web development relies on established frameworks with precise specifications. Bootstrap remains the world's most popular CSS framework, powering over 20% of all websites as of 2026. When your developers use Bootstrap (or you're designing for a team that does), matching their exact grid specifications eliminates guesswork and reduces revision cycles.

1. Close the current document without saving changes—we'll use a professionally-crafted Bootstrap template instead.
2. Go to File > Open.
3. Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Bootstrap 4 Grid Template for Photoshop, by Dan Rodney > 1x Size and double–click on Bootstrap 4 Grid Simple Template.psd.

4. Examine the artboards—notice how each device size (Phone, Tablet, Desktop) includes Bootstrap's precise grid specifications.

   This template was created by Dan Rodney, a Noble Desktop instructor, specifically for professional web design workflows. You can download updates and additional resources from danrodney.com/blog/Photoshop-bootstrap4-grid. Bootstrap's grid system adapts its column widths and gutters based on screen size—a sophisticated approach that ensures optimal readability and usability across devices.

5. In the Layers panel, select the Desktop artboard.

6. Ensure the Bootstrap guides are visible by going to View > Show > Guides if needed.

   Using Bootstrap Grid Templates

   Pros

   Matches developer specifications exactly

   Streamlines design-to-development handoff

   Industry-standard 12-column system

   Pre-configured for multiple device sizes

   Cons

   Less flexibility than custom grids

   Requires external template files

   Must stay updated with Bootstrap versions

Creating Colored Backgrounds for the Text

Professional web layouts often use subtle background colors or tinted areas to create visual hierarchy and improve content organization. We'll create a classic two-column desktop layout with distinct background treatments for the main content area and sidebar.

1. In the Layers panel, select the Desktop artboard.
2. Go to View > Fit Artboard on Screen.

3. Understanding the relationship between content zones and background elements is crucial for professional results. Text and images align to the gray column guides, while background colors and images extend to the gutter midpoints. This creates 15px of padding on each side (half the 30px gutter width), ensuring content never touches background edges—a hallmark of polished design.

4. Select the Rectangle tool from the Tools panel, approximately two-thirds down.

   NOTE: If this tool isn't visible, confirm you're using the correct workspace by going to Window > Workspace > Graphic and Web.

5. Reset to default colors by clicking the Default Foreground and Background Colors button near the bottom of the Tools panel (or press D).

   

6. Swap to white foreground by clicking the Switch Foreground and Background Colors button (or press X).

7. In the Options bar, ensure the leftmost menu is set to Shape rather than Path or Pixels. Vector shapes maintain crisp edges at any zoom level and scale perfectly for responsive design.

8. Create the sidebar background by drawing a rectangle over the rightmost 3 columns. Start at the top of the artboard, align the left edge to a center gutter guide, and span exactly 3 gray columns as shown:

   

9. Create visual hierarchy by reducing the sidebar prominence. With Rectangle 1 selected, set Opacity to 50% at the top of the Layers panel.

10. Complete the layout by creating the main content background. Draw a second rectangle from the sidebar's edge to the leftmost blue guide, covering the remaining 9 columns:

    

11. Ensure both backgrounds align perfectly. If the rectangles have different heights:

    • Select Rectangle 2 in the Layers panel
    • Go to Edit > Free Transform Path
    • Drag the top or bottom handles to resize—Photoshop's Smart Guides will help you align with the sidebar
    • Press Return (Mac) or Enter (Windows) to confirm

Importing & Styling Text

With our layout foundation established, we'll add content that demonstrates how text, images, and interactive elements align to the grid system. This phase transforms abstract layout concepts into tangible design execution.

1. Optimize your workflow by repositioning the grid guides. In the Layers panel, drag the columns layer above both Rectangle layers within the Desktop artboard.

   Keeping the grid visible while placing content ensures pixel-perfect alignment—the difference between amateur and professional results.

2. Position your next layer strategically. The Layers panel adds new content above the currently selected layer, so select the layer that should be below your upcoming text layer.