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:
The UI elements we are going to create are the following:
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.
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.
This PDF addresses some basic information regarding the course and the course instructor. Some frequently asked questions are mentioned here
Need transcripts for the course? Look over here.
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.
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.
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.
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
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.
Download your source files here
Thank you. :-)
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!