After the vector series posts, we’re back to pixel world. Although we can (and must) use vector graphics in our designs, ultimately the web graphics are in pixels.
Many of my designs end up with dozens of layers, apart from keeping them grouped and organized, they are a mix of raster and vector graphics. So how do I cut a web site design all in pixels?
I have two methods: Using the copy merged command or the merge visible command.
I have an action recorded for each method. They both assume we have a selection, so start recording the action with a selected rectangle (the graphic bit we want in our website):
Copy merged:
- Press Shift+Ctrl+c (copy merged)
- Press Ctrl+n (new document)
- Press enter (accept new document default settings)
- Press Ctrl+V (paste the previously copied selection)
- Press Shift+Ctrl+Alt+S (Save for web)
- Choose your preset or settings (it will be recorded) and hit save.
- Choose your save path.
- Close the document created in step 2, don’t save.
- Stop the action recording.
- Now goto the actions tab, expand the recorded steps an click the “Toggle dialog on/off” icon (there should be a blank space with no icon) in the “Export” line. This will avoid the rewriting of the file over the last, by prompting the “save for web” dialog.
Each time you need to cut a piece from the design, you don’t have to rasterize. Just select the part and hit the action play button.
The merge visible command is very similar. The final result is the same it uses less steps, but we need to have a visible layer selected or it will fail.
Merge visible:
- Go to Menu Layer and choose “Merge visible” (this step is mandatory to preserve layer effects)
- Go to Menu Image and choose crop
- Press Shift+Ctrl+Alt+s (Save for web)
- Choose your preset and settings (it will be recorded) and hit save
- Choose your save path.
- Go to Menu Window and choose history
- Go back to the Rectangular Marquee step
Voila, your document is preserved and the bit you have selected saved.
This was a quick one, if you have questions, hit the comments link…

