Fresh Resources for Web 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 a 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 are in this round-up for June 2013. For more Fresh Resource, check out our selections for April and May.
Recommended Reading: Web Developer Resources: A Mega-Compilation
RetinizeIt
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.
Wirekit
If you develop for iPhone frequently, Wirekit may come in handy. It is a collection of free iPhone UI in the form of Photoshop layers and shapes. The collection consists of 60 most commonly used UI components and is available in two styles. With Wirekit, wireframing an iPhone app becomes faster and easier.
Metrize
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
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, Typicon, and Entypo. Fontello also allows you to set your own font family name, the icon name, and customize its unicode number.
MixitUp
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 work around. Depending on your image, it may or may not produce the desired outcome.
Gridwax
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 + ↓.
LayoutIt
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.
