Android UI Design Kit for Photoshop 4.4 [Free Download]

Android UI Design Kit for Photoshop 4.4

Happy New Year folks! In the past few weeks, I have worked slowly on the new Android UI Design Kit for Photoshop 4.4, which is a Nexus 5 version, and today I am happy to announce that it is ready! This time it only comes with Photoshop version though, I am still working on the GIMP version, mainly on replacing the text layers (which I just found out recently the text layers from Photoshop won’t work in GIMP!). If there is any GIMP gurus would like to help out replacing the text layers, do let me know in the Comments section.

This update the Design Kit to Nexus 5 resolution (Portrait Mode – 1080×1920), with several new building blocks added in it.

What’s new in 4.4?

  • Action Bar – PullToRefresh
  • Action Bar – NotBoring
  • HoloGraphLibrary
  • Scroll Bar
  • Search Action Bar
  • Contextual Action Bar

Other than that, every building blocks from the previous version are included, making it the most complete Design Kit to date.

Tips

  • You must first install both Roboto and Roboto Slab fonts before using the Design Kit. It’s a must. If you doesn’t want to install them, you won’t be able to use the Design Kit at full potential.
  • The recommended way to start designing is to use the Quick Start file, then Shift+Drag the required UI elements from the Building Block file
  • Nexus 4 and Nexus 7 Design Kit is available in the previous version

Price

Free. As I mentioned previously, getting every designers to use this and create awesome high fidelity mock ups will already be a very good motivating factor.

However, if you think I deserve to have a cup of coffee from the work that I have done, you can always support me via Paypal, so that I can maintain the chakra to produce awesome stuffs for the community.

Support via Paypal

Download

As usual, the Design Kit is made available in my MediaFire account. Go get it and be awesome!

Android UI Design Kit for Photoshop 4.4 [Nexus 5] ~14MB

If you are using GIMP and wanted to use the WIP version, feel free!

Android UI Design Kit for GIMP 4.4 [Nexus 5][WIP] ~9MB

About these ads

17 responses to “Android UI Design Kit for Photoshop 4.4 [Free Download]

  1. Hey Taylor,

    As always, your professionalism, consistency and sharing is much appreciated.

    Quick question, it might have been asked already but Do you have any quick video tutorials on How-to use these .psd mock-ups for Photoshop newbies like me? May be quick work-flow by example of creating a sample mock-up will help as well.

    Thank you and Happy new year!

    • Hey,

      Sorry for the late reply. I will probably look into that in the future, but once you open up the .psd file in Photoshop, you should be able to get an idea how it can be used in the mock up flow :-)

      But don’t hesitate if you have any question.

      Taylor Ling

  2. Pingback: Thoughtbrain Bloggers | Links to all the great UI UX mobile app resources that I use·

  3. Pingback: Flat UI Kits (PSD) Free Download | Design | Graphic Design Junction·

  4. Pingback: 12 gorgeous free UI kits for 2014 to download·

    • Hey Ravi,

      Yeap, I did mentioned that and there is a link to download it – though it’s not a full version that I hoped to release, but there are many other things for me to focused on, therefore I decided to postpone the optimization on the GIMP version, but it should still work without issue, just that you have to replace the text/shape layers yourself to ensure the editability.

      Sorry about that.

      Taylor Ling

  5. Pingback: 22 PSD Free UI Kits For Desigenrs | Freebie | Design Magazine·

  6. Pingback: Gorgeous free UI kits for 2014 to download | HueDesigner·

  7. Pingback: Free Android GUI - 3Lancer·

  8. I must say, apart from google you have the best resource on Android. I am new to mobile app design so still struggling a bit to understand. At first i couldnt find any wireframe templates for axure then i cannot comprehend the sizes and setting them up in photoshop from dp to pixels. I hope you can help me get started. Thanks.

    Looking at google screen sizes: we have LDPI, MDPI, HDPI

    320dp: a typical phone screen (240×320 ldpi, 320×480 mdpi, 480×800 hdpi, etc)

    I thought i’d be setting up 3 versions in the following pixels:
    ldpi = 180px x 240px
    mdpi = 320 x 480px
    hdpi = 720 x 1200px

    Looking at your psd it is 1080 x 1920 which is Nexus 5 screen resolution in pixels but is that beyond a normal screen phone as mentioned by google or am i doing something wrong here.

    Are we still keeping 48dp minimum for touch and 18dp side gap.

    Your 16dp side gap translate to 48px in photoshop is it a different calculation than what i have been doing so far,

    Thank you for your help

    Murad

    • Hey Murad,

      The template that I have now is meant for xxhdpi, which means 3 times of mdpi, which is the base dpi for Android devices. We probably won’t cover ldpi anymore and the assets will rescale itself for ldpi if the app is running on it.

      Fairly simple, any measurement you do using this template is a 3x version of mdpi, so if a box size is 60px x 30px, that would mean 20dp x 10dp in development. Same goes for the type size, if it’s 66px, it means 22sp in development.

      Do get yourself understand the concept around dp though, it will be beneficial for you in the long run.

      Taylor Ling

      • Thank you for clearing it for me. Do you suggest to start with xxhdpi and scale it down for mdpi and hdpi. So we’ll end up with versions mdpi, hdpi, xhdpi and xxhdpi. I have seen a script that does it.

        Is that how you would do it?

        Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s