iPhoneography Apps: Pixelmator Part 3 – Layers and Selections

In Part 3 of my series on Pixelmator, we’ll look at different sources for layers and glance at selection tools as well. I’m covering a lot of ground here, with over 40 screenshots of the app, so let’s get started.

We’ll begin with the same image of candles we used in the overview. Over on the left is the Layers palette, and on the right top is a + sign used to add layers from different sources. (Remember, if you swipe down on the Layers palette, another + sign will appear that allows you to add a blank layer.)

Pixelmator_Layers_01

The + sign at the upper right drops down a menu. At the top of this menu are four buttons, which differentiate between the four types of sources for your additional layers. The first (the camera) is used to add a layer from your photo library. In addition, you can always take a new photo using the camera – but how much use is that?

Pixelmator_Layers_02

The second button provides you with many options to fill an entire layer. There are four options on this portion of the drop-down menu, and you can see by the four dots at the bottom that there are four scrollable sets of additional options. The rectangle broken into smaller squares represents a blank layer, just as the + sign in the Layers palette provides. If you have copied an image from another app into the clipboard, you can paste it as a new layer here. There are also options for plain white and black layers.

Pixelmator_Layers_03

I do not show the second set of options, which are merely six different colored backgrounds. The third section, shown below, is a set of gradients.

Pixelmator_Layers_04

The fourth is a set of patterns, shown below. The choice is limited and the size is not adjustable. By the way, if you continue to scroll the selections past this fourth one, it will scroll back to the beginning, just as with all sideways-scrolling menus in Pixelmator.

Pixelmator_Layers_05

I chose a gradient, and it was added as a new layer, filling the entire image. You can see the new layer in the Layers palette. The handles on the sides, top and bottom of the gradient allow you to change the size of the layer.

Pixelmator_Layers_06

Below I’ve used the handles to resize the gradient layer. The resizing is not reflected in the Layers palette until another layer is selected, “committing” the resize.

Pixelmator_Layers_07

Below I’ve used two fingers to rotate the gradient layer. As I stated in the overview, rotation can be somewhat difficult to accomplish; Pixelmator has trouble distinguishing between a two-fingered zoom and rotation. Once it’s rotated, that is reflected in the thumbnail in the Layers palette, where you can see the tilted gradient surrounded by the transparent “squares” background.

Pixelmator_Layers_08

There are several ways to change the Style or Format of a layer, and there are two ways to get to the various styling methods. The first is by double-tapping the layer in the Layers palette, then selecting Style in the resulting menu bar.

Pixelmator_Layers_09

The other is to tap the Paintbrush icon in the top menu, then Format at the bottom.

Pixelmator_Layers_10

Either way, you get the drop-down menu seen below. In the overview, I used this method to change the Opacity and Blend mode of the layer. Below I’ve turned on Fill, which overlays the visible pixels in the layer with a color or gradient.

Pixelmator_Layers_11

Tapping the Color indicator under Fill brings up a color palette. Predefined colors are shown at the bottom, or you can select a color using the color picker square at the top.

Pixelmator_Layers_12

Selecting Gradient at the top allows you to define your own gradient fill or select from various options at the bottom. The square at the top shows you a representation of the selected gradient. The slider immediately below that is used for color selection. You can tap either of the buttons shown to access a color picker, and you can tap along the line to add a button.

Pixelmator_Layers_13

Below the gradient color selection slider are three buttons for types of gradients: Linear, Rotational and Circular. Below you’ll see a representation of the Rotational gradient. On either the Linear or Rotational gradient you can make use of the Angle slider – but it obviously doesn’t change the Circular gradient.

Pixelmator_Layers_14

Below you’ll see the circular gradient.

Pixelmator_Layers_15

Notice, however, that the Fill Gradient is not reflected in the thumbnail of the layer in the Layers palette. Styles are not shown in the Layers palette, and the thumbnail reflects the original Linear blue gradient rather than the Circular Fill gradient.

Pixelmator_Layers_16

I like the original gradient. I could go back into the Style/Format menu and turn off Fill. Instead, I tapped the Undo button at the top left. Below you’ll see a representation of what happens when you hold the undo button. A small menu show up to allow you to undo the immediately prior step (Rotate) or redo the recently undone step (Fill).

Pixelmator_Layers_17

The next entry in the Style/Format menu is Stroke, which outlines the layer. You can set the width of the stroke and the Color/Gradient of the stroke.

Pixelmator_Layers_18

The close-up below shows that the stroke is applied evenly to the inside and outside of the border of the non-transparent pixels of the layer. This results in rounded corners, and there is no way to adjust the application of the stroke.

Pixelmator_Layers_19

The next option in the Style/Format menu is Shadow, and switching Shadow on brings up controls for the Color, Offset, Blur and Angle for a drop shadow applied to the layer.

Pixelmator_Layers_20

The Offset controls how “far away” the layer is from the background; a larger offset produces a shadow that extends farther from the layer.  Angle changes the angle of the light that produces the shadow.

Pixelmator_Layers_21

Blur produces a shadow that’s less harsh, as might be produced by indoor lighting.

Pixelmator_Layers_22

Below I’ve left the Shadow on and activated the final option, Reflection, which defaults to 50%. You can begin to see the tilted rectangle “reflected” immediately below the lowest corner of the rectangle. Notice that the Shadow is not reflected; Stroke and Fill would be reflected if they were applied.

Pixelmator_Layers_23

There is only one slider for Reflection – an Opacity slider. The reflection is not modifiable in any way other than opacity.

Pixelmator_Layers_24

After Import Image and Rectangular Object options, the next option for a new layer is Text. Hitting the large T at the top of the Add Layer menu results in a scrollable list of thumbnails for 18 different fonts, in black. Font and characteristics are changed after the text is added.

Pixelmator_Layers_25

Double-tapping the word “Text” brings up a keyboard to allow you to change the text.

Pixelmator_Layers_26

Pulling up the Style/Format menu while a text layer is active (outlined in blue in the Layers palette) shows a new set of format changes exclusive to text – Font, size, spacing, etc.

Pixelmator_Layers_27

Tapping Font brings up a list of fonts installed on the device. Those marked with the “info” icon have other options available for your use, such as bold, italic or condensed.

Pixelmator_Layers_28

Size can only be adjusted with the arrows; the point size cannot be entered directly. Also, the maximum size is limited by the bounding box around the text. If you have a problem expanding the size, use the handles on the bounding box to expand it, then increase the size using the arrows.

Pixelmator_Layers_29

You can change the color of the text or apply a gradient. Below I’ve changed the font to Zapfino and added a rainbow Rotational gradient.

Pixelmator_Layers_30

Just as with any other layer, you can add Styles to your text layer. Below I’ve added a 2 pixel black stroke to my example text.

Pixelmator_Layers_31

I added a drop shadow to the text, made it larger and repositioned it before moving on to the last option for new layers, Shapes. Shapes can be treated just like the rectangular layers, and you can move them around and add various styles. But they can also be used as “cookie cutters” for other images by using the selection tools – and that’s what I’ll be doing here. I start by loading the image I wish to “cut” as a new layer.

Pixelmator_Layers_32

You see the shapes that are available in the menu; scrolling sideways does not give you any new shapes, but change the color of the shapes. On the image you can see that I’ll be using the Heart shape to “cut” my image.

Pixelmator_Layers_33

I add a blue heart Shape layer above the added image.

Pixelmator_Layers_34

Using the handles, I resize the heart to fit the image. When you resize an image using the handles, the proportions of the image are constrained, so that no stretching of the image occurs. When you resize a shape, there are no constraints. The heart is able to stretch to cover the rectangular image.

Pixelmator_Layers_35

Now I have to select the heart and use that selection to cut the image. Select is found under the Paintbrush (Tools) icon.

Pixelmator_Layers_36

There are four selection tools: Free, where you draw around a selection; Elliptical, Rectangular, and the Magic Wand, which selects pixels of similar color. Since the heart shape is all blue, I’ll choose the Magic Wand.

Pixelmator_Layers_37

As I drag my finger across the heart, a purple overlay shows the pixels I have selected. But it’s selecting the rectangle also! The Magic Wand selects from all visible layers, and cannot be used to select from just one layer unless the other layers are hidden.

Pixelmator_Layers_38

I go to the layers palette and hide the rectangular layer, and reselect the heart using the Magic Wand.

Pixelmator_Layers_39

I return to the Layers palette and select the layer that holds the image I wish to cut. Double-tapping the layer brings up the menu bar, which includes Duplicate. Duplicate only copies the selected pixels within the layer.

Pixelmator_Layers_40

Now I’ve got a layer which only contains the image in a heart shape. I can discard the original image layer and the Shape layer, since I won’t need them again. If you look at the Layers palette below, you’ll see I’ve already done that cleanup.

Pixelmator_Layers_41

I can then move the image into place over the rectangle. But it covers part of the text.

Pixelmator_Layers_42

Layers can be rearranged by dragging the layer within the layer palette. By dragging the Text layer above the image layer in the stack, the text overlays the image in the workspace.

Pixelmator_Layers_43

Using the Style/Format menu, I add a black stroke and a shadow to the heart-shaped image. I also remove the Reflection attribute of the rectangle layer, as it was unnecessary clutter. Here’s my finished example image.

Pixelmator_Layers_44

Pixelmator can do a lot, but there are certain things I wish it could do better. Selections could be improved, in my opinion. The Magic Wand could be adjustable on the range of colors selected, and all selections could use the ability to be feathered for a softer edge.

Feathering can be accomplished by duplicating an entire layer, and erasing the unwanted pixels with a soft-edged eraser – but that is needlessly complicated.

Next time we’ll be venturing into uncharted territory, as I venture into using brushes, smudgers and erasers. Please be kind to this non-artist as he tries to show artists what Pixelmator is capable of! Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: