Course info
Apr 10, 2013

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.

About the author
About the author

Peter is a tech-head pure and simple. He is a UK & Europe group manager for Lidnug, and writes software for fun and for a living. He has been doing I.T in one form or another for best part of 30 years and will likely never stop.

Section Introduction Transcripts
Section Introduction Transcripts

Using the Photoshop Slice Tool
Welcome to generating HTML5 layouts using Photoshop and HTML5 with me, Peter Shaw. In this video, we will be looking at how to use Photoshop alongside a regular HTML editor to produce HTML5 assets for web design. We will be using Photoshop to slice an already existing user interface design, typical of that provided by a designer along with a few of the best practices for creating UI designs that are easy to turn into HTML5 assets. Then, in Part 2, we'll take a look at the output generated by Photoshop and rewrite it to be HTML5 compliant, so that it uses the new tags and CSS rules along with a brief introduction to the new things introduced by the HTML5 specification.

Working with HTML5 Layout
Welcome to Generating HTML5 Layouts using Photoshop and HTML5 with me, Peter Shaw. If you followed this through from the first module, you'll recall that we produced an HTML5 file using Photoshop Slicing Tools. In this next part, we will take a closer look at the code produced by Photoshop, as well as taking a tour of the new tags, elements, and CSS rules that have been introduced in the HTML5 specification. We'll also be looking briefly at the subjective semantics and what it means to HTML5 code. As you'll see, when we cover that, it won't be a very in-depth look, but it should be enough to give us an understanding as to why it helps us with our task. We'll finish up by transforming our HTML code to standard compliant HTML5 markup. Which, while not a huge amount of difference to its predecessors, will allow us to be more flexible with how we reuse our Photoshop generated assets.