Design UI elements

Design UI elements in less than 2 hours using Adobe Photoshop.
3.5 (19 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.
739 students enrolled
Take This Course
  • Lectures 21
  • Length 1 hour
  • Skill Level Intermediate 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


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 4/2014 English

Course Description

UI elements and UI kits are the most sought out things on the web by designers or front end developers. Every individual who's working on a huge website or a mobile app would definitely find uses for ui elements. Some designers go a step further and sell the ui elements online.

Boost your Photoshop skills by taking this practical course on how to create a User interface elements. The course will take you through the process of creating user interface elements in Photoshop step by step. And as a bonus, you'll also get to download the User Interface elements of both web and mobile.

In this course, we'll cover:

  • Planning
  • Choosing colors and fonts
  • Creating color swatches
  • And finally jumping to Photoshop and creating user interface elements

The UI elements we are going to create are the following:

  1. Buttons
  2. Icons
  3. Progress bars
  4. Text Fields
  5. Check Boxes
  6. Radio Buttons
  7. Toggle switches

Toggle switches are going to be created in 3 different styles by an easy way of learning to modify elements. The course gives you tools that will help you create any element with ease. I hope you enjoy and learn from this course.

What are the requirements?

  • Adobe Photoshop CS3 or later
  • A very basic knowledge of Adobe Photoshop (like working with shapes, layers etc)

What am I going to get from this course?

  • A step by step process of learning to design UI elements with ease.
  • Boosting your design skills
  • Learning / Improving some advanced Photoshop tools

Who is the target audience?

  • Web Designers
  • Graphic Designers
  • Visual artists
  • UI Designers

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: Before we get started

Welcome. This lesson introduces you to the course. You are going to get an overview of what exactly you are going to get in this course. Good luck.

1 page

This PDF addresses some basic information regarding the course and the course instructor. Some frequently asked questions are mentioned here

1 page

Need transcripts for the course? Look over here.

Section 2: Preparing the ground

One of the most important things in "life" is planning. Lets dedicate some time to decide and plan the structure of what we are going to learn.


The most important aspect of design is the color and the font. Lets focus on those aspects in this lesson. Because a bad combination of color and a bad choice of font can ruin a project.


We'll learn how to create color swatches in Photoshop. They tremendously help us through out the project without having to struggle around to find the color we need.

Section 3: Starting with the UI elements

Lets see what we are going to deal with, in this section


We'll start by creating out first element. Buttons, are the most used and the most common element in a project. Lets learn how to create one, apply layer styles to it.


This short lesson is going to focus on assigning colors to a button without losing layer style and properties.


We'll design icons and small buttons. Once we have known how to create an element, its simply going to be an easy method of pasting layer style and assigning colors.

Section 4: Continuing with the elements

We'll learn how to create progress bars. We'll also learn about clipping masks in this lesson, which is an important and advanced tool of Photoshop.


Lets see how to create text fields. We'll create four different states of text fields, namely Normal, Hover, Active and Disabled.


Check boxes are pretty simple yet most used elements. Lets see how to create two styles of checkboxes in this lesson.


We'll create Radio buttons in this lesson, which are pretty useful in places like feedback forms.

Section 5: Designing different styles of an element

Lets see what we are going to deal in this section


We'll learn how to create a toggle switch. This lesson focuses on the 1st style of toggle switch


This lesson focuses on the 2nd style of toggle switch


This lesson focuses on the 3rd style of toggle switch

Section 6: Bonus

We can design as many elements as we want, once we are familiar the process. This lesson provides an overview of some other elements I have created.

1 page

Download your source files here

1 page

Thank you. :-)

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Creative Dunes, Design Training and Resources

In a world where everyone with a copy of Photoshop feels like a designer, Creative Dunes focuses on providing the best and premium quality design training and resources to help you stand out of the crowd and be too good to resist. Creative Dunes deals with the fields of UI design, branding, logo and icon design, visual illustrations.

Feel free to check out my website.

About the Founder: I am a designer or rather, I should say I am a design-addict who worked for many web, print and mobile based design projects & start ups before starting my life as freelancer. I find myself most of the time either working on some project or teaching design. Apart from being a designer, I am a busy home-maker, chess-player and most importantly, a food lover!

Ready to start learning?
Take This Course