Featherweight UI – A free, vector based and retina ready UI kit (with bonus mini-tutorial!)

Hot on the tails of my last design experiment, here’s a fresh UI kit out of the oven. Every element is vector based, retina ready and distributed through layers. Text and colours are easily editable. This kit is completely free for use for personal or commercial projects.

The font used is Lato Normal, available from Google Web Fonts for online or offline use.

Featherweight UI Download PSD

The Process

When I posted the Afterglow UI Kit, I got questions from curious designers wanting to know how the PSDs are built and how to use them. This article written by designmodo explains the value in grabbing these kits and how you can go about using them for inspiration and integration into your own projects.

What is a UI Kit and Why You Should Use It

While the kit is distributed via PSD, I use a combination of Photoshop and Illustrator to create shapes. Being an Illustrator fangirl down to my very core, I prefer to use this method as the tools AI are optimized for vector drawing. Below is a mini-tutorial to get you started on creating complex vector shapes using Photoshop and Illustrator.

Drawing

Iconography for the kit starts in Illustrator with a combination of using the pen tool and manipulating shapes. AI is built with the intent of creating vector-based artwork, so the tooling and features available are far more powerful than those found in Photoshop which is primarily focused on raster-based content.

Using Strokes

A significant advantage of starting in Illustrator is the manipulation of strokes drawn with the Pen tool which can later be expanded to shapes with fills.

You can also take advantage of the width tool (Shift+W) to adjust the widths of your stroke at any point on the path, creating natural looking strokes as they would be drawn by a brush. This is a powerful feature since the stroke is fully manipulatable after you apply width so you can continue to make fine-tuned adjustments to your path.

Pathfinding

Using the Pathfinder panel, you can knock-out paths to create “holes” in your objects or merge multiple shapes together. Find the panel by selecting Window > Pathfinder.

In the below example I’ve used divide to separate the objects, and by deleting the purple circle I leave a counter in my original shape. Experiment with the different options to achieve unique shapes through merging and dividing.

Preparation

Once you’re happy with your shape, convert all strokes to outlines in preparation for transfer to Photoshop. Since Photoshop doesn’t recognize strokes, it will go ahead and fill your shape (you don’t want this) so this is an important step in the process.

To convert strokes to outlines, go to Object > Expand Appearance. You can also take advantage of intelligent selection options for multiple objects by selecting your stroked object and going to Select > Same. From the submenu there’s an array of options which will help you clean up and grab similar stroked objects for expanding.

Pasting Shapes

Now it’s time to move onto Photoshop. Select the object you want to transfer and Ctrl/Cmd+C. This will copy the path information to your clipboard. With an active document open in Photoshop, Ctrl/Cmd+V to paste. You’ll be greeted with some options:

Select “Shape Layer” from the menu. This will paste the paths as if you had drawn the object using shape tools in Photoshop. The pasted object will take on the fill of the foreground colour.

You now have a shape layer in the Layers panel with the path accessible in the Paths panel. Want to further edit your shape? No problem! Use the Direct Selection Tool (A) to adjust the beziers and anchors. You can also use the Direct Selection Tool to copy your paths and paste back into Illustrator. Roundtripping is a beautiful thing.

Once the shapes are all laid out, you’re ready to go ahead and style. Double click on the shape layer to bring up the Layer Style dialogue.

Layer styles scale with your object which makes them perfect to use with vectors. To learn how to get started with Layer Styles, check out this article from tutorial9.com.

Using vector shapes in Photoshop is optimal especially for UI based elements, as you can easily scale objects targeting various resolutions. Leveraging Illustrator for complex shapes, you can use your custom shape definitions for styling in Photoshop with simplified cross-product workflows.

That’s the architecture of it, the rest of the design comes from imagination and inspiration wherever you may find it. Happy Photoshopping!

Follow @sarahwhatsup

278,126 total views, 105 views today

Posted on March 17, 2013 by Sarah · 119 comments