A community of UI designers, animators and developers interested in creating more delightful experiences with tools like Quartz Composer. Getting started   What is QC Designers? QC Designers is a community of UI designers, animators and developers interested in creating more delightful experiences with tools like Quartz Composer. Our focus is on getting people up to speed with QC, but we’ll continue to adapt as new tools come into fashion.   While there are other forums for QC users, we cater to Interaction Design, specifically. We recommend Kineme and iloveqc for QC communities focused around its strengths as a tool for VJs and audio visualization.   What is Quartz Composer? From Wikipedia: “Quartz Composer is a node-based visual programming language provided as part of the Xcode development environment in Mac OS X for processing and rendering graphical data.” It is an Apple product used by designers & animators to create animations and prototypes. It also has wide use by VJs for live visualizations, among other uses. It has been around for a number of years but has recently had a resurgence in the software world following news of its role as a prototyping tool at industry giants Apple and Facebook.   To create a composition, a user uses the Editor to connect a number of patches with “noodles” that sends a signal from one patch to another. The end result is displayed in the Viewer. Changes you make in the Editor immediately appear in the Viewer, which makes QC particularly well-suited for creating interactive prototypes.   How to download QC Quartz Composer is a free download from Apple’s developer site. Here’s a video walking through how to get it.   YouTube video: http://www.youtube.com/watch?v=DwobezAOnqk   The short version: Go to Apple’s developer site Register for a Developer account, or log in if you already have one Download “Graphics Tools for Xcode” Once installed, you can find Quartz Composer in Macintosh HD > Developer > Applications > Quartz Composer. Again, it will be inside your Developer folder, not your main Applications folder. How to extend Quartz Composer with jQC and Origami jQC and Origami are frameworks for QC that make it easier to use for interaction design. jQC is an open source framework that was built with help from this community and first released here, on this site. Origami is a framework developed by Facebook that includes many helpful bugfixes for QC as well as a number of patches. Both frameworks can be installed at the same time, and are complimentary to each other.   jQC download thread The jQC framework is free and open source. It has no dependencies outside of QC, and is highly backward compatible.   Origami download thread The Facebook Origami framework is free and fixes some longstanding QC bugs. It requires OSX 10.8 or higher to run.   Both frameworks are highly recommended.   Common resources for learning QC This site hosts a Forum and has tutorials and sample projects to get you started. In addition, we’d recommend:   Learning Quartz Composer by Graham Robinson and Surya Buchwald. This book is geared toward visualization work, but it’s still a good introduction to the app. Widely recommended.   Apple’s Quartz Composer User Guide (PDF). Similar in content to Learning Quartz Composer, but free. Last updated in 2007, but still largely useful.   Kineme forums. Tends toward more advanced users, but there’s a lot of knowledge collected here.   This Forum If you’re new to QC, welcome! Please introduce yourself and share any comps or questions you have.   General pointers   Pixels vs Units QC measures the Viewer in Units, not pixels. Units are a relative unit of measure, and the coordinates are measured from the center of a given object. 1 Unit is the distance from the center of the Viewer to the top or side. Here’s a graphic from Apple’s User Guide:     You can think of Units like a percentage - something positioned at 0.5 X Units will be 50% of the way between the middle of the Viewer and its right edge, while something positioned at -.75 Y Units will be 75% of the way down the viewer from the middle.   Pixel perfection Because Units are relative to the size of the Viewer, the elements will resize automatically with the window. This can be tricky when working with pixel-precise mocks. Pixels are an exact unit of measure, so any scaling will cause blurriness. It’s entirely personal preference whether to make your mock scalable or pixel-perfect, and each have their pros & cons. If you want to ensure your mocks appear pixel-perfect, do the following:   Select the output patch for your image (Billboard or Sprite) Press CMD+2 to bring up the Settings inspector & choose Dimensions Mode: Real Size Press CMD+1 to bring up the Input Parameters inspector & change Pixel Aligned to 1   To position elements with Pixels instead of Units, you can use the Pixels to Units and Units to Pixels patches to convert from one format to another.   In addition, the patches in the jQC framework use pixel values by default. For example, you can automatically get the same effect as described in the three steps above by using the Pixel Aligned Billboard patch.   How to install custom QC patches Select the patches in the editor to make up the custom patch Click Add to Library in the top bar   The custom patch will now show up in your Patch library under Custom and will be available to any comp you work on.   How to install 3rd Party Plugins for QC http://vimeo.com/809083 Guide on Kineme: http://kineme.net/HowToInstallCustomQuartzComposerPatches   How to upload your comps for the Forum We recommend the following to upload your comps: Dropbox - (Instructions) droplr CloudApp   Comps won’t open in 10.7+? This is due to a security feature called Gatekeeper preventing files from opening that could potentially harm your computer. To get around this, you can either:   1. Right-click on the file and choose Open. You only need to do this once per file you download   Or,   2. Disable Gatekeeper under Security in System Preferences   Apple has more information at their website   Help - graphics are glitching out! This can usually be fixed by adding a Clear patch. Apple covers this in more detail.   More questions? Ask someone!

Vimeo is the home for high-quality videos and the people who love them.

Join the conversation with this link : http://branch.com/b/quartz-composer/invite_link/wQY0S9VrT7hwAg There has been various mentions of designers using Quartz Composer ( QC ) for interaction deign but from what I have seen it's been vague talk because people find the learning curve to be too steep or lack of resources to learn from a perspective of UI design. What I hope to do quite soon ( once I finish college ) is to record a series of video tutorials in which I build an app to the best of my ability using QC. Im not talking about starting from scratch and building all the assets in Photoshop/Sketch and then animating them. The assets will most likely be bitmap screenshots as the main focus with this is to demonstrate QC, it's tools and it's workflow.

Dropbox is a free service that lets you bring your photos, docs, and videos anywhere and share them easily. Never email yourself a file again!

A community of UI designers, animators and developers interested in creating more delightful experiences with tools like Quartz Composer.   I'm excited to release the 2nd version of jQC. Like last time, this release includes a set of new tools for UI prototyping with both high and low-level patches. On the high end are patches like iOS 7 Blur, which aims to mimic the frosted look from the upcoming OS, and Device Framer, which puts a customizable iPhone frame around your comp. On the low end are patches built for improved speed and new tools like Multi Input, which effectively lets you send multiple outputs to a single input when coupled with a Multiplexer (check out the examples to see how damn cool this actually is).   This release includes the following new patches:   iOS 7 Blur (Box) iOS 7 Blur (Masked) Device Framer Mobile Device Dimensions Multi Input Mini Multi Input Large Multi Input Chainer Align Inside Image Align Boolean Multiplexer Boolean Toggle Channel Changer Focus & Unfocus If Any Sample & Hold (Number) Sticky Toggle (Boolean) Sticky Toggle (Number) Sticky Toggle (String) Rectangle   This release also includes and improves upon a number of earlier patches:   Color Button Fancy Button Interaction Lite Crisp Text Gradient Clear Hex to RGB Highest Number Lowest Number Initialize Boolean Initialize Number Initialize String Mouse Is Over Target mouseUp mouseDown Pixel Aligned Billboard Status Light Sticky Toggle   There are also annotated example comps for all patches included for reference.   Known bugs: Boolean Multiplexer reverses state when toggled too fast iOS Blur Interactive example file has a mask that becomes misaligned when dragged outside the viewport IOS Blur Interactive example file has a misaligned device frame   NOTE: This release embraces a "Pixels First" philosophy and changes the default measurement on Interaction Lite and Mouse Is Over Target from Units to Pixels. These patches both include the ability to switch back to Units if needed (if comps built with jQC 0.5 stop working, try this).   To install, copy the contents of "jQC 0.8 Patches" to: Macintosh HD/Library/Graphics/Quartz Composer Patches   It is recommended that you overwrite all existing jQC 0.5 patches with these new patches. Do so at your own risk.   Current and past contributors to jQC: Hans van de Bruggen (@verbiate) Brandon Walkin (@bwalkin) Dave O Brien (@DaveOBrien_)     This version is old - get jQC 1.0! Download jQC 0.8 here instead    

Hey guys, I tried to use Quartz Composer to emulate some iOS 7 effects in my spared time. Here comes a simple chatting view interaction with three iOS 7 effects: scrolling with bounce effect, trans...