Mini-review & Competition: From Photoshop to HTML E-Book

How to slice your designs like a pro

From Photoshop to HTML is an amazing E-book that will guide you through the process of converting Photoshop design into HTML and CSS files for a website. in this review you will learn more about the book, what it covers and extras that are included in it.


Who's this book for:

This E-book is for anyone who has an elementary understanding of HTML and CSS. You should be familiar with HTML tags and the most common CSS properties.

What you'll learn:

  • Different methods for slicing a PSD.
  • Create semantic mark-up, and learn how this HTML relates to the original PSD.
  • How to utilize techniques, such as background replacement and sprite generation.
  • Use custom fonts with Cufon font replacement.
  • The differences between absolute and relative positioning.
  • How to compensate for the dreaded Internet Explorer 6.
  • Take advantage of advanced CSS3 features.
  • How to take advantage of a variety of helpful browser extensions to expedite your coding.
  • Utilize the jQuery library to add a touch of interactivity.

Example Themes, Files and Screencasts in the Book:

  • Photoshop files for the Light Box Design and HTML/CSS files for the Light Box theme.
  • A series of six screencasts covering the whole project from beginning to end.


Our friends from Rockable Press are giving away 5 free e-books. All you need to do, to enter the competition is download the sample to continue the following line: "When converting a PSD to HTML and CSS, you'll be most efficient if you have the right..."

Send your answer to this e-mail address, before Wednesday the 21st of April 2011.

Table Of Contents

Coding The HTML

  • Coding the HTML
  • Creating the Basic Shell
  • The Markup
  • Markup Complete!

Slicing the PSD

  • The Plan
  • Photoshop
  • The "Save for Web" Pattern
  • Best Practices for Image Types
  • CSS Sprites
  • Revising our HTML

Coding the CSS

  • CSS Resets
  • What's the Solution?
  • General Styles
  • Container
  • Header
  • Styling the Main Banner
  • Fahrner's Image Replacement Technique
  • What's the Difference Between Absolute and Relative Positioning?
  • Main content
  • Working Example: Columns
  • Here's the Thing about Floats
  • The Three Heading
  • Blockquote
  • CSS Shapes
  • Recent Portfolio
  • Before
  • After
  • About Page Header (subpage)
  • Home Page Header
  • The Body ID Trick
  • Work Page
  • Contact Page
  • Cufon Font Replacement

Compensating for Older Browsers

  • Cringe Time
  • Tools
  • Why is "Having Layout" Necessary?
  • Targeting Specific Versions of Internet Explorer

Bonus Chapter: A Splash or jQuery

  • The Script
  • Decoding the Script


Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>


Be the first to write a comment

You must me logged in to write a comment.