Candyce Mairs

Creating a Style Guide

Slide Duration:

Table of Contents

Section 1: Web Page Design Mockup

Reviewing the Design

2m 46s

Planning Your Conversion

6m 23s

Getting to Know Wireframes

4m 3s

Creating Wireframes

4m 19s

Creating a Style Guide

4m 33s

Defining CSS

3m 44s

Section 2: Slicing

What Is a Slice?

4m 50s

Slicing with Photoshop

10m 40s

Slicing with Photoshop Elements

5m 28s

Section 3: Optimizing Images

Understanding Optimization

4m 44s

Image Formats for the Web

10m 19s

Optimizing Images in Photoshop

8m 4s

Optimizing Images in Photoshop Elements

10m 21s

Section 4: Planning Page Layout

Planning the Design Layout

6m 7s

Web Typography

7m 53s

Documenting Decisions

5m 57s

Section 5: Exporting Images

Setting Up the Export with Photoshop, Part 1

11m 27s

Setting Up the Export with Photoshop, Part 2

12m 22s

Setting Up the Export with Photoshop Elements

10m 12s

Section 6: Getting Organized

Creating the Root Folder

7m 32s

Defining a Local Site

4m 17s

Exploring the Interface

5m 8s

Creating a Web Page

6m 46s

Inserting an Image

6m 30s

Section 7: Understanding CSS

Formatting Text with CSS

9m 20s

Using the Box Model

7m 3s

Creating DIV Tags with IDs

9m 2s

Section 8: Building the Web Page

Building the Boxes

11m 25s

Adding Text to the Page

8m 34s

Adding Images Within DIV Tags

6m 48s

Customizing Box Backgrounds

7m 38s

Using CSS Background Images

8m 32s

Correcting Box Placement

9m 37s

Section 9: Customizing Page Structure with CSS

Testing CSS Properties

4m 40s

Positioning Upper Content

12m 8s

Creating Columns on the Page

10m 52s

Issues with Floats

8m 30s

Using Tracing Images

8m 5s

Adjusting Box Positioning

11m 18s

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

Positioning the Photos

4m 19s

Defining Font Stacks

10m 21s

Customizing Text with CSS

6m 14s

Finishing Font Definitions

8m 45s

Correcting Background Colors

6m 51s

Nudging Content Areas

10m 22s

Positioning Lower Columns

8m 49s

Creating Curved Boxes

5m 51s

Using CSS Classes

10m 7s

Section 11: Adding New CSS3 Properties

Adding Drop-Shadows

6m 57s

Creating Gradients

7m 50s

Section 12: Testing the Design

Previewing Pages in Browsers

3m 7s

Adding Column Separators

5m 24s

Finalizing the Web Page for Chrome

4m 27s

Finalizing the Web Page for Firefox

11m 5s

Fixing Page Content Alignment

6m 26s

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

Photoshop Designs to Code Creating a Style Guide

Section 1: Web Page Design Mockup: Lecture 5 | 4:33 min

Lecture Description

Next Lecture

Previous Lecture

Discussion
Study Guides
Table of Contents

Please login to ask a question and view discussion.

Start Learning Now

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

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!

Creating a Style Guide

Once your design is finalized and you are going to start your design conversion, you must plan for all of the styles within your document
Websites are comprised of HTML & CSS
The CSS portion consists of style definitions which must be specified
It is a good idea to create a style guide that stores all the style information
This simplifies the conversion process once you move into the web side of this process
The style guide contains information about what styles you wish to use within the various areas of your web page
During the design creation, decisions were made to use specific colors, fonts, sizing, etc.
The style guide is a listing of these styles placed into a single document
This is a great reference for the web site moving forward as it simplifies the branding for future maintenance of the site

Software Training: Photoshop Designs to Code

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

Photoshop Designs to Code Creating a Style Guide

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Discussion

Study Guides

Table of Contents

Start Learning Now

Membership Overview

Creating a Style Guide

Software Training: Photoshop Designs to Code

Start Learning Now

Membership Overview

Photoshop Designs to Code Creating a Style Guide

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Discussion

Study Guides

Table of Contents

Start Learning Now

Membership Overview

Creating a Style Guide

Software Training: Photoshop Designs to Code

Available 24/7. Unlimited Access to Our Entire Library.

Searchable Lessons

Get Answers & Community Support

Downloadable Lecture Notes

Study Guides, Worksheets and Extra Example Lessons

Start Learning Now

Membership Overview