PSD to HTML Conversion
Best Practices
By Tusar Ranjan Rath
We will discuss...









Introducing Adobe Photoshop
Organizing the PSD
Benefits of an Organized PSD
PSD slicing...
Introducing Adobe Photoshop


Adobe Photoshop, or simply Photoshop, is a
graphics editing program developed and published...
Introducing Adobe Photoshop


The primary use of Photoshop is for Graphics / image
processing, enhancing photographs and ...
Introducing Adobe Photoshop
Menu Bar : contains all of Photoshop’s available options
Toolbox : has various tools for editi...
Introducing Adobe Photoshop

Options Bar

Tool Box

Image Area

Menu Bar

Palettes
Photoshop Menu Bar Tools
The toolbox has various tools for editing an image. The
toolbox is divided into several sections ...
Photoshop Menu Bar Tools
Selection 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
...
Benefits of an Organized PSD


Always know typography details within the design



Transparent images can be grabbed


...
Introducing PSD Slicing


The term slicing simply means to chop up your
Photoshop document into pieces, which then get
se...
Introducing PSD Slicing


On a more specific level, slicing can refer to a specific
set of tools inside of Photoshop.


...
WHY Slicing?


The point behind the slicing tools is to make the
process of saving out a bunch of images easier, both
in ...
Types of slicing


There are Three Types of Slices in Photoshop



The three different kinds of slices are :
- User Slic...
PSD Slicing


Few more points on PSD Slicing
- Enable/disable auto slicing
- Slicing Properties
- Benefits of Layered sli...
PSD to HTML


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



Let’s create a Basic ...
Conclusion


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



Here the ...
Conclusion


While working through the design, always be sure to
be validating both your XHTML and CSS to ensure
compatib...
Thank You
Upcoming SlideShare
Loading in...5
×

Psd to Html Conversion - Best Practices

2,202

Published on

This session is all about Organizing the PSD, Benefits of an Organized PSD and details on the PSD slicing basics.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,202
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Psd to Html Conversion - Best Practices"

  1. 1. PSD to HTML Conversion Best Practices By Tusar Ranjan Rath
  2. 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. 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. 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. 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. 6. Introducing Adobe Photoshop Options Bar Tool Box Image Area Menu Bar Palettes
  7. 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. 8. Photoshop Menu Bar Tools Selection Tools Enhancement Tools Vector Tools Navigation Tools Color Tools
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×