Try Tuts+ Premium, Get Cash Back!
How to Work With Slices in Photoshop
videos

How to Work With Slices in Photoshop

on Dec 26th 2012 with 5 comments
Tutorial Details
  • Estimated Completion Time: 12 Minutes
  • Difficulty: Beginner
  • Apps Used: Adobe Photoshop CS6

Final Product What You'll Be Creating

Slices in Photoshop are mainly used by web designers to export various parts of their layouts to files that they can later use in functional websites. In this tutorial, we will explain what you need to know in order to start working with this helpful tool. Let’s get started!

Tags: CS6Videos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Martin is a Hungarian graphic designer, digital artist and an Adobe Certified Expert and Instructor (Design Master). He is currently teaching and working in London but usually travels around the UK and share his love for Adobe products and graphic design. You can follow him on his blog or on Twitter.  

Plus Premium
 
 
  • http://www.xiel.de/ Felix

    Slices of photoshop are a relict of the bad old days of webdesign (table layouts and so on). I think that they aren’t necessary and shouldn’t be used for production anymore.

    The HTML-Output is bad as expected, not even as a starting point. The Navigation, as your said, is better realized with a webfont and real text, the logo might be better an PNG with a transparent background (you can reuse it, it can be printed, change the background color), your layout from slices won’t be any responsive… and so on.

    in short: slices suck. don’t use them. ever.

  • http://twitter.com/borowskirafal Rafał Borowski

    The correct use of slices in photoshop is the same as digital zoom in cameras:
    SHUT IT DOWN AND NEVER USE AGAIN! Like…. EVER!!! This tool is useless anc createst sh** instead of proper markup.

    Want to “slice” something? These are two proper ways to do it:
    1. M > select the area > ctrl+shift+C > ctrl+N > ctrl+V > ctrl+S
    2. Duplicate layer on a new document > trim > save

    • Daniel Faria

      lol… this is exactly what I do. And I thought I was the only one.

  • skube

    Would love to see a screencast of this workflow!

  • http://www.polyweb.co.uk/ Muneeb Ahmed

    Thorough explanation and excellent work! – Thank you sir!