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!
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.
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.
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.
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.
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.