Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
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.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Introduction|
Hello And Welcome
Here's What We'll BuildPreview
The Workflow ProcessPreview
Setting Up Photoshop For Web LayoutPreview
Saving Our Photoshop CustomizationsPreview
|Section 2: Structuring Layouts With Photoshop|
Introducing The 960 Grid System
Setting Up Our 960 Grid Template
Creating The First Wireframe Object
Continuing To Wireframe Objects
Additional Techniques For Wireframing
Finishing Up The Base Wireframe
Organizing The Layers & Resetting The Properties Panel
Roughing In The Header Content
Building Out The Hero Section
Wireframing The Introducing Section
Creating The Organize Section
Building The Get It Now Section
Finishing Up The Wireframe
Organizing & Colour Coding The Layers Panel
Adding Text Labels To The Wireframe
Exporting The Wireframe For Approval
|Section 3: Applying Design To The Wireframe|
Gathering The Design's Resources, Part One
Gathering The Design's Resources, Part Two
Creating The Site Logo With An Illustrator Smart Object
Using Layer Styles To Format Buttons
Saving & Using A Custom Style
Finishing Up The Header
Using Linked Smart Objects
Using Layer Masks To Position Content
Finishing Up The Hero Section
Designing With Clipping Groups & Linked Smart Objects
Developing The Organize & Share Sections
Finishing Up The Layout's Design
|Section 4: Getting The Layout Out Of Photoshop & Into Code|
Introducing Photoshop's Asset Generator
Going Further With The Asset Generator
Getting The Layout's Assets Organized
Generating HTML With Photoshop
Getting Set Up For The Coding Phase
Adjusting The External Style Sheet
Setting Up The Structural CSS
|Section 5: Rebuilding The Layout With Code|
Rebuilding The Header & Copying CSS Directly From Photoshop
Creating The App Store Header Button
Getting Started On The Hero Section
Finishing Up The Hero Area
Creating The Introducing Section
Odd Behaviour With Photoshop's Copy CSS Command
Recreating The Organize And Share Sections
Building The Get Section & Footer
Wrapping Up The Project
|Section 6: Wrapping Up|
Where To Go From Here
Lead by award-winning veteran trainer Geoff Blake, Ten Ton Online produces top quality video-based software training products, helping users worldwide increase their web design and software skills. Taking a fresh approach to software education, Ten Ton believes that learning should be a fun, creative, in depth, and inspiring. Gain advanced skills in today's modern creative technologies, including HTML, CSS, WordPress, Adobe's Creative Suite, E-Commerce, and more, and have fun along the way!