Featherweight UI

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

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.

shapesUsing 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.

stroke

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.

widthtool

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.

pathfinderpanel

 

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.

divide

 

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:

pasteoptions

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.

shapepath

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.

layerstyle

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!


182,641 total views, 256 views today

Posted on March 17, 2013 by Sarah · 119 comments

119 comments

  1. Jeff
    - Reply

    I didn’t know you could copy between illustrator and photoshop what a great tip. Thank you for taking the time to put this together. Also a width tool???? Im going to use illustrator more often!

    1. will
      - Reply

      Copy and paste between Illustrator and Photoshop has existed since 1988. You ought to sign up for Lynda.com you’ll learn a lot.

  2. Pingback: Featherweight UI | Paper Caves

  3. Jason
    - Reply

    Thank you so much for putting your hard work out there for other graphic designers and web designers! Please continue to post, I love following this blog!

  4. Pingback: Featherweight UI – A free, vector based and retina ready UI kit (with bonus mini-tutorial!) | aranda.se

  5. Pingback: 今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG

  6. Dave
    - Reply

    Hi,
    Nice UI kit, do you have it as an .ai

    We are using Illustrator for all our web design and its a million times faster then Photoshop, not to mention great for responsive and retina ready websites. Pixels are dead me thinks, long live vectors.

    1. Sarah Author
      - Reply

      Just the PSD, but all the shapes are vector based so they’re scaleable. If you’re feeling intrepid you can c/p the shape paths into AI.

  7. Pingback: Flat UI Kits, Best for Web and App UI Design | Graphics Design | Design Blog

  8. Pingback: 30 Free Flat UI Kits for Web Designers | Splashnology.com

  9. Pingback: 40+扁平化的APP应用UI和网页设计素材 _ 美术的那点事!

  10. Pingback: @microblogging – 20 Free & Awesome Flat Design Resources

  11. Pingback: Free Flat Elements for Interface Design | Graphics Design | Design Blog

  12. Pingback: 分享!20套惊艳的扁平化设计素材免费下载 – 梦想天空(山边小溪) | 查问题

  13. Pingback: 酷站欣赏|资源分享|扁平化设计素材| | 前端设计,UI设计,平面设计,网页设计,LOGO设计,JS特效,FLASH片头

  14. Pingback: 20套惊艳Metro UI 界面的扁平化设计素材免费下载_PS素材下载-三人行PS学堂

  15. Pingback: 20套精美的扁平化设计素材 – UIshock界面设计|UI设计

  16. Pingback: 36 High-Quality Flat Design Resources | Mobile Apps Now

  17. Pingback: 36 High-Quality Flat Design Resources | Music, Entertainment, Blog

  18. Pingback: Qué es Flat Design y 36 recursos de alta calidad para verlo : Pixeldigital

  19. Pingback: 36 High-Quality Flat Design Resources - iPad 5

  20. Pingback: 36 High-Quality Flat Design Resources - TechFatTechFat

  21. Pingback: 36 High-Quality Flat Design Resources | Prize Fighter Creative

  22. Pingback: 设计资源汇总:34个高品质的扁平化设计 – 手机游戏开发社区

  23. Pingback: 15 kits Flat UI gratuits pour les Web designer

  24. Pingback: Featherweight UI – A free, vector based and retina ready UI kit for web designers - iDevie - iDevie

  25. Pingback: 50 Yếu Tố Thiết Kế Phẳng Cho Giao Diện Người Dùng Miễn Phí | Làm Web

  26. Pingback: 10 free flat user interface kit | Nethusiastic

  27. Pingback: Featherweight UI – A free, vector based and retina ready UI kit for web designers - iDevie - iDevie

  28. Pingback: 10 Super Useful Free Flat UI Kits

  29. Pingback: 10 Super Useful Free Flat UI Kits | Lunarium Design

  30. Pingback: 10 Super Useful Free Flat UI Kits | Website Builder Reviews

  31. Pingback: 10 Super Useful Free Flat UI Kits | Your Design Magazine

  32. Pingback: 10 Super Useful Free Flat UI Kits | Search Engine Optimization & Internet Marketing (SEO & SEM) Blog

  33. Owuna, S
    - Reply

    Good job, In a nut shell,please advice me on how I can start. Ps and AI basics as a learner without spending too much. Linda .com is very good but for Dollar earners. Thank you.

  34. Pingback: Il flat design: ritorno al futuro – #itargetweb | Condividere per Comunicare

  35. Pingback: The ultimate guide to flat design « Refined Sites Blog

  36. Pingback: The ultimate guide to flat design | WordPress Coders - Articles

  37. Pingback: The ultimate guide to flat design - Articles in IT and more | Articles in IT and more

  38. Pingback: Flat Design: UI Kits y más | ¿se ha ido ya mama?

  39. Pingback: The ultimate guide to flat design | Spicer Designs – Web Design, Technology and News

  40. Pingback: The ultimate guide to flat design | Sudbury SEO, PPC & Web Design Services

  41. Pingback: 10 Flat UI Kit Miễn Phí và Rất Hữu Ích Cho Bạn | Làm Web

  42. Pingback: 怒赞!2013扁平化设计终极指南

  43. Pingback: The ultimate guide to flat design | Pixels Multimedia

  44. Pingback: 2013扁平化设计终极神器——扁平化资源大集合 | 一周一博

  45. Pingback: 设计宝典:2013扁平化设计终极指南 - 电商中国

  46. Pingback: 怒赞!2013扁平化设计终极指南 « PM百科

  47. Pingback: 2013扁平化设计终极指南 - 骨骨同学

  48. Pingback: 10 Super Useful Free Flat UI Kits | The Creative Web Project

  49. Pingback: راهنمای کامل برای طراحی تخت یا Flat | وب هاب

  50. Pingback: طراحی وب: راهنمای کامل برای طراحی تخت یا Flat : آی تی | وب | نت

  51. Pingback: 10个免费超级有用的扁平UI工具包 | J0s1ph's Blog

  52. Pingback: 我的地带

  53. Pingback: 10 个免费的扁平工具包 | HTML5的那些事儿

  54. Pingback: 10 Beautiful and Useful Free Flat UI Kits - Free Coding tips

  55. Pingback: 10 Flat design kit gratuiti | Smashing Magazine

  56. Pingback: 36 recursos de Flat Design - Vitamina Publicitaria

  57. Pingback: 10个超级好用的扁平化UI工具包(PSD源文件) | 云瑞

  58. Pingback: 106 Free Flat UI Kits to Boost Your Design in No Time • 1stwebdesigner

  59. Pingback: 75 مجموعه فوق العاده مفید و رایگان UI تخت و Flat | وب هاب

  60. Pingback: 18 Free UI kit PSD gratuiti di alta qualità | upCreative

  61. Pingback: 30+ Amazing flat UI sets - Design Reviver - Web Design Blog

  62. Pingback: 10个超级有用免费的扁平化UI套件 | 加油谷歌!gogogoogle!

  63. Pingback: 30+ Amazing flat UI sets | Lunarium Design

  64. Pingback: 10个免费的扁平化UI套件 | ajaxj 技术笔记

  65. Pingback: 106 Free Flat UI Kits to Boost Your Designs in No Time | High5 BuddiesHigh5 Buddies

  66. Pingback: Getting Started with Flat UI Design - SitePoint

  67. Pingback: Getting Started with Flat UI Design - Supreme Factory | Supreme Factory

  68. Pingback: Getting Started with Flat UI Design – Supreme #WordPress Blog | Supreme Factory

  69. Pingback: 75 مجموعه فوق العاده مفید و رایگان UI تخت و Flat | Pshko

  70. Pingback: 106 Free Flat UI Kits to Boost Your Designs in No Time | Izzo online

  71. Pingback: Internet Affiliate Marketing 106 Free Flat UI Kits to Boost Your Designs in No Time - Internet Affiliate Marketing

  72. Pingback: 106套免费的扁平化UI套装PSD来提高你的设计效率 | 云瑞

  73. Pingback: 106 Free Flat UI Kits to Boost Your Designs in No Time | Tvnwebsite development

  74. Pingback: Flat Design. Recursos para el Diseño Web Plano » CreativaSfera

  75. Pingback: News8online.com | 30 + İnanılmaz düz UI setleri - News8online.com

  76. Pingback: Ultimate guide to impressive and flat design | DesigNirvana - Design resources, inspiration, tutorials and freebies

  77. Pingback: Nerd playground | 106 Flat UI Kit miễn phí cho Designer ( Phần 1)

  78. Pingback: 82个精品扁平化设计的免费UI KIT素材 | Faris·L FarisLee's

  79. Pingback: Gruptok An InDepth Look At The Flat UI Design Style » Gruptok

  80. Pingback: An InDepth Look At The Flat UI Design Style Gruptok | Gruptok

  81. Pingback: Flat Design: 15 User-Interface-Kits zum Download » t3n

  82. Pingback: 国际进口商品城

  83. Pingback: 10 Free Flat UI Kits to Boost Your Designs - Andor Nagy

  84. Pingback: 20 Useful Flat UI Kits Free PSD | Downgraf.com

  85. Pingback: 22 AMAZING Flat Themes for WordPress October 2013

  86. Pingback: 今年注目のフラットデザインのまとめ紹介 | NEXT SENSE

  87. Pingback: 10 Awesome Flat Social Media Button Sets | Social Media Sun

  88. Pingback: 맥사문 | iOS7 스타일의 UI 키트, 템플릿 및 독특한 UI 키트 디자인 모음

  89. Pingback: Wize Designs web design USA | best design, USA | adobe tutorial, USA

  90. Pingback: Free Resources for Creating a Flat Design | Search Engine Optimization & Internet Marketing (SEO & SEM) Blog

  91. Pingback: Free Resources for Creating a Flat Design | Photo Vide

  92. Pingback: Best Free UI Kits Giveways - PSD Downloads

  93. Pingback: 31 Free Flat User Interface (UI) Kits | Inspiration Mix

  94. Pingback: Getting Started with Flat UI Design | DigitPanda

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>