Home » Software Training » Photoshop Designs to Code
No. of
Lectures
Duration
(hrs:min)
55
6:55

Software Training: Photoshop Designs to Code Prof. Candyce Mairs (Adobe Certified)

4.3
83 ratings • 0 reviews
  • Level Beginner
  • 55 Lessons (6hr : 55min)
  • 2,119 already enrolled!
  • Audio: English

Learn how to convert your Photoshop website design into an HTML/CSS file in Dreamweaver. Adobe Certified Instructor Candyce Mairs will walk you through the basic steps of how to take a Photoshop file and set up the design in Dreamweaver in order to easily build a website. Candyce has been in the training industry since 1994, is a Certified Internet Webmaster (CIW) Master Designer and Instructor, and also holds Adobe Certified Instructor and Expert certifications in Fireworks, ColdFusion, Acrobat, and Contribute.

Table of Contents

Section 1: Web Page Design Mockup

  Reviewing the Design 2:46
  Planning Your Conversion 6:23
  Getting to Know Wireframes 4:03
  Creating Wireframes 4:19
  Creating a Style Guide 4:33
  Defining CSS 3:44

Section 2: Slicing

  What Is a Slice? 4:50
  Slicing with Photoshop 10:40
  Slicing with Photoshop Elements 5:28

Section 3: Optimizing Images

  Understanding Optimization 4:44
  Image Formats for the Web 10:19
  Optimizing Images in Photoshop 8:04
  Optimizing Images in Photoshop Elements 10:21

Section 4: Planning Page Layout

  Planning the Design Layout 6:07
  Web Typography 7:53
  Documenting Decisions 5:57

Section 5: Exporting Images

  Setting Up the Export with Photoshop, Part 1 11:27
  Setting Up the Export with Photoshop, Part 2 12:22
  Setting Up the Export with Photoshop Elements 10:12

Section 6: Getting Organized

  Creating the Root Folder 7:32
  Defining a Local Site 4:17
  Exploring the Interface 5:08
  Creating a Web Page 6:46
  Inserting an Image 6:30

Section 7: Understanding CSS

  Formatting Text with CSS 9:20
  Using the Box Model 7:03
  Creating DIV Tags with IDs 9:02

Section 8: Building the Web Page

  Building the Boxes 11:25
  Adding Text to the Page 8:34
  Adding Images Within DIV Tags 6:48
  Customizing Box Backgrounds 7:38
  Using CSS Background Images 8:32
  Correcting Box Placement 9:37

Section 9: Customizing Page Structure with CSS

  Testing CSS Properties 4:40
  Positioning Upper Content 12:08
  Creating Columns on the Page 10:52
  Issues with Floats 8:30
  Using Tracing Images 8:05
  Adjusting Box Positioning 11:18

Section 10: Creating the Look of the Web Page with CSS Properties

  Positioning the Photos 4:19
  Defining Font Stacks 10:21
  Customizing Text with CSS 6:14
  Finishing Font Definitions 8:45
  Correcting Background Colors 6:51
  Nudging Content Areas 10:22
  Positioning Lower Columns 8:49
  Creating Curved Boxes 5:51
  Using CSS Classes 10:07

Section 11: Adding New CSS3 Properties

  Adding Drop-Shadows 6:57
  Creating Gradients 7:50

Section 12: Testing the Design

  Previewing Pages in Browsers 3:07
  Adding Column Separators 5:24
  Finalizing the Web Page for Chrome 4:27
  Finalizing the Web Page for Firefox 11:05
  Fixing Page Content Alignment 6:26

Duration: 6 hours, 55 minutes

Number of Lessons: 55

Student Feedback

4.3

0 Reviews

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

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

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • 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 lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.