QBlocks Basics

What is QBlocks ?

QBlocks allows you to design resolution independent graphics for your iOS or OSX projects. QBlocks help developers and graphics artists to achieve greats result with no effort. With his easy to use UI and its objects oriented tools gives an amazing workflow. The strength of QBlocks is in its architecture based on plugins or blocks that delivers the versatility and potential for growth.

Here are some of the thing you can do in QBlocks.
Document Window Overview

The main document window in QBlocks is divided in two. The Panels of the left is where the object & blocks list are, and the right one is the main canvas where you work and create your graphics and also is where the real time objective-c code is generated, you can togle between both, the main draw canvas and the code list view.

  Canvas Overview  
How QBlocks Works

The best way to understand how it works is to isolate the creation of bezier paths and the characteristics of these paths, because the core of the system is based on plugins that gives the features of each path. Having isolated the creation of the path of the attributes we have created the opportunity to grow without limits and create new plugins or blocks that can define new attributes and even put several of them together to create custom blocks that define an style of graphics. We started with the basic ones, but the idea is to continue with new and more complex ones.


Plugins allows us the possibility of using them in our absolute freedom, it gives us versatility to the design. The following small example illustrates this, In the first square the gradient is drawn first and in the second at the end. This is done by simply dragging the block at the end of the block list and in the same way you can add other blocks, bringing the possibility of new effects.

  Blocks Example  

To start we put twelve plugins or blocks. Which allow very powerful graphic design. The final idea is to be able to create a framework to create plugins externally to us. For now we are defining and improving the framework and we will continue to create new plugins with new effects.

Real Time Code Generation

Each plugin has the ability to create its own code. So, what makes QBlocks, is to gather and organize the code to deliver it in a coherent list. With the framework that we are developing QBlocks interact with the plugins and ask each one to generate the code we need. By now we generate Objective-C code for iOS and OSX but we are ending .SVG (Scalable Vector Graphics) and we will continue with others. The code is shown in a view, which represents each plugins used with colored blocks that make it easier to read.

Color & Gradient Library

The QBlocks Library handles colors and gradients in a very tied way. This is, to use a color, first you have to create it in the Color Library,where you define a Color Name and its Color, once this is done you can use independently in each Block and to create Gradients. That way if you want to change a color it changes everywhere. But this does not mean that the color can not be changed, each plugin can modify or change its Highlight, Shadow, Opacity, Hue, Saturation and Brightness independently



Follow us on Twitter

Subscribe to our newsletter

Thanks you!