In today's tutorial, we're going to walk you through how to create your own simple UI kit from scratch. We'll create the basic building blocks that you can use in just about any web project, including: text fields, focus fields, select fields, scrollbars, loaders, checkboxes and radio buttons. Enjoy!
UI Kits: The Perfect Way to Expedite Your Designs
Creating a simple UI kit is a great way to speed up your design skills when you're working on a big project. If you've got lots of pages to mock up, having an arsenal of ready-to-use elements made specifically for that project will make you quicker at hammering out those pages. Today we've got a video and written tutorial - follow either one, or both!
The Video Tutorial
The Written Tutorial
For those of you who want a bit more guidance than the video, I'm providing a complete step by step written tutorial as well. Let's dive in!
Create the Text Fields
Creating the text fields is the simplest part of the entire process, but because these elements will probably be used the most often, it's important to get it right the first time. In our case, I've drawn simple 300px x 30px rounded rectangles with a 2px radius. Adjust your own to suit your own needs. Big, juicy, extra rounded fields can be fun too! Hard edges fields are for the more serious crowd.
Either way, create one that's perfect - add a stroke that matches your brand (#bdd9a7 for the demo), and duplicate the layer twice (Ctrl+J), moving it down each time.
These three layers will form the base of our UI kit - whenever we need to create a new field or button, chances are good that we'll want to start here so that we can duplicate the same basic height and spacing.
Next, add some text over each layer. Use whatever font you want, but it's best to keep it to web-safe fonts... especially with form fields where font-replacement isn't your best option. I've used Helvetica #407a16, 12pt - but you can use Arial, Georgia, Times, etc.
Now let's add a simple outer glow to our "focus field". This will help people identify it when they're using it. Our glow is pretty subtle, but you can make it as bright as you want. Notice that I've also added a VERY subtle inner shadow - that's totally optional, but it shows you how to you add subtle effects to make the field feel active.
Next, let's duplicate the rounded rectangle that we're going to use for the "dropdown menu" and mask it off using the Marquee tool and applying a layer mask. This creates the "button" for the menu, all we need to do is add a subtle gradient to make it feel more like a button - #d9edca to #f0f9e9.
This step is super important because for pretty much all future stock elements (buttons, checkboxes, etc.), we'll be copying this layer style and pasting it over blank shapes. Take a minute to get yours perfect before you move on because it'll set the tone for your entire UI kit.
Create the Button Elements
As I just mentioned, we'll create our buttons by using the same basic Rounded Rectangle from before, and Copy/Pasting the layer style from the Dropdown menu. The text we're using should be a Bold variant of the font used in the Text Fields, just add a simple "light" drop shadow (Drop Shadow, 75%, White, Screen, 1px Distance, 0 Size) to complete the pressable text.
To create the pressed-down version of the button, just invert the gradient by selecting "Reverse" from the Gradient menu.
The down-arrow is created using the "Custom Shape" button and selecting the down arrow from the library of elements that come stock in Photoshop. You can also create your own if you want... the shape is totally up to you.
Just create your arrow, set the fill color to your "brand color" (ours is #68b232) and apply a simple Inner Shadow (12% opacity, Distance 2, Size 3) to make it feel a bit inset. You can tinker with these settings of course - the blue version in the video will show you another variation.
Finally, you can add an optional lighting effect by using a simple 120px Brush (0% Opacity) on a blank layer. Position the "brushed blot mark" carefully over the top of the button - then just mask the brushed blot over the button (make a selection of the button shape and apply the new selection as a Layer Mask over the brushed effect). Set the blending mode to Soft or Hard Light to complete the effect.
You may have to tinker a bit with this last step based on the colors that you're using. The steps will always be about the same though:
- Create a new blank layer over your button.
- Use a brush with a wide radius and blot down once on the new layer.
- Position the new brushed blot over the top or bottom of the button.
- Create a Layer Mask for the blot from the Shape Layer of the button.
- Adjust the color overlay and blending mode to make it perfect for your brand.
Create the Checkboxes and Radio Buttons
This next step is super simple - just create 12px rounded rectangles (squares to be exact). Why 12px? Because it's the generic point size for most text on the internet. You can go bigger or smaller according to your own font size.
Remember, we're copy/pasting the layer styles from that Dropdown Menu button... this makes things quick and uniform.
The same process goes for the radio buttons, except this time we're creating 12px circles instead of rectangles.
The "D-Pad" is created by simply duplicating and rotating the arrow from the dropdown menu by 90 degrees a few times. These directional arrows are great when you need to create an accordion menu, jquery slider, etc.
Create the "Loading Bar"
A simple loading bar like this is a great way to extend the versatility of your UI kit. You might not use it all of the time, but it'll save you loads of time for the few instances where you need it pronto! The loading bar is composed of a few steps.
- Create the base - preferably a dark color.
- Create the active field or button (call it what you want - it's the thing that rests on top of the background).
- Add some subtle diagonal stripes.
- Add a light halo over the active strip.
The basic layer style of the background is as follows:
- Black Inner Shadow, 75% Opacity, Distance 2, Size 3.
- Vertical Gradient: #261e14 to #372a12 (bottom to top)
- 1px Stroke (outside): #142902
You can create the base of the active field a few different ways, but here's how the green one was built.
- Duplicate the base layer of the loading bar.
- Inset the rounded rectangle by 2px using the Convert Point Tool.
- Set the fill color to #3c6918.
- Set the Stroke to 1px and use a Gradient to fill the stroke : #3c6a17 to #74b441.
Next, we'll add the diagonal lines that will be masked over the loading bar:
- Create a long rectangle and Skew it to the side to create the diagonal.
- Duplicate it using Cntrl+J as many times as you need, moving each new copy out in equal spaces.
- Apply a basic gradient over each diagonal to mimic the active field. In our case it's a simple Black to White gradient with the blend mode set to Overlay.
- Mask the diagonals over our button by either creating a layer mask or using a Clipping Mask (shown)
The lighting effect is just a bit of a bonus if you want it. I've created it using a 120px Brush (0% Hardness), then I've created a new layer and clicked down on the mouse one time, creating a single blot on the page. Next, I've set the layer style to Soft Light and set it to mask over the button. You can do this final step a few ways - in the example I'm simple making a selection from the active field (Hold Cntrl and Click on the shape), and then applied that shape as a Layer Mask.
Create the Scrollbar
Alright, we're on the home stretch now! The scrollbar is pretty simple to create, but allow me to make a few pointers:
- Start by using a rounded rectangle.
- For a perfectly round edge at the top and bottom, set the radius of the rounded rectangle to be the same as the width of your scrollbar.
- For the inner-bar that people will actually grab, it helps to add a simple 2px Inner Stroke that's the same color as the base of the bar. This will make it feel like it's inside the base.
- Adding a light gradient from left to right will help the button feel pressable, just like our other buttons.
Here are the shots:
Document Your Document!
An often overlooked step for creating a basic UI kit is adding some basic branding and other documentation inside your file. Sure, you could add this kind of stuff in a text document that accompanies your file... but then people would have to open it up. This way, all of the basic information (client name, designer, version, type of file, etc.) all gets displayed inside the file so there's no room for confusion.
The Blue Version we created in the video tut.
Finally, you can customize this to your heart's content... use your own colors, fonts, layer styles, etc. Add new elements like tags, opened up dropdown menus, etc. The limit to how far you can take this is totally up to you, so go nuts and have fun with it!