Fresh Resources for Web Designers and Developers (August 2013)

August is here so it’s time for another round up!

In this round, we have some great tools from a Photoshop action that creates 3-dimensional maps, an awesome Google Chrome extension for testing out responsive design, and a tool to create Long Shadow designs. Here they are, in no particular order.

Source Tree

SourceTree is a client app for Github version control system. It allows you to manage your repositories in a very simple and intuitive User Interface. It is the perfect app for people who are not comfortable of doing Version Control through the Command line.

tmTheme Editor

tmTheme is a theme file for syntax highlighting for code editors like Sublime Text and TextMate. There are several .tmTheme is available to download for free and ready for use if you want to change your code highlighting colors. But, if you want it to be more personalized, you can use tmTheme Editor from Herokuapp, which makes creating and editing much easier.

Colour Code

There are a lot of tools for generating color schemes on the Web. Here’s one more. Colour Code is a very intuitive and easy to use web-application for generating color scheme. Simply move the mouse cursor and it will instantly generate the colors on the specified rule — Monochrome, Analogic, Complement, Triad, etc. We can also download the color scheme in LESS format and PNG.

Long Shadow Generator

In our previous article, we have shown you some examples of Long Shadow design applications. Now if you want to apply the same effect, this PSD file will allow you to apply this shadow effect in your design element much quicker.

Dimension

Dimension is a really nice Google Chrome extension for testing your responsive design without having to resize the browser window. It comes with a ruler showing the viewport size, a draggable handle to resize the viewport size, and Preview Mode to simulate the design in various device types.

Mapita

Mapita a Photoshop action that lets you turn your flat layers into the 3-dimensional map. It comes with several common map elements like Grass, Snow, Buildings, Trees, and Clouds. Wassim creates this Photoshop Action at BlueGraphic, and it is free!

Buttons

Creating Web buttons is technically easy, but it would be better if we can build one real quick. Buttons is a collection of class helpers that allows us to do so. It provides a set of CSS to build various button styles. It is built using Sass and Compass, so the styles are completely configurable to meet your requirements.

Fontastic

There are a lot of font icons available for free, but they usually come with a bunch of icons that we do not need. By using Fontastic you can include only the icons you need, eventually helping to speed up your website. At the time of the writing, it has more than 1700 of icons.

Dev Tools Secret

All modern browsers come with its own Dev Tool that helps developers develop and debug the website. But there are so many more buried features that we do not know of. The Dev Tools Secret, as the name implies, lists the hidden features of the browser’s Dev Tool.

Popular UI

I bet that you have visited either one of these popular websites; Facebook, Rdio, Github, and Apple. The Popular UI is a collection of these websites’ user interface, which is rebuilt by Luke Chesser in Photoshop for educational purpose. You can learn how the layers are structured and organized, and also see how the effects are built. It’s a very useful resource for beginners especially.