Creating a Web Console in PhotoPaint 10

Open a new document : 300 x 500 (w x h), white background.

Select the Path Tool and generate the path according to figure 2 (I started at top-left, working clockwise).

From the Paths Docker, set the Path to a Mask and hide the Path from view. From the Channels Docker, create a channel from the mask, rename it 'original console'. Finally, from the Objects Docker, create a New Object.

Press 'F' to select the Fill Tool, right-click 50% black from the palette and fill the new object. Remove the mask and rename the object, 'console'.

Save your work. We're almost ready to use the brushes, so prepare yourself! But first, we'll create another object to serve one of our brush strokes.

Create another object via the Docker and 'clip' it to the 'console' (figure 3).

If you've not used this feature before, it is known as 'Clip to Parent'. What it does is it becomes a 'child' to the object below it in the docker and whose pixel information is made visible by the non-transparent element of the 'parent' (here, the 'console' object). Therefore, when we use a brush on this clipped object, the stroke will be visible according to the 'parent'. Very helpful for softening or 'faking' an edge, like we're doing here.

(I suggest you resize your document window to be about 1/2" larger of all four sides for doing the strokes.)

Below are the settings for the Paint Tool (F5) | Art Brush, as well as the beginning and end stroke to get the first round of 'shading'.

If you're not accustomed to using a brush and/or using a mouse to commit fluid strokes, PhotoPaint has a nifty addition, namely, using the 'alt' key to get nice straight lines. As you can see from the figures, above, it is simply a matter of picking a spot on the object, clicking once to create a 'point A', then moving the mouse to 'point B' and alt-clicking.

Because of this two-step process for creating a single brush stroke, consider using the Undo/Redo Docker or setting your 'levels' of undo to 2+.

To stroke this console with some level of precision, I have intentionally asked to set the size of the brush nib to 60. From figures 5 & 6, above, you can see that the nib size is half 'on' and half 'off' the console. Keep that in mind when doing the rest of the console.

Use half the brush size to shade the top, left, and bottom of the console (of course, you'll need to freehand the curves at the bottom). But, when you get to the right hand side of the console, only place a quarter of the nib's width onto the console to shade it (figure 7).

Now to add the white strokes. As you can see, there are two objects that make up the white shading : one is for a general shade that serves to 'curve' the shape; the other is a more sharp contrastive element to define the light bouncing off the top-left and bottom-right corners. Each of these will be independent objects, both using Clip-to-Parent. Rename them 'white strokes' and 'small_white_strokes' (figure 8).

Let's start with the 'white strokes' object. This time we'll use the Spray Can according to the settings in figure 9. Click on 'white' for the paint color and use the 'click...alt-click' procedure we had done for the black shading, above.

For this stroke use the top-left corner as 'point A' for both the vertical and horizontal strokes. What is more, use the inside edge of the black stroke to center the placement of the nib for the white stroke. This will ensure a nice blend transition from black shade to white shade.

Moving on to the 'small_white_strokes' object, reduce the nib size to '18' and stroke the top-left corner, then reduce to '14' and do the bottom-right corner. For a tip, stroke it as though you were (carefully) erasing a small area on a piece of paper. Save your work.

At the end of our exercise there is going to be a small section devoted to touching up the console. One element I decided to 'touch-up' is the long white strokes, and to do so with a Gaussian Blur. We could change it now but I think it's more appropriate to do so when we have all the components in their place to more accurately determine how much blurring is necessary, if at all.

We're now going to create the black 'panel' that is on the right-hand side of the console. To do this, we need the 'console' object selected.

Press 'R' for the Rectangle Mask tool, click and drag a selection like the one in figure 11. Press 'M' for the Mask Transform tool, click inside the mask once to change it to 'rotate', and rotate it clockwise (figure 12). Double-click inside the mask when you're finished rotating.

Double-clicking outside of a transformation will remove it; double-clicking inside will commit it.

Before we make an object from this selection, let's use it to update our existing channel, 'original console'. Right-click 'black' to set the fill color, click on the channel and press 'delete' (it will fill with black).

Now click on the 'console' object again and Ctrl Sh UpArr to cut out a new object. Name this new object 'black panel right' and move it below the 'console' object.

Let's make 'shadows' for each of these objects and adjust the black panel a bit.

In the Objects Docker, select the 'console' object and shift-select the 'black panel right' object. 'Ctrl D' to duplicate them and rename them according to figure 13. Once done, adjust their respective positions (figure 13).

Enable 'Lock Object Transparency' at the foot of the Objects Docker, select the 'console shadow' object and fill it with black. Select and do the same for the 'black panel shadow' object.

Select the 'console shadow' object, go to Effects | Blur | Gaussian Blur..., set the radius to 4.0 and commit it. Select the 'black panel shadow' and press 'Ctrl F' to repeat the blur.

Ctrl-select the 'console shadow' in the Objects Docker, switch the Merge Mode from 'Normal' to 'Multiply' and reduce the Opacity to '80%'.

Wouldn't it have been easier to use the Interactive DropShadow tool? In a word, Yes. My personal opinion is that PhotoPaint's drop shadow tool needs a better feather transition (the gaussian blur effect) and the ability to change the Merge Mode of the shadow. Until it acquires those two elements, I prefer making shadows the old-fashioned way (I simply wanted to make you aware that my stubbornness need not be your methodology).

Finally, select both the 'black panel' and its shadow then use your 'arrow' keys to nudge them 'up' and 'left' of their current position. The result will be something like figure 14. Save your work.

Up to this point, we have taken care of the bulk of the Console's 'look'. Outside of a few issues of touching it up with color and blending the shading elements, it's a done deal.

What we will do now is create the attributes to make it both functional (text and lines) and colorful (buttons!). We'll start with the text, then add some lines, and move on to some very interesting buttons to go with these.

Press 'F8' for the Text tool and from the property bar, choose the following : Kabel Ult BT, 24pt and click 'white' for the paint color. Click on the document and type 'home'. Continue to click and type the words of figure 15, then select the Object Picker.

To quickly distribute the text elements, the following : Place both 'home' and 'contact' where you will want them. From the Objects Docker, select the top-most text then shift-select the bottom-most. Press 'Ctrl A' to bring up the 'Align and Distribute' dialog box. Align should have the 'left' checkbox checked with the 'To Active' radio button selected. Distribute should have vertical 'spacing' 'to extent of selection'. In other words, if you have the 'preview' eye selected, your text will be justified left and spaced evenly. Click OK.

Any necessary last minute tweaks to the text should be done now. Whatever the case, once you are done, select all the text elements again. Combine them (Ctrl Alt DnArr), duplicate them (ctrl D), and nudge them up and left, 1 pixel each direction. Right-click on 'black', go to Edit | Fill..., click on 'Lock' then click OK. Result? Black text on top of offset white text. True? Good. We move on, then.

Now comes the lines that go between the text elements. There will be only a small deviance when creating the lines based on how we created the text.

Click on 'white', press 'L' on the keyboard for the Line tool. From the property bar, set the 'shape width' of the line to '1' and enable 'renders the shape to an object or selection'. Click and drag a white line that extends beyond the console (figure 16).

A Clip Mask will remedy the extra length while giving us the flexibility to adjust the lines whenever we want; it will be covered below.

Press 'O' on the keyboard and position the line so that it is between 'home' and 'products' then 'ctrl D' 5 times. Ctrl-click and drag one of the lines down between 'login' and 'contact'. Select all the lines in the Objects Docker. 'Ctrl A' for the Align and Distribute dialog and distribute the lines to the extent of the selection. With that out of the way, tweak the spacing between the lines as necessary before you combine them (next).

From the Objects Docker, select all the lines and press 'Ctrl Alt DnArr' to combine them. Finally, 'Ctrl D' to duplicate the whole array. Rename the objects, 'black lines' and 'white lines', respectively.

With the 'black lines' (top object) selected, fill with 'black' (don't forget to lock the transparency of the object). Use the UpArr key to nudge 'black lines' up 1 pixel. Save your work.

Great. What follows now is the need to remove the extraneous elements from the lines all the while keeping the appearance of contiguity with the lines and the edge of the console (figure 18). Our best bet to do so is with a couple of Clip Masks.

Go to the Channels Docker and load 'original console'. From the Objects Docker, select both 'black lines' and 'white lines', right-click on one of the their thumbnail icons (important!) and choose Create Clip Mask | From Mask. 'Ctrl Sh R' to remove the mask.

This technique ensures that the contour of the console is going to be used to accurately 'clip' the visibility of the lines. What's great about using Clip Masks in this context is the lines are still available for editing. So, if you wanted to shift them to the left a bit, you could without a problem.

After working in gray all this time we finally come to the point where we will be adding some color. Likewise, this is the point where I'm able to introduce to you one of PhotoPaint's built-in plug-ins, KPT ShapeShifter.

Begin by adding a new object to the Docker. Press 'J' for the Ellipse Mask tool. From the property bar, change the Mask Style to 'Fixed Size' then set the width and height both to '24'. Click to the left of the 'home' text as in figure 19. 'Ctrl H' to hide the mask.

Go to Effects | KPT5 | KPT5 ShapeShifter.... When the initial interface kicks in, go straight for the favorites icon (it looks like a heart, bottom-left) and choose 'Basics', 'Glass (Blue)', then click the 'check' mark to return to the interface.

If this interface is new to you then it is no small thing to take it all in. I'd like to spend just a few sentences dissecting one of its output screens and have it serve as an overview for manipulating the rest of the outputs (according to figure 20).

• Clicking to the right of #1 will open the extra white area (#4); the white area is there to inform you of the current setting (#6), and allows you to more precisely set the percentiles relative to it (#5) while giving you the numeric reading (#7).
• The text of #7 is according to that which is selected under #3. When the text under #3 is in play, it will be 'white'. Using the sliders in this area will change the percentiles by whole numbers, whereas using the slider of #5 will add decimal values.
• Finally, #2 (in this example) is a color chip by which you may click and drag along the black/white and/or hue/saturation values at will. Many of the dialogs do have a color chip but not all. Keep in mind that, in this same area there are some dialogs that will have an 'eye' opened or closed (see the 'Glow' or 'Shadow'); clicking on this 'eye' will simply turn 'on' or 'off' the output's effect.

Now, with this overview, what follows are a set of lists to (try to) make it easier to put in the correct input and not confuse you in the process!

For the 'Main Shape' input (figure 21), the following :

• Bevel Masking = 'checked'
• The first of the three 'levels' buttons will be used (it is probably selected by default)
• Bevel Scale = 8
• Bevel Height = 42

For the 'Glow' input (figure 22; make sure the 'eye' is open!), the following :

• Color = Black
• Transparency = 40%
• Glow Softness = 2%
• Glow Offset X = -2%
• Glow Offset Y = -2%

For the 'Shadow' input (figure 23; make sure the 'eye' is open!), the following :

• Color = White
• Transparency = 60%
• Shadow Softness = 1%
• Shadow Offset X = 1%
• Shadow Offset Y = 1%

The 3-D Lighting is a little more adventure-some, to say the least. One tip regarding this output...see the light bulb with the '+' sign (for adding lights)? Use the 'Alt' key to change it to a '-' to remove lights.

For the '3-D Lighting' input (figure 24), the following :

• Ambient Glow = 0% (you'll get this option by clicking on the actual 'marble')
• Center Light Source :
  • Light Brightness = 56%
  • Highlight Sheen = 0%
  • Highlight Spread = 100%
• 9:30 Light Source :
  • Light Brightness = 56%
  • Highlight Sheen = 13%
  • Highlight Spread = 97%
• 11:00 Light Source :
  • Light Brightness = 50%
  • Highlight Sheen = 50%
  • Highlight Spread = 87%

Just as we grabbed a preset to begin this trek, so likewise can we add this current setup as a preset. Simply click on the 'heart' and choose 'add preset'. Nifty!

Back to the Console.

'Ctrl H' to make the mask visible again. 'Ctrl Sh R' to remove it. Press 'O' and make sure the newly created button is selected. If so, 'ctrl D' 6 times (for each text element), ctrl-click and drag one of the buttons down to 'contact', then shift-select all the buttons to distribute to the extent of the selection ('ctrl A'). Finally, make any last minute adjustments to the position of the buttons.

To add the large button at the bottom of the Console (figure 25) will take only a couple of tweaks to our existing settings.

Add a new object and press 'J' for the Ellipse Mask tool. Change its properties to read 40 x 40 for the width and height and create a single mask in the appropriate place.

We could 'ctrl F' to repeat the KPT ShapeShifter settings, but I want to tweak one setting to accomodate the larger ellipse. Therefore, open the ShapeShifter again, visit the 'Main Shape' output dialog and change the Bevel Scale to '16'. Click OK. Remove the mask and adjust the button accordingly. Save your work.

How about we color the console and touch-up the relationship of the shading elements to the console?

I mentioned above that the 'white strokes' object was too strong in character from my perspective. But I waited to change it in order for us to have a look at it with the text and buttons now in play. To get the look found in figure 26, select the object, open the Gaussian Blur filter and set it to 6.0 pixel radius. Likewise, in the Objects Docker set the Merge Mode to 'Add' and the Opacity slider to 40%.

Take the 'black strokes' object and change its Merge Mode to 'Overlay' at '80%' Opacity.

Select the 'white lines' object and shift-select the 'white text' object, then choose 'Add' for their Merge Mode and '40%' for their Opacity.

Finally, select the 'console' object itself, go to Image | Adjust | Channel Mixer and add the following settings :

• Color Model = RGB
• Output Channel = Red
  • Input Channels : Red = 140; Green = 0; Blue = 0
• Output Channel = Green
  • Input Channels : Red = 0; Green = 90; Blue = 0
• Output Channel = Blue
  • Input Channels : Red = 0; Green = 0; Blue = 90

This concludes the work for the 'Console'. The key players that really gave some punch to the project were the use of brush strokes and KPT's ShapeShifter tool. The controls alone warrant their own study and were only touched upon, here, to get the user up and running with the actual project.