Building Websites With Photoshop CC

Learn step-by-step how to build web layouts and extract code with Photoshop CC…the right way!
4.5 (3 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
25 students enrolled
Instructed by Ten Ton Online Design / Design Tools
$20
Take This Course
  • Lectures 50
  • Contents Video: 5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2014 English

Course Description

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.

What are the requirements?

  • Basic computer skills

What am I going to get from this course?

  • You’ll be guided through the process building a complete web layout — from a blank Photoshop file to a fully coded, browser-ready web page!
  • You’ll see the complete process, from structural wireframe to fully designed and finished layout, in a series of clear, easy to follow, step-by-step lessons.
  • Explore many Photoshop tools such as the Asset Generator and Linked Smart Objects to help make your web projects run smoother!
  • Discover how easy it is to export HTML and CSS from Photoshop based off of your designs, and how to customize them to fit the needs of both you and your clients.
  • You’ll gain a strong, valuable, highly marketable set of design, coding, and graphics skills, allowing you to build websites quickly and efficiently.

What is the target audience?

  • Those looking to learn how to use Photoshop to build websites

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Hello And Welcome
01:20
Here's What We'll Build
Preview
02:12
The Workflow Process
Preview
03:52
Setting Up Photoshop For Web Layout
Preview
07:05
Saving Our Photoshop Customizations
Preview
04:48
Section 2: Structuring Layouts With Photoshop
Introducing The 960 Grid System
03:08
Setting Up Our 960 Grid Template
05:47
Creating The First Wireframe Object
04:31
Continuing To Wireframe Objects
04:44
Additional Techniques For Wireframing
11:36
Finishing Up The Base Wireframe
02:57
Organizing The Layers & Resetting The Properties Panel
06:01
Roughing In The Header Content
05:34
Building Out The Hero Section
08:01
Wireframing The Introducing Section
05:36
Creating The Organize Section
04:03
Building The Get It Now Section
03:24
Finishing Up The Wireframe
03:03
Organizing & Colour Coding The Layers Panel
04:54
Adding Text Labels To The Wireframe
03:47
Exporting The Wireframe For Approval
06:17
Section 3: Applying Design To The Wireframe
Gathering The Design's Resources, Part One
10:12
Gathering The Design's Resources, Part Two
08:13
Creating The Site Logo With An Illustrator Smart Object
06:37
Using Layer Styles To Format Buttons
08:00
Saving & Using A Custom Style
02:17
Finishing Up The Header
02:25
Using Linked Smart Objects
10:52
Using Layer Masks To Position Content
05:25
Finishing Up The Hero Section
03:50
Designing With Clipping Groups & Linked Smart Objects
12:44
Developing The Organize & Share Sections
04:18
Finishing Up The Layout's Design
03:35
Section 4: Getting The Layout Out Of Photoshop & Into Code
Introducing Photoshop's Asset Generator
08:07
Going Further With The Asset Generator
12:48
Getting The Layout's Assets Organized
05:05
Generating HTML With Photoshop
12:34
Getting Set Up For The Coding Phase
09:21
Adjusting The External Style Sheet
04:47
Setting Up The Structural CSS
06:54
Section 5: Rebuilding The Layout With Code
Rebuilding The Header & Copying CSS Directly From Photoshop
11:41
Creating The App Store Header Button
04:59
Getting Started On The Hero Section
04:47
Finishing Up The Hero Area
04:57
Creating The Introducing Section
06:57
Odd Behaviour With Photoshop's Copy CSS Command
05:46
Recreating The Organize And Share Sections
05:05
Building The Get Section & Footer
03:08
Wrapping Up The Project
02:43
Section 6: Wrapping Up
Where To Go From Here
04:05

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ten Ton Online, Geoff Blake, Lead Developer Ten Ton Online

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!

Ready to start learning?
Take This Course