SharedTutor | Tutorials For Everyone

Find your interesting tutorials in Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

Fresh Resources for Web Designers and Developers – August 2013

August will be here so it’s time for the next round up!

In this round, we've got some great tools from a Photoshop action that induce 3-dimensional maps, an amazing Google Chrome extension for testing responsive design, and a tool to make Long Shadow designs. Here they are, in no particular order.

Source Tree

SourceTree is a client app for Github and Mercurial version control system. It permits you to manage your repositories in a really simple and intuitive User Interface. It is the perfect app for individuals that are not comfortable of accomplishing Version Control through Command line.

tmTheme Editor

tmTheme is often a theme declare syntax highlighting for code editors like Sublime Text and TextMate. There are several .tmTheme open to download for free, and ready to be used if you want to alter your code highlighting colors. But, if you want it to be more personalized, you need to use tmTheme Editor from Herokuapp, helping to make creating and editing much simpler.

Colour Code

There are several tools for generating palettes on the Web. Here’s yet another. Colour Code is often a very intuitive and straightforward to use web-application for generating color scheme. Simply move the mouse cursor and it will instantly generate the colors around the specified rule - Monochrome, Analogic, Complement, Triad, etc. We can also download the colour scheme in LESS format and PNG.

Long Shadow Generator

In our previous article, we've shown you a few examples of Long Shadow design applications. Now in order to apply a similar effect, this PSD file will allow you to apply this shadow effect within your design element more speedily.


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


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


Creating Web buttons is technically easy, however it would be better whenever we can build one real quick. Buttons is a collection of class helpers that allows us to do this. It provides a group of CSS to construct various button styles. It is built using Sass and Compass, so the styles are completely configurable for your needs.


There are lots of font icons available at no cost, but they usually have a bunch of icons that we do not need. By using Fontastic you can include only the icons you will need, eventually making an effort to speed up your site. At the time of the writing, they have more than 1700 of icons.

Dev Tools Secret

All modern browsers have its own Dev Tool that assists developers develop and debug your 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 top features of the browser’s Dev Tool.

Popular UI

I bet that you've visited each one of these popular websites; Facebook, Rdio, Github, and Apple. The Popular UI can be a collection of the websites’ graphical user interface, that's rebuilt by Luke Chesser in Photoshop for educational purpose. You can learn how a layers are structured and organized, and in addition see how a effects are created. It’s a very useful resource for starters especially.

Related posts:

  1. Fresh Resources for Web Designers and Developers - July 2013

  2. Fresh Resources for Designers and Developers - March 2013

  3. Fresh Resources For Designers And Developers - January 2013

  4. Fresh Resources for Designers and Developers - June 2013

No comments

Post a Comment