Fresh Resources for Web Designers and Developers (November 2013)

This series has completed a full run of 12 months thanks to your support. So far, you know the drill but if you aren’t familiar with this series, we feature great resources that help make designers and developers with their work. Do check out our earlier ones here if you haven’t already.

For this November 2013 round, we’re looking at tools that let you embed images into CSS code, implement shortcut keys to your website, name your PSD layers in batches, and lets you check your sites on multiple devices.

Onward to the tools!

PSD Validator

I found many designers who leave their Photoshop layers brutally unorganized. They do not name the layers and group them properly. If you are using Photoshop for web design, organized work will let developers convert it into codes more painlessly. PSD Validator lets you verify whether you follow Photoshop Etiquette when structuring your Photoshop files.

PSD Validator

Daturi

We can attach images in CSS using background property, and specify the URL that points to the image. In some occasions, it is better to embed the image in CSS, which can be done by converting the image into Base64 code. Daturi allows you to do so quickly. Simply drag your image on the website and hit the Convert to Base64 Code button.

Daturi

KeyPress

Have you ever wanted to add keyboard shortcuts or key combos to your website? Take Facebook as an example; hit L to like or unlike, ? to search, 1 to go to the homepage. If you want to implement a similar idea onto your website, you can use Keypress, a JavaScript library for capturing keyboard input.

KeyPress

GhostLab

Today, building websites can be a real challenge as there are too many devices with different dimensions and requirements to cater to. Testing it on as many devices as possible is a real pain. Ghostlab is a Mac app you can use to test your website synchronously on multiple mobile devices, phone or tablet. When you scroll, click, or reload the page, it will reflect on other connected devices as well.

GhostLab

RulersGuide

RulerGuides is a JavaScript library to build a ruler on a website and add guidelines to it. It is similar to Photoshop where we can create guidelines by clicking on the ruler and dragging it anywhere on the canvas. It also provides some hotkeys for toggling the rulers, and saving or clearing the guides. Check out the demo for an inside look.

RulersGuide

Group Layer Renaming

According to Photoshop Etiquette, you must have a name for every layer in your PSDs. Unnamed layers can drive a designer insane. But, having to rename piles of layers is also a tedious job. So, if this is something you do frequently, you can utilize this Photoshop script that allows naming PSD layers in group.

Group Layer Renaming

GenerateWP

GenerateWP is a web tool for generating WordPress API with the latest standard. There are 17 APIs that we can create with this tool including Taxonomy, Post Type, Post Status, Shortcode, and Sidebar.

GenerateWP
Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail