PaintCode News Introducing Drama For the last few years, we have been working on a new Mac app called Drama. Drama is the ultimate all-in-one UI design tool. It combines design, prototyping and animation creation in a single app. We'd like to invite you to try the beta version. What about PaintCode? Drama is is not a replacement for PaintCode and it does not generate any code. Rather, it is a new and independent Mac app aimed at designers. We have used PaintCode to design and develop Drama, and we will continue to support and develop PaintCode in the future. We are looking forward to integrating the technologies we developed for Drama back into PaintCode. Please join the Drama beta and let us know what you think! — The PixelCut Team

UPDATE: We have added the new iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max to the guide below.

The device screen may have lower pixel resolution than the image rendered in previous step. Before the image can be displayed, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only make sense in this mathematical coordinate space. Points Point-based drawings are rendered into pixels. This process is known as rasterization. Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail. Rendered Pixels Finally, computed pixels are displayed on the physical screen. The PPI number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world. Physical Device points. 320 × 480 3.5″ render at 1× (pixels) 2G, 3G, 3GS 3.5″ (points) 320 × 480 show at 163 PPI 320 × 480 640 × 960 3.5″ render at 2× (pixels) 4, 4s 3.5″ (points) show at 326 PPI 320 × 568 640×1136 5, 5s, 5c, SE render at 2× 4″ 4″ (points) (pixels) show at 326 PPI 375 × 667 750 × 1334 4.7″ render at 2× (points) (pixels) show at 326 PPI 4.7″ 375 × 812 1125 × 2436 5.8″ render at 3× (points) (pixels) show at 458 PPI 5.8″ 414 × 736 1242 × 2208 1080 × 1920 5.5″ show at 401 PPI (pixels) (points) (device pixels) 5.5″ render at 3× downsampling / 1.15 414 × 896 828 × 1792 6.1″ render at 2× (points) (pixels) show at 326 PPI 6.1″ 414 × 896 1242 × 2688 6.5″ render at 3× (points) (pixels) show at 458 PPI 6.5″

We also make Drama.app

incredibly advanced and easy to use prototyping tool.

iPhone X Screen Demystified Today, Apple launches iPhone X with a unique OLED display. Continue reading to learn more or check out our Ultimate Guide To iPhone Resolutions! iPhone X Resolution 1125 × 2436 render at 3× (points) 375 × 812 (pixels) 375 pt 812 pt 1125 px 2436 px At the beginning, coordinates of all drawings are specified in points. Points Point-based drawings are rendered into pixels. This process is known as rasterization. Rendered Pixels iPhone X Cutout iPhone X features a cutout (or notch) at the top of the screen to accommodate the front facing camera, speaker, microphone and the new Face ID sensors. 375 pt 83 pt 83 pt 209 pt 30 pt 40 pt radius 6 pt radius 20 pt radius Did you like this article? Tweet Introducing PaintCode 3.

Turn your drawings into resolution-independent code. Learn More...

PaintCode Power User: Frames This post is a part of series PaintCode Power User. Frames are one of the most advanced features of PaintCode. When we first introduced them, they were a unique feature not found in any other drawing app. They are an entirely new approach to an old problem — making drawings resizable. Continue reading

PaintCode Power User: Styles This post is a part of series PaintCode Power User. In previous post I discussed Shapes and their actual shape, but it’s just one aspect of Shapes. The other part is Style, which I use to collectively call Fill, Stroke, Shadow, Text, Opacity, Blend Mode, and such. Basically these are the attributes that make the Shape actually visible. As shown in Inspector, from top to bottom, here is a description of all visual attributes. Visibility & Blending Visibility – Whether the Shape is actually visible. You can either click the eye button in Shape List, or connect a Variable of Boolean type to the popover. Touch Bar also allows you to hide and show selected Shapes. Opacity – How transparent the shape appears, from 0% to 100%. Drag the slider or connect a Variable of Fraction type.

– How transparent the shape appears, from 0% to 100%. Drag the slider or connect a Variable of type. Blending Mode – One of many standard blending modes which define how the Shape is rendered on existing drawing beneath it. From simple Multiply to advanced compositing operations that can be used for masking, like Destination In or Source Out . This attribute doesn’t support Variables.

– One of many standard blending modes which define how the Shape is rendered on existing drawing beneath it. From simple to advanced compositing operations that can be used for masking, like or . This attribute doesn’t support Variables. Clip – Only available for Groups. You pick a Shape from the inside of the Group’s contents and this Shape will act as a clipping mask. Any styling attributes of the clipping Shape become invisible, only outline is used. Text Text – The text that is rendered in Shape’s bounding box. Write desired text into the Inspector, or double-click the Shape in canvas to edit text. This attribute supports Variable of type Text . Text is not available for Beziers.

– The text that is rendered in Shape’s bounding box. Write desired text into the Inspector, or double-click the Shape in canvas to edit text. This attribute supports Variable of type . Text is not available for Beziers. Text Color – A color used to draw the text, either pick one from predefined colors (like black or white) or use a custom Library Color.

– A color used to draw the text, either pick one from predefined colors (like black or white) or use a custom Library Color. Font – Allows you to pick font used for the text. Choose either built-in iOS fonts or any installed font on your Mac. The menu will offer you recently used fonts. It’s not possible to connect Variables here. Font Size – Specifies how big the text will be, either by exact size in points or by using popup menu with predefined system values. Supports Variables of Number type.

– Specifies how big the text will be, either by exact size in points or by using popup menu with predefined system values. Supports Variables of type. Text Insets – Defines extra whitespace around text. It doesn’t support Variables.

– Defines extra whitespace around text. It doesn’t support Variables. Alignment – Horizontal and vertical alignment of the text within the Shape’s bounding box. Too long text will be clipped. Fill Fill – Pick System Color, Library Color, Library Gradient or Library Image that will be used to draw fill of the Shape. Gradient Type – When filling using Library Gradient, you have three options how to apply it: Angular , Circular and Two-Point .

– When filling using Library Gradient, you have three options how to apply it: , and . Gradient Angle – For Angular gradient fill, you simply specify angle on which the gradient should be drawn. Gradient controls in canvas: For Circular and Two-Point gradient fills, extra controls appear in canvas that allow you to manipulate the gradient end-points. Image Tiling – If you use Image for fill, the image may be drawn once or repeatedly in tiled patterns. Image Offset – Specifies X and Y offset of the Image fill. Stroke Stroke Color – Pick System Color or Library Color that will be used to draw stroke of the Shape. Gradients and Images are not supported here.

– Pick System Color or Library Color that will be used to draw stroke of the Shape. Gradients and Images are not supported here. Line Join Style – One of three styles how lines are connected in corners.

– One of three styles how lines are connected in corners. Line Cap Style – One of three styles how lines are ended.

– One of three styles how lines are ended. Stroke Width – How thick is the stroke. Enter fixed width or connect a Variable of Number type.

– How thick is the stroke. Enter fixed width or connect a Variable of type. Stroke Pattern – Choose either solid line or dashed line. Pattern Dash – Length of line segments in dashed pattern, supports Variables of Number type.

– Length of line segments in dashed pattern, supports Variables of type. Pattern Gap – Length of empty segments in dashed pattern, supports Variables of Number type.

– Length of empty segments in dashed pattern, supports Variables of type. Pattern Phase – Shift of dashed pattern, supports Variables of Number type. Shadow Outer Fill – Drawn below the fill of the Shape, only visible if there is some fill.

– Drawn below the fill of the Shape, only visible if there is some fill. Inner Fill – Drawn above the fill, but below the stroke of the Shape, only visible if there is some fill.

– Drawn above the fill, but below the stroke of the Shape, only visible if there is some fill. Stroke – Drawn below the stroke of the Shape, only visible if there is some stroke.

– Drawn below the stroke of the Shape, only visible if there is some stroke. Outer Text – Drawn below the text of the Shape, only visible if there is some text.

– Drawn below the text of the Shape, only visible if there is some text. Inner Text – Drawn above the text of the Shape, only visible if there is some text. That’s everything a Shape can have. If you select a Shape and then create a new one, it will inherit (almost) all of these style attributes. That’s the way you can copy style from one shape to another. And remember, when all these styles go into your way, try menu Canvas ▸ Show Only Outlines. To learn more about Shapes and their styles in Inspector, see our Shapes documentation or watch tutorial videos.

PaintCode 3.3 is here We have just released PaintCode 3.3 as a free upgrade to all existing PaintCode 3 customers! Here's what's new: Support for Swift 4 Beta

Support for running on macOS High Sierra Beta

New canvas screen size for the 10.5-inch iPad Future beta releases of Swift 4 and macOS High Sierra might introduce new issues. Please, report them to support@pixelcut.com Integration with Touch Bar has been temporarily disabled on High Sierra until several bugs in the new macOS Beta are fixed.

PaintCode Power User: Beziers This post is a part of series PaintCode Power User. In this post, I will write about Beziers in PaintCode and what editing capabilities they have. For more general discussion about Shapes, read our previous post. Continue reading

PaintCode Power User: Shapes This post is a part of series PaintCode Power User. The basic abstraction in graphic editors are layers, in PaintCode we call them Shapes. They encapsulate visual attributes, allow easy manipulation, and are composed together to achieve complex graphical results. In this post I will focus on fundamental property of Shapes – their shape. New Shape is created using toolbar buttons or Touch Bar. Bounding Box Every Shape has its bounding box, which defines primary area the Shape will cover. Some parts of the Shape may stay transparent and some drawing effects may exceed the bounding box. Bounding box is usually defined using X, Y, Width and Height attributes. However, in more complex cases, also Rotation, Offset and Scale affect the bounding box. Shape Kinds Rectangle Simplest of all shapes, it basically fills its bounding box.

It supports rounded corners and you can even pick which corners should be rounded and which stay sharp. Although there is a dedicated Toolbar button for Text, it’s not really a special kind of Shape. That button creates a Rectangle with no Fill, no Stroke, with only initial text content. Oval Draws an ellipse that touches center of every side of its bounding box.

Ellipse with equal width and height is a circle.

This kind of Shape can also represent a segment of ellipse, by specifying Start Angle and End Angle attributes. Ellipse segment can be open or closed, there is a checkbox for that. Polygon Draws a regular shape with given number of sides. Simplest polygons are triangle and square, but more common are pentagon or hexagon.

Center of Polygon matches center of bounding box, but its vertices may not always reach to sides of the bounding box.

When bounding box is resized, Polygon is stretched, so its vertices lie on ellipse inscribed in the bounding box. Star Draws regular shape that has given number of spikes – imagine a star.

Size of the inner circle is defined in proportion to the outer circle. Bezier Bezier is fully editable shape, which means all vertices can be positioned independently.

Lines connecting vertices can be straight or curved. Curvature is controlled using virtual points. Beziers will have a dedicated post about their properties and editing tips. Transforms & Anchor Transform is typically a name for three different operations: rotation, scale, offset. All 3 require a fixed point called anchor. In PaintCode, it’s the green cross with circle. Initial position of anchor is in top-left corner of a Shape (or bottom-left for macOS target) and it’s hidden by default. To reveal it, expand Inspector section for Transform. Once you move it away from its initial position, it will be visible when the Shape is selected. The easiest case of using anchor is with rotation. Anchor is the point around which the Shape rotates. You can move it to middle, you can move it out of the bounding box, and when you change Rotation, this anchor will stay at the same place. Relative position of anchor to the Shape’s top-left corner is expressed in Offset X and Offset Y attributes. To stretch a Shape, you use Scale X and Scale Y attributes, which also work relative to anchor. To rotate quickly the selected Shape, hold ⌘ and drag one of the square controls used for resizing. In case the anchor is at its default place, it will be moved to middle. Attributes Scale X and Scale Y also respect the anchor and they stretch the shape while preserving the anchor position. In fact, the familiar X and Y attributes of any shape are coordinates of its anchor. Attributes Offset X and Offset Y then specify the position of the shape relative to its anchor point. When dragging the green anchor indicator around, you may notice that all 4 attributes are changing simultaneously. Outlines And here’s one more trick for working with Shapes. If your drawing contains a lot of Shapes that cover each other and some are poorly visible, you may find useful to show only outlines and ignore their styling. This option is in menu Canvas ▸ Show Only Outlines. To learn more about Shapes, see our Shapes documentation and Transforms documentation or watch a tutorial video.

PaintCode Power User: Symbols This post is a part of series PaintCode Power User. One of the most powerful features of PaintCode are Symbols. We built Symbols on top of existing features, like Library and Frames. Symbol is an object on canvas that draws other canvas from your document. If the referenced canvas uses Library items, Variables or Frames, these can be customized for each Symbol independently. Continue reading

PaintCode Power User: Canvases This post is a part of series PaintCode Power User. PaintCode document is composed of canvases. Each canvas represents an image, a drawing, a piece of art, which can be exported as an image file or as a StyleKit method. Continue reading

PaintCode Power User: Expressions This post is a part of series PaintCode Power User. Probably the most complex feature of PaintCode is Expression Variables. It dives deep into programming world, far from visual design, but offers infinite possibilities. Don’t panic, simple conditions or arithmetics are trivial enough even for non-programmers and can be a powerful tool in your toolbox. Continue reading

PaintCode Power User: Variables This post is a part of series PaintCode Power User. Variables are a feature you won’t find in any other design tool. PaintCode brings very basic concept from programming to design in a simple and visual way. Just like Library Colors, that are created once and then shared by multiple shapes, Variables work the same for any numeric values. Continue reading

PaintCode Power User: Library Images This post is a part of series PaintCode Power User. One of the defining features of PaintCode is Library. It brings flexibility to your drawings and makes it trivial to experiment with your designs. In previous posts I wrote about tips for Colors, Gradient, and Shadows so now I will focus on Images. Managing Images A single Image in library can hold up to 3 image files for different screen densities: 1×, 2×, 3×.

PaintCode supports importing all common image formats (png, jpeg, gif, tiff, and more). Drag them into Images section to create a new Library Image.

If your images have the same base name and suffix like @1x and @2x , you can drag them into Images section together and only one Image will be created.

and , you can drag them into Images section together and only one Image will be created. Drag image files into canvas to create new Rectangle and Library Image at the same time.

Some file formats, like PSD, are by default imported into PaintCode as canvases. However, if you drag PSD into Images section of Library it will be imported as a Library Image.

Connection point for each image shows whether it is actually used in the document. You can show usage of any image using its contextual menu. The menu shows Canvases and Shapes that depend on the selected image.

After you attempt to delete an image that is used somewhere, PaintCode shows a list of affected objects in your document.

When consolidating images in your designs, you may find it helpful to replace one image with another. Use the contextual menu of the image and select Replace With. Image Fill Library Image is not a shape that can be placed into canvas directly. Its role is similar to Library Gradient, so it can be used as a fill of some shape – typically of a rectangle. To do that, pick image in Fill popover or drag a connection from Library Image to the desired shape. Once the shape uses image fill, its Fill inspector offers new options: image offset and tiling mode. Although PaintCode is meant to replace bitmap images in your apps, there are valid cases when you need to use them. To learn more about Library Images, read our Images documentation.

PaintCode Power User: Library Shadows This post is a part of series PaintCode Power User. One of the defining features of PaintCode is Library. It brings flexibility to your drawings and makes it trivial to experiment with your designs. In previous posts I wrote about tips for Colors and Gradients, so now I will focus on Shadows. Continue reading

PaintCode Power User: Library Gradients This post is a part of series PaintCode Power User. One of the defining features of PaintCode is Library. It brings flexibility to your drawings and makes it trivial to experiment with your designs. In the previous post I wrote about tips for Colors and now we continue with Gradients. Continue reading

PaintCode Power User: Library Colors This post is a part of series PaintCode Power User. One of the defining features of PaintCode is Library. It brings flexibility to your drawings and makes it trivial to experiment with your designs. In this post, I will show you some tips for working with Colors. Continue reading

PaintCode Power User: Text Fields This post is a part of series PaintCode Power User. The most frequently used part of PaintCode user interface is probably the Inspector. It presents all attributes of the currently selected object and allows you to edit them. Numeric attributes are presented using text fields, as you may see for position, size, corner radius, rotation, or stroke width. Continue reading

PaintCode Power User: Keyboard Shortcuts This post is a part of series PaintCode Power User. Keyboard shortcuts for menu items are a very powerful feature of macOS. Mastering keyboard shortcuts is probably the first step to improving you workflow with the app. You can discover them by exploring menus of PaintCode, but don’t forget to try ⌥ and ⇧ modifiers. Continue reading

What's new in PaintCode 3.2 Android Generated Android code now extensively uses caching to minimize new object allocations. Touch Bar Added support for Touch Bar on the new MacBook Pros. Touch Bar allows you to: Create new or open recent documents.

Quickly access most used menu options and dialog buttons.

Edit Colors and Variables without opening their popovers.

Insert math operators into text fields.

Create new Canvases, Shapes, Groups, and Frames.

Change zoom level and screen density.

Hide and Show selected Shapes and Groups.

Align selected Shapes vertically or horizontally.

Perform advanced operations on edited bezier points. sRGB PaintCode 3.2 now uses sRGB color space as working space for all targets. On macOS target, your colors will be converted, so their appearance is preserved, but values of RGB components may change.

Colors on all other targets (iOS, Web, Android) are without change, but their rendering was improved.

Documents saved using this version of PaintCode cannot be opened using older versions.

Improved color accuracy on screens with wide gamut, like Display P3. Minor Features Support for all weights of iOS and macOS system font: UltraLight, Thin, Light, Regular, Medium, Semibold, Bold, Heavy, Black.

Full support for multiple StyleKits in your Swift, Objective-C, and C# projects.

Allow comma as decimal separator in text field math expressions.

Support for importing Apple Color Lists (a.k.a. NSColorList). Fixed Bugs Fix color handling of imported images.

SVG viewport is now taken into account during importing.

Improved QuickLook preview accuracy for transparent gradients.

Improved import of some gradients from PDF.

Introducing PaintCode 3 Today, we are very proud to introduce a new version of our design and developer tool, PaintCode 3. In PaintCode 3, we have added five huge new features: Swift 3 support, Android code generation, JavaScript code generation, Resizing Methods and Telekinesis. Please learn more about the new features on our dedicated "What's new" page. For the first time, you will be able to export your PaintCode drawings into code for 4 major platforms — iOS, macOS, Android and the Web. Our new Telekinesis feature lets you change the design of your app while it is running on a real device. It works like magic. PaintCode 3 also significantly improves the available drawing tools and the quality of the generated code. For example, the generated Swift code now compiles up to 150× faster in some cases. Pricing and Availability PaintCode 3 is available for purchase on our online store for $199 per year. PaintCode is no longer available on the Mac App Store. Try PaintCode for Free Buy Now PaintCode 3 and Existing Customers PaintCode 3 is a paid new version, and existing PaintCode customers are eligible for 20% update discount. If you bought PaintCode directly from us, we'll be contacting you shortly via email with instructions on how to proceed. If you bought PaintCode on the Mac App Store, please contact us at support@pixelcut.com We hope that you'll like PaintCode 3 as much as we do! — Peter, Mike, Matt & Martin

How to use the PaintCode plugin for Sketch Download and install the plugin First, download the PaintCode plugin for Sketch. To install the plugin: Make sure you have Sketch already installed on your Mac

Simply double-click the downloaded PaintCode.sketchplugin file. Download Using the plugin Open a Sketch document you want to export to Swift or Objective-C code. After successfully installing the PaintCode plugin in the previous step, there should be a "PaintCode" menu item under the "Plugins" application menu: Continue reading

How to use the code generated by the PaintCode Plugin for Sketch The video above provides a detailed step-by-step guide on how to use the generated code. This article provides a summary for more advanced users. The provided code examples are in Swift, but all information below also applies to Objective-C. Continue reading

Animating Apple Watch Activity Rings in PaintCode This video demonstrates how to draw the Apple Watch activity rings in PaintCode. With variables, it is even easy to make the activity rings parametric. Download PaintCode document.

PaintCode 2.3 adds 15+ new features, including SVG export We are very pleased to announce PaintCode 2.3 - with over 15 new features, this is one of the biggest updates we've ever released. The new version is available immediately as a free update to all of our existing PaintCode 2 customers. Try PaintCode for Free Buy Now What's New? 1. SVG code generation 2. PDF, AI and EPS import 3. Completely rebuilt image export 4. Animated sequence export You can now export animated sequences - multiple PNGs or a GIF file - directly from PaintCode. Great for Apple Watch animations! Just make your canvas parametric using a variable, then choose the minimal and maximal value of that variable and other settings in the new export UI. 5. Copy & paste support from Sketch, Illustrator, Pages 6. Live shape thumbnails in the Shapes & Groups browser 7. New multithreaded renderer We've rewritten our canvas renderer from the ground up. The new multi-threaded rendering engine is considerably faster when working with large and complicated canvases. 8. Support for cut, copy & paste of entire canvases 9. Support for canvas multi-selection You can now select multiple canvases at once and change their properties (such as their size and export settings) en masse. 10. New way to find out where your library items are used To learn where a particular library item (such as color) is being used in your document, pick the "Show Usage" option from the contextual menu. 11. New, easy way to replace one library item with another Sometimes, you want to replace one color with another one in your entire document. Just pick the right replacement from the contextual menu. This works for all library items - colors, gradients, shadows, images and variables. 12. Replace Symbol with its content It is now possible to "unpack" a symbol. You can easily replace the symbol by its content using the contextual menu. 13. Improved PSD and SVG import PaintCode now automatically detects common shapes such as ovals, rounded rectangles, regular polygons and stars and imports them as these shapes instead of beziers. 14. Canvas Arrangement To arrange multiple canvases in a grid, column or a row, simply select then and use the contextual menu. 15. Built-in feedback form We've built in a convenient feedback form directly into PaintCode, so that you can easily send us bug reports, suggestions and tips for improvement. Try PaintCode for Free Buy Now

PaintCode 2.2 - Introducing Smart Symbols PaintCode 2.2 introduces Smart Symbols, a great feature for prototyping entire user interfaces. Symbols allow you to reuse your drawings across a document. Symbols can be nested, and you can even make them parametric and resizable, which means that PaintCode has the best support for symbols of any drawing app on Mac. Symbols Tutorial We’ve put together a short video tutorial that shows you how to use Symbols.

Draw something on a canvas Anything you want to reuse many times across your document. An icon, button, slider or other UI control. Reuse your drawing as a Symbol Canvases can be easily reused on other canvases as Symbols. They are kept in sync with the original canvas. To learn more, read our documentation. Symbols are resizable and parametric Use Dynamic Shapes to make your Symbols resizable. You can even make them parametric with Variables & Expressions. Free Update! PaintCode 2.2 is available immediately on the Mac App Store and our own Store. Aside from Symbols, PaintCode 2.2 brings: support for 3× images

support for 3× canvas preview

support for 3× raster image export

better Swift compatibility

better Yosemite compatibility To explore other new features of PaintCode 2, visit PaintCodeApp.com

Tweet

iPhone 6 Screens Demystified Update: Read our new Ultimate Guide To iPhone Resolutions! The Ultimate Guide To iPhone Resolutions

Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this. 320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the screen, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only make sense in this mathematical coordinate space. In the original iPhone, points corresponded perfectly to actual pixels on screen, but this is no longer true. Points Point-based drawings are rendered into pixels. This process is known as rasterization. Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail. Typical scale factors are 1×, 2× and 3×. Rendered Pixels The last step is to show the computed pixels on the physical screen. Every screen has pixels-per- inch (PPI) characteristic. This number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world. Physical Device render at 1× downsampling / 1.15 show on device show on device show on device (pixels) (pixels) (pixels) (points) (device pixels) (points) (points) Original iPhone iPhone 6 iPhone 6 Plus 3.5″ 4.7″ 5.5″ 163 PPI 326 PPI 401 PPI points. render at 3× render at 2× a iPhone 6 Plus downsamples the rendered image before displaying it on screen. Physical Pixels The content is defined mathematically using point coordinates. Points Content is rendered to pixels using scale factor. This process is called rasterization. Rendered Pixels Rasterized drawings are displayed on the physical devices. Physical Device render 2× downsampling / 1.15 show on device show on device show on device Original iPhone iPhone 6 iPhone 6 Plus 3.5″ 4.7″ 5.5″ render 3× render 1× a a Line rendering To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on Original iPhone - without retina display. Scaling factor is 1.

iPhone 5 - with Retina display, scaling factor is 2.

iPhone 6 Plus - with Retina display HD. Scaling factor is 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels. The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size. 23 pixels 20 pixels Original iPhone 3.5″ iPhone 5 4″ iPhone 6 Plus 5.5″ Hypothetical Perfect 3× Display ??? Introducing PaintCode 3. The next generation of our tool for creating resolution-independent drawings. Learn More...

PaintCode 2.1 with Swift support is here! After Apple introduced Swift at WWDC, it became clear that this is the future of Apple software development. We started to work on Swift code generation for PaintCode immediately. Today, we're very excited to finally make PaintCode 2.1 available. Here is a video of PaintCode 2.1 running the Swift code generator:

Our experience with Swift has been very positive so far - congratulations to Chris Lattner and his entire development team for this great work! In addition to Swift code generation, PaintCode 2.1 also adds parametric colors, gradients, shadows and images. This means that you can now, for example, configure PaintCode color to behave as a method parameter in the generated code. This allows you to easily change the color (and other style characteristics) of your PaintCode drawings at runtime. PaintCode 2.1 is a free update, available immediately on the Mac App Store and our own Store. Try PaintCode for Free To learn more about PaintCode 2, visit our website. We have prepared video tutorials that show PaintCode 2 in action. To catch all PaintCode-related news, follow us on Twitter and Facebook.

Interview with Christian Dangl, developer of m.phase Christian, tell us something about you and your company My name is Christian Dangl. I'm a mobile developer with a specialism in iOS and Windows development. We're a small team of developers with a wide range of skills. We always aim to get the maximum from our apps for our clients, as well as for our own products. We love to develop specialized apps with more complex architecture, and try to avoid yet another ToDo app. I'd say that yes, I'm addicted to coding, and I try to combine that with my passion for music and sports. PaintCode has supported us not only as a company, but also as individuals in developing an even better experience in nearly all our apps. You just released m.phase app for iPad. What is the purpose of m.phase, and what was the idea behind it? Yes, we released m.phase DAW Remote and also m.phase DAW Remote Lite, which is available for free on the App Store. m.phase is all about giving musicians and sound engineers a new and unique experience of controlling a DAW (Digital Audio Workstation) using gestures. m.phase is all about giving musicians and sound engineers a new and unique experience of controlling a DAW (Digital Audio Workstation) using gestures. We set out to create a product that gives users the opportunity to focus more on the actual sound or video being edited, rather than concentrating on working with small knobs and faders. All controllers are basically the same, so we wanted to be and think differently... I guess we all know that special phrase... What can you do with these gestures? With the gestures of m.phase, you can easily change volume, pan, mute/solo, use transport controls and much more... all without having to touch a specific control on your screen. Besides the ability to operate it without looking, you can also use multiple gestures simultaneously in an even easier way than before. For example, changing volume and pan of 2 channels at the same time. The only thing remaining was to create a user interface that would match our idea. That's where PaintCode helped us to implement an awesome user interface - in an incredible amount of time. You used PaintCode a lot when developing m.phase - can you tell us more about it? When we started to think about designing m.phase, Andreas Huber and I were kind of lost at the beginning. All our team members had their own visions - about abstract controls and how they could look. But no one could have really imagined how to develop such a user experience, while retaining the main focus on programming our core engine…because that's what we wanted to end up with…good core functionality! PaintCode worked so well and so fast that we literally made a sport out of it. We used it for every control, icon and other graphical concept in our app. We asked our designer Raimund Schumacher to assist with the UX. As soon as he had presented the first design proposal, we immediately thought about proceeding with PaintCode. I was already familiar with this software from earlier projects, but I never thought I would ever build a complete application out of it. We started by creating the main element (Volume Sphere), and we were almost shocked how similar it looked to the original design. After creating the control, we split it into sub-parts and easily combined them in our source code, where it was brought to life by adding animations and effects. We then gave it a finishing touch by creating different shadows. We adjusted, replaced, and thoroughly checked them until we were completely satisfied. PaintCode worked so well and so fast that we literally made a sport out of it. We used it for every control, icon and other graphical concept in our app. After finishing the main application, we added the option to set custom colors for the channels. Because we use Basic Colors and Derived Colors, it was a simple change and everything worked within a short period of time. We ended up with a 2.5 MB file size of our application. The sheer size of the app speaks for itself. m.phase is not your first app. Could you tell us a bit about your other apps? Yes, besides m.phase there have been a few other apps that we're proud of. Almost every app has had some kind of makeover in the last year. “Sumit & be fast” is a fun game for kids and adults that helps to improve mental arithmetic, and since Version 2.0 is also based on PaintCode drawings. Sumit & be fast “Live Score” is a professional sports team software, which helps teams to create digital scoreboards for TV broadcasts, live streams, websites and other platforms. The iOS Remote apps allow scorers to simultaneously publish the game's progress on all platforms. The available Web Widgets for the team websites were made with WebCode by PixelCut. www.live-score-app.com Besides developing software, we also have our own lighting hardware solution, “m.pulse smart lighting”, which can be built into homes, lamps or used at certain events. The iOS app was created without PaintCode. Had we used it, we would have also saved quite a lot of time developing that software. “A's Baseball” has been developed for the professional baseball team “Attnang-Puchheim Athletics” over the last couple of years, and has now grown into something I would call “MLBs little brother”. It gives you intense insights into games and standings, with special game day features, push notifications, and way more. www.as-baseball.com Thanks for the interview!

Introducing PaintCode 2 Two years ago, we launched the first version of PaintCode because we desperately needed something like it. And as it turned out, we weren't alone. PaintCode has quickly become one of the most popular developer tools on Mac - adopted by industry giants such as Apple, Disney Pixar, Evernote, Hewlett Packard, Qualcomm and many others. We remember reading Wil Shipley's blog for many years, dreaming about becoming Mac developers one day. You can imagine our reaction when we received an email from Wil, a legend of our industry, shortly after we had launched PaintCode. The subject of the e-mail was: "PaintCode looks genius". We are incredibly thankful to all our customers for making our dreams come true. Today, we are proud to introduce PaintCode 2. We have been working on it non-stop for over a year, and we're really excited to be finally showing it to you. Our goals for PaintCode 2 Super simple integration of the generated code into your projects.

(with StyleKits) Ability to easily create parametric drawings.

(with Variables & Expressions) Much better drawing tools. We've made PaintCode 2... using PaintCode 2 Aside from the app icon, PaintCode does not use any image resources. We could test countless variations of our new UI in a very short time. It's hard to imagine doing what we have done without PaintCode 2. We really look forward to what you'll achieve with it. Pricing and Availability PaintCode 2 is available for purchase. You can still buy it from the Mac App Store, and we've also added the option to buy directly from us, including volume purchase options. Buy Now If you bought the previous version of PaintCode (1.3.3) after 01 April 2014, please contact us at support@pixelcut.com and we'll give you a free license for PaintCode 2. To try PaintCode 2, download the demo version. To learn more about PaintCode 2, visit our website. We have prepared video tutorials that show PaintCode 2 in action. Want to catch all PaintCode-related news? Follow us on Twitter and Facebook. We hope that you'll like PaintCode 2 as much as we do! — Peter, Mike & Matt

Interview: Peter Rapp, creator of Lightbow Peter Rapp, the creator of Lightbow, uses PaintCode to draw beautiful dynamic light bulbs. He was kind enough to let us include an interactive example1 in this interview, so you can play with it, too: Continue reading

Drawing Code for iOS 7 Rounded Rectangles Short story: We’ve decided to open source some Objective-C categories for drawing the new iOS 7 rounded rectangles. Code download below! Long story: In iOS 7, Apple introduced a slightly different icon shape - it is no longer a simple rectangle with circular arcs in corners. The old design produced a subtle but noticeable “hump” in places where arc touches some of the straight lines. The new iOS 7 icon shape looks more “organic” and eliminates this effect. Continue reading

Using PaintCode in production: Interview with Jon Beebe, developer of ProCutX When Pixel Film Studios released ProCutX earlier this year, the app got a lot of much-deserved attention. ProCutX lets you control Final Cut Pro X using your iPad. We interviewed Jon Beebe (@bejonbee), the developer of ProCutX. Tell us a bit about yourself and your work. My name is Jon Beebe, I’m an iOS & front-end web developer. From a user’s perspective I remove worry from their lives and replace it with hope. From a technical perspective I bring business ideas to life on real devices, through code. Continue reading