Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Software & Tools’ Category

There are various solutions exist for compressing and minimizing the size of images (like Smush.itPNGGauntlet, punypng, and more).

Here is another good one: TinyPNG that only works with PNG files, shrinks them -nearly- without loss that an eye can see and by keeping the transparency.

TinyPNG - Image Shrinker

It works by drag 'n' drop uploading the images to be minimized to the web interface and auto-generates the compressed ones.

Using TinyPNG, it is easily possible to get 50%+ smaller sized images as they are converted to 8-bit PNGs (rather than 24bit) by using smart techniques.

Smashing Magazine has released a very handy freebie for designers/developers that are working on mobile project.

It is a set of UX sketching and wireframing templates which consists of 2 parts:


Mobile Sketch And Wireframe Sheets

This is a pack of 28 printable sketching and wireframing papers (in PDF) for the most popular mobile platforms.

There are various combinations in the set like actual size, 10 devices fit to a page, and landscape layout.

Also, an Illustrator file which displays the mobile devices is provided.


These are papers for easily analyzing the optimal tap areas without playing with a real mobile device.

It has 9 PDF files that come in different sizes.

Creating wireframes in the beginning of any design process can help creating an output without any surprises.

Sneakpeekit is a website providing high-quality PDF sketch sheets for web designers.

Web Design Sketch Sheets

The sheets are compatible with the most popular grid systems like Less Framework 4, 978 grid system, 1140 css grid, The Semantic grid system, Bootstrap from Twitter, etc.

And, they are not only for the desktop browsers but there are versions for tablets and mobile as well.

If you are using Photoshop, you should already have encountered the issue of banding in gradients.

This usually happen in 8-bit but, even when working with 16-bit, this can occur if you need to apply an 8-bit filter.

No More Banding is a Photoshop action which automatically converts your document into 16-bit and applies a new layer to the top of your group/document which fixes fixing all the banding.

P.S. There is a detailed read on the technique here.

Photoshop Action to Prevent Banding

When discussing a new web project with clients, it is so important to know that you are on the same page before putting any efforts to create mockups or the real product.

Samantha Warren is sharing her design process tool; Style Tiles, a design deliverable consisting of fonts, colors and interface elements used to create quick/dirty outputs with the clients to better understand the style + expectations of a customer.

Style Tiles

Simply, things are not blurry as a moodboard but not too-specific and time-consuming as mockups. It helps building the connection with the client so that you better know "the product being designed is what the client wants".

Style Tiles don't imply dimensions nor device, it focuses more on creating a design system rather than imagining fixed-width pages.

There is a sample PSD file provided to better understand the process and Samantha discusses it in detail in her blog Badass Ideas.

LESS is a great language for writing styles faster and getting more out of CSS with its dynamic nature (variables, mixins, operations and functions).

Normally, .less files are live-converted to CSS via JavaScript by the browser (or server -like Node.js-).

SimpLESS brings another option for designers willing to generate the CSS from .less files quickly.


It is a desktop-app that has versions for Windows, Mac OS X + Linux and works simply by drag 'n' dropping your project files into the app and getting the CSS output.

P.S. SimpLESS is also an open source project.

Adobe's Flash is probably having the most difficult days since its launch considering the no-iOS support and the increasing popularity of HTML5 + web standards.

A strong competitor to the Flash platform now comes right from Adobe with a tool named Edge that eases creating web-based interactive animations that only use HTML5, JavaScript, and CSS3.

There is a Flash-like timeline for building the animations and the built-in JavaScript engine used for them is jQuery.

Adobe Edge

Check out these demos and consider downloading the source files for the demos to start playing with the application quickly.

Adobe Edge is currently released as a preview release and offered for free during that period.

MIX Online, a Microsoft-powered website on web design and development, is sharing a free Adobe Illustrator plugin for converting .AI files into HTML5 canvas.

AI->Canvas plug-in offers options for drawing, animation and coding, such as "events" so that you can build interactive, well-designed canvas-based web apps.

AI to Canvas Plug-in

It can be used to export simple-to-complex shapes, gradients, transparencies, drop shadows and any other stuff.

And, the animation features include rotation, fades, movement, easing, triggers and more.

AI->Canvas comes with versions for Windows + Mac.

Photoshop, Illustrator and Freehand, besides being amazing applications, all have a bad feature; their initial load is pretty slow.

And, when you only need to see what is inside a vector file to find the right one or you don't have these applications (but may need to open vector files), PSD, EPS and AI Viewer softwares can be a quick solution.

They are free applications (for Windows) which loads fast and not only opens the related vector files but can save them as JPEG, Bitmap, GIF, PNG and other extensions. Also, you can resize or rotate them too.

P.S. What would be better is: a single application that can open them all.

PSD Viewer

Sometimes we work on a PSD file, duplicate it and work more on it when creating a new version.

And one day, we need a layer or effect that only exists in only one of these files, search for it which can become complicated (what we're looking can be invisible as well).

ComparePSD is a free Windows software that helps finding the differences between 2 PSD files in such situations to save you time.


The software enables you to select the files to be compared from Windows Explorer.

When it is started, the files are compared layer-by-layer including layers styles (effects), styles attributes, layers visibility flags and highlights the differences.

Uptime Robot