Design UI elements
3.3 (21 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.
742 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Design UI elements to your Wishlist.

Add to Wishlist

Design UI elements

Design UI elements in less than 2 hours using Adobe Photoshop.
3.3 (21 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.
742 students enrolled
Created by Creative Dunes
Last updated 7/2014
English
Current price: $10 Original price: $20 Discount: 50% off
18 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 2 Articles
  • 4 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
A step by step process of learning to design UI elements with ease.
Boosting your design skills
Learning / Improving some advanced Photoshop tools
View Curriculum
Requirements
  • Adobe Photoshop CS3 or later
  • A very basic knowledge of Adobe Photoshop (like working with shapes, layers etc)
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.

Who is the target audience?
  • Web Designers
  • Graphic Designers
  • Visual artists
  • UI Designers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 21 Lectures Collapse All 21 Lectures 51:54
+
Before we get started
3 Lectures 01:28

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.

Preview 01:28

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

Some Basic Info
1 page

Need transcripts for the course? Look over here.

Transcript
1 page
+
Preparing the ground
3 Lectures 06:17

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.

Preview 01:06

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.

Preview 01:07

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.

Preview 04:04
+
Starting with the UI elements
4 Lectures 12:39

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

Aims of the section
00:16

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.

Preview 04:54

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

Creating buttons in multiple colors
03:09

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.

Small buttons and Icons
04:20
+
Continuing with the elements
4 Lectures 17:35

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.

Progress Bars
07:00

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

Text fields
03:33

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

Check boxes
04:05

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

Radio buttons
02:57
+
Designing different styles of an element
4 Lectures 08:34

Lets see what we are going to deal in this section

Aims of the Section
00:21

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

Toggle switch - Style One
03:00

This lesson focuses on the 2nd style of toggle switch

Toggle switch - Style Two
02:44

This lesson focuses on the 3rd style of toggle switch

Toggle switch - Style Three
02:29
+
Bonus
3 Lectures 01:21

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.

Designing other elements and styles
01:21

Download your source files here

DOWNLOAD - UI KIT
1 page

Thank you. :-)

Thank you
1 page
About the Instructor
Creative  Dunes
3.8 Average rating
38 Reviews
1,266 Students
3 Courses
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!