Mac — Practical Mac Shortcuts for Web Design

I’m newly converted to Mac mainly for the possibility of iPhone app development and a native unix-like system for hooking into my servers.

For web design, it turns out there are some cool productivity improvements, despite some productivity flaws (window management is a pain but you learn other ways to cope).

Quick Mockups

When you need to make a quick mockup of a website, or if you’re building drafts of a site, there are some serious Mac advantages.

My previous workflow was to take a screenshot, open a new file in photoshop (which recognizes the size of your current clipboard image on both OS), paste the whole thing, crop what I need and get working.

Theres’a a better way, and the first is the screenshot capability built into the OS.

Capture Region or Window (screenshot)

All the capture region commands have the option to use Spacebar to select a window, with fancy BG dropshadow effects.

Cmd Cntrl Shift + 4 will select a region and save it to the clipboard, which means you can paste a random snippet off anything into photoshop.

Cmd Shift + 4 will select a region and save it to the desktop, useful for sending to somebody or uploading to wordpress.

Remember, pressing space while in selection mode will allow you to select a full window to copy to pasteboard or desktop.

As a bonus, it will display the pixel dimensions of the selection meaning you can use it to quickly measure the size of anything in pixels.


Drag and Drop Functionality

The drag and drop functionality from browser to Photoshop is pretty great.

Drag and drop any Image from the web to photoshop and it works as if you’ve saved it and dragged it into your photoshop, except it involves zero hassle.

I can search for an image of a wine bottle, drag it into photoshop, do a color overlay and I have a mockup of an icon in 10-15 seconds.

Will update as I find more …

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s