Grunge UI Kit Documentation

Features

Grunge UI Kit is the ultimate kit for creating rough, gritty user interfaces. It contains pre-made components that you can combine to build your perfect UI. Each base shape comes from hand-made vectors and can easily be modified with the help of Photoshop & Illustrator. With over 80 drag & drop components, creating a grunge UI has never been easier.
+++

  • 170+ Ready-to-Use Prefabs
  • 38 Sliced Shapes
  • 29 Pixel Perfect Shapes
  • 16 Hand-made Icons
  • 1 Font
  • 80+ Drag & Drop Components
  • 9 Hand-picked Grunge Palettes
  • Unlimited Color Possibilities
  • Photoshop File with Vector Images
  • Multi-platform Compatible
  • Made for Unity’s new UI System

+++

Package Folders

Grunge UI Kit: All files associated with the asset
Prefabs: All pre-made UI components
Scenes: Scene with all the asset elements laid out
Source Files: PNG files of all shapes, font files, PSD with raw images

Installation

Import the entire package into your project via the Asset Store.
Window->Asset Store-> Then find the asset ->Download->Import

If you have already purchased & downloaded the package onto your computer:
Assets->Import Package->CustomPackage->

How To Use

Pre-made Components

Set up a Canvas and Event System for your UI by selecting Canvas from the menu GameObject->UI->Canvas.

createCanvas

Find & select the pre-made component you would like to use from the Premade Components Folder. Then drag it onto the Canvas in your scene.

chooseComponent

Then you can select a color, change text, and also resize the component to fit your needs.

colorsize

Icons

To use one of our custom icons:

  • Drag one of the icon prefabs onto a Canvas in your scene from the Premade Components -> Icons folder.
  • Or you can change out the Source Image field on the image component you want to use.


chooseIcon

Make & Customize Components

If you already have UI elements setup but would like to replace it with our Grunge elements, then find the Image Component -> Source Image field in the Inspector and select the grunge image you would like to use.

choosePanel

  • You can also combine & customize components!
  • Find the components you want from the Premade Components folder and drag them into your scene. You can drag components onto other components such as dragging an icon prefab into one of the button prefabs.
  • Another way to combine elements is to take what you want from the scene that has all the elements already in the hierarchy.

allElements_ss

Font

To use Frijole or Montserrat (the fonts included in this package), select the font in the inspector of the element you wish to use it on.

chooseFont

Grunge Color Palettes

To use one of the color palettes, drag the palette prefab of your choice into your scene. Then when choosing a color on one of your UI elements use the eyedropper and roll-over the color on the palette.

palette

v 1.1.1

released May 22, 2017

v 1.0.0

released January 10, 2016