Mini-review & Competition: From Photoshop to HTML E-Book
April 12, 2011 by Lubov Cholakova

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 7 years now, contributing the Content department. 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 >>

Place your comment about Mini-review & Competition: From Photoshop to HTML E-Book

You must me logged in to write a comment

Be the first to place a comment