Documentation

Thanks for joining the PixelFree family

The following documentation is intended to assist you in understanding how to navigate our evolutionary software.


  • Version: 2.0
  • Author: Fabian Sattler, Melina Wonn
  • Created: 17 January, 2022
  • Update: 8 April, 2022

Installation

Follow the steps below to setup PixelFree Studio

  1. Download the Software
  2. Install the Software

Layout

Documentation and examples for Layouts

Stack pane

When using a Stack Pane, the objects are placed on top of each other, just like in a stack. The first object you add is placed at the bottom of the stack, and the next object is placed on top, and so forth.

In the picture above, we offer a demosntration of what you can create using a Stack Pane, such as adding buttons within an image. However, it can be used for absolutely any object. One handy use of this feature is for landing pages. So, you have quickly create a header area, subheadings and footer of a website with ease.

The first object in our stack pane is the image you want to use. We supplement this in our display with four buttons. The objects are added one after the other and keep their order, fort he purposes of manipulating them using the features within our tool.

In the display menu you have the ability to switch individual objects on and off. So that when you are working with two objects that directly overlap you separately determine their exact position.

The location of the buttons can be changed in the Stack Pane Constraints Menu. This is located on the bottom right corner oft he screen.

In the Alignment area, you define where exactly the corresponding object should be. The following options are available:

  1. Baseline Left
  2. Baseline Right
  3. Bottom Center
  4. Bottom Left
  5. Bottom Right
  6. Center
  7. Center Left
  8. Center Right
  9. Top Center
  10. Top Left
  11. Top Right

Then, using the Margin option, you can specify how far you want the margin distance.

Above in the above picture, for example, you can see that we chose an Alignment of Top Center and a Margin of 100. This means that the button is moved tot he center, 100 pixels down from the top of the stack.

Caution: If you change the size of the Stack Pane, all objects lose their position and have to be realigned. The Stack Pane is not a dynamic layout.

In the display menu you have the ability to switch individual objects on and off. So that when you are working with two objects that directly overlap you separately determine their exact position.

In the Content Alignment Menu you have the option of repositioning the text content of an object.

The following options are available:

  1. Top Left
  2. Top Center
  3. Top Right
  4. Center Left
  5. Center
  6. Center Right
  7. Bottom Left
  8. Bottom Center
  9. Bottom Right


Flow Pane

The Flow Pane is a dynamic layout that allows you to arrange the objects in the Flow Pane horizontally or vertically.

The advantage of a dynamic layout is immense. The Flow Pane automatically adjusts its size.

If you resize a button and make it larger than the Pref Width of the Flow Pane. The Flow Pane automatically adjusts to the Pref Width of the button.

Here in our example belowe we do this using the button labelled Mario.

As you can see, the button now has a Pref Width of 500 pixels. The Flow Pane, on the other hand, only has a Pref Width of 300 in the output settings.

So the Flow Pane takes the width and height data from the individual objects in the Flow Pane itself.

With a Flow Pane, for example, you can quickly create a side bar

A simple way to create a Flow Pane ist o drag one from the Layout Menu onto the Canvas of the PixelFree Studio software. In the Anchor Pane Constraints menu at the bottom right, enter 0 for Top, Bottom and Left. This gives the Flow Pane a fixed position. The Flow Pane will always have this position even if you change the size of the page.

A Padding of 10 pixels ensures that the individual objects in the flow pane have a distance of 10 pixels from the edge.

On the right side of the property panel you will find more settings that can be used for creating the Flow Pane.

  1. The general orientation of the Flow Pane. You have the ability to set (and change) the orientation of the Flow Pane either vertically or horizontally.
  2. HGap and VGap. These features enable you to define the distance between objects. Here, in our example, we have set a distance of 25 pixels in the vertical direction. HGap is the Horizonthal Gap and VGap is the Vertical Gap.
  3. Row Alignment. Using this option, you can specify how individual objects should be aligned in a row. You can choose between top, center, baseline and bottom.
  4. Column Alignment. Here, you have the ability to define how individual objects should behave in a column. You can choose between left, center, and right.


HBox

The H Box arranges its objects in a single horizontal row. If the H Box has a frame and/or padding, then the contents are arranged within these inserts.

This can be used, for example, to create a navigation bar for a website.

In the Anchor pane Contraints Menu at the bottom right you will find options for positioning. There it is possible to indicate the exact position of an object on the website.

Enter a 0 for Top, left and right. Thus, the H Box is completely filled to the left and right side. As well as attached to the top of the page.

The object will remain there permanently, even if you change the size of the page. Thus, the navigation bar has a fixed position.

With the padding options in the Anchor pane Contraints Menu, it is possible to define the distance of the inner objects in the H Box to the edge of the H Box. There, too, you have the opportunity to define a distance for top, right, left and bottom.

In the H Gap menu you have the option to set the distance that all objects in the H Box have in relation to each other. The distance here, for example, is 5 pixels.


Anchor Pane

The Anchor Pane holds individual objects firmly in their position. Even if you change the size of the Anchor Pane, the individual objects remain in the position in which they were set. This allows you to work more flexibly. If you resize the Anchor Pane, our tool enables you to do this as far as the individual objects allow. Each object has its own size and its own place within the Anchor Pane. This means that you can only shrink the Anchor Pane as much as the individual objects permit. The advantage of this is that if you find that your Anchor Pane is too big, but your design fits, you can shrink the Anchor Pane without fear of losing your design.

You can use an Anchor Pane to create a login page.

Here, in this example, we have set the size of the Anchor Pane in the Size Menu.

Another advantage of the Anchor Pane is that it is dynamic. This means that if we change the size of an input field and make it larger, the anchor pane automatically adjusts.

Since the initial size of our Anchor Pane was much too large, we have now reduced the size of the Anchor Pane. As you can see in the two example images below, the individual objects remain fixed in their position.

However, you can move the individual objects without any problem so that it again looks visually accurate.

You can use your mouse and move them manually or by making adjustments in the Anchor Pane Constraints menu on the lower right corner of your screen.

At the X and Y coordinates you can now define the position you desire for your objects.


Controls

Documentation and examples for Controls

Paragraph

Our Paragraph element is intended projects that require adding a lot of text to a section of an app or website.

First we drag the Paragraph element from the left side column into the page.

Then we enlarge the box so we can both add and easily view the text to be pasted or written into the box.

You can change the background color in the Background settings, from the right side of the screen, to any color you like. In this instance, we will choose white.

The next step is to insert your text into the Paragraph.

On top of the screen, you will notice familiar settings. These are identical to what you might see in Microsoft Word and Google Docs. You can choose any font or font size, bold, italicize or underline, and style your text however you like. Our Paragraph element functions exactly as you have come to expect from any standard digital editor.


Functions

Documentation and examples for Functions



Anchorpane Constraints

The Base Layout in our Software is always an Anchor Pane.

The Anchor Pane Constraints Menu can be found on the bottom right side of your screen, and these functions help you set elements in a fixed (anchored) position within the canvas.

With the x and y coordinates you can position your objects. The x coordinates is on the left side and the y coordinates on the right. In this example, we set the Button 50 pixels away from the left side and 500 pixels from the top.

Above that, we have the anchoring menu with controls designating top, bottom, right and left, all denoted with a negative 1, which is our default setting.

As I change that value to 50 on the left side in the constraints menu, I create a left margin of 50 pixels. I can then reset the bottom margin to 250 pixels and the button moves automatically into place.

If we then change the left and top Margin to zero, you will see that the Button will jump to the left corner on the top and will remain fixed in that spot, no matter how the size of the page may change.


Button Display Settings

This documentation will introduce you to the Button Display features. First we drag and drop a Button onto the page.

Then we open the Display Settings on the right side of your screen.

The first thing we will play with is the Content Alignment. Here you can decide where the Content will move, to the center left or center right, to the top, or the bottom, etc.

You can also do the same with icons placed into a Button and even with an SVG string. Here, I took the path from an SVG, copied it and imported it directly into the Button.

After that, I completely eleminate the Opacity of the text to get rid of it. I next changed the Opacity of the logo down to 50, showing you how it lightens the color.

You can see the point even more concretely when I then set the Opacity down to 7. If you were to set the Opacity to zero the Logo would completely disappear, jast as we did fort he original text in the Button.

You can also choose whichever Cursor design you like, such as selecting a hand, or a crosshair, or any oft he other options we offer.

The next feature we will cover is the Blend Mode. The Blend Mode has a multitude fo features, so I will explain it in further detail in separate documentation.

For now, I will only demonstrate the “difference“ feature in Blend Mode. First we change the color of the logo to black, and when I select “difference“ the color black automatically inverts to white. You can use this to quickly create great contrasts for a Hover feature. That function will operate similarly for any color you choose. It will always invert your color into an opposing color, creating maximum contrast.

You can also note all the different Blend Mode options avaialbe to play around and see which ones you like the best.


Scalling Images

This documentation pertains to scaling and resizing Images using our prototyping tool.

The first item we will cover is how you can scale images by selecting any of the barrier point dots on the edges or side of the image to stretch the image dimensions however you like.

Another option you can use is manipulating the image size by setting the Fit Width and Fit Height to achieve more precise placement.

Here I will choose 400 pixels for the Fit Width and 250 pixels for the Fit Height.

If I then reset those values to Zero, I get the actual size of the image.

When I set the Viewport Width and Viewport Height we get a snapshot portion of our Image. Here, in my example, I have chosen 500 pixels for both the width and height, so we get a 500 pixel by 500 pixel portion of our image.

In the Viewport X and Viewport Y you can then select coordinates to display whichever portion of the image you want.


Scalling Objects

This documentation provides instruction on the scalling of Objects (a/k/a Elements). In my example I will use a basic Button to demonstrate the scaling, but the sames rules apply for every object (or element) except images. Images are controlled by a separate icon and are explained in a separate documentation tutorial.

On the right side of our screen you will find the Sizing properties. With this function you can manually set precise sizing. But you can also Size the Object by clicking and holding onto a barrier point dot, just as you would in any other prototyping tool.

Here, I have set the Pref With to 340 pixels and the Pref Height to 250 pixels. Please note, this will not make your Object (Element) fully responsive. You will need to use our Smart Divisions function (explained in a separate tutorial) to achieve full responsiveness.

When you set the Min With and Min Height you can fix the minimum size of your Object. Here I set the limit at 50 by 50 pixels as a minimum, so my Button will never get smaller than this, even I were to set the Pref With and Pref Height down to zero.

The Max Width and Max Height react oppositely to the Min Width and Min Height but behaves the exact same way. You can set a Max value and your Object will never get bigger than this fixed maximum preference.


Wizard

The Wizard helps to save time when creating specified designs that you want to use more than once. This way, you don't have to recreate the same design every time. Simply design the element once and use it whenever you need it.

On the top left side of our tool you’ll find the following icon identifying the Wizard:

Clicking on the button opens the following window which opens automatically with a button in the center:

The button can be replaced with any element or layout by clicking on the desired element in the lefthand column.

Now, we will demonstrate how to design the button in the Wizard and save it for future use.

Click on the plus icon in the upper left corner of the Wizard:

Then, you specify a name for the unique element you want to design and reuse in the text box on the left oft he window.

Now, it’s your turn. D esign your element exactly as you would like it to look.

If you want to design another element, click on the desired element and again on the Plus button. You can create as many specialty elements as you like.

Give the new element its own name and design it exactly as you want as well.

Now you can use these unique elements by closing the Wizard and getting back to the main screen. Above the elements, on the top left oft he screen, you’ll find a dropbox where the different designs you created in the Wizard are selectable for future use. "Default" gives you access to all our elements in their default state, and you’ll find your unique creations on the list for selection as well.


Converting

The finished design created with our software can be easily exported to any programming language of your choice.

In the following example, you‘ll see our website created using our prototyping tool.

Now, in order to convert the created design into a programming language, you will need to click on the Export button in the upper right corner of your screen:

This will open a window with the different programming languages you can choose from (i.e. HTML, iOS and Android). In our example we export our design in HTML.

When it has finished loading, you will automatically have the HTML code available in a newly created folder.

When you open this folder you will see several files. Click on the New Page.html file and the design appears in HTML, exactly as it was previously created in our tool. The exported file is identical to the original.

In addition, PixelFree has generated a complete set of native code. Open the files in an editor and you can see the generated code that would have taken a programmer, hours, days or even weeks to write. Instead, you have done so in an instant with a quick click of our Export icon.


Smart Divisions

This documentation provides information on how to use the Smart Divisions feature within our software.

First let’s explain, what Smart Divisions are and why we need them:

We invented Smart Divisions to eliminate the repetitive need of recreating a project from scratch in designing the same end-user experience for different platforms such as a computer, tablet and platform. By using Smart Divisions, you can create your project just once and save it to be used across all platforms, saving you an incredible amount of time and tedium.

Now, we will review an example to more clealry demonstrate how Smart Divisions work.

Above, you see a project in ist initial phase, ready to be formatted. On the right side of the screen, you’ll notice our Smart Division link open using the following icon:

Click on the icon and it will open with the default settings of wherever you placed your images to begin with.

To use use the Smart Divisions, and set up a secondary fixed location for your iamges, click on the “add a smart division“ button. A dottend line will then appear on the right side and bottom of the page.

You can then resize the Smart Division for, let’s say, a smartphone format, to create a seconday set of states for your objects (elements). But first, let’s reduce the size of the Smart Division down to a size necessary for formatting a smartphone.

Next, click on the Auto Select Button. Continue by clicking on the Smart Division and you’ll notice the dotted line will become a normal line. You’re Smart Division is now all set up.

From there, you can drag your objects into the newly created Smart Divisions section and resize them.

You have now established two separate states within one project (i) the default state for your web design, and (ii) your secondary state for a smarthphone. When click on the “default“ the objects jump back to the initial position. Then, when you click again on the Smart Division, the objects move into the Smart Division state.

Pretty cool, right? You no longer need to set up separate projects. Create a project just once and use it as you like, between platforms.


Blend Modes

Documentation and examples for Blend Modes

Blend Modes are used to determine how two layers are blended with each other. In this instance we will be blending two objects.

For Blend Mode pruposes, there is (i) a base layer, and (ii) a blend layer. When combined they produce a specific result.

Base Color from the HBox

RGB

145,164,219

Base Color from the button RGB

48 14 66


Normal Mode

Without Blend Mode activation, your elements will present a normal view, as would be expected.


Darken Blend Modes

Color Burn

Color Burn belongs to the "darkening" blend modes.

This occurs when the opacity is set to 100%.

With 100% opacity, black is completely dark.

The second color (color from the HBox) is inverted. This means that light colors become darker and dark colors become lighter. The first color of the button is divided by the inverted color of the HBox.

Color Burn darkens the composite image by increasing the contrast and "burning" the colors.

In our case, the button is "darkened".

The result is a high-contrast, highly saturated, burnt look.

With an opacity of 22%, for example, the light colors are also inverted, except that these will then become dark colors. If you divide this value by the base color of the button, you get a lighter color for the button than in our first example.

The math of Color Burn

1−(1−B)÷A


Darken

Darken belongs to the "darkening" blend modes.

In Darken, white is neutral. Anything that is not white darkens the underlying layer.

The darker of the two color components from the two objects is selected to create the resulting color.

The math of Darken

min(a, b) = (a + b - | a - b|) / 2


Multiply

Multiply is used for the "darkening" blend modes.

It combines the brightness and contrast of the two layers.

Multiply always darkens the entire image and increases the contrast.

The math of Multiply:

A * B


Lighten Blend Modes

Color Dodge

The first color (color of the button) is inverted. Thus, all dark colors automatically become lighter.

The second color (Hbox) is divided by the inverted first color. This makes the button appear lighter.

The math of Color Doge

b/ (1-a)


Screen

In Screen Blend mode, the color black is neutral. With Screen you can lighten or reduce the contrast.

The color components of both objects are inverted, multiplied together, and the result is inverted again. This gives an even more pronounced blending than Color Dodge.

In this way, for example, you can ensure that the desired object is brightened on dark backgrounds but can still be seen.

Math of Screen

1 – (1-a)*(1-b)


Lighten

In Lighten Blend mode, the color black is neutral. With Lighten, the lightest color of the two objects is retained.

Math of Lighten

max(a,b)


Contrast Blend Modes

Overlay

In this mode, the value 50% for the opacity behaves neutrally. This means that 50% is the neutral value for the second color (Hbox). With an opacity of 50%, the button and the Hbox have the same contrast value.

Anything above 50% will darken the whole image and add contrast accordingly.

Anything below 50% will make the entire image lighter and add contrast accordingly.


Soft light

Soft light behaves similarly to Overlay. The main difference is that it is softer and with less contrast.


Hard light

It is similar to "Overlay" and "Soft-Light", but much more aggressive. White remains 100% white and black remains 100% black.


Add single Color Blend Modes

Blue

The blue color channel of the lower object is replaced by the blue color channel of the upper object; the other color channels remain unaffected.


Green

The green color channel of the lower object is replaced by the green color channel of the upper object; the other color channels remain unaffected.


Red

The red color channel of the lower object is replaced by the red color channel of the upper object; the other color channels remain unaffected.

Download Android code

Click here to download the android svg example file (java native code)


Support

If our documentation does not sufficiently answer your questions, please see our Youtube channel or send us an email via ou Support Page.