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

Related Courses:

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
or
Still having trouble? Contact us
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.