Flat Design Tutorial with Photoshop

Create a stunning web design mockup with Flat Design and Photoshop
4.0 (12 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.
1,312 students enrolled
Instructed by Sandy Ludosky Design / Web Design
50% off
Take This Course
  • Lectures 13
  • Length 1.5 hours
  • Skill Level All Levels
  • 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


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.

About This Course

Published 9/2014 English

Course Description

With the Flat Design Tutorial you will learn to create amazing webdesign and prototypes with Photoshop.

  • Fast & simple. ***NO CODING NEEDED***.
  • In 2 hours, you will learn about the latest flat UI techniques

  • You will use Photoshop, Flat UI components and other great resources.

This course is for aspiring web and product designer willing to sharpen their design and Photoshop skills. In a 2-hour tutorial, you will receive a good introduction to Flat Design, which is the latest trend in modern Web Design.

If you are new to Photoshop, this is a good place to start as the course will walk you through every step of the prototyping process.

The course includes:

  • An overview of the modern web design
  • A step-by-step tutorial to create
  • a website mockup and prototyping
  • An introduction to the 960 grid
  • Flat UI kit package to get started with Flat UI
  • Flat UI colors palette

For this course, you will need:

  • Photoshop CS5 + - you can download the 30-day trial version on the Adobe Creatrive site.
  • The rest of the materials is available for downloaded in the course content.

By the end of the course:

  • You will have a better understanding of website prototyping
  • You will get better at organizing your workflow with photoshop layers

What are the requirements?

  • For this course, you will need to have Photoshop installed
  • If you do not have Photoshop, you can download a trial version of Photoshop CC by visiting the adobe website

What am I going to get from this course?

  • The course will teach students how to create prototypes with assets and colors in Photoshop
  • By the end of the course, you will be able to craft a website prototype ready to showcase to a potential client
  • By the end of the course, you will understand how to work with the grid (960.grid) to create and organize your layout
  • By the end of the course, students will on par with working with layers and keep the work organized while working on complex Photoshop projects
  • By the end of the course, students will be very knowledge with the flat ui colors which are very trendy in modern web design

Who is the target audience?

  • This course is for beginners in web design
  • It is recommended to have a basic knowledge of Photoshop
  • The course is for anyone willing to improve their web design skills
  • if you want to become a web designer and learn how to create mockups with Photoshop, this is the right place
  • This course is good for both PC and Mac users - Information provided during the video lessons is intended for both.
  • For freelance developers willing to get a better understanding of web design

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.


Section 1: Getting Started with Flat Design?
Project Overview
Section 2: Materials & Set Up
  1. Go to this page to download the course materials
  2. Once you land on the page, click "Download all Your Files Here"

That's it !

Section 3: Starting with the Flat Design process

In this lecture, we will see how to use the 960 grid as a foundation for the prototyping process as well as how to keep layers organized.

We will build:

  • the navigation
  • add a title and the social media icons

We will use extra flat ui assets to build the about section of this prototype

This lecture will teach you how to add a layer mask.


We will start with defining the layout of the services section with shapes and colors.

Graphics will be duplicated from the flat ui kit documents


We will finish importing the flat ui graphics and add cute buttons to each service box.

Section 4: Finalizing the Prototype

In this part, we will work with shapes, layer mask and the grid system.

the contact box will be aligned properly with the help of the grid system


Just like in the sections section, we will import images by duplicate layers and use layer mask.

Then, we will add content and add flat icons to create look-alike online business cards


We will use shapes to put together a form section


To finalize this template, we will import a map to place next to the contact form. Very easy & quick process.

The Footer
Section 5: Beyond

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Sandy Ludosky, Web Designer & Developer

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff.

Ready to start learning?
Take This Course