Personal tools

Tutorial of the elements

From RadiWiki

Jump to: navigation, search

This chapter will walk you through the elements in Radi. As discussed in Chapter 1, elements are the building blocks of a web page, and to create visual content for the web it’s necessary to have some level of understanding about the capabilities of elements.

Radi’s unique strength is that you don’t have to make fixed decisions about what elements to use – your content can always be moved from one kind of element to another. Other apps typically produce just one type of content: an image editor creates just images, a video editor creates just videos, and a web page editor produces just styled text blocks. In Radi, you can mix and match these content layers seamlessly. As usual, new power comes with responsibility: the choice of containing element has a major effect on how your content is rendered, and this is something that you need to be aware of.

In this tutorial, we’ll create simple content and take it through all four types of elements: Text Block, Image, Video and Canvas. (This tutorial is a practical overview of Radi’s fundamental capabilities as a web publishing tool. If you’re specifically looking to do vector animation in Radi, you may find this tutorial to be slightly off your interests. Don’t worry, the next chapters will go into detail about the Timeline, drawing tools and animation.)


Contents

Starting with text

When the World Wide Web was invented 20 years ago, it was all text. The first version of HTML allowed for a few different text heading styles and clickable hyperlinks, but basic features like text colors and the ability to display images within a web page would not become available for a few more years.

Text being so fundamental to a web page, this tutorial starts off with text as well. Although Radi is not a full-fledged text layout tool, it has the basic capabilities for easily creating text blocks and applying different styles.

To create a text block element, click on Block in the Timeline controls area:

radi-timeline-toplevelelements.png


The default content of a text block is a short example text. You can drag and resize the block in the editing workspace. Let’s make it a narrow column of text:

radi-textblock-default.png


In the above screenshot, the background of the document has been changed into a subtle gray pattern. You can do this by clicking on Background: “Pattern” just below the editing workspace. (The gray pattern shown here is the default; if you want to pick another one or change the pattern’s colors, you can click on Pattern Properties. For now, let’s just go with this default.)

Next edit the text. Ensure that you have the Inspector window open (if it’s not visible, you can open it by clicking on the “info” button in the toolbar). In the Inspector, click on the “Edit Text” button. This opens the Text Block Editor window:

radi-textblockeditor-crop.png

You can style your text using the simple and popular Markdown format. For example, to make a line of text into a heading, just add a # sign at the start of the line. For a second-level heading (i.e. smaller text), use two # signs. There is a little shortcut help visible below the text editor window, and also a button that opens the complete reference about Markdown formatting.

Make some changes to the text and click Save Text. You can also edit the styles on the right-hand size of the window, for example, change the color and font size of the heading:

radi-textblock-tutorialexample.png


Now we have a rudimentary web page, so let’s check out what it looks like in a web browser. Click on the “Preview in Browser” icon in the toolbar (or if you prefer keyboard shortcuts, press the Cmd+B shortcut key). This opens your default web browser showing a preview of your document. It should look essentially identical to what you see in Radi, with the background pattern and a narrow column of text.


Constructing an image

You can close the web browser and return to Radi. Next, create an Image element by clicking on the appropriate button in the Timeline controls area:

radi-timeline-toplevelelements.png


A new element appears at the top of the Timeline, but nothing changes in the editing workspace. This is because the newly created Image element is empty by default. We need to add some content to it.

radi-elementstutorial-newimage.png


An element’s contents are built up from layers. These are specific to a content type – a Shape layer can’t contain editable text or photographic images, for example. But these limitations are not quite as strict as it may sound: for example, a Shape layer can contain a shape whose fill pattern is a photographic image. So there are often many ways of doing things in Radi, and you can pick the one that best matches your intentions.

Let’s create our first layer by importing a picture from an image file on disk. I’ll be using a sample image, i_love_radi.png, which you can download by clicking here (use Cmd+click to save the linked file). Click on “Import Picture” in the toolbar, and locate the image file you want to import. The image appears in the document workspace, and a layer has also been added within your previously empty Image element:

radi-elementstutorial-newimage-with-pic.png


(Before clicking on Import, check that the Image element is actually selected in the timeline view. Otherwise there’s no element selected in which to place the new layer, and Radi will prompt you to ask what kind of element you’d like to create.)

Move the picture to the right-hand side of the document, so that it doesn’t overlap the text. Scale the picture down to about 2/3 of its original size by dragging from one of the handle points in the picture corners while holding the Shift key pressed. (Holding Shift ensures that the scaling is applied equally to both X and Y dimensions so that the picture’s contents are not distorted.)

Next rotate the image a little bit. In the Inspector window (with the Picture layer selected), enter the value ‘20’ for the Rotation parameter:

radi-inspector-layertransform.png


There are a few other possible ways to enter this value. Try clicking the little right-pointing arrow with the Shift key pressed down. The Rotation value increases by 10 for each click. (This value increments by 1 one when no key is pressed, by 10 when the Shift key is pressed, and by 100 when the Alt key is pressed. Other parameters may use different values that are more appropriate for them. For example, try clicking on the Scale X/Y values with and without the keys.)

Typing in values gets tedious quickly. Another way of changing parameter values is to “scrub” the number with the mouse. Just click on the number value, hold down the mouse button and start dragging left or right. The value will increase in small increments as you drag – this is very useful for finetuning a value. The same Shift/Alt keys can be used to make this scrubbing work in larger increments. (Note that scrubbing only works if you’re not editing the number. You can tell by the mouse cursor’s shape: if the text is being edited, the mouse cursor is the traditional vertical “selection beam” that can be used to select text. In this case, just press Enter to end editing, and you’ll be able to scrub the value.)

Now we have a rotated Radi logo in the top right-hand corner of the editing workspace:

radi-elementstutorial-rotatedimage.png


Next, let’s try applying an effect to this image. Specifically, I’d like to change the color of the letter ‘I’ and the heart. Black is just so boring – I’d like some shiny candy-coloring instead. But it shouldn’t affect the Radi logo, so we’ll also need to control the effect so that it’s applied only to a part of this picture layer.

To create this effect, we can use Conduit, the visual effects tool included in Radi. Although Conduit is designed for realtime video effects, it can be used on still pictures just as well.

Conduit’s main attraction is that it allows effects to be designed in a manner that’s non-destructive and reusable. Traditional image editing applications like Photoshop are designed so that effects must be built up by combining layers and filters. The problem with this approach is that it doesn’t scale to more than one image: once your image is ready, there’s no convenient way to take those layers and filters and apply the same operations to another image – or even a sequence of images, as would be necessary for video. Conduit solves this problem by using a graphical approach called node-based image editing. Instead of applying filters and adjustments directly onto layers, Conduit’s node view allows you to design just the sequence of operations and then be able to apply it in realtime to any kind of visual content. The whole effect remains constantly visible and editable, so you can always go back and tweak those operations – nothing is ever permanently applied or locked to a particular layer.

To apply a filter to the Picture layer, look in the Inspector window again. There is a section labelled Layer Effects. Click on “Enable Conduit effect”:

radi-inspector-layereffects.png


You’ll see a yellow tone being applied to the picture layer. This is just a default effect. It’s included in Radi as a starting point (so that you can see something happen when you first enable the Conduit effect for a new layer). Click on Edit in Conduit Editor, and it opens the editor showing the nodes that make up this default effect:

radi-conduiteditor-defaulteffect-crop.png

If you’re not in too much of a rush to move ahead, you can spend a moment experimenting with this default effect. Click on the Saturation node, and the node’s properties are shown in the bottom left-hand corner of the Conduit Editor. Drag the Saturation slider, and you’ll see the effect’s saturation change in the document.

We’ll create a new effect from scratch, so let’s delete these effect nodes from the default. Drag a selection rectangle with the mouse by clicking above and to the left of “Channel Mixer”, then drag down and to the right so that the three nodes in the middle become selected. Press Backspace and they’ll vanish, leaving just the Input and Output nodes.

To give you an idea of where this is going, here’s the final result:

radi-elementstutorial-imagewitheffect.png


The black lettering has been colorized and filled with a red-orange glow. (Cheesy, perhaps, but expressing one’s adoration of HTML5 animation software does call for this kind of treatment.) To create a look like this in Photoshop, you might use its ready-made “layer effects” such as Inner Glow. In Conduit, you don’t need to settle for the limited creative options of having a bunch of preset effects whose parameters you can tweak, as layer effects can be created from scratch. Let’s see how.

To colorize the black lettering, let’s first bump up its brightness into a light gray – this makes it easier to control the color separately from the brightness. The Levels node works great for this; it’s essentially a generic tool for tweaking the black and white points of an image, and as such can be used for all kinds of precise brightness and contrast adjustments.

Create the node by dragging the Levels icon from the node box in the top left-hand corner of the Conduit Editor. (The nodes are listed in alphabetical order, so you’ll need to scroll down the list to find Levels.) As you drag into the Conduit Editor’s editing area and release the mouse button, a new Levels node appears. However it’s not connected anywhere yet, so it doesn’t have any effect. Connect it between the Input and Output nodes: first, drag from the “socket” on the bottom side of Input node into the socket on the top side of Levels; then do the same to connect the bottom socket of Levels into the top socket of Output.

You should now have the following node setup:

radi-conduiteditor-levels.png


Click on the Levels node to view its parameters, as shown in the above screenshot.

The Levels node’s parameters actually include two kinds of levels, and with these four sliders, it’s possible to do very precise brightness and contrast manipulations. ‘Input black’ and ‘Input white’ are the input levels; they determine the levels within the original image that should be mapped as the black and white points. So, if you want to increase contrast, you’d tweak these two. ‘Output black’ and ‘Output white’ are the output levels; they determine the black and white that are rendered in the output. To decrease contrast, we’ll tweak these two.

In this case, we want to turn black in the original image into a light gray. Hence, we’ll tweak the Output black parameter. Drag the ‘Output black’ slider to the left by about 3/4 of its length. As you drag the slider, you’ll see the picture layer become lighter. (The value shown for the parameter should be about 0.75, but this is not too exact, so you don’t need to type it in manually.)

Now we’ve made the entire picture lighter, but what we wanted was to only affect the black lettering. To exclude the Radi logo, we can crop the modified image. Create a Crop node in the same way as for the Levels node above, then connect the new Crop node between Levels and Output. Select the Crop node and drag the slider labelled ‘Right’ to a value of approximately 0.46. As you drag the slider, you’ll see the Radi logo cropped out.

Great, but now we’ve lost the Radi logo entirely. How do we get the original version of the logo back? The simple way is to composite this modified image on top of the original one. Create an Over node and place it below the Crop node. Then make a connection from the Crop node’s output into the Over node’s first input socket (called ‘foreground’), and connect the Input node into the Over node’s third input socket (called ‘background’). Connect the Over node into the Output node. (By the way, another way to view a node’s output is to double-click on the node. It becomes highlighted to remind you that you’re viewing the output from a particular node rather than the Output itself.)

There’s one more thing. A black fringe is visible on the outside of the lettering. This is because the compositing has affected the transparency information of the image. To eliminate the fringe, we can restore the original transparency (a.k.a. alpha channel, a.k.a. matte) using a Set Matte node. Create the node and place it below the Over node. Connect Over into Set Matte’s first input, and the original Input node into Set Matte’s second input. Here’s a screenshot of what the whole thing looks like:

radi-conduiteditor-levelsandover.png


If you click on Levels again and drag the ‘Output black’ slider, you’ll see the brightness of the letters change between black and white, while the Radi logo remains unaffected.

Next, let’s add some color to the letters. An easy way to colorize images is to use the Multiply node. It’s like placing a colored filter in front of a camera lens: if we multiply by red, the resulting image will contain only the red color information from the original image. In this case, we’ll use a bright orange color as the “filter”:

radi-conduiteditor-levelsandmultiply.png


Create the two new nodes, Multiply and Color, and connect them between Levels and Crop as shown above. Select the Color node and change the red / green / blue parameter values roughly as in the above screenshot (red 1.68, green 1.06, blue 0.48). This example highlights an important feature of the Conduit environment: it supports high dynamic range (HDR) color values everywhere. You can easily create a color that contains values “above white” – in this case, the red and green channels which are above one – and it doesn’t get clipped to the standard range of 0 to 1 unless you so specify. The usefulness of this kind of color values is that pixel values are not constrained, but instead can be manipulated more like actual light. In this case, by multiplying with a “superwhite” color, we’re essentially adding more light to the image rather than just filtering out some of the color. (In traditional 8-bit image processing apps like Photoshop, the “multiply” blending mode always makes the source image darker, because these apps don’t allow high dynamic range colors.)

Now the letters have a solid orange color. The only thing missing from the final look is the glow inside the letters. Create a Gaussian Blur node and connect it between the Input and Levels nodes, then adjust the blur’s ‘Blur amount’ parameter to a value of about 37:

radi-conduiteditor-gaussianblur.png


Here we see another interesting side effect of the “superwhite” orange color: when it is applied to the blurred image, the color has a rich red tone. To see what the color would look like if Conduit didn’t support HDR colors, you can change the Color node’s red and green values to one. The result will be a dirty brown-green. That’s how this effect would look like in a traditional non-HDR imaging system.

Now that you’ve created this effect once, it could easily be applied to any other layer. The effect can be saved either as a .conduit file (using the File menu) or as an effect favorite which is directly accessible in the Favorites menu. You can find these menus in the top right-hand corner of the Conduit Editor window. If you want to experiment with some other looks for this layer, there is a bunch of readymade favorites in the Favorites menu too.


There’s one more thing left to do for this image before we move on. Since this image is placed in the top right-hand corner, it might be nice if it were aligned to that corner also in the browser, regardless of how the user’s browser window is sized. This can be achieved by changing the element’s automatic layout in Radi. Click on the Image element in the Timeline’s layer list, then look in the Inspector for the Automatic Layout / Alignment setting:

radi-element-autolayout.png


Change the alignment values to ‘Right’ and ‘Top’. Now, if you press Cmd+B (or click ‘Preview’ in the toolbar) to view the document in a web browser, the image should be aligned in the specified corner.


From still image to moving video

Under construction.


From static video to dynamic canvas

Under construction.



This was Chapter 3 of the book Learn HTML5 Multimedia With Radi.
← Go to the previous chapter