Building Websites With Photoshop CC from Stone River eLearning

Building Websites With Photoshop CC from Stone River eLearning

Sale page

Looking to design websites, either professionally or for your own use? Award-winning veteran trainer Geoff Blake will guide you through the process of building an entire web page from scratch using Photoshop! You’ll learn how to best organize the Photoshop interface to streamline your workspace for web design, eliminating the clutter and making creating web pages fast and easy. Explore the various grid systems that can be used as templates to build professional looking web pages. Next, it’s on to wireframing and UI design, where you’ll learn how to create a mockup that can be sent to clients for approval, or simply kept for personal reference. You’ll also discover how to build upon a wireframe to design a beautiful, and functional web page. Once you’re satisfied with your design, this course will show you how to extract the HTML and CSS that will bring your design to life, and how to customize the code to suit your needs. So if you’re interested in web design for fun or profit, this course will set you up with everything you will need.
Your Instructor

Stone River eLearning
Stone River eLearning

Stone River eLearning was started in 2012, and since then we’ve trained over a million students. Our content is timely and up to date with high production value. Above all, our courses are well taught, so you’ll learn more easily than the cut rate courses on some other sites.

Course Curriculum

1.Introduction

Hello And Welcome (1:00)

Here’s What We’ll Build (2:12)

The Workflow Process (3:52)

Setting Up Photoshop For Web Layout (7:05)

Saving Our Photoshop Customizations (4:48)

2.Structuring Layouts With Photoshop

Introducing The 960 Grid System (3:08)

Setting Up Our 960 Grid Template (5:47)

Creating The First Wireframe Object (4:31)

Continuing To Wireframe Objects (4:44)

Additional Techniques For Wireframing (11:36)

Finishing Up The Base Wireframe (2:57)

Organizing The Layers & Resetting The Properties Panel (6:00)

Roughing In The Header Content (5:34)

Building Out The Hero Section (8:01)

Wireframing The Introducing Section (5:36)

Creating The Organize Section (4:03)

Building The Get It Now Section (3:24)

Finishing Up The Wireframe (3:03)

Organizing & Colour Coding The Layers Panel (4:54)

Adding Text Labels To The Wireframe (3:47)

Exporting The Wireframe For Approval (6:17)

3.Applying Design To The Wireframe

Gathering The Design’s Resources, Part One (10:12)

Gathering The Design’s Resources, Part Two (8:13)

Creating The Site Logo With An Illustrator Smart Object (6:37)

Using Layer Styles To Format Buttons (7:59)

Saving & Using A Custom Style (2:17)

Finishing Up The Header (2:25)

Using Linked Smart Objects (10:52)

Using Layer Masks To Position Content (5:25)

Finishing Up The Hero Section (3:50)

Designing With Clipping Groups & Linked Smart Objects (12:44)

Developing The Organize & Share Sections (4:17)

Finishing Up The Layout’s Design (3:34)

4.Getting The Layout Out Of Photoshop & Into Code

Introducing Photoshop’s Asset Generator (8:07)

Going Further With The Asset Generator (12:48)

Getting The Layout’s Assets Organized (5:05)

Generating HTML With Photoshop (12:34)
Getting Set Up For The Coding Phase (9:21)

Adjusting The External Style Sheet (4:47)

Setting Up The Structural CSS (6:54)

5.Rebuilding The Layout With Code

Rebuilding The Header & Copying CSS Directly From Photoshop (11:41)

Creating The App Store Header Button (4:59)

Getting ed On The Hero Section (4:47)

Finishing Up The Hero Area (4:57)

Creating The Introducing Section (6:57)

Odd Behaviour With Photoshop’s Copy CSS Command (5:46)

Recreating The Organize And Share Sections (5:05)

Building The Get Section & Footer (3:08)

Wrapping Up The Project (2:43)

6. Wrapping up

Where To Go From Here (0:40)

Get immediately download Building Websites With Photoshop CC from Stone River eLearning