Psd to Html Conversion - Best Practices


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
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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