Flat Design Tutorial with Photoshop
4.1 (15 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,327 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Flat Design Tutorial with Photoshop to your Wishlist.

Add to Wishlist

Flat Design Tutorial with Photoshop

Create a stunning web design mockup with Flat Design and Photoshop
4.1 (15 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,327 students enrolled
Created by Sandy Ludosky
Last updated 10/2014
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
  • 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

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
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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
13 Lectures
Getting Started with Flat Design?
2 Lectures 01:48
Materials & Set Up
1 Lecture 00:50
  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 !

Preview 00:50
Starting with the Flat Design process
5 Lectures 50:46

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
Preview 11:17

The header | the flat colors & UI kit

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.

The About section | The 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

The Services section | Shapes & Grid alignment

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

The Services section | Graphics & Buttons
Finalizing the Prototype
5 Lectures 32:34

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

The Team section | Shapes & Grid alignment

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

The Team section | Adding pictures & flat icons

We will use shapes to put together a form section

The contact section | Building a Form

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

The Contact Section | Adding a Map

The Footer
0 Lectures 00:00
About the Instructor
Sandy Ludosky
4.1 Average rating
1,553 Reviews
17,490 Students
22 Courses
Mobile 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.