Topics Covered in This Photoshop for Web Design Tutorial:
Mastering Image Processor, Custom Cropping & Exporting Layers to Files, and Batch Renaming Files in Adobe Bridge
Exercise Preview
Exercise Overview
Modern web development demands efficient image optimization workflows. Whether you're preparing high-resolution assets for Retina displays, generating responsive image sets, or creating thumbnail galleries, mastering Photoshop's batch processing capabilities is essential for maintaining quality while meeting tight deadlines. This exercise will teach you professional-grade techniques for automating repetitive image tasks, saving hours of manual work while ensuring consistent output quality across your entire project.
1x vs 2x Image Processing Requirements
| Feature | 1x Images | 2x Images |
|---|---|---|
| Final Width | 400px | 800px |
| JPEG Quality | 8 | 5 |
| File Size | Smaller | Larger |
| Compression | Less | More |
| Display Use | Standard screens | High-density displays |
Using Image Processor to Batch Process 1x Files
We'll start by processing a folder of images into optimized 1x and 2x files. For web display at 400px width, we need 400px standard resolution versions and 800px high-resolution versions for Retina screens. The Image Processor excels at this type of consistent, automated resizing and compression.
In Photoshop, close any files you have open to ensure optimal processing performance.
Navigate to File > Scripts > Image Processor.
Under 1: Select the images to process, click the Select Folder button.
Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Batch Process.
Click Open (Mac) or OK (Windows).
Under 2: Select location to save processed images, select the circle next to Select Folder, then click the Select Folder button.
Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Batch Process.
Select the 1x folder.
Click Open (Mac) or OK (Windows) to confirm your selection.
Under File Type, check Save as JPEG.
Set Quality to 8. This provides an optimal balance between file size and visual quality for standard resolution displays.
PRO TIP: When uncertain about JPEG quality settings, use Save for Web to preview compression artifacts on a representative image before batch processing your entire set.
Check Convert Profile to sRGB to ensure consistent color rendering across different devices and browsers.
Check Resize to Fit.
Set W to 400px.
Set H to 400px.
NOTE: Photoshop maintains the original aspect ratio, fitting images within these dimensions. For landscape images, the final height will be proportionally smaller than 400px, with Photoshop calculating the exact dimensions automatically.
Ensure the following options remain unchecked for web optimization:
- Save as PSD
- Save as TIFF
- Run Action
- Include ICC Profile
Click Run and monitor the batch processing progress.
With your 1x files processed, we'll now create the high-resolution versions for modern displays.
Image Processor Setup for 1x Files
Select Source Images
Navigate to File > Scripts > Image Processor and select your folder containing original images
Configure Output Location
Choose the 1x folder as your destination for processed files
Set JPEG Parameters
Enable Save as JPEG with Quality 8, Convert Profile to sRGB, and Resize to Fit 400px x 400px
Execute Processing
Ensure PSD, TIFF, Run Action, and Include ICC Profile are unchecked, then click Run
If you're unsure about JPEG quality settings, use Save for Web to preview quality on a single image before batch processing. This helps ensure optimal file size and visual quality balance.
Using Image Processor to Batch Process 2x Files
After the first batch completes, return to File > Scripts > Image Processor.
Most settings remain unchanged, but we need to modify the output destination and sizing parameters.
Under 2: Select location to save processed images, click the Select Folder button.
Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Batch Process.
Select the 2x folder.
Click Open (Mac) or OK (Windows) to confirm.
Adjust Quality to 5. High-resolution files benefit from increased compression since they'll be displayed at half-size, making compression artifacts less visible.
Set W to 800px.
Set H to 800px.
Click Run to process your high-resolution batch.
Now let's examine the results and understand how these files will perform in your web projects.
2x files use Quality 5 instead of 8 because they appear at half size on webpages, making JPEG artifacts less noticeable while significantly reducing file size for better performance.
Viewing the Resulting Images in Adobe Bridge
Launch Adobe Bridge to review your processed images: File > Browse in Bridge.
When Bridge opens, locate the Favorites panel on the left. If it's not visible, access it via Window > Favorites Panel.
In the Favorites panel, click Desktop.
Navigate to Class Files > yourname-Photoshop for Web Class > Batch Process > 1x > JPEG.
Here you'll find your optimized thumbnail files, ready for standard resolution displays.
Select any image to view its metadata and dimensions.
Press Spacebar for a fullscreen preview. Note the crisp quality and file dimensions—this preview helps you verify the processing results.
Press Spacebar again to return to the thumbnail view.
To compare with the high-resolution versions, click Batch Process in the breadcrumb navigation at the top of the window.
Navigate into the 2x folder, then JPEG.
Select an image and press Spacebar for fullscreen preview.
Notice the increased resolution and file size. While you may observe some JPEG compression artifacts at full size, remember these images will display at 50% scale in responsive web layouts, where artifacts become imperceptible.
Press Spacebar to close the preview.
Return to your Photoshop workspace: File > Return to Adobe Photoshop.
The Image Processor works excellently for straightforward resizing, but what about more complex requirements? Let's explore how to handle custom cropping and aspect ratio changes.
Bridge Navigation and File Review
Provides comprehensive file management interface
Quick access to your project folders
Compare file sizes and quality between 1x and 2x versions
Ensures files are organized in correct 1x and 2x folders
Custom Cropping & Batch Processing with Layers to Files
When you need to modify proportions, apply custom crops, or create entirely different compositions from your source images, the Layers to Files approach offers superior flexibility. Our landscape orientation photos need square versions for social media and mobile interfaces—a common requirement in modern web design.
In Photoshop, go to File > Open.
Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Layers to Files and double-click cropped-images.psd.
Examine the Layers panel structure:
- Layer names become the exported filenames—choose descriptive, web-friendly names without file extensions (Photoshop adds these automatically).
- All layers are smart objects, preserving original image data and enabling non-destructive editing. This workflow supports easy revisions and quality adjustments.
We need to fine-tune the cropping on the cityscape layer. Ensure it's selected in the Layers panel.
Select the Move tool
.Drag the image leftward to feature more of the Sydney Opera House. For optimal composition, drag until the right edge of the photo aligns with the canvas boundary.
This technique treats each layer as an individual export candidate. The unified file approach enables global sizing adjustments and consistent cropping decisions across your entire image set.
PRO TIP: To isolate a single layer for detailed editing, hold Option (Mac) or Alt (Windows) while clicking its eye icon
. This hides all other layers instantly. Repeat to restore full visibility.This file is sized at 800px square (2x resolution). We'll export high-resolution versions first, then generate standard resolution files.
Choose File > Export > Layers to Files.
Set your export destination by clicking Browse.
Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Layers to Files.
Select the 2x folder.
Click Open (Mac) or OK (Windows).
Leave File Name Prefix blank to use clean layer names.
Ensure Visible Layers Only remains unchecked—we want all layers exported regardless of visibility.
Set File Type to JPEG.
Uncheck Include ICC Profile for smaller web-optimized files.
Set Quality to 5 under JPEG Options. This aggressive compression works well for high-resolution files that display at reduced sizes.
Click Run to begin the export process.
When the success dialog appears, click OK.
Save your cropping adjustments: File > Save.
With your high-resolution square images ready, let's create the standard resolution versions.
Image Processor vs Layers to Files
| Feature | Image Processor | Layers to Files |
|---|---|---|
| Best for | Ready-to-go files | Custom cropping needed |
| Source format | Multiple separate files | Single PSD with layers |
| Cropping capability | Basic resizing only | Full custom cropping |
| Proportional changes | Maintains original ratios | Can change aspect ratios |
Hold Option (Mac) or ALT (Windows) and click a layer's eye icon to hide all other layers instantly. This makes it easy to isolate and crop individual images within your composite file.
Making the 1x Versions
Resize the entire document for 1x output: Image > Image Size.
Change the unit dropdown next to Width to Percent.
Enter 50 for Width. Photoshop automatically maintains proportions, scaling height accordingly.
Click OK to apply the resize.
Launch the export dialog again: File > Export > Layers to Files.
Update the destination folder by clicking Browse.
Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > Layers to Files.
Select the 1x folder.
Click Open (Mac) or OK (Windows).
Increase Quality to 8 under JPEG Options. Standard resolution files need higher quality settings since compression artifacts are more visible at full display size.
Click Run to export your 1x versions.
Confirm completion with OK.
Close without saving changes: File > Close. This preserves your original high-resolution file for future use.
Your batch processing is complete, but the exported filenames need professional cleanup. Let's use Bridge's powerful renaming capabilities to prepare these files for production use.
Creating 1x Files from 2x Masters
Resize Master File
Go to Image > Image Size, set Width to 50 Percent to create half-size versions
Export with Higher Quality
Use File > Export > Layers to Files with JPEG Quality 8 for 1x versions
Save Without Changes
Close file without saving to preserve original 2x master file dimensions
Viewing the Results & Batch Renaming the Files
Return to Bridge for file management: File > Browse in Bridge.
Navigate to your project folder using the breadcrumb trail at the top. Click yourname-Photoshop for Web Class.
Enter the Layers to Files folder.
Open the 2x folder to inspect your high-resolution exports.
Select any image for detailed examination.
Press Spacebar for fullscreen preview mode.
PRO TIP: Use Left/Right Arrow keys during fullscreen preview to efficiently review your entire batch.
Exit fullscreen with Spacebar.
Notice the problematic filenames with numeric prefixes and underscores—these aren't web-ready. Bridge's batch renaming will clean these up professionally.
Select all files: Cmd–A (Mac) or Ctrl–A (Windows).
Access the renaming tool: Tools > Batch Rename.
Choose String Substitution from the Preset menu.
Set Destination Folder to Rename in same folder.
We'll use regular expressions (regex) to identify and remove the numeric prefixes. This powerful pattern-matching technique handles complex renaming scenarios that simple find-and-replace cannot.
Check Use Regular Expression.
In the Find field, enter an underscore:
_The Preview section shows the initial underscore will be removed from filenames.
Extend the pattern by adding
\dafter the underscore—this represents any single digit.The preview now shows the first numeric digit being removed.
Complete the pattern by adding three more
\dinstances plus a trailing underscore, creating:_\d\d\d\d_The preview confirms that all prefixed numbers and underscores will be stripped from your filenames.
For high-resolution files, append the standard @2x identifier. Click the Plus (+) button next to New Filenames.
Change the new dropdown from Text to String Substitution.
Set the adjacent dropdown from Original Filename to Intermediate Filename.
Enter .jpg in the Find field.
Enter @2x.jpg in the Replace with field.
Enable cross-platform compatibility:
- Mac users: check Windows
- Windows users: check Mac OS
Verify your settings match this configuration:
Save this configuration as a reusable preset for future projects:
- Click Save at the top of the dialog
- Name it Remove Layers to Files Prefix & Add @2x.jpg
- Click OK
- This preset will now appear in your Preset menu for instant access
Execute the renaming operation by clicking Rename.
Your files now have clean, professional names ready for web deployment, complete with high-resolution indicators that modern responsive frameworks recognize automatically.
Layers to Files exports include unwanted 4-digit number prefixes with underscores. Bridge's batch rename feature with regular expressions can clean these up automatically.
Regular Expression Batch Rename Setup
Select All Files
Use Cmd-A (Mac) or Ctrl-A (Windows) to select all files needing rename
Configure String Substitution
Choose Tools > Batch Rename, select String Substitution preset, enable Use Regular Expression
Set Find Pattern
Enter '_\d\d\d\d_' to match underscore-digit-digit-digit-digit-underscore pattern
Add @2x Suffix
Add second substitution to replace '.jpg' with '@2x.jpg' for proper 2x file naming
Save your regular expression rename settings as a preset for future use. This eliminates the need to recreate complex find-and-replace patterns for similar batch operations.