It might sound cliché, but Photoshop truly is considered and indeed remains the best and most convenient application not only for working with images and photos but also for web design. We even talked about this in a previous article . However, for many years users have requested various improvements to make the program more efficient. Adobe had a different vision, and we are left with what we have now. The CC versions offer features that CS6/CS5 lack, and vice versa. That’s why creative professionals often have multiple versions of Photoshop installed. Still, we should thank Adobe for numerous filters, presets, brushes, 3D support, and much more.
One way or another, the app (in any version) supports user scripts. They are similar to actions but allow users to make decisions during the workflow, rather than just blindly repeat pre-defined steps. Scripts offer immense possibilities, giving us access to the full functionality of the application.
The simplest example of a script: converting an entire folder of images from one format to another, resizing images, adding metadata, deleting empty layers, working with masks. But in reality, scripts can do much more, and below we’ll see exactly how and what they do.
Remembering the basics
To avoid constant repetition, let’s immediately focus on the main points:
Pixel Measurement – Pixel Measure
How often do you need to measure the exact distance between two elements horizontally or vertically? Not just measure in pixels but also evenly distribute other elements. While this is possible in Photoshop, it can be painstaking. There’s a simpler solution.
The Pixel Measure script lets you do this in two clicks. Download the archive from GitHub (now hosted there, link in the title) and unpack it into the scripts folder.
Select the desired document and use selection to define the needed distance. The side of the rectangular selection that is longer will be measured. A text layer showing the number of pixels and a line layer will appear. You can move this layer and use it like a ruler. You might say the width and height are already shown when selecting, but here you get a ready-to-use movable line — very handy.
Split into Layers – Split to Layers
A tiny and modest script lets you do what’s often necessary. You’re painting or adding elements together and realize too late that you forgot to do it on separate layers. Annoying! Time to redo everything!
This script will automatically split everything into layers. If you’re using a soft brush, be ready for the script to process every pixel, potentially creating over 70 layers. With a hard brush, it runs fast and clean. Example below.
Important : the working layer must be unlocked (no lock icon) and have a transparent background. It won’t work on solid white backgrounds.
Rename Layer Group – Group Layer Renaming
When creating website design in Photoshop , you often end up using lots (and we mean *lots*) of layers. Sometimes they’re duplicates. Naming each one clearly helps navigate your project. But imagine renaming dozens of layers manually — exhausting! This script renames them for you, saving at least two minutes for 30 layers.
Download it from the author’s page, copy to your app's script folder, and you’ll find it in the menu.
Open your document, select the layers to rename, run the script, and enter the desired name. You can add it at the end, beginning, or replace the name entirely. We chose the first option — result below. To avoid merging names (e.g., Layer5MyLayer), add a space first.
Flat Design – Flat Layout Wrapper
When working on web design, sooner or later you’ll want to showcase how your website looks in a browser window. This script uses Safari as the base.
It processes all your layers, removes grids and extras, and wraps your project in a browser-like frame. It loads at 100% scale, i.e., the actual project size.
As usual: load all files and folders into your script folder, then call it via the menu.
This image can be saved as JPG, PNG, or even PDF — handy to present to a client.
Radius Resizing – Radius Resizer
Photoshop makes it tricky to adjust individual corner radii on rectangles. And it’s even worse when you have to apply changes across several layers. Especially if corners need to differ in radius!
Installation and execution are typical, but all files and folders from the archive must be copied.
Select a shape, run the script, and set a corner radius. If it’s on multiple layers, select them all first, then run the script. If a corner is already rounded, the script will show the current value — great for consistency.
Template Generator – Template Generator
Starting a new design project always means repeating the same setup tasks — creating grids and guides. You’d think Photoshop would do this automatically, but no. This script auto-generates grids when creating a new document. Easy and convenient.
Installation differs slightly: Copy all files and the templates folder into Photoshop/Presets/Scripts/Event Scripts Only . If that folder doesn't exist – create it.
Then open Photoshop, go to File → Scripts → Browse, find +install.jsx , run it, and the script will install.
Now just create a new document and add the grid size to the name — the grid is generated automatically.
You can also create custom templates. All PSD templates must be saved in the same templates folder. The file name becomes the keyword to add at the end of your new document name. Remember: this script doesn’t resize the canvas unless a blank layer named “Lock Size” is placed at the top. The script executes from bottom to top, so this ensures your dimensions are set.
Mobile Preview – Device Art Generator
Web designers often need to preview their designs on mobile devices. While there are different ways to do this, Photoshop doesn't support it directly. This script enables previews for devices like iPhone, iPad, Samsung Galaxy, HTC One, Motorola, Nexus.
Installation is slightly different . Copy the script files into Photoshop/Presets/Scripts /, and the DeviceFrames folder into Photoshop/Presets/
Open your PSD, save it as PNG (for easier script use), and run the deviceArtGeneratorUI.jsx script . We chose HTC One X and loaded from PNG. The result appears in a new document (see screenshot). This helps visualize how elements are arranged on mobile. Sure, a landing page scrolls, but the general look is clear.
Transform – Transform Each
How often do we need to resize objects in Photoshop? Usually by eye, and we often have to redo it. This script allows resizing by percentage and offers a preview. You can process 2 to 6 layers simultaneously.
In our example, we chose layers forming a YouTube icon and resized them to 151% and 50%. We clicked Preview to compare with other elements.
From Light to Dark – Lighten&Darken Color
Color adjustments are essential in web design. If you frequently change shades, it can get tedious and time-consuming. This script lets you assign hotkeys to lighten or darken colors with a single keypress.
Download it here (this is the updated version). The archive includes two scripts: one to lighten, one to darken. Copy the .jsx files to Photoshop/Presets/Scripts/, and find them via File → Scripts.
Important: this script changes the foreground color in the toolbar, not directly on the object/layer. Sure, you can change color manually in the palette, but choosing the exact right shade can be tricky. This script adjusts color in 10% steps.
Conclusion
We’ve listed a not-so-large collection of various scripts for Photoshop. Of course, there are many more online, both free and paid. Some features are now native in Photoshop, others not. And every version offers different capabilities. We hope that one day you’ll find the above tools helpful in your web design process , making your work faster, more efficient, and a little more automated.