Fresh Resources for Designers and Developers – June 2013

Time flies quicker when you are working online, and what do you know, we are midway through 2013, and as usual every month, we share our fresh resource pile with you. Let’s take a look at what’s in store, shall we?

This month’s roundup includes tool to help remove backgrounds in photographs from your browser, generate your own icon fonts (and name them too), and save retina-optimized layers of your images for that perfect look. All these and more in this round up for June 2013. For more Fresh Resource, check out our selections for April and May.


When we aim for high-definition screen, we need to provide two version of image, one for normal screen and one for the high-definition. This may seem like a daunting task, but it wouldn’t be if you were using this tool called RetinizeIt. RetinizeIt is a Photoshop action that allows you to slice and save your layers into retina-optimized images in seconds.


If you develop for iPhone frequently, Wirekit may come in handy. It is a collection of free iPhone UI in a form of Photoshop layers and shapes. The collection consists of 60 most commonly used UI components, and available in two styles. With Wirekit, wireframing an iPhone app becomes faster and easier.


Looking for icons that fit well on Windows 8?. Then, Metrize is the perfect icon set for you. Metrize is a collection of 300 icons that embrace the Metro style. It provides the icons in PSD, SVG, AI and also Web Font. Metrize is completely free, you can use it for personal or commercial project, and can customize it as you like.

CSS Lint

CSS Lint helps you scan your CSS style rules. It will return the errors in your style definition and also return some suggestions to fix it. CSS Lint helps you optimize your CSS by following some best practice rules. This tool may also be very useful as a learning guide to pick up better style rules.


Fontello is a icon font generator tool. It allows you to compile your own icon font characters to embed in your websites or apps. You can include the characters from different font families, like Font Awesome, Iconics, Typicon, and Entypo. Fontello also allows you to set your own font family name, the icon name, and customize its unicode number.


MixitUp is a jQuery plugin for filtering and sorting portfolios. It provides GUI to customize the plugin and you can then see how the effect runs immediately. Since part of it is based on CSS3, it will also only work on browsers that support CSS3 properties like Transition and Transformation.

Unicode Table

The name has explained itself. Unicode Table is list of unicode characters number. You can find the Unicode number for all the character sets; from general characters that use frequently (A, B, C, etc.) to chess symbols.

Clipping Magic

ClippingMagic is a web-based tool for removing the background of your photo from the main subject. I remember when I first did it with Photoshop, succeeding was a thrill. Now, with ClippingMagic you can do the same right from your browser, for free. It is worth noting though that ClippingMagic is still in its Alpha stage, meaning that it has many things to workaround. Depending on your image it may or may not produced the desired outcome.


Gridwax is a bookmarklet to add horizontal guidelines that overlay on your webpage. It is used as a visual aid to adjust your text baseline and line-height spacing. You can adjust the line with the following keys Shift + and Shift + .


If you are developing with Bootstrap in all your projects, maybe you should put LayoutIt on your list. LayoutIt is tool for creating prototypes with Bootstrap fast. You can add Bootstrap components like the Navbar, Buttons and Forms using drag-n-drop.