#FF00AA

iOS Rounded Rect Script for Photoshop

This free script makes it easy to generate iOS 7-style rounded rectangle vector shapes within Photoshop. If you’re curious, you can read about its creation (and the updated shape in version 1.2). The script includes presets for common iOS icon sizes, but all values and options can be modified. The preset corner radius values are based on Manfred Schwind’s excellent post, where he determines a corner radius of 27 pixels for a 120 x 120 pixel icon. My own follow-up work confirms Manfred’s assertion. To create rounded corners, make sure their corresponding checkboxes are checked. If a corner is unchecked, the script creates a standard sharp corner. Check Icon guides to add horizontal and vertical guides based on Apple’s icon template. To see the guides, make sure that View/Show/Guides is enabled in Photoshop. Likewise, check Icon template to add a shape group that illustrates the Apple template. To generate rounded corners that more closely match Apple’s icon style (better than UIBezierPath), check Improved icon shape. To include the small straight line that seems to be a glitch in UIBezierPath’s drawing code (refer to the aforementioned post by Manfred Schwind for more details), check the Include UIBezier glitch checkbox. If the script is executed without an open document, a new document is created with the appropriate dimensions before the shape is generated. If a document is already open, the script creates a new layer (called iOS Rounded Rect #) that contains the shape. The shape is created with the current foreground color. Download The iOS Rounded Rect script is compatible with both the Mac and PC (32- and 64-bit) versions of Adobe Photoshop. While it was created and tested with Photoshop CC, it has been reported to work with earlier versions (update: I’ve received confirmation that the script works with CS5 and CS6). If you try it with another version, please let me know how it goes so I can update this page accordingly. iOS Rounded Rect Version 1.2 (released Sep 25, 2013) To install, extract the iOS Rounded Rect.jsx file to your Photoshop scripts folder: Mac: /Applications/Adobe Photoshop CC/Presets/Scripts PC 64-bit: \Program Files\Adobe\Adobe Photoshop CC (64 Bit)\Presets\Scripts PC 32-bit: \Program Files (x86)\Adobe\Adobe Photoshop CC\Presets\Scripts Start Photoshop, then select File/Scripts/iOS Rounded Rect… to run the script. Keyboard Shortcut If you’d like to assign a keyboard shortcut to the script: Pull down the Edit menu and select Keyboard Shortcuts… Click on the small triangle to the left of the File entry to expand its contents. Scroll down to the Scripts> section and select iOS Rounded Rect… Tap the keystrokes that you’d like to assign to the script. I personally use the F2 function key. Click OK to dismiss the dialog. Now, whenever you’d like to create an iOS rounded rectangle, just tap your keyboard shortcut. As always, I’d love your feedback.