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.
PixelPumper
PixelPumper is a Mac application for writing, scheduling, and publishing posts for WordPress. Editing in the WordPress post editor requires you to connect and login to the backend. With PixelPumper we can write and save posts while we are offline. We can also set the "Featured Image" using drag-n-drop, style the content like we do in the WordPress WYSIWYG editor.
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.
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.
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.
IPhone5S Mockup
iPhone5S is out. That means your clients or perhaps yourself may need to show off your creations on it. Here a PSD mockup for iPhone5S. It is a three-quarter mockup view, and it comes in 3 color variants, dark, white, and gold. They are built in a great detail, and drawn in Photoshop vector for scalability. In addition, the author, Pixeden also released two additional views, 3D and Front.
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.
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.
BlendMe
Icons can transcend different languages, double as your brand, and from a technical aspect, it could save space in the design. If you work with icons a lot in Photoshop, here is a plugin that you may need to install. BlendMe collects a bunch of free icons, then lets you search the collection and insert the icon into your design.
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.
