The document discusses best practices for PSD to HTML conversion, emphasizing the importance of organized PSD files for easier slicing into code. It explains the slicing process, the types of slices available in Photoshop, and highlights the benefits of using layered slicing methods. Additionally, it provides a basic overview of coding HTML from sliced PSD images, advocating for practice and validation in design processes for improved efficiency.

1. PSD to HTML Conversion
Best Practices
By Tusar Ranjan Rath

2. 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

3. 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.

4. 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:

5. 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).

6. Introducing Adobe Photoshop
Options Bar
Tool Box
Image Area
Menu Bar
Palettes

7. 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

8. Photoshop Menu Bar Tools
Selection Tools
Enhancement Tools
Vector Tools
Navigation Tools
Color
Tools

9. 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.

10. 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

11. 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.

12. 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

13. 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.

14. 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.

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

16. 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.

17. 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.

18. 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.

19. Thank You