Building Websites With Photoshop CC – Stone River eLearning

Salepage link: At HERE. Archive: https://archive.is/wip/XVsnw

Available on all mobile devices 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 wire framing 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.

Course Curriculum

1.Introduction

• Hello And Welcome (1:01)
• Here’s What We’ll Build (2:13)
• The Workflow Process (3:53)
• Setting Up Photoshop For Web Layout (7:07)
• Saving Our Photoshop Customizations (4:50)

2.Structuring Layouts With Photoshop

• Introducing The 960 Grid System (3:09)
• Setting Up Our 960 Grid Template (5:49)
• Creating The First Wireframe Object (4:33)
• Continuing To Wireframe Objects (4:46)
• Additional Techniques For Wireframing (11:38)
• Finishing Up The Base Wireframe (2:58)
• Organizing The Layers & Resetting The Properties Panel (6:03)
• Roughing In The Header Content (5:36)
• Building Out The Hero Section (8:03)
• Wireframing The Introducing Section (5:38)
• Creating The Organize Section (4:06)
• Building The Get It Now Section (3:25)
• Finishing Up The Wireframe (3:04)
• Organizing & Colour Coding The Layers Panel (4:56)
• Adding Text Labels To The Wireframe (3:48)
• Exporting The Wireframe For Approval (6:19)

3.Applying Design To The Wireframe

• Gathering The Design’s Resources, Part One (10:14)
• Gathering The Design’s Resources, Part Two (8:15)
• Creating The Site Logo With An Illustrator Smart Object (6:39)
• Using Layer Styles To Format Buttons (8:02)
• Saving & Using A Custom Style (2:18)
• Finishing Up The Header (2:26)
• Using Linked Smart Objects (10:54)
• Using Layer Masks To Position Content (5:27)
• Finishing Up The Hero Section (3:51)
• Designing With Clipping Groups & Linked Smart Objects (12:46)
• Developing The Organize & Share Sections (4:20)
• Finishing Up The Layout’s Design (3:36)

4.Getting The Layout Out Of Photoshop & Into Code

• Introducing Photoshop’s Asset Generator (8:09)
• Going Further With The Asset Generator (12:50)
• Getting The Layout’s Assets Organized (5:07)
• Generating HTML With Photoshop (12:36)
• Getting Set Up For The Coding Phase (9:23)
• Adjusting The External Style Sheet (4:49)
• Setting Up The Structural CSS (6:56)

5.Rebuilding The Layout With Code

• Rebuilding The Header & Copying CSS Directly From Photoshop (11:44)
• Creating The App Store Header Button (5:01)
• Getting Started On The Hero Section (4:49)
• Finishing Up The Hero Area (5:00)
• Creating The Introducing Section (6:59)
• Odd Behaviour With Photoshop’s Copy CSS Command (5:48)
• Recreating The Organize And Share Sections (5:07)
• Building The Get Section & Footer (3:09)
• Wrapping Up The Project (2:44)

6. Wrapping up

• Where To Go From Here (0:40)