Unlike most of our tutorials, we won’t be started by opening up a new document. Instead, browse to File > Batch Process.

You should see a screen similar to this one:

When I’m getting ready to batch some photos I’ll typically put everything I need into it’s own folder. In that case with the screen above I could simply browse to the folder and then click the Add All button. If you prefer you can click to highlight the images you want (Ctrl + Click to highlight multiple images) and then hit the Add button. Once you have all the images you want in the white box at the bottom hit the Next button.

We should come to a screen that looks like this:

The options that you have available in Fireworks Batch are shown in the left column. To add one of the options simply click it and press the Add button in the center. If you highlight the option you’ve added in the left column you can configure it further.

Lets go over each individual option:

Export

If you’re working with big images that came right off a camera, this is great way to manipulate them. You can select any of the standard web export choices that come bundled with Fireworks, any custom export options you may have created, or you can choose a custom export option.  We’ll dive into some of the advanced options of image exporting in another post, but here’s a quick guide:

Access the settings by choosing custom… from the dropdown and then clicking the Edit button. From the top left you can select the type of file you’d like to export your images as, JPEG, GIF, PNG, TIFF, etc. Once you select the type you can make additional adjustments such as compression for JPEG images, color pallet for GIF files, etc. You’ll note that you see the file size (on disk) and the estimated download time in real time as you change the file type and adjust the settings. For general photos that would appear in an image gallery or something similar I typically use the JPEG file format with the quality set to 85. Once you have your settings tweaked just press “OK” to return to the batch setup.

Scale

Scale is another batch option I use frequently. Once added to the batch process your options include: Scale to Size, Scale to Fit Area, and Scale to Percentage.

Scale to Size

Set the exact height and width you want your images. If you select Variable in either dropdown Fireworks will retain the correct aspect ratio of the image.

Scale to Fit Area

Similar to the above option but with additional flexibility (my favorite). Set your maximum width or height and Fireworks does the rest. If you have a mix of horizontal and vertically oriented photos this option works great. You can also check the box to have Fireworks only scale images that are larger than your set height/width, that way you can avoid blowing up smaller images and ending up with blurry photos.

Scale to Percentage

As simple as it sounds. If you want to change a 1000px wide photos to 500px change the slider to 50%.

Find and Replace

Find and Replace can be very powerful, especially if you use Fireworks on a day-to-day basis and have hundreds of PNGs floating around. You can run this option only on Fireworks PNG files (as well as Macromedia Freehand files). If for example you wanted to change any instance of the font “Times New Roman” to “Helvetica”, this option makes it effortless. You can also change sections of text, colors, URLs, and more.

Rename

Rename is a great way of removing text from batches of files. For example, my camera adds the letter “p” to the beginning of each image file name – I can easily remove them while batching. You can also add prefixes and suffixes, or replace/remove blank spaces (to “replace” a character or blank space with nothing simply leave the “with:” field blank).

The above options would take a file names img001 and change it to product-photo-001.

Commands

There’s loads of graphical options in the Commands section of batch processing. You can convert the images to greyscale or sepia, rotate images, sharpen or blur, and much much more.

Wrapping up your Batch

If I decide I need to sharpen some large images before resizing them, it’s important I have the batch process in the right order (sharpen then resize). You can adjust the order that batch runs the commands on each image using the arrows in the upper right hand corner. Simply select the option you want to move and click the appropriate up or down arrow.

Once you have your options configured and in the proper order, click next.

The final step of the batch process is to set the output and backup options.  I typically want to keep my original photos untouched, so I choose Custom Location and then create a new folder to hold the post-batch images. If this is a batch you’ll run frequently you can also elect to save the batch script as a JSF file for later use. Click the Batch button to run the process and Fireworks will inform you when it has completed the chore!

Has batch processing saved your butt in the past? Do you have any more advanced techniques using this feature of Fireworks? Feel free to post below!

Before we get started: I’ve switched to Fireworks CS4 for these tutorials for several reasons, the biggest being the text engine bug introduced in the CS4 product release has been fixed. This is a pretty straightforward tutorial, but in the future if there’s any major differences between CS3 and CS4 and how my tutorials relates to the versions I’ll make note of it.

Getting Started

Lets create a new file by going to File > New and setting our canvas size to 1000 pixels wide by 1000 pixels tall. Set your canvas color to white and ensure your resolution is at the standard 72 pixels/inch. Set your zoom to 100% by holding CTRL and pressing +/- or using the scroll wheel on your mouse (if you have one). Now select the rectangle tool from the vector section of the tools panel on the left.  Lets draw a square in the center of the canvas. To force the shape to stay truely square, or “constrain the proportions”, you’ll want to hold down the Shift key as you draw the shape. Depending on what you were doing with Fireworks last time you used it, your new square could be any color. Lets change it to blue by selecting the black pointer from the tools panel and clicking our square to highlight it. In the Properties Panel at the bottom you’ll see the fill color of the selected object. Click the paint chip next to the paint bucket icon and enter this HEX code into appropriate box at the top of the pop-up: #0B4E80. Press Enter to save the color change. Before we move on let’s make our blue square “rounded” by adjusting the Rectangle Roundness setting in the Properties Panel.  Set this as you see fit, but I’m making mine at “8″.

You should have something like this so far:

Layers of Fun

Before we go much further, make sure you’re looking at and are familiar with the Layers panel. If you press F2 on your keyboard this will toggle Fireworks Layers panel on and off. It’s important to understand how layers work in Fireworks (or any graphic design program for that matter), so if you need to brush up I suggest you press F1 to bring up the help screen, search for “layers” and read the section on “Working with Layers”. Why am I worried about your understanding of this concept so much? Because we’re going to be building the effects of our glossy button one on top of another using layers.

With the layers panel open click to highlight our blue square. Now press CTRL-C to copy our square and CTRL-V to paste a new copy onto our canvas. You won’t notice much on the state, as Fireworks will copy the new vector shape directly on top of the existing one. You will however notice a new blue square at the top of the layers panel on the right.

Now, select the ellipse tool (same place you found the rectangle tool, hold down your mouse click to see all of the shapes) from the tools panel on the left. Now draw an oval over the top half of our blue square. Change the color of the oval to anything other than blue for now, and then adjust the opacity to 50% in the property inspector.

Mine looks like so:

I use the opacity slider quite often just to align and manipulate shapes. Since I can see both vectors now along with how they overlap, it allows me to figure out where I want everything.

Making sure you have nothing selected already by clicking a blank area on the canvas. Now click the top blue box, hold down the shift key, and then click the oval on top so both shapes are selected. In the top menu click Modify > Combine Paths > Punch. If you did it correctly you should have two blue shapes left, the top most having the shape of the oval cut out of it. Select that shape and change the fill type from solid to linear. Your gradient will most likey start out wonkey, so click the color chip and set the left (top in this case) to #073252 and ensure the right (bottom) color is set to the original blue #0B4E80.

You should end up with something like this:

Get your Gaussian Blur On

Before we start this step change your canvas color to black. To do so, click a blank space on the canvas and adjust the “canvas color” selection in the properties panel in the lower left to the appropriate color chip. Now select the ellipse tool from the tools panel on the left and draw an oval in the middle of our square shape. Change the color of the oval to white (#ffffff), and then add a Gaussian blur by clicking the plus symbol in the filters panel at the bottom of the screen and selecting Blur > Gaussian Blur. I set my glow to 40, feel free to play around with yours as you see fit. Flatten the new blurred shape by selecting it and clicking Modify > Flatten Selection.

Marquee Effects

Select the black pointer from the tools panel on the left. If you click the towards the edge of the rear blue square (not the half square we created) you should be able to highlight it. Now copy (Ctrl+C) and paste (Ctrl+v) a duplicate square on top of the existing one. With our new square copy highlighted, go to Modify > Convert to Marquee. You now have a “marquee” or mask drawn on your canvas in the shape of our original rounded rectangle. This means that everything inside of the marquee can be manipulated with our tools, and everything outside is protected. Lets inverse this effect go clicking to select > select inverse. You’ll now notice that our marquee is drawn around not only the rounded square but also the canvas itself. We can now delete the “glow” that extends outside of our square shape. Now press Ctrl+D to remove the marquee. Click our new timmed glow bitmap that’s on top of our square and move it down behind the half-square using Ctrl+Down Arrow. While the glow is still selected, change the opacity to 80 in the properties panel. You should end up with something similar to this:

Using some of the techniques we went over in this short tutorial you should be able to create some nice modern graphic web elements. Feel free to experiment and post back here if you run into any questions!

Here’s the link to my final Fireworks PNG.

Let’s get going by downloading the last PNG that we left off with here. In the last installment of this series we added a feathered photo to the background of the design using an image we downloaded at sxc.hu. In this new tutorial we’ll add a sidebar to our design to break up the space. Since we already have the coffee cup image on the right hand side of the layout we’ll add the sidebar there.

Before we really get going, I want to introduce a feature of Fireworks that plays a very important role. If you’re familiar with any other popular graphics program you might already be familiar with the concept of layers. First click “Window” in the top toolbar and make sure you have a check next to “Layers” in the drop down menu. You should have two layers so far in the panel, a “Web Layer” and “Layer 1″. We’ll be talking more about the web layer in the future, so ignore that for now. Layer 1 as you can see contains each element that we’ve added to the canvas so far organized by their stacking level. You should be able to click the layer named “Coffee Cup”. You’ll note that when you do so the coffee cup layer is highlighted and the actual coffee cup image on the canvas is selected. This is pretty handy as you can now move the coffee cup around with your arrow keys or preform other actions on it that you normally would.

You can also click and drag the coffee cup object up and down in the layers panel to change it’s stacking order position. In our Bellabean example I could click and drag the coffee cup down past the first “rectangle” object. This would put our coffee cup behind the faded green bar in our masthead. Try experimenting with the stacking order of the coffee cup object if you’re not familiar with the layer concept. Be sure to fix everything back or reload the PNG before continuing though.

When you’re ready, let’s make a new layer! To make things easier to manage for now, collapse “Layer 1″ by clicking on the down arrow to the left of the layer name. Now click the “New/Duplicate Layer” icon at the bottom of the layers panel. Fireworks will automatically name this “Layer 2″. If you double click the text that spells out Layer 2 you can rename the layer. Lets rename ours “Right Sidebar”. Much like we repositioned objects in layer 1, we can click and drag layers around in the stacking order as well. You’re new layer should already be on top of Layer 1, but it not move it there now. Now just lock layer 1 and we’ll be ready to get to work. To do this, click the white space next to the eye icon (if you have layer 1 selected you’ll see a pencil icon). You should now see a lock icon, and you won’t be able to move or interact with any objects in layer 1. Now let’s make our sidebar!

Select the rectangle shape tool and draw a rectangle on the right hand side of the body of the page. I started mine in the very corner of the solid green rectangle that sites atop the green gradient behind the coffee cup. Since we’re working on Layer 2 which sites above all of those other objects, the new sidebar rectangle will be on top of every other object for now. I made my rectangle 300 pixels wide, and positioned it exactly so as to touch the edge or the green bar and the side of the main body content.

If you downloaded the latest PNG and have been following along, you’re new rectangle might have inherited the same gradient that we used before. Let’s change this to a solid fill by changing the setting from “Linear” in the properties panel to “solid”. Change the color to #3D6312. How did I come up with this color? I used the eye dropper tool to select a random shade of green to the left of our new sidebar, then I clicked the new color chip in the properties panel. From there, I clicked the icon that looks like a color wheel called “Sys Color Picker”. I then moved the right hand slider down to darken the shade of green I picked with the eye dropper. I then clicked “Add to Custom Colors”, and closed the window with “ok” (these steps could be significantly different on a Mac).

This is looking a little goofy at the moment with the coffee cup behind the sidebar. Let’s fix that by unlocking “Layer 1″. We can now click on the coffee cup to select it, and cut it from the canvas with CRTL+X or Edit > Cut. If you now click our new dark green sidebar and paste (Ctrl + V or Edit > Paste), the coffe cup will be pasted on top of the sidebar in the “Right Sidebar” layer in the exact same position that it was before. Since it’s already selected and probably annoying you as much as me, use your left arrow key to move the coffee cup into the center of the column.

You should end up with something like this:

Now let’s add a few finishing touches to the sidebar element before we wrap up. Select the darkgreen sidebar shape, and make a copy of it using Ctrl+C (or Edit > Copy). Now paste the copy on top of itself with Ctrl+V (or Edit > Paste). Since we cant tell that anything happened, let’s change the color of the new rectangle. The new rectangle is already selected, so click the fill color chip in the properties panel at the bottom and select black (#000000). Now press Q on your keyboard to activate the scale tool. Use the bottom-center anchor point to drag the rectangle up. Set it to the same height as the top green bar that runs the length of our page body, which is 40 pixels tall. If you can’t eyeball it just right, use the numeric transform in the lower left of the properties panel to set that bar to 40 pixels tall.

Change the opacity to 30% to finish up. A subtle touch sure, but we’ll keep building up this area in the coming weeks.

Next time we’re going to add a few more details to our sidebar, and then dive into text and typography with Fireworks. For now you can download the completed PNG here. Coming up I’m also going to address some reader mail which I’m sadly backlogged in. Thank you for the continued support and encouragement! As always I appreciate your comments, and be sure to point out any problems that I might have over looked. Thanks again.

Let’s start by firing up PNG that we left off in last time. We just added some vector details and worked with the raster cup we imported and masked. What we need now is a more interesting background. We’ll download from the same source we got our coffee mug from, SCX.hu. The photo of a coffee shop we’re looking for is located here. Once you’ve downloaded the full size file, import it into Fireworks by going to File > Import.

Once you click the canvas to place the file, you’ll note that the photo is rather large. Zoom out using CTRL – far enough to get a better view (50% worked for me).

First thing we’ll do to jazz up the photo is feathering the edges. Make sure the photo is selected by clicking it with the black pointer. Now select the oval marquee tool from panel on the left in the “bitmap” section. Draw an oval over top of the chairs in the photo, keeping your oval well inside of the edge of the photo.

This image illustrates the approximate size and shape we’re aiming for. Feel free to experiment with different sizes and shapes in the future.

With your marquee drawn, go to Select > Feather. Enter 100 for the radius, and click OK. You’ll notice the marquee shrink on you a bit. Now go to Select > Inverse, which will flip the pixels that are selected to the outside of the marquee. To complete the feather, press Delete on your keyboard. You should now have an oval shaped portion of the photo that fades to transparency all the way around.

If everything works out you should end up with something like this:

To work this image into the design, we’re going to use a few different tricks. First, let’s resize the image while constraining the proportions. Select the feathered photo with the black pointer and then hold down Alt and Shift. Now click and hold one of the blue corner points and drag it out to enlarge the photo. I got mine to about 1200 pixels wide. With the photo still selected hold down Ctrl + Shift and press the down arrow. This should move the feathered photo to the lowest position in the layer stacking order (behind the rest of the objects).

Select the top tan colored vector rectangle that resides behind our logo and coffee mug. Set its transparency to 80. Now selected the background photo again and use the up arrow to move it up into position. Get the top of the table that’s in the center of the photo in line with the “COFFEE” in our logo. Now select the top most green bar beneath the logo. Press Q on your keyboard to activate the scale tool. Using the center transform handle cut the height of the shape to half what it is currently. Now use the arrow keys on the keyboard to position the vector evenly between the bottom of the logo and the top of the second green bar.

You should end up with everything positioned like so:

The text and content that will eventually be displayed below our masthead could now run into issues with the high contrast photo in the background. Lets remedy that by adding some color to the inner body. Start by selecting the lower green bar. Copy the bar with Ctrl C, and paste it in place with Ctrl V. As the new copy should be selected for you already, press down on your keyboard to move it off top and just below the original. Now press Q to activate the scale tool, and use the center handle to enlarge the height of our new vector to about three times the height of the tan masthead shape. So far so good! With the new shape still selected, change the fill property from solid to Gradient > Linear. Now click the gradient color chip directly to the right of the paint bucket icon in the property inspector. Click the lower left paint chip in the popup, and then click the green color of the bar or logo on the stage above. Click the right hand lower box and change the second gradient color to white. Click anywhere on the canvas to close the gradient properties. The gradient vector shape should still be selected, so make one last adjustment to it. Change the transparency of the shape to 90, which should show a dimmed out version of our background image through the green foreground color.

If it turned out right you should have something like this:

You can download my completed PNG file here (1.5MB Fireworks CS3 PNG) and compare and contrast your version if you like. I think adding another column to the body will be in store for this project next time, stay tuned!

Special thanks to Brendon for pointing out my typo in the last post, sorry about that … and thanks to KiwiBrian for the encouragement

Bellabean Coffee: Part 4 (start from file bellabean_coffee_04.png)

When we left off last time we had a nice looking coffee cup floating in our layout that we masked with Fireworks. Lots of people that use Fireworks prefer to keep everything as editable as possible, and avoid “destructive” techniques. Quite often though I know for a fact that I won’t need to revert back to where I was, so I’ll flatten masked objects. If you click our coffee cup to highlight it, you’ll see the selection includes what’s left of the photo – what the mask is covering. Go to Modify > Flatten Selection. The bounding box should now snap right to the edges of the cup, making it easier to work with. Although this is “destructive”, meaning that we can’t unmask the cup anymore, I’m not worried.

Let’s add some depth to the design by adding a shadow. First change your fill color to #000000 (black) and set the stroke color to none. Now draw an oval over the bottom of our cup. Make it a touch wider, with a slightly more round radius. You can eyeball this of course, but mine ended up 247px wide by 32px tall. Adjust yours with the numeric path properties in the lower left if you wish. Now, with your black oval selected hold down CTRL and press the down arrow. This should move the oval behind the cup, if it doesn’t keep pressing down. With the oval still selected we can add our blur. In the properties panel at the bottom, on the right hand side, you’ll see a “plus” symbol next to the word “filters”. These are your Live Filters. Click the plus, go to Blur then choose Gaussian Blur. Adjust the blur radius slider to 14 and click OK. You should end up with a pretty convincing shadow. Lets group the cup and the shadow together since we know they’ll always be together. With your black pointer draw a box around both the cup and the new shadow to highlight them. Now hold CTRL and press G.

To work the cup into the masthead, I’m going to shrink it down a little and move it to the right hand side of our design. With the group selected, press Q on your keyboard (or select the scale tool from tools panel underneath the black pointer). Hold the Shift button down to constrain the proportions of the cup, and then drag a corner handle inward to shrink it down. I want to get the cup about 30 or 40 pixels taller than the masthead, but don’t worry about perfection here. Drag the cup into place to match what I have below:

A note on using the scale tool: You can shrink stuff as much as you like with no loss of quality (aside from some aliasing, but we’ll get into that later). However, you can’t enlarge images again without wildly distorting them. If you shrink something too much, just use Undo (CTRL Z) to revert back. Once something is a symbol (as discussed in part one of this series), you can change the size however you like without distortion (assuming you don’t enlarge bigger than the original).

Now that we have the sexy coffee cup our boring beige background color is looking a little lacking. Lets add some more vector shapes to punch it up. First, draw a long rectangle similar to our green bar at the bottom of the design. Make it about one third thicker and just above the green bar. Using the “Fill” selection in the properties panel at the bottom, change the fill to Gradient > Linear. More likely than not, Fireworks will set the fill to an ugly verticle gradient (CS3). Earlier versions of Fireworks default to a horizontal gradient. Either way, you can change the direction of the gradient by adjusting the direction handle that appears when the shape is selected. The circle portion of the handle can be dragged around the canvas to control where the gradient starts, while the square end of the handle can be moved to change the direction of the fill. Move the circle end of the fill handle to the left of our new box, and then click and drag the square end to the opposite side, hugging the outside edge of our coffee cup. Try to get the fill direction as horizontal as possible. If the fill keeps snapping to an unfavorable position, try moving to an extreme angle, letting go, then trying again. Now let’s adjust the colors of the gradient. To change the options for the linear gradient fill, click the color swatch. You’ll see two boxes on each side of the gradient. The lower set of boxes control the fill color of each side, while the top two boxes control the percentage of transparency. What makes this tool so nice is the fact that when you click one of the color chips you’re presented with a set of web safe colors, an input field to enter a custom HEX value, and most important of all – an eyedropper. Now click the left color chip and use the eyedropper to click the beige background of our masthead. Now click the right color chip and change the color to the green we’ve used in the lower bar and the logo. Click anywhere on the canvas to retire the gradient fill properties box. Click to highlight the box we just created, then move it behind the cup using CTRL and the down arrow. If you press Q on the keyboard you’ll once again activate the scale tool – adjust the width of our new box to make sure it doesn’t poke out on the right side of the
coffee cup or off of left edge of the masthead. You should end up with something that looks like this:

You can download the source PNG file for this tutorial in the state it’s shown above here (right-click, save-as). Next week we’ll start adding some navigation elements and go over some cool techniques for buttons. Who doesn’t love buttons? If anyone has any questions just me a line in the comments below.

Bellabean Coffee: Part 3 (start from file bellabean_coffee_03.png)

In the last segment we left off with this file, which includes a vector based masthead made up of two shapes, and a logo placed on top in the upper left which we also made with Fireworks in this tutorial here. As we’ve already learned, Fireworks is a very capable vector image editing program. But in addition to that Fireworks is also able to pull off a lot of the raster (or photo) editing tasks that are usually reserved for its cousin Photoshop. We’re going to continue our Bellabean series by finding, importing, and masking a photo.

So we’re designing a website for a fictional coffee chain store right? What are we missing in the design so far you might be thinking? Coffee of course! Depending on the budget of your particular client you have plenty of options. If this was a real company with hundreds of employees and a dedicated marketing budget chances are we’d have access to real live professional product photography. Since we’re working for a fake company we’ll use a free source, one of my favorites is www.sxc.hu. Don’t be daunted by the Hungarian domain name, the sites boasts over a quarter of a million free stock images with relatively generous licensing rights.

I grabbed this beautiful photograph by Dimitris Kritsotakis here (note: You’ll have to create a free user account at sxc.hu, which is painless. You’ll thank me later). Save this image in a separate folder, I call my folder “stock photography”. I keep this folder in a “design files” folder which has separate folders for my Fireworks files, Photoshop files, Illustrator files, Flash files, and the stock photos.

Open up the bellabean_coffee_03.png file from the end of the last lesson, and then import our new stock photo by clicking File > Import. Browse to the location you saved the file, click it, and then click open. You’ll be shown a funny icon that looks like a bent line. Click anywhere on the canvas to place the imported file. At this point you’ll probably notice that the file is extremely large! Let’s remedy that by first zooming out of our canvas by holding CTRL and pressing the – key. Zoom out until you can see the entire shape of the raster photo we imported. It should be outlined in a blue box, which you can see extending past the canvas. Now go to Modify > Transform > Scale (or CTRL + Q). You’ll see transform handles appear around the image. To ensure that you don’t mess up the proportions of the image, hold down the Shift key and move one of the corner handles in. We want to get the image about as wide as the masthead we made earlier, but don’t worry about perfection here.

We’re now at the point where we need to remove the background from our coffee cup photo. There are many, many different techniques we could use to do this, some more challenging than others. I’ve decided to take us down one of the more challenging paths, but in the event you get stuck I’ve provided a PNG file that lets you skip over the masking.

There are two different techniques we’re going to be covering here: masking, and the Bézier pen tool. We’re going to draw a shape that resembles our coffee cup with the pen tool, then use that shape as a “mask” that will hide the rest of the photo, leaving only the green cup.

If you search for “Bézier Pen Tutorial” on Google, you’ll turn up about 40,000 results. The pen tool works in a very similar fashion amongst all popular vector programs, so feel free to give it a go with any software you have access to. One video tutorial I found on YouTube is a great start, you can see it here.

Once you’re ready to begin, save your file, then zoom into 150% (CTRL +) and select the pen tool from the tool panel on the left. I like to start in a sharp corner when I can, so left click once right where the handle of the mug touches the right side of the cup at the top. Now we’ll create the next point by clicking a little further down, right at the apex of the curved handle. When you click this area, hold down the mouse button and then drag the mouse down. You’ll see “direction handles” sprouting out of the point you just created, with one of them following your mouse south. You’ll notice that the line that connects your first point to the second is changing. Try moving the mouse to the left and right – notice how the curve changes to reflect the direction you’re moving towards? How far you pull the direction handle also affects the shape of the curve as well. Let go of the mouse button to lock in the line. If you simply click to make a new point without dragging, you’ll get a hard corner with no curve. If the previous point you created was a curve, and you want the next line segment to be straight, simply left click the last point you made with the pen to convert it.

Go ahead and play around with the pen tool until you get a little more comfortable with its use. Remember CTRL Z is every graphic artist’s best friend! If you stray too far from the cup shape we’re tracing, feel free to start over. You can also adjust curves and the location of points with the white pointer. You can even make adjustments on a pixel by pixel level by selecting a certain point and moving it with the arrow keys on the keyboard.

Once you’re more comfortable with the pen tool, continue tracing around the cup until you’ve worked your way back to the first point you placed. You’ll know that you’re about to create a closed vector shape because the pointer will change to a little circle icon.

There’s a lot more to the Bézier pen tool than what we’ve discussed here, and in the future I’ll be expanding on its use. In the mean time learn it the way I did, by practicing! If you’d like to come back to the pen tool later, simply download this tutorial post-pen tool here (right-click, save-as).

Moving on, you should have an ugly outline around our coffee cup photo. Make sure the vector line work you made is selected (use the black pointer if it’s not) and then swap the stroke for the fill using the “Swap Stroke/Fill Colors” button which is located directly under the fill color in the tools panel. You should now have a solid vector shape placed directly on top of the cup in our photo.

Now we can bring this all together with one final step. Select the photo beneath the cup vector we drew with the black pointer. Now cut the photo using Edit > Cut or CTRL + X. Now, click the cup vector shape, and change the fill property in the bottom left from Solid to None. Now, you should see only a blue vector outline of our cup – without touching anything else, click Edit > Paste Inside.

Presto! We now have a masked coffee cup. Save your work at this stage and we’ll continue on in the next installment. In the mean time try creating additional vector masks. It’s a technique that is used frequently across all types of graphic design.

You can download the source PNG file for this tutorial in the state it’s shown above here (right-click, save-as). In the next post we’ll actually work that coffee cup into our design, and I’ll show you how to edit raster images, covert vector images into rasters, and much more. It’ll start to look more and more like a website I promise. If anyone has any questions or suggestions, please feel free to leave a comment below! Thanks for your kind words and support so far.