1stwebdesigner

---

How to Use UI Kits – Plus Free UI Kits to Choose From! Posted: 29 Jan 2014 06:00 AM PST UI kits can be seen anywhere on the Web. But what is this UI kit thing? Do you know how to use UI kits? You can see a lot of resources with beautiful interface elements such as buttons, sliders, breadcrumbs, media players, forms and the likes. Perhaps it crossed your mind how these elements came to be. Let me give you first a brief introduction about UI kits. A UI kit stands for "User Interface Kit", which are PSD files that are composed of user interface elements. These come in a variety of colors, patterns and asl files that are being integrated on web and mobile designs. Though sometimes there are UI elements that are included on the package that you don't think you will be using. That being said, UI kits will vary according to your web design needs. Usually the premium versions of UI kits come with a lot of user interface elements than the free ones. Using UI kits is all about improving and speeding up the workflow without giving a lot of time thinking what to design. This allows you to focus more on the functionality and usability of the website you are working on. OK, enough for introduction. I know you're all fired up and want to know how to use UI kits. So let's rock! Choosing a UI Kit to Use There are a lot of UI kit resources on the Web that you can use, depending on what you need. But for this tutorial, we will be using Flat UI PSD format by Designmodo.com since it has a lot of user interface elements that we can choose from. Feel free to check these out too! Flat UI Pro, a professional design framework 1.  Flat AP UI Kit From: Andrew Preble 2. Featherweight UI – A free, vector based and retina ready UI kit From: Sara Hunt 3. Flat Design UI Kit Vol. 1 From: Bloom Web Design 4. FREE flat UI kit. From: Visualcreative.cz 5. UI Kit From: Abhimanyu Rana Opening the UI Kit PSD File Unzip the file first to view the contents of the folder. You can see four folders and 2 .txt files inside. Open the UI folder and then view the flat-ui-free.psd file in Adobe Photoshop. By default, there are three folders on the Flat UI PSD file: Basic Elements – consists of a series of individual UI element folders. Samples – consists of the actual application design of the UI elements. Background – the white background of the UI elements. Using the UI Kit Elements Now that the Flat UI PSD file is opened, we can now go on and use the UI elements. Click Auto Select on the Option Bar (on the top left section of Photoshop near the menu. Make sure Group is selected instead of layer) and then open the Basic Elements folder. Next, select the UI elements that you want to use. For this example, we will select the menu, share status buttons, radio buttons and checkboxes. Click on the selected UI elements and then move them to a new Photoshop document file. Resizing UI Kit Elements To resize UI elements, click on the Direct Selection Tool on the toolbar on the left section of the Photoshop. And then select the path on the right side of the UI element you want to resize. For this example, we will resize the menu element, press shift and drag the path to the right to resize. Changing the UI Element Color Scheme To change the color scheme, you need to select the specific element you want change then click on the shape and select your preferred color on the color picker. For this example, we will change the background color of the menu. Go to the Menu folder and look for the shape layer that has the same background color of the menu. Change the background color of the menu to hexadecimal color: #00acc0. Using Vectors and Glyphs Vectors and glyphs add a touch of  creativity to web design elements. Let's use the existing vectors and glyphs of the Flat UI kit. Create a new Photoshop document file. Next, create a box using Rounded Rectangle Tool with the dimension of 372px by 372px.  Now drag the retina vector icon and static green button on the box you created. Then drag the round check icon glyph to the left of the static green button. You just use the vectors and glyphs of UI elements. Exporting UI Elements for Web Now that we already know how to resize and change the color scheme of UI elements, let's export them for web use. Simply drag your preferred UI element in the new Photoshop document file with a transparent background. Make sure you will only select the layers of that UI element, not the whole folders themselves. For this example, let's use the paginator. Drag the UI element in the new Photoshop document and go to Image then choose Trim. The Trim window will then appear. Next, select the Transparent Pixels radio button and make sure that all of the checkboxes are selected on Trim Away section (Top, Bottom, Left, Right) and then click OK. Then Go to File > Save for Web & Devices. In the Save for Web & Devices Window, select the type of preset you want to use. For this example, PNG-24 is used since high quality image with no transparent background is preferred. Click Save to place it on your preferred location. Congratulations! You just learned how to use, resize, change color scheme, apply vectors and glyphs and export UI kit elements for web used. Conclusion UI kits are very helpful to both web designers and web developers. If you are a freelancer, using UI Kits will save you a lot of time since you don’t need spend more time thinking for the design. It can please your clients too because you can deliver the project faster. You can explore more UI kits here. The web is composed of hundreds of UI Kits, both in free and premium versions. You just need to choose the UI kit that suits your needs. You might also want to try to apply it on your actual web or mobile design and then later on code it using HTML and CSS.

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610