Generating HTML5 Layouts Using Photoshop
A short introduction to using Photoshop's slice tools to create HTML5 output
What you'll learn
A short introduction that takes the viewer from a graphic asset created using Photoshop, and shows them how to slice it up and produce an HTML5 ready, reusable asset that can be included in any web project.
Table of contents
- Introduction 1m
- Remembering what got produced 2m
- What is HTML5 1m
- Intro to semantics 1m
- The new HTML5 tags 3m
- HTML5 Document Structure 1m
- CSS3 Changes 2m
- Analizing the document produced by Photoshop 2m
- Tidying the HTML (round 1) 2m
- Tidying the HTML (round 2) 3m
- Refactoring the CSS 1m
- Nth Child Selectors 3m
- Continuing with the CSS tidying 2m
- Fixing up the parent container and text area 2m
- Reviewing what we just did 1m
- Summary 1m
About the author
Peter will openly admit to being a typical geek. He's been known to say, "If it's shiny, electrical and has blinking lights on it, then it attracts me like a magpie to jewelry." He has been doing I.T. in one form or another for the best part of 30 years. Peter writes software, creates artwork, produces 3D models and many other things. He is the UK & Europe group manager for one of the largest .NET user groups (Lidnug) on the internet. Most importantly, he gets to do what he loves for a living: ... more