Is PSD Slicing Still Important In Web Design?

Posted on October 23, 2012 by
singleimage

Some web design students may be eager to learn how to slice PSD files, but only a few ask whether web design professionals still slice PSDs. The first thing beginners should know is what “PSD slicing” means. Put loosely, slicing a PSD allows you to chop up a Photoshop document into smaller pieces. The next step should be to put them in order by HTML, CSS positioning and finally get served up to the web server. On a more technical level, slicing refers to using the Slice Tool in the Photoshop to partition your PSD document into small pieces. Often, web designers just draw rectangles around an object that they want to separate from the rest of the layout.

Photoshop’s Slice Tools is merely there for our convenience. In reality, there are many web designers today who never used it and that isn’t really a bad thing. The point behind this tool is to make a large layout into modifiable and replaceable modules.

Although the process may be kind of pain, a properly sliced PSD document is highly versatile. Without slicing, you need to crop a large image and save each piece manually. When an image is sliced though, the “Save for Web” action can automatically combine these slices into standalone images. This can significantly save you from performing repetitive cropping and saving tasks.

Is Slicing Outdated?
Obviously, slicing has changed somewhat over the years, to the point where it has become a significantly different task than it used to be. Once, very few used CSS and when it came along, the technology offered pretty limited functionality compared to what we have today. Consequently, web designer tried so hard to create something that doesn’t look like crap by using plenty of images. Unfortunately, during a redesign, simple changes like a new font can be both time consuming and expensive. Obviously, slicing was really a big deal. Without slicing, when designers wanted to apply any sort of aesthetic icing, they had to slice every tiny portion of the design into piece, which is purely brutal for today’s The Internet connections were amazingly slow back then, so these images could take ages to load.

As CSS standard develops further, a new trend appeared in the web design industry: imageless designs. If you looked around on web design blogs 4 or 5 years ago, there were tons of articles on creating web elements, such as buttons without images. To this day, we often see web developers perform amazing feats, which wouldn’t be possible without CSS features. All of a sudden, they were able to add shadows, round corners, implement multiple backgrounds, use custom fonts, build gradients and many more. Many web designers simply aimed to leverage CSS and used as few images as possible. Imageless design wasn’t something to be achieved; instead it was something to be strived for.

Obviously, imageless design has its ups and downs. CSS is an elegantly easy way to adjust and maintain a web design for a long term. Changing a background color or a font; only requires slight changes of CSS codes and we are good to go. It is also possible to miniaturize thousands of lines of CSS code to the point that its effect on loading time is very minimal. With images, loading times were pretty much the only thing web designers had to worry about, but when CSS appeared, they had support issues across the board. The technology were supported everywhere although on older IE browsers, it can be messy.

When web programmers see a PSD document, they may instinctively try to see code behind it, like CSS properties and divs. Today, instead of slicing glossy buttons and serve them up as images, they use CSS to rebuild them from scratch. This process is more easily repeated throughout the website. A standard Web development procedure may feel a bit repetitive, first we design a site using Fireworks, Illustrator, Photoshop or any design tool of choice; then we start over the browser every time we make changes. If you ask whether it is an inefficient, the answer is a resounding yes. This fact encouraged some people to move the web design process right within the browser. It means we use Photoshop only when we need to create some images and this may significantly eliminate the repetitive nonsense. This should be a super lean process and can really streamline your workflow. Unfortunately, it isn’t easy to get the creative part of our brain when we use this method.

It appears, although Photoshop may not be the best way to deliver the kind of responsive and dynamic web content that clients need these days, it still fosters more creativity for web designers than going straight to scripting languages such as HTML and CSS.

Building on this fact, we can finally address the nagging question of whether we still need to slice PSD documents. CSS significantly eliminates the need for PSD slicing. This process is slowly being abandoned by experienced designers and even many newer designers never slice their PSDs throughout their career. PSD slicing can be useful at times, but for the most part, it is usually listed low in the priority list.

Author :

  • Adam Scott