Building Websites With Photoshop CC
4.3 (6 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.
41 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building Websites With Photoshop CC to your Wishlist.

Add to Wishlist

Building Websites With Photoshop CC

Learn step-by-step how to build web layouts and extract code with Photoshop CC…the right way!
4.3 (6 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.
41 students enrolled
Created by Ten Ton Online
Last updated 7/2014
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
Requirements
  • Basic computer skills
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.

Who is the target audience?
  • Those looking to learn how to use Photoshop to build websites
Students Who Viewed This Course Also Viewed
Curriculum For This Course
50 Lectures
04:54:52
+
Structuring Layouts With Photoshop
16 Lectures 01:23:23
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
+
Applying Design To The Wireframe
12 Lectures 01:18:28
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
+
Getting The Layout Out Of Photoshop & Into Code
7 Lectures 59:36
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
+
Rebuilding The Layout With Code
9 Lectures 50:03
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
+
Wrapping Up
1 Lecture 04:05
Where To Go From Here
04:05
About the Instructor
Ten Ton  Online
4.6 Average rating
49 Reviews
1,318 Students
5 Courses
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!