The other day a friend of mine said something that caught my attention, “I’m trying to learn how to slice a PSD.” It’s a simple enough statement. As soon as he said it, I knew exactly what he was talking about, and yet, there was something in there that didn’t quite set right.
Upon seeing my hesitation my friend responded with a question, “Do we still slice PSDs?” Great question! For beginners, jargon isn’t merely jargon, it implies a process and suggests a method of action. For this reason, it’s often helpful for more advanced developers to define their terms in a way that is meaningful to others. Today we’ll dive into the theory behind the process of converting a PSD to to a web page and end with a discussion on the ups and downs of designing in the browser.
Our Sample File
We won’t be actually converting a PSD to HTML/CSS today, we’re merely discussing the how and why so you can fully understand the typical approach taken by today’s web designers.
I needed a PSD to reference throughout the article so I grabbed the awesome free Creative Studio Minimal PSD from GraphicsFuel.com.
What Is Slicing?
The first thing we should talk about is what it means to “slice” a PSD. Put loosely, the term simply means to chop up your Photoshop document into pieces, which then get served up to the web server, put in order by HTML and styled/positioned by CSS.
On a more specific level, slicing can refer to a specific set of tools inside of Photoshop. Using the Slice Tool, we can partition our document up into little pieces. Basically, we just draw a rectangle around every item that we want to separate into an individual image.
Why Slice?
The slicing tools in Photoshop are merely there for convenience. There are a ton of great web designers today that never touch them and there’s nothing wrong with that.
The point behind the slicing tools is to make the process of saving out a bunch of images easier, both in the short run for the initial build and in the long run to make revisions. Basically, what it does is save you the trouble of cropping out each portion manually and saving it.
Though the process is kind of a pain, I have to admit that a nicely sliced PSD is a thing of beauty. Here’s a clear example where I have several elements that need to be saved out as images. Without slicing, each one of these would represent a crop and save process that I have to go through.
When they’re sliced though, a single Save For Web action can convert all of thes slices to standalone image files. This really cuts down your time on the repetitive task of cropping and saving if you’re working with a single Photoshop file as your source.
Make Slicing Suck Less
If you’re still unsure about the Photoshop slicing tools or think that it’s all a big fat waste of time, you should check out our piece titled, How to Make Slicing Suck Less: Tips and Tricks for Slicing a PSD.
In that article, I thoroughly explain the process of slicing and how all of Photoshop’s slicing tools work. Most importantly, you get a look at some great tips on how to make the process of slicing much better. Things like Layer Based Slices and hiding Auto Slices really go a long way towards making it a bearable process.
Why Slicing Is Old School
So that’s slicing. Now that you know what it’s all about, it’s time to explore how this process has changed over the years to a point where slicing is a fundamentally different activity than it used to be.
Once upon a time, no one used CSS (I know, the horror!). Even when CSS did come along, the tools that it provided web designers with were pretty limited compared to what we know today.
Consequently, websites that tried to push the limits by not looking like crap tended to use a ton of images. Every time a design contained a custom font, simple gradient, drop shadow or rounded corner, an image had to be used to pull the effect off in the browser.
Consequently, slicing was a big deal. When you created a Photoshop mockup of a website, if you decided to implement any sort of aesthetic icing, which was huge before the minimal kick we’re on now, then you had to slice every little portion of your design up into tiny pieces that you likely then used HTML tables to reconstruct. Brutal right? Especially when you consider that we were all on amazingly slow web connections back then so all those images took ages to load.
CSS Kills The Image
As CSS evolved and grew, a new trend popped up in web design: imageless design. If you looked around on design blogs a few years ago you would see a ton of articles titled something like, “Create a Fancy Button Without Images!” To this day you still see titles like this pop us as people perform unbelievable feats with CSS.
This trend wouldn’t be possible without the amazing CSS features that we now enjoy. Suddenly you can round corners, add shadows, implement multiple backgrounds, build gradients, use custom fonts and a lot more using pure code. The general goal of many web designers now is to leverage CSS and use as few images as possible in our markup. “Imageless” isn’t necessarily something to be achieved (you almost always need a few images) but rather strived for, meaning you generally want to get as close to it as humanly possible while keeping support high.
Pros and Cons of Imageless Design
This trend comes with its ups and downs. The up side is that, despite what non-coders might think, CSS is a beautifully easy way to maintain and adjust a design in the long term. If you want to change something small such as a font or a background color, you just find/replace a few lines of code and you’re good to go. There’s also the benefit that even thousands of lines of CSS can be minified to the point that its effect on loading times is nearly negligible.
The huge, not to be understated downside is compatibility. With images, PNGs were pretty much the only thing we had to worry about (aside from loading times of course). Now with CSS we have support issues across the board. Browsers that do support a new feature do so only with a unique prefix, making for ridiculously repetitive coding, many features are only available on a single browser engine, others are supported everywhere but IE (some things never change); it can be a real mess.
The ultimate goal is to keep what’s best for the user in mind. If using an image for something results in the greatest amount of good for the most people, go for it.
Less Images, Less Slicing
Building on this foundation of information, we can finally address the question of whether or not web designers still slice PSDs.
For the most part, when we look at a Photoshop document that is meant to be converted to a website, we try to see code wherever possible. It’s like that moment in the Matrix where Neo looks around at what he once saw as the normal world and suddenly sees the code behind it. Web designers don’t see layers and layer effects, we see divs and CSS properties.
Given that this is the case, the majority of the work involved in taking a static design live is more in the realm of rebuilding than slicing. Instead of slicing that glossy button and serving it up as an image, I’ll use CSS to rebuilt it from scratch. This process is repeated throughout the whole of the site, often with images used primarily for actual content rather than design (though there’s still plenty you can/shouldn’t do with pure CSS).
Designing In The Browser
The question that no doubt comes to the mind of many web design newbies as they read about this process is of course, “Isn’t this all a bit repetitive?” First you design and build a site in Photoshop, Illustrator, Fireworks (yes, I remember that Fireworks is great for web content so don’t yell at me in the comments) or any other layout tool of choice, then you basically start over in the browser and rebuild what you just created using code instead of images wherever possible.
The answer is a resounding “yes.” The result is a movement of folks that encourage moving the design process right to the browser. Start in code, finish in code, use Photoshop only when you need to create an image and virtually eliminate all this repetitive nonsense.
I’m all for this process. It’s super lean and really streamlines your workflow. Unfortunately, it’s not always easy to get the creative side of your brain to produce your best work utilizing this method. Sarah Parmenter recently addressed this problem in her post, “I can’t design in the browser” in which she reveals the “guilty secret” that even though Photoshop isn’t a good way to display the kind of dynamic and responsive web content that clients need today, it does foster more creativity than going straight to HTML and CSS.
How Do You Design Websites?
This post represents a long answer to what seemed to be a simple question. However, under that question is something that we’re all struggling with lately, from beginners to professionals: What’s the best process for designing a website? Should the creative design process be distinct from the coding process or should they be one and the same? Should we build mockups in a layout application and then slice them up for the browser or is there a better way? Is Fireworks really the answer or is there still a missing solution?
I want to hear your thoughts on this. What does your current workflow look like, from beginning to end? Where do you begin the design process and how does that flow through to a live website? What tools do you find invaluable along the way? What would your ideal web design tool be like?