PSD to HTML ConversionBest Practices

By Tusar Ranjan Rath

We will discuss...

Introducing Adobe Photoshop Organizing the PSD Benefits of an Organized PSD PSD slicing basics

- What Is Slicing?- Why Slice?- Types of Slicing- Slicing Properties

Generating Websafe sliced images Coding HTML from PSD slicing Conclusion

Introducing Adobe Photoshop

Adobe Photoshop, or simply Photoshop, is a graphics editing program developed and published by Adobe Systems on December 1982.

It has been described as "an industry standard tool for graphics professionals”.

Adobe Photoshop is a professional image editing software package that can be used by experts and novices.

Introducing Adobe Photoshop

The primary use of Photoshop is for Graphics / image processing, enhancing photographs and the most widely web designing.

The first step in learning Photoshop is to familiarize yourself with the Photoshop interface, which consists of five basic components:

Introducing Adobe Photoshop

Menu Bar : contains all of Photoshop’s available options

Toolbox : has various tools for editing the image

Options Bar : set the options for the currently selected tool

Palettes : various panes to control different aspects of the project. Includes layers, channels, paths, history, etc.

Image Area : the currently open image(s).

Introducing Adobe Photoshop

Tool Box Palettes

Image Area

Menu BarOptions Bar

Photoshop Menu Bar Tools

The toolbox has various tools for editing an image. The toolbox is divided into several sections of similar tools:

- Selection Tools- Enhancement Tools- Vector Tools- Navigation Tools- Color Tools

Photoshop Menu Bar ToolsSelection Tools

Enhancement Tools

Vector Tools

Navigation Tools

Color Tools

Organizing the PSD

Many designers take in well-organized PSD's, or flattened images, where either format can be sliced into code fairly easily, but either format takes some different practices.

PSD's with organized layers is usually preferred so the developer can build from the bottom up.

Basically an organized PSD file comprises of arranged layeres, where the main idea is that design and structural elements should be separated from each other.

Benefits of an Organized PSD

Always know typography details within the design

Transparent images can be grabbed

For more complex designs, background images can never get confusing

Introducing PSD Slicing

The term slicing 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.

The process of PSD slicing converts the Photoshop design templates into userfriendly and understandable codes.

Introducing PSD Slicing

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 photoshop document up into little pieces.

Basically, what it does is save you the trouble of cropping out each portion of an image manually and saving it

WHY Slicing?

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.

Though the process is kind of a pain, I have to admit that a nicely sliced PSD is a thing of beauty which makes the task easier and reduces almost half of your developmental timeframe.

Types of slicing

There are Three Types of Slices in Photoshop

The three different kinds of slices are : - User Slices- Auto Slices and - Layer Based Slices.

PSD Slicing

Few more points on PSD Slicing- Enable/disable auto slicing- Slicing Properties- Benefits of Layered slicing- Slicing and generating web-safe images

PSD to HTML

Let’s code a Basic HTML page using photoshop slicing tool and export html feature

Let’s create a Basic HTML page using photoshop slicing tool and normal html coding.

Conclusion

Sometimes it feels like slicing a PSD can really feel like a clunky process for the beginners.

Here the great saying proves that “Practice makes a man Perfect”.

Make sure you really look around in Photoshop and experiment with the most of the tools available to you.

Conclusion

While working through the design, always be sure to be validating both your XHTML and CSS to ensure compatibility.

By doing this through the process, one can check for common errors through their coding process, and fix them during the process in the future.

By converting designs to code more often, the quicker and more efficient the final results will become.

Thank You