PaintCode 1.3, our biggest update yet, is finally here. Lots of new features. Let’s go through the most important ones.
Aside from the application icons, PaintCode doesn’t use any images. All our drawing is done in vectors. As a result, our application bundle is very small and PaintCode looks great on Retina displays.
However, there are situations when you just have to use images. For example, you may want to include real-life photos in your designs. We’ve added support for images to PaintCode to let you do just that:
The Library section, which previously only contained colors, gradients and shadows, now also lets you create and manage images. You can provide both Retina and non-Retina versions of your images.
The most convenient way to import images to your document is to select them in Finder and drag & drop them to the Library section. PaintCode will automatically pair non-Retina and Retina versions of the same image for you during the importing process. If you do not use the @2x naming convention, PaintCode will even analyze the content of the images to do the pairing.
Alternatively, you can also import images by:
- using the File / Import menu
- drag & dropping an image to an image well in the image editing popover
- double-clicking an image well in the image editing popover
All shapes can be filled with an image. Simply select an image in the Fill popup button in the inspector:
You can choose between 3 alternative behaviors of the image fill – “Single”, “Tiled in Shape” and “Tiled in Background”. In addition, you can also specify the X and Y offset of the image.
Normally, the non-Retina alternatives of your images are used in the drawing canvas. However, when you turn on the Retina mode in PaintCode, the Retina alternative will be used. The generated code is universal in this regard and will work equally well on both Retina and non-Retina displays (if you provide the necessary images in your Xcode project, of course).
All the images you import to PaintCode are stored inside the PaintCode document, so you don’t have to worry about keeping track of those when sending PaintCode documents to other designers and/or developers. You can export all of these images back to disk at once by using the new export feature.
PaintCode can now import layer graphics, paths, texts, groups and effects from Adobe Photoshop (PSD) documents. This feature took a lot of work and was a considerable engineering effort.
The PSD Import module is available as an in-app purchase for $19.99.
Before 1.3, PaintCode used the default system color picker, which was causing us (and some of you) a lot of headaches. We’ve decided to replace it with our own. Here’s what it looks like:
The new color picker lets you input (and copy) color components in six different color formats:
- RGBA 0.0 – 1.0
- RGBA 0 – 255
- RGBA 0% – 100%
- RGB hexadecimal (CSS)
- HSBA 0.0 – 1.0
- HSBA degrees and percents
The textfields at the bottom of the color picker are heavily customized to let you input numeric values conveniently. At the bottom right corner, you will find a magnifier tool, which can be used to pick color values of individual pixels from your screen.
In previous versions of PaintCode, there were issues with color spacing and accuracy. This was caused mainly by the fact that OS X uses generic color space by default, while iOS only supports device color space. Consequently, if you needed a color on iOS to have precisely the same color component values as the color you specified in the system color picker, you had to switch the system color picker to device color space by hand, which was very inconvenient and unintuitive.
The new color picker now takes care of all of these issues automatically for you.
We’ve integrated the new color picker everywhere. For example, you can now conveniently edit
gradient color steps directly in the gradient popover:
We’ve also added a handy color palette directly to some of the color popup buttons:
PaintCode 1.3 has an entirely new Export sheet:
The first tab, labeled “All Files”, lets you export the generated source code as well as all images included in your document. Both non-Retina and Retina image alternatives are exported (if you previously imported them), with @2x suffix automatically appended to the Retina ones.
The other three tabs – PNG, TIFF and PDF – allow you to export the canvas image in different formats. You can now, for example, export both Retina and non-Retina at once:
New Document Format
Our old document format, .paintcode, is bundle-based. That means that old PaintCode documents are essentially folders. Unfortunately, while OS X generally handles these types of documents very well, they cause issues with some third party applications.
For example, bundle-based documents do not work well with Subversion and some e-mail, VoIP and instant messaging apps have trouble sending these documents without
zipping them first.
In PaintCode 1.3, we’re introducing a new document format, .pcvd (PixelCut Vector Document), that is no longer bundle-based. Of course, you can still open your old .paintcode documents just fine.
Oval shapes can now be used to draw arcs and pies. We’ve added new “start angle” and “end angle” properties to the inspector. In addition to that, we’ve also added a convenient control that lets you specify these using your mouse.
Rectangles and ovals can now also have text content.
Finally, you can now convert strokes to beziers.
- Thanks to CodeAutomat, our online service for converting SVG files to code, the SVG import has been greatly improved
- iCloud support
- You can now drag the middle toolbar all the way down, hiding the code view entirely
- There is now a separate Preview window, which should work better with 3rd party apps that let you preview windows on iOS devices
- You can now specifiy the minimum iOS version you are targeting (either iOS 5 or iOS 6). This only affects a handful of text-related constants in the generated code that have been deprecated in iOS 6 by Apple.
- Better keyboard shortcuts for bezier editing
- Lots of usability and UI tweaks
Published on 07.02.2013 | View comments