PSD to HTML with Adobe Photoshop CS6

If you want to learn how to convert a design from an Adobe® Photoshop® file, into an HTML/CSS document, then this course is for you. It’s a video-based, step-by-step course that explains everything you need to know to get started. You should already be familiar with basic concepts of HTML & CSS. Well convert a layout in Photoshop into a working HTML/CSS file that works consistently across all major web browsers.

Topics include:

SETUP AND ANALYZE
Welcome
Getting Setup Properly
Analyze the Layout
Isolate and Export Graphics
Additional Export Considerations
Isolating Button Graphics
Export Button Graphics
Next Steps

CODING THE TOP SECTION
Getting Started
Calculating the Width
Adding the Background Image
Creating the Links
Reviewing the F2FW ico Class
Creating the Social Icon Graphics
Displaying the Social Icons

CODING THE HEADER
Coding the Header Structure
Included F2FW IDs and Classes
Create the Gradient Background
Adding the Logo
Adding the Menu

CODING THE PAGE "HELLO" SECTION
Creating the HTML Structure
Creating the Gradient Background
Adding the Border
Coding the Top Bar
Adding the Hello Button
Creating the Article Text
Adding the Custom Buttons
Placing the Slider Image
Generating the Next and Previous Buttons
Position Button and Create Image Files
Adding the Arrow Images

CODING THE PAGE ALBUMS AND BLOG SECTION
Coding the Thumbnails
Adding Gray Surrounds and White Space
Correcting Thumbnail Appearance
Styling the Hyperlinks
Adding the Icons to the Hyperlinks
Coding the HTML for the Blog Section
Styling the Blog Section
Displaying Blog Post Icons
Changing Icon Position

CODING THE FOOTER AND DEBUGGING
Coding the HTML for the Footer
Styling the Footer
Testing in Safari, Chrome, and Opera
Debugging Firefox Issues
Testing in Internet Explorer 9
Using Adobe Browser Lab
Adding the @font-face Declaration
Correcting IE Bug 1 and 2
Correcting IE Bug 3 and 4
Correcting IE Bug 5 and 6
Conclusion