Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Photoshop Designs to Code
  • Discussion

  • Study Guides

  • Table of Contents

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Planning Your Conversion

  • Be sure that the design is finalized before you start this process
  • Once the design is complete, we must stop looking at it from a design standpoint
  • Go through the conversion steps we will use to get this design into coding
  • I always start with the boxes so we know how to set up our images for the web page
  • We will talk about how to look at the page from the HTML/CSS level
  • The process:
    • The conversion process is not a fine science
    • This course covers the method that I would use for this design
    • Each design is slightly different
    • The concepts used in this course are the same for each design
  • I will try & give you a good overview of these concepts so you can apply them to any design
  • The first step in planning the conversion is to look at the design visually to determine what images are needed for the web page
  • When planning for a design conversion, think about the page the same way you would think about creating the front page of a newspaper
  • You have your main headline for the paper
  • You then have the various sections of the paper that contain headlines, and a related story.
  • We have to think about the way the page is laid out in the design in order to be able to figure out the various parts we need in order to put this together into a web page