Design
Now Reading
Commands for Slicing PSDs
0

Commands for Slicing PSDs

by Mikayla TamJune 17, 2015

With most websites we build, the high-level process basically begins with our UX Designer creating designs in Photoshop. These are then approved by the client and the designs passed to developers to build.

Following approval, the Photoshop file(s) need to be sliced quickly to provide all assets to the developers.

These are the two shortcuts we use in Photoshop to help slice PSDs quickly.

 

Ctrl-E

  • This command merges multiple layers together
  • To be used if you need to merge assets (images/icons/text) across various layers into one asset
  • To use:
    • Select the various layers
    • Select Ctrl-E. This will create a new layer with the assets merged
    • Select Ctrl-A to select the layer
    • Select Ctrl-C to copy the layer
    • Open a new file/page in Photoshop (File>New)
    • Ctrl-V to paste the layer
    • Save out as a JPEG or PNG
    • Close the new file
    • Go back to the original file and click Alt-Ctrl-Z twice to delete the merge (this ensures you’re original Photoshop file remains the same as the approved client version)

Ctrl-A

  • This command selects the whole layer (ie. “A”=”All”)
  • To be used if you need to copy out an asset on its own layer
  • To use:
    • Select the layer
    • Select Ctrl-A to select the whole layer
    • Select Ctrl-C to copy
    • Open a new file/page in Photoshop (File>New)
    • Ctrl-V to paste the layer
    • Save out as a JPEG or PNG
    • Close the new file

 

As a side note, when saving out the new assets, they should always be saved as a JPEG unless a transparent background is needed (for example, if there is shading or a shadow under the image, this would require a transparent background). JPEGs are much smaller than PNGs which will help improve site speed on the website.

 

What other shortcuts or commands do you use when slicing PSDs?

About The Author
Mikayla Tam

Leave a Response