View Photoshop Files in Safari

Tom Kenny — Tue, 30 Jun 2009 08:00:33 +0000

A quick and little known tip is that you can view Photoshop files (.psd) in Safari. This is great for previewing a design in a browser without having to constantly save out to a jpg. As you can see in the image below is a .psd of a mock up of Inspect Element’s 404 page loaded into Safari. Now you can easily and quickly save your work in Photoshop and switch to Safari to see your work, how want to see it, in a browser.

Unfortunately this is a Mac OS X only feature. I had hoped that Safari 4 on Windows would support it but no luck. A quick search reveals that there doesn’t seem to be a plugin that can replicate this functionality in Firefox which is a shame. Hopefully someone out there is developing one, or planning to!

Enable Safari’s Awesome Built-in Development Tools

Tom Kenny — Tue, 09 Jun 2009 08:00:01 +0000

Almost all web developers know about Firebug, a plugin for Firefox that makes web development so much easier, at least for developing in Firefox. Not everyone knows that Safari has its own development tools built right in.

Available on both the Windows and Mac versions of Safari (preferences > advanced) is a tick box ‘Show Develop menu in menu bar’ which enables the development tools. Â By default it is unticked but enabling it allows you to right-click on any element on a web page and select Inspect Element and bring up the Web Inspector much like you can do with the Firebug plugin for Firefox.

Above: the Web Inspector.

The Mac version Â gives you this menu which as you can see allows you to perform some very handy tasks such as opening the page in another browser and spoofing the browser’s user agent.

Inspect Element » safari

View Photoshop Files in Safari

Enable Safari’s Awesome Built-in Development Tools