New terms from treehouse – Photoshop Foundations Part 2 – Type Tools, Vector Shapes, Slices and Saving for Web, and Workflow Basics

Type Tools

Creating and Editing Type

Use the Type tool (t) to add text. Once selected, the cursor will turn to the familiar text I-beam symbol. There are some other options here, the first two change the orientation, the second two turn your text into masks.

Screen Shot 2014-11-11 at 2.34.22 PM

There are two way to add text – 1 Point text, click and start typing. It will flow on one line and off the document if it goes past the canvas size. You can add new lines with the return key. You can reposition it by clicking away and dragging. 2. Area type, click and hold make a box, which the text will remain inside of. Once again you can reposition by clicking and dragging outside of the box. Confirm the type by clicking the check box in the options bar.

Screen Shot 2014-11-11 at 2.39.24 PM

Note that there are the normal font options here as well. The fonts available to you depend on the ones you have installed.

To reselect a text box, click on it with the type tool. You can resize by dragging on the tT icon next to the font size as well. If it’s in point (pt), and you’re doing web design, you should change it to pixels instead by going to Photoshop > Preferences > Units and Rulers. Change both type and rulers to px.

Screen Shot 2014-11-11 at 2.43.55 PM Screen Shot 2014-11-11 at 2.45.54 PM

The next option affects anti-aliasing. This adds transitional pixels on the edges, blending the font with the background.

Screen Shot 2014-11-11 at 2.46.25 PMScreen Shot 2014-11-11 at 2.46.43 PM

The next few options are text align, font color, and to warp the text into a shape. You can choose a style, then adjust it with the options below.

Screen Shot 2014-11-11 at 2.48.14 PM

Screen Shot 2014-11-11 at 2.49.24 PM


Character and Paragraph Panel

These panels provide more options in addition to the type tool option bar. Select them under the menu option Window.  For the character panel. you can hover over the icons to the left and click and drag to adjust them, like you can for the font size in the type options bar.

The first section lets you choose font/font style. The second is for size and spacing. Here, first is font size. Next is letting, which is the vertical space between lines of text. After that is kerning, which adjusts the space between two specific characters. To adjust that, you’d use the cursor to select a spot between two characters first, then adjust the value. Next is tracking, which is for the overall spacing between all the characters. To adjust this, you would first need to select a range of characters.

The next section is for transform options, to make the text taller, wider, adjust the baseline and the color.

The last selection is for making selections faux bold or italics, all caps, all lowercase, superscript, subscript, underline and strikethrough. Finally, there’s an another anti-aliasing option.

Be careful with the faux bold/italics, and vertical/horizontal scaling options, as these are simulated effects and not part of the typeface.

Screen Shot 2014-11-11 at 2.54.33 PM

Screen Shot 2014-11-11 at 2.58.03 PM Screen Shot 2014-11-11 at 2.57.43 PM

The paragraph panel lets you change the formatting of columns and paragraphs. The first section is for alignment and justification. The second is for indentation, and the third is for setting an indent for the first and last lines of the text. Lastly, you can choose whether text hyphenates.

Screen Shot 2014-11-11 at 3.01.53 PM


Type Layers and Smart Objects

When you add text, it appears as a layer and is marked by a T symbol. But what if you want to add an effect, like a blur? You’ll get an error saying the type has to be rasterized first, and will no longer be editable. Click Rasterize to do this.

Screen Shot 2014-11-11 at 3.09.08 PMScreen Shot 2014-11-11 at 3.09.16 PM

The layer no longer has the T thumbnail, and now has a checkered one. You can no longer edit the text.

A better way to do this is to convert to smart object, which you can also do by right clicking and selecting the option. We can now apply the blur with no error message popping up. You’ll notice the thumbnail is different now to. Double click on it to open a new document window for the smart object. Here you can edit the text to something different and save it. You can disable the filters on the object like you would any other layer using the eye icons. Another good feature is that you duplicate the type and make an update to it, it will duplicate in all instances.

Screen Shot 2014-11-11 at 3.13.47 PM Screen Shot 2014-11-11 at 3.12.33 PM


Typing on and In a Path

You can type in/on vector shapes. First create a path with the pen, shape or line tool.  Here we’ll use the shape tool. Make sure path is selected under the options bar before drawing. Draw it on your canvas.

Screen Shot 2014-11-11 at 3.20.22 PM

Next, select the type tool and hover over a shape. You’ll see the I beam get a wavy line in it, letting you know that you’re going to apply the text over a path. Click and start typing.

Screen Shot 2014-11-11 at 3.22.16 PM

You can use the direct selection tool (a) to adjust how it follows the path. Use the character panel to affect the tracking and such to make it fit better.

To add text inside of a path, click the text cursor inside of it.

Screen Shot 2014-11-11 at 3.26.02 PM


Vector Shapes

Using Vector Shapes

The vector shape tools are the third group on the lefthand toolbar. They are the pen tool, type tool, direct selection tool and shape tool. There are a bunch of shape options.

Screen Shot 2014-11-11 at 3.29.54 PM

In the options bar you can chose whether you want to make a vector shape, a working path or a rasterized pixel shape.

Screen Shot 2014-11-11 at 3.30.43 PM

To create a shape, either click on the canvas and it will ask you to define its dimensions, or click and drag. Holding shift while drawing it will keep its aspect ratio. The thin line is the path, a line only visible when the shape is selected. The anchors are the dots with handles on the end for adjusting the shape.

Screen Shot 2014-11-11 at 3.33.50 PM

To show/hide paths and anchors, use Command + Shift + H. You can adjust the fill and stroke outline/width in the options bar. You can then choose whether the stroke is dotted, dashed, etc.

The button after the dimensions affects what happen when you go to draw a new shape, like create a new layer.

Screen Shot 2014-11-11 at 3.36.39 PM

Screen Shot 2014-11-11 at 3.37.28 PM

You can combine them, or subtract them which makes the new shape act as a mask. Intersect makes it so that is where the mask is. The exclude option hides the parts that overlap.

Screen Shot 2014-11-11 at 3.38.55 PM Screen Shot 2014-11-11 at 3.38.41 PM Screen Shot 2014-11-11 at 3.39.46 PM Screen Shot 2014-11-11 at 3.40.06 PM

You can manipulate them individually with the direct selection tool (a).

To merge them all into one, select Merge Shape Components.

Screen Shot 2014-11-11 at 3.41.46 PM

If you select the custom shape tool, then the shape option in the tool bar > gear, you can see some preset shape options.

Screen Shot 2014-11-11 at 3.42.58 PM

If you choose one, it will ask you to append or ok the new shapes. Append will add them to the shapes in the box now, while ok will remove those and just add the ones you’ve just selected.


Pixel Snapping and Hinting

Start by making sure you have pixel grid turned on under View > Show > Pixel Grid. This grid only appears once you’ve zoomed in past 600%. It gives you an idea of where your vector shapes are in relation to photoshops pixel grid. Even though vectors are made of paths, not pixels, this still affects how it looks.

Here we have a icon, that’s showing some signs of anti aliasing. This is often apparent on vertical and horizontal lines. You can fix this with the Align Edges option, under the options for the shape toolbar.

Screen Shot 2014-11-11 at 4.05.51 PM  Screen Shot 2014-11-11 at 4.09.03 PMScreen Shot 2014-11-11 at 4.08.36 PM  Screen Shot 2014-11-11 at 4.08.49 PM

Still, this tool isn’t perfect, we can still see some unwanted aliasing at the bottom. They’re appearing gray because it’s supposed to be half a pixel.

Screen Shot 2014-11-11 at 4.10.22 PM

To fix this, use the direct selection tool (a) and select the start and end anchors for the grey ones on the top. You can then move it, but it moves it a whole pixel and we need it to be half a pixel. To do this, we need to turn off pixel snapping by going to menu > Photoshop > Preferences > General > Uncheck Snap Vector tools and transforms to vector grid.

Screen Shot 2014-11-11 at 4.14.15 PM

You can now move the path how you like. The closer you’re zoomed in, the more control you have. This process is called pixel hunting.

Be careful when adjusting the path of curved or diagonal lines, as these should and will have anti aliasing. End product:

Screen Shot 2014-11-11 at 4.16.55 PM


Custom Shapes with the Pen Tool

Select the Pen Tool (p) from the toolbar, and you’ll see there are a few options.

Screen Shot 2014-11-11 at 4.19.28 PM

Like the shape tool, we can choose whether we want to draw a shape or a path (in this case we’ll do a shape), and the fill. On the canvas, your cursor will turn into a pen with a *, letting you know you’re creating a brand new path. Every time you click it will create a new anchor, and make a path between that and the previous anchor. You should try to use as few anchors as possible – fewer points = smoother curves. To create a curved edge, click and then hold to show the bezier handles, which you can then move around. The longer the panels, the more of a curve you’ll get.

Screen Shot 2014-11-11 at 4.24.17 PM

If you need to move around the canvas while drawing, hold space bar and you can use the hand tool.

If you have rulers enabled (View > Rulers), you can add guides to help make sure you’re making symmetrical shapes by dragging down on the rulers. You can hide/show these with Command + ;.To make a straight line, hold Shift and click.

Screen Shot 2014-11-11 at 4.29.00 PM

When you’re done with your shape, hover over the first anchor point and you’ll see the pen with a little white dot. This is to close the path, and must be done to complete the path. You can now make a new path.

Screen Shot 2014-11-11 at 4.29.31 PM

To clean up a path, use the direct selection tool (a). Click on the path to reveal its anchors, then adjust them like we did before. You can move anchors by clicking on them and dragging or nudge them with the keyboard arrows.

The Add Anchor Point Tool (a) under Pen tools lets you add a new anchor by clicking anywhere on a path, and the Delete Anchor Tool lets you remove them. The Convert Point Tool can be used for a curve you’re not happy with to evenly distribute curves on either side of an anchor. Holding shift makes it more even.

Screen Shot 2014-11-11 at 4.37.24 PM

Once you’re done, you can transform your image with the transform tool (Command+T), add strokes, etc.

Screen Shot 2014-11-11 at 4.45.38 PM

To save this shape for later use, select the Pen Tool (p), right click on it > Define Custom Shape and give it a name. It will now be selectable in the custom shapes option.

Screen Shot 2014-11-11 at 4.47.50 PM

The pen tool can also be useful when tracing the paths of things for masks. Simply draw the path with the pen tool, then right click > Make Selection, then apply a layer mask.


Slices and Saving for Web

Introduction to Slicing

Slicing up a PSD means you’re literally cutting up and optimizing all the graphics and images the developer will need to turn it into a website. We’ll use the Slice tool (c), located under the Crop Tool.

Screen Shot 2014-11-11 at 4.58.59 PM

We’ll be slicing up this site. Things we’ll need to slice include things like the logo, graphical/normal images, buttons, social media icons, the background texture, etc.

Screen Shot 2014-11-11 at 5.00.28 PM

Some of these can just be done in code though, like with border-radius for rounded buttons. You need to slice only what can’t be done with HTML and CSS.


The Slice Tool

Use the Slice Tool (c) and make a bounding box around the logo as close as you can get without cutting it off. You can adjust it after as needed.

Screen Shot 2014-11-11 at 5.12.11 PM

Next, right click on the Slice > Edit Slice Options. Here, you can name it. By default it’s the name of the PS file followed by the slice number. This is awful for the developer though, so give it a meaningful name.

Screen Shot 2014-11-11 at 5.14.19 PMScreen Shot 2014-11-11 at 5.14.32 PM

Let’s keep on slicing.

Screen Shot 2014-11-11 at 5.16.34 PM

For the pictures, we can replicate the stroke with a border, so just slice the image itself. If you need a second slice that’s the same size, simply hold shift and drag on it to duplicate it.

Screen Shot 2014-11-11 at 5.19.29 PM

For backgrounds it may be easier to copy just that to a new file.


Optimization: Part 1

Screen Shot 2014-11-11 at 5.25.19 PM

If each image hasn’t been optimized, this can seriously affect page load times as the images will likely be way larger than they need to be.

We’ll start with the background she made. Don’t go to File > Save As, as that doesn’t let you control the quality. Instead, go to File > Save for Web.

Screen Shot 2014-11-11 at 5.26.42 PM

The main area is the preview window so you can see the effects of your changes.  Above that, with the tabs you can choose whether to see the original, the optimized version, or 2 up, which shows them side by side. You can use the tools on the left to zoom in and move around, to help you see what’s changed versus the original. Remember, the goal is to keep the quality the same with the file size as small as possible. Below the images you can see the file size and things being applied to it, like dither.

On the right you have your compression options, which change depending on the file type you’ve chosen.

Screen Shot 2014-11-11 at 5.31.55 PM

Additional notes:

Gifs/PNG-8 are good for compressing solid-color images and ones with areas of repetitive color. It uses 256 colors and supports transparency. They’re typically smaller due to the reduced color palette, unless they’re being used for animation.

JPEGS were designed to preserve a large color range, retain all color info, and can be compressed by discarding data.

PNG-24 (Portable Network Graphics) has great color too and can handle effects and transparency better than Gifs, though there is a lack of transparency support in older browsers. It also compresses better, often 5-25% so.

Lossless data compressions means you can compress without any loss of quality or information, while lossy may result in that.

Screen Shot 2014-11-11 at 5.36.56 PM

Since our background has few colors, we can save it as a Gif. You can select less colors to make the image smaller. The Lossy control adjusts the amount of lossiness allowed. Increasing the number reduces the color info but greatly reduces the file size.

Screen Shot 2014-11-11 at 5.39.36 PM


Optimization: Part 2

Now to save the rest of the images. First, hide any background layers so our other slices have a transparent background. Then, do File > Save for Web.

Screen Shot 2014-11-11 at 5.42.22 PM

In the preview window, the PSD is faded out, and the slices are more saturated, to show you which ones you’re applying settings to. Use the slice select tool on the left to select the one you want to work on.

Screen Shot 2014-11-11 at 5.49.01 PM

It helps to zoom in for the comparison. Since the logo has few colors and a transparent background, we’ll go with a PNG-8. We’ll add a matte for the background, which fills in the semi-transparent pixels around the graphic’s perimeter with the same color as the background image to make things look more smooth. If you need true transparency and smoother edges though, PNG-24 is better. We’ll reduce the color palette as well. Once you’re happy with it, simply move on to the next slice with the Slice selector tool.

For the actual images, save these as JPEG’s and choose the quality you want for your image/amount of compression. Low is a lot of compression, with less quality. You can also manually change the number for quality on the right.

Screen Shot 2014-11-11 at 5.50.50 PM

Lastly we have the social media icons, which you can select together by holding shift and clicking each. Since they’re simple, we’ll go with PNG-8 again, limit the colors used and add a matte.

Once you’re done, to save them out click Save at the bottom. If you leave it set to All Slices, it will save not just what was sliced but everything around that, so choose User Slices to save just what was sliced.

Screen Shot 2014-11-11 at 5.54.00 PM

They’ll all then be saved where specified.

Screen Shot 2014-11-11 at 5.55.44 PM


Workflow Basics

Managing Photoshop Documents

For a new project, make one folder to work out of, labeled by client. Within that, create the Project folder.

Screen Shot 2014-11-11 at 6.07.24 PM

Screen Shot 2014-11-11 at 6.09.12 PMScreen Shot 2014-11-11 at 6.08.23 PM Screen Shot 2014-11-11 at 6.07.57 PM

Use meaningful names, avoid doing things like adding numbers or using “newest/oldest”.

If you’re designing a web site with different pages that use the same design, use Layer Comps, which let’s you create an save multiple versions of a design in a single master file in Photoshop. You can save new comps and choose which to view in the Layer Comp panel.

Screen Shot 2014-11-11 at 6.11.52 PMScreen Shot 2014-11-11 at 6.11.56 PM

Screen Shot 2014-11-11 at 6.13.07 PM


Becoming Non-Destructive

For images, avoid permanently resizing or altering images from their original state as much as possible, as pixel data can be lost. Instead, be sure to convert them to smart objects first by right clicking > Convert to Smart Object. This ensures the image’s original size remains intact.

For vector images, instead of adding them view File > Open, which rasterizes them, copy and paste them in from another vector editing software, and choose smart object from the prompt. This means they retain their scalable properties, and you can edit them in illustrator and they will auto update where you used them in photoshop.

Convert groups of layers into a smart object to create reusable components and clean up your psd. Shift and click the ones you one, then right click > Convert to Smart Object. Do this for everything that’s used more than once. Remember, if you change the original, all the others used will auto update as well, which is easier than having to go change all of them.

For type, avoid rasterizes, as that means you won’t be able to edit it anymore. Convert it to a smart object instead.

Use adjustment layers for layer effects, as this will put them separate from the layer and let’s you easily hide, show and remove the adjustment.


Time Management

Under Photoshop > Preferences > Performance, you can set how many history states it will remember, which greatly affects performance. The cache levels should be set lower if you don’t have a lot of RAM. Note how much memory you’re letting PS use as well.

Learn the keyboard shortcuts as they will save you a lot of time over time. This is a helpful guide.

PS Actions are a recording of a sequence of actions that you can save for later. There are resource sites you can download these from, or you can create your own by having it record what you’re doing. To access and use them, go to Window > Actions.

Track your time, to see what little things you do that add up and take up time, like checking your email and social media. There are time tracking apps for browsers to help with this.

Advertisements

New terms from treehouse – Photoshop Foundations Part 1 – Workspace, Layer and Mask Basics

Workspace Basics

Menus

Images menu affects whole document, layer just individual layer you’re on. Select let’s you select specific parts. Filter let’s you mess around with filters/textures, etc. View adjusts zoom, etc, and shows/hides tools and rulers. Window contains the panels docked on the right side of the screen.

Cool feature – if you search for something in the menu bar and hover on it in help, it will bring it up for you.

Screen Shot 2014-11-08 at 1.53.05 PM

These videos are apparently out of date. There’s no longer an applications toolbar, here are some shortcuts to use instead.

Screen Shot 2014-11-08 at 1.55.26 PM

The options bar at the top changes for what you have selected in the toolbar docked on the left.

Screen Shot 2014-11-08 at 1.56.42 PM


Toolbars

Hit the two little arrows at the top to switch between a double or single column toolbar.

Screen Shot 2014-11-08 at 2.01.43 PM

If you see a little arrow in the bottom right hand corner, click and hold on that tool to see more options.

Screen Shot 2014-11-08 at 2.02.48 PM

You can see that there are lines, dividing the tools into groups. The first group is the Selections group, which includes the move group for moving layers across the canvas. The second is the Image, editing and painting group, used for touching up, erasing stuff, lightening, blurring, etc. The third is the Vector group, which let’s you draw, select and manipulate vector shapes. The fourth is the General tools, like zoom, hand tool to navigate around the screen, etc. The fifth represent the Foreground and background color selector, with the top square being the foreground. Use the arrows to swap them, and the little box in the bottom left to restore them to their default. The last icon is the Quick mask tool, which is for toggling back and forth between standard editing mode and quick mask mode.

Screen Shot 2014-11-08 at 2.03.48 PM

Hover on a tool to see its name/shortcut.

Screen Shot 2014-11-08 at 2.13.04 PM


Windows and Panels

To add a file, do File > open, or just drag it onto the window. It will open up in a section called the Document window. If you right click the background you can change the color.

Screen Shot 2014-11-08 at 2.17.39 PM

When you have multiple documents open, they’ll appear as tabs at the top. You can rearrange by dragging them, or make separate them by dragging them out.

Screen Shot 2014-11-08 at 2.18.55 PMScreen Shot 2014-11-08 at 2.18.46 PM

You can arrange how these appear under the Window > Arrange.

Screen Shot 2014-11-08 at 2.20.35 PM

At the bottom of the window menu, you’ll see a list of all the documents you have open. The one checked is the active document window.

Screen Shot 2014-11-08 at 2.21.45 PM

On the right side are the panels, which you can expand/collapse with the little arrows on the top right.

Screen Shot 2014-11-08 at 2.22.42 PM

The panels can be moved around, even separated into a new window, which can have tabs of its own, and then drag them back into the right section.

Screen Shot 2014-11-08 at 2.23.40 PM

To save a custom set up of panels, hit the drop down above them > new workspace.

Screen Shot 2014-11-08 at 2.25.51 PM


Layer Basics

Introduction to Layers

Layers are the most important part of photoshop, so much so that they have their own panel and menu in the menu bar.

Screen Shot 2014-11-08 at 2.34.08 PM

The layers panel is on the right, and can be toggled under the Window menu. To turn a layer off/on, use the little eye on the left.

Screen Shot 2014-11-08 at 2.35.46 PM

Create a new layer either with this bottom on the bottom of the panel, by going to Layer > New > Layer, or with the shortcut Shift+Command+N. A pop up will appear letting you name it and select its color.

Screen Shot 2014-11-08 at 2.37.08 PM

Screen Shot 2014-11-08 at 2.39.07 PM

The paint bucket, an option under the gradient tool, can be used to select a color for your layer.

The order of layers is important. The higher the layer is in the list, the closer to the top of the image it will appear. You can group layers together with groups. To create a new group, click the little folder icon next to the create a new layer icon. Click its name to rename it. You can then drag layers into it.

When an entire group is selected, you can move all the layers in that group at once.


The Layer Panel and Blending Modes

The Layers panel is where you manage your layers. If you’re not seeing it, go to Windows > Layers and select it. There are different kinds of layers, such as:

Screen Shot 2014-11-11 at 12.05.05 PM

Click the little icon in the top right, then Panel options. This lets you change how layers are displayed in the panel.

Screen Shot 2014-11-11 at 12.07.39 PM Screen Shot 2014-11-11 at 12.09.23 PM

PS (photoshop) auto names the first layer Background, which has its own set of rules and restrictions. It’s always locked, you can’t move it or change its opactiy, etc.

Select a layer by clicking on it. Info will appear on it at the top of the layer panel. If you have one selected, anything you do in PS will be applied to it, like it you use the paint bucket tool.

Screen Shot 2014-11-11 at 12.12.49 PM

If you click on the Normal drop down, you’ll see your blending mode options. You can also cycle through these by selecting your layer and pressing Shift + +. Opacity affects the appearance of the blending mode.


Layer Styles

Layer styles are one or more effects or blending options applied to a specific layer. Examples include drop shadows, strokes and gradients. To add styles, double click a layer or right click and choose Blending Options. Make sure preview is enabled so you can see your changes in real time. To apply a style, select it in the left side list. You can then adjust the settings for each.

Screen Shot 2014-11-11 at 12.25.02 PM

First we’ll add a drop shadow. Angle affects the direction it drops when the distance is >= 1. If distance = 0, then it will sit evenly around it. Global light means it will inherit the angles from other drop shadows in the document, so they all have the same light source. Spread makes the shadow thicker or denser, and size is how big it will be. Quality let’s you add noise and alter the contours of your shadow.

Screen Shot 2014-11-11 at 12.31.30 PM

Next we’ll add a gradient. We’ll select the black to white one, then set the blending mode to soft white and the opacity to 50%. You can change the gradient style to linear, radial, etc. Reverse switches the direction of the gradient.

Screen Shot 2014-11-11 at 12.31.30 PM

Next we’ll add a Bevel and Emboss effect, which gives an object a raised or depressed look. It has two sub effects, contour and texture. The higher the depth, the sharper the texture, the higher the size the more centered it will be. The shading options let you change the opacity of the shading and lighting, and the angle let’s you change the source of the light.

Screen Shot 2014-11-11 at 12.37.25 PM

To save these layer effects as a preset, click New Style on the right. Make sure to check the boxes for including layer effects and blending options. To apply a preset layer effect, just click styles at the top.

Screen Shot 2014-11-11 at 12.40.00 PM

You can also right click > Copy Layer Style, then right click > Paste Layer style.

You may need to separate the styles into their own layers, which you can do by right clicking them, then Create Layers.

Screen Shot 2014-11-11 at 12.41.49 PM

To remove styles, right click the layer > Clear Layer Styles.


Mask Basics

Introduction to Masks

Masks let us show or hide specific parts of layers without erasing the data. When a part of a layer is masked, it’s visually hidden and protected from any visual changes or effects to the rest of the layer. Unlike erasing parts of a layer, it’s easy to unhide a masked part. Using black will hide parts of the image, and using white will reveal parts of it.

The two kinds of masks we’ll be focusing on are:

Screen Shot 2014-11-11 at 12.48.41 PMScreen Shot 2014-11-11 at 12.49.12 PM

You can mix and match these as needed. Pixel masks are apparently also called layer masks.


Creating and Refining a Layer Mask

A mask can’t be added to a background layer, so right click it and select Layer from Background, which changes the Background to a normal layer. We’ll then use the Quick Selection Tool (w) to select the parts we want to be in the foreground. To unselect, use alt when clicking.

Screen Shot 2014-11-11 at 12.56.07 PM

Then, click the Add layer mask button at the bottom of the layers panel, which looks like a little camera. You can add a red overlay, called a rubylith, by clicking \. It’s also a good idea to add a bright background layer so you can see what edges might not have been masked properly.

She did that by clicking and selecting a foreground color, then using the paint bucket tool on the exposed layer.

Screen Shot 2014-11-11 at 12.56.54 PM

Screen Shot 2014-11-11 at 1.00.50 PMScreen Shot 2014-11-11 at 1.00.55 PM

We can use the Refine Edge option to make that look better. Select your mask in the layer panel, then in the menu bar Select > Refine Mask. The View option lets you choose the colors to help you see the outline better.  Radius determines the size of the selection border in which the edge refinement occurs. A small radius = sharper edges and a large one = softer ones. Smooth creates a smoother outline, and feather creates more of a blur between the outline and its surrounding pixels. Increasing Contrast makes softened edges become harder. Shift edge contracts and expands the selection. Moving them inwards can help remove unwanted background colors from the selection.

Screen Shot 2014-11-11 at 1.03.13 PM

You can click the little paint brush for the Refine Radius tool, which you can use to paint over edges to add fine details.


Masks and the Brush Tool

Click b to select the brush tool, then use the options at the top to select your brushes size and hardness. You can increase/decrease its size with the bracket keys as well. Hardness affects the brush/border strength, 1% being soft and 100% being hard. These can be changed with the shortcut Shift+ bracket keys.

Screen Shot 2014-11-11 at 1.16.15 PM

You then have opacity and flow. 100% opacity means the brush is opaque. The flow sets the rate of color applied, each time you press the mouse, this sets the limit, and it can’t be increased unless you click again in the same place.

Use white to show and black to hide. You can switch between your two selected colors with X. You can turn on the pixel grid with View > Show > Pixel Grid.

To move around while painting like this, press the space bar, which moves the screen with the flow of your painting, without having to use the zoom tool (though this didn’t work for me at all).


Creating Basic Vector Masks

Let’ cut out this orange using the Shape tool (u) > Ellipse tool and then Path button under the options bar. Draw a ellipse around the orange, it doesn’t have to be perfect.

Screen Shot 2014-11-11 at 1.32.25 PM

Next, use the direct selection tool under the path selection tool (a) to change the shape so it fits the orange better using the little dots on the lines. Once you’re happy, right click your background color and select Layer from Background so we can make a mask.

Screen Shot 2014-11-11 at 1.39.20 PM

Go to the menu option Layer > Vector Mask > Current Path. Deselect the layer in the layer panel to see the final result.

Screen Shot 2014-11-11 at 1.41.37 PM


Masks and Gradients

You can fade one layer mask into another layer using the gradient tool. We’ll start with two photos of flowers. We’ll expand our canvas under the menu Image > Canvas Size. Changing the canvas size does not change the scale or size of anything in our document. However, if you set the canvas smaller than your image, it will be cropped. The relative box will make it so that the resize will make the the new dimensions relative to the current ones. The anchor arrows are for which direction you want to add or remove space. Since we’re adding a flower to the left side, we’ll select the right arrow.

Screen Shot 2014-11-11 at 2.02.56 PM

You can decrease the top layer’s transparency to get a better idea of how it will look.

Next, we’ll select the gradient tool and set it to black to white (1), then make sure that normal is selected for the blending mode.

Screen Shot 2014-11-11 at 2.14.33 PM

You then add a layer mask to the top most layer, and on that use the gradient tool to draw a line for the gradient.

Screen Shot 2014-11-11 at 2.15.12 PM

The radial gradient is good if you want the mask to fade evenly around all sides of the layer. We’ll start with a flower photo with a green layer below it, and add a mask.

Screen Shot 2014-11-11 at 2.20.24 PM

Next, select the gradient tool, make sure it fades from white to black, and that it’s a radial gradient. Then, drag from the center to the end of the canvas.

Screen Shot 2014-11-11 at 2.22.35 PM

Screen Shot 2014-11-11 at 2.23.14 PM

You can clean this up with the brush tool. Remember, select white if you want to show more.

Screen Shot 2014-11-11 at 2.24.41 PM