My first term of school is quickly coming to an end, and I am amazed how fast the past couple of months have gone. The first few weeks were slow, but once things picked up, they really picked up. Next week, I have three final projects due, three tests to get through and one presentation to complete. But then I will have a glorious 10-day break to enjoy the summer (which I am sure will be over all too soon).

My overall assessment

I’ve (so far) done better in my classes than I expected. For the most part, I’m enjoying what I’ve been learning and still feel that going back to school was a good decision at this point in my life.

My main frustration with the program is the amount of time I’ve put into the theory classes vs. the software classes. I would like to have gotten my hands dirty with more Photoshop or HTML/CSS projects, yet I’ve put much more energy into the graphic design and website organization classes. I’m not saying that theory isn’t important (it is), but the amount of time I’ve spent on projects and exercises for those courses has been quite disproportionate. Hopefully next term we’ll strike a better balance.

Term 2 details

We received our Term 2 schedule recently and it is a doozy. I will end up juggling eight classes (yikes) by term’s end: Portfolio 1, Dreamweaver 1, Flash 1, JavaScript, Illustrator CS4, Human Factors/Design Interface, Video Shooting & Editing, Audio and Design Esthetics. I can see why this term has gained such a reputation for making students drop out! I’ll be in school for three full days and two half-days each week.

I am intimidated by the expected workload, especially since the video and audio classes will require me to do work at school. (We’ll be using desktop computers instead of our laptops.) I’m going to try very hard to keep a level head about it, though, and definitely take advantage of Shane’s offer to do more of the household chores (one of the only perks to all this homework).

Have you ever spent time painstakingly moving parts of your Photoshop document into perfect alignment? I know I used to agonize over this with my personal and school projects, but that’s all changed now. I’ve discovered the magic of smart guides and the power of alignment and distribution tools.

Smart guides

Smart guides are a feature you can turn on by simply going to View>Show>Smart Guides from your menu bar. Once smart guides are activated, they will automatically appear when you are moving a layer. Smart guides show you (with brightly-coloured lines) when you are aligned with other layers (whether it’s an edge or a center) and are very helpful for getting objects into place on-the-fly.

Alignment and distribution

For projects that require more accuracy, I recommend using the alignment and distribution tools. These are found on the options bar, which is just below the menu bar, when you use the Move Tool. To align your layers, first select or link the layers you want to align. Then, with the Move Tool selected, use any of the first six buttons to align your layers horizontally or vertically (the button’s icon demonstrates the effect it will have, but you can also hover over it to get a text description).

To distribute (or equalize the spacing between/among) your layers, first select or link the layers you want to distribute. Then, with the Move Tool selected, use any of the last six buttons to distribute your layers horizontally or vertically (again, the button’s icon demonstrates the effect it will have).

Note that, in order for these tools to work, the objects you are aligning must be on separate layers. But as long as you follow that simple rule, you’ll find these tools are very easy to use. And they’ll save you from the tedious, time-consuming task of aligning so you can get back to making your masterpiece!

A look at BCIT student Sue Chiu*

You might not expect an introvert like Sue Chiu to have jumped out of an airplane at 10,000 feet, but she has.  And she loved it.  Although Sue freely admits to “screaming [her] head off” during the initial, 45-second freefall, skydiving was one of the “biggest highs” she’s ever experienced.

Sue has done a lot outside her comfort zone.  She’s run two half-marathons and walked the New York City marathon.  She’s travelled overseas, visiting places as far away as Egypt.  But one of the most unexpected changes Sue has made was returning to school after ten years in finance.

An unintentional career path

Sue “fell” into her previous career while she was a student at the University of British Columbia.  She was looking for work while she attended school and ended up as a teller.  This led to a position as a personal banker after graduation, and then to a job as a broker’s assistant.

Sue was content to remain in that “cush job” for ten years, enjoying the flexible hours and free time.  But she wasn’t rewarded by what she did every day and decided to change careers.

What the future holds

Sue hopes the New Media Design & Web Development program at BCIT will help her find a job that is fulfilling and a better fit for her “behind-the-scenes” personality.  In a best-case scenario, she would work as a photographer for a travel publication or as a website designer for a tourist organization.

Sue soaks up the sunshine in Maui

Both positions would involve her passions of travelling and photography.  Both would also give her an excuse to visit sunnier climates during the rainy winters – a nice perk for a sunny person who considers herself “solar-powered.”

*This interview was part of a class assignment that was formatted specifically for the web.

I am new to the Smart Objects concept, as it was not a feature in any of the Photoshop versions I had used prior to CS4.  Like Adjustment Layers, Smart Objects give you more flexibility when editing your images, so your adjustment decisions are not set in stone.

The three main reasons to use Smart Objects

1) You can transform elements in your image multiple times without losing quality.

Normally, if you use the Edit>Transform commands repeatedly, whatever element you edit will lose some quality.  (Most notably when you scale an element down and then increase the size.)  This is not the case with a Smart Object, as the Transform commands are applied non-destructively.

2) You can convert ordinary filters into Smart Filters.

Many filters in Photoshop are not editable.  That is, you can make initial adjustments when you add them to a layer, but they cannot be modified once they’ve been applied.  When you add a filter to a Smart Object, it becomes a Smart Filter, which means it can be edited.  In fact, you can make changes as many times as you like, and each time the new filter settings will be applied to the original, unfiltered layer.

3) You can “nest” multiple layers within a Smart Object layer.

If you want to treat multiple layers as a whole without folder groups (or merging your layers into one), Smart Objects is the way to go.   You are essentially creating a new layer containing a mini Photoshop document.  This layer can be manipulated the same way as any other layer (applying filters and layer effects).  And when you want to edit its individual elements, you simply double-click on it, and the Smart Object will open in a new tab with all the original layers intact.

How to make Smart Objects from layers

One of the slickest things about Smart Objects is just how easy it is to create them.  All you need to do is select the layer(s) or group folder you want to convert and either: a) go to Layer>Smart Objects>Convert to Smart Object or b) Filter>Convert for Smart Filters.

Voila!  Now you are ready to edit your Smart Object layer.

Smart Objects at work

I worked a bit on improving my poster project last week (I had a little time, as I was home sick with a fever/cold), and I ended up converting a big portion of my image into a Smart Object.  This allowed me to easily add a couple of effects to multiple elements without having to merge them into one layer.

Here’s the before and after comparison of one of my posters.  See if you can spot the (simple) effects I applied.

KidZone poster original version

KidZone poster slightly modified version (using Smart Objects)

One of our first major assignments was due on Monday.  The project was to make a poster series promoting a fictional art website for students.  The final products were two 11×17 posters, so Shane offered to print them out at his work.  Of course, I had him do that about two weeks prior (the due date got moved), and in that time I learned a TON about Photoshop that I could have used to create better images.  (Oh well.)

My problem with making Photoshop images from scratch has been: how do I keep them from looking flat?  It’s easy to get started making an outline for something – a background colour here, a square there, a line there, etc. – but I’ve always struggled with the next step.  Thankfully, I’m finding some simple tricks to move forward and add a bit of depth to my “handmade” images.

Layer FX

I’ve used layer effects before, as they are easy to add to any layer (just double-click the layer and select what you want).  But the trick here is to add multiple effects to each layer.  For instance, rather than adding just a drop shadow to text, you can make it pop more with a drop shadow, beveling/embossing and a stroke.  So instead of clearly seeing a drop shadow, the viewer will instead see 3D-like text.

If you don’t feel like picking and choosing among the various effects, you can instead select a preset style.  These are found above Blending Options in the Layer Style box; the fly-out menu has more libraries to choose from, if you don’t like the default list.  I anticipate Styles could be very useful in the future for simple website buttons and the like.

Gradients

The next two “depth options” are also located in the Layer Style box (as overlays), but I’ve found that making separate layers for them works really well, too.  The way to do this is: either click on Layer>New Fill Layer>Gradient or Pattern from the menu bar, or use the half-white, half-black circle icon on the bottom of the Layers Panel to select Gradient or Pattern.

Gradient Fill Layers let you apply preset gradients (or ones that you create) to your image, either using the layer Blending Modes or a Clipping Mask (Command-Option-G to clip to the layer below).  Like any layer, you can also add a mask to the Gradient Fill Layer and further limit what parts of the image you want to use the gradient on/in.

Patterns

Just like the Gradient Fill Layers, the Pattern Fill Layers allow you to apply preset patterns (or ones that you create) to your image, either using the layer Blending Modes or a Clipping Mask.  This is a great way to add texture to an image, and the fly-out menu of patterns is quite extensive.  Again, you can add a mask if you like.

Examples

I don’t claim to be an artist by any stretch of the imagination, so the following examples are quite simplistic.  That said, you can still see quite a difference between the first, flat chalkboard image and the second, more layered chalkboard image.  I think it’s pretty cool.

Chalkboard image with just basic shapes

Chalkboard image with layer effects, gradients and patterns applied

I didn’t entirely understand the difference between shooting raw files and shooting jpg files until last week.  Shooting in raw means you have control over the raw, unprocessed data your camera records.  Not shooting in raw means the camera manipulates that data into a compressed format (like a jpg) for you to work on.

Using raw files is beneficial because it gives you greater control over how the final picture looks.  Instead of manipulating the smaller, processed data of a jpg, you can play around with the larger, unprocessed data of a dng (Digital Negative) file.

Camera Raw Adjustments

In Photoshop, the Camera Raw options are split into a series of panels and a tool bar.  In the panels, you can find multiple ways of modifying the image as a whole – changing the lights, darks, contrast, colour, sharpness, etc.  The manipulations available here are very similar to those in Photoshop itself, although the names and functions may be slightly different.  (For instance, you’ll see an Exposure slider and a Blacks slider, which help set white and black points like you can do with Levels.)  As a general rule, you can’t make extreme changes to an image in Camera Raw, as the software limits the range you’re working with to help keep the picture more natural.

The tool bar contains ways to affect specific parts of the image.  Most of these are self-explanatory – the Targeted Adjustment Tool, Spot Removal, Red-Eye Removal – but the Adjustment Brush is more complex (and interesting).  This is a way of creating an editable mask (or multiple masks) on the image, which indicates where you want to make targeted alterations to Exposure, Brightness, Contrast, Saturation, Clarity, Sharpness and/or Color.

Camera Raw Comparison

Now for a quick look at how Camera Raw works.  Here are a couple of photos – the first is the jpg file my camera made from the raw data and the second is a jpg file I made from the raw data.  Can you see the differences?

Camera-created jpg file

Camera Raw-created jpg file

Camera Raw Benefits

I’m excited to experiment with Camera Raw.  Obviously, I would like my images to be a higher quality, but I also feel like Camera Raw could save me substantial time.  Instead of opening a file directly in Photoshop and going through a series of individual steps to make all the basic adjustments, I can make those adjustments at one time in the Camera Raw interface.  Then I can open up the (hopefully) optimized image in Photoshop and create further specialized effects there.

Another huge payoff in using Camera Raw is that it will not alter the original dng file!  Instead, the changes I make to the dng are saved in a sidecar file, which can be deleted at any time, if I want to start over with the original.  And for a beginner photographer like me, that’s exactly the kind of flexibility I need.

I’m excited to report what I’ve learned this week about Camera Raw, but I think I’ll wait until I’ve taken some raw pictures with my camera and edited them in Photoshop to explain.  (Posts are more fun with examples, right?)  Besides, I am reaching the conclusion of my first month of school, and it’s time to answer some FAQ.

The great commuting experiment of ‘09

The mix of using my car on some days and public transit on others has been working out well.  I leave my apartment about 65 minutes before the start of class when driving and 75 minutes early when taking transit.  It takes about an hour to get home via transit, but driving after my night classes is much faster – only 25 minutes to get back downtown on the traffic-less roads!  (Ah, Vancouver, you and your constant daytime traffic.)

However, aside from the quick trip home, the battle of car vs. bus/Skytrain is so far a draw.  They both have clear pros and cons.  Driving is great for relaxing to music and taking a break from homework, but other drivers can be real jerks on the road.  Transit is great for getting reading done or listening to podcasts, but it can go downhill quickly if someone smelly and/or loud sits next to me.  Overall, I’m still not sure what I’ll do next term; I guess it depends on when (and how much) I have to be at school.

My classes

The most challenging thing about my courses so far has been the schedule.  I’m used to the traditional college structure of Monday-Wednesday-Friday classes and Tuesday-Thursday classes, meaning each class is attended multiple times a week.  Here at BCIT, I have different courses every day, so each happens only once a week (for three hours or more!).  It’s sometimes a struggle for me to recall what was covered 7 days prior (especially since I’m trying to absorb so much new information).

That said, I’ve been enjoying the program overall.  My biggest concern going into this was that I would be alienated by the web classes, yet I really like the HTML/CSS course – at least what we’ve covered up to this point.  (That class is the extent of our web-intensive learning for Term 1.)  And of course, getting better acquainted with Photoshop has been awesome.  If nothing else, I can expect to see an improvement in my photographs after this term.

Switching to student mode

The question I’ve been asked most about my return to school is: how was the adjustment after six years away?  Honestly, it was relatively easy.  I mean, let’s face it, having homework again sucks.  But I’ve found that getting back in the groove of going to class has been – dare I say it? – kind of fun.  (And now I’ve probably jinxed myself with the Most Boring Lectures Ever next week.  Ah well.)  I think my brain is just relieved to be working again after the long hiatus.

It also helps that I have a different attitude this time around.  The straight-A-obsessed student of the past is no more!  I’m focused on the knowledge I’m gaining, not my grades.  So if there’s a class or a subject that doesn’t seem to have long-term relevance (or interest) for me, I’m not stressing out about it.  I’m content to just pass and put my energy into the things I truly wish to excel at.

(This perspective has been particularly helpful in dealing with certain instructors who, while experts in their professional lives, do not understand the difference between teaching and showing.  And I will leave it at that.)

Hopefully, I can continue with this calmer attitude as the workload increases.  (Or else start enjoying more wine with dinner!)

I figured I would write a quick addendum to Thursday’s post, since I just learned yet another way to make a selection in Photoshop.  (Will the versatility of this software never end?   Haha.)

Quick Mask Mode

The Quick Mask makes a selection by creating a temporary mask.  You simply hit the Edit in Quick Mask Mode icon on the bottom of the tools panel and a temporary mask will be placed over your image.  Using the Brush Tool and Pencil Tool, draw the area you want the mask to hide using black (you’ll see the default red colour appear as you do this), and then use white to paint back any areas you do want revealed (just as you would with an actual mask).  When you are finished, hit the same button to return to Standard Mode.  Your selection will automatically be made based on the Quick Mask that you drew.

You can also make a selection first, then enter the Quick Mask Mode to modify the selection with brushes or pencils (again, using black and white colours to modify the mask/selection).

As I approach the end of my third week here, I would definitely say the workload has begun to pick up.  But now that my half-marathon training is over (and Sunday went wonderfully, by the way), I am okay with that.  In fact, I’ve even voluntarily added reading/skimming my Photoshop book (Visual Quickstart Guide for CS4) to my To Do list.  What I’ve read in the first few chapters has filled in some of the gaps left open by my instructors; hopefully that’s a trend that will continue as I progress through the book.

Selection tools

This week I learned the most about selection tools.  Photoshop has a lot of options for this, since making and saving selections is often a crucial part of editing and combining images.  I’m going to summarize the ways I know to make selections here, organized from the more loose to the more exact.

(Note that any selection can be saved by: 1) saving it as a channel in the Channels panel, 2) creating a Layer Mask from it on a layer in the Layers panel or 3) making it into a work path in the Paths panel.  The channel, mask or path can then be loaded later as a selection on top of the image.)

Shape Selection Tools
The Rectangular Marquee Tool and the Elliptical Marquee Tool are, as you might imagine, ways to make rectangular/square or circular/elliptical selections in an image.

Wand Selection Tools
The Quick Selection Tool and the Magic Wand Tool are fast and easy means of selecting.  The first is for selecting clearly defined shapes within the image.  You simply drag the wand across the shape and it will automatically be selected.  The second is for selecting areas of the same colour within the image.  You click on a pixel and an area of similarly shaded, adjacent pixels will automatically be selected.

Color Range Command
Similar to the Magic Wand Tool is the Color Range command.  This is not found on the tool bar, but in the menu bar under Select>Color Range.  On the panel that opens up, you can use the eyedropper tools to pick out the particular colours within the image that you want to select.  Once you click okay, the colour range you’ve chosen is automatically selected.

Lasso Tools
The freestyle Lasso Tool allows you to hand-draw with the cursor what you want selected.  The Polygonal Lasso Tool lets you draw a polygon shape (basically connecting points you click with a line) of what you want to select.  And the Magnetic Lasso Tool is a combination of hand-drawing and automatic selection.  You draw around the general area that you want selected and it will place the line along nearby edges that have clear differences in tonality or colour.

Pen Tool
The Pen Tool is the most precise (albeit the most tedious, if used alone) means of making a selection.  You can either draw freely with the Freeform Pen Tool or use the Pen Tool to drop anchor points along a path around your selection.  These points can be connected either by a straight line or an adjustable curve line (you can switch how the points are connected at any time).  You can also add, remove or move anchor points at any time.  (When you complete the path, it is automatically saved as a work path in the Paths panel.)

Combination is key

Overall, it seems like none of the tools are necessarily better or worse than the others; it all depends on what you’re trying to do and what your image looks like to begin with.  It’s also important to note that you can modify a selection after it’s been made.  One way to do this is to use the Refine Edge button that is part of the Option Bar for any selection tool (except the Pen Tool).  Perhaps the more useful modification method, however, is to use multiple selection tools on the same selection.  (Know that you still need to use the proper keyboard shortcuts to add or subtract from the existing selection as you would normally – generally Shift-click to add and Option-click to subtract.)

For instance, let’s say that I want to select a particular yellow flower from an image of a garden.  I can first use the Quick Selection Tool to quickly select the yellow flower from its green background.  This selection is probably imperfect, though, so I can switch to the Magic Wand Tool and add or subtract a few areas.  If one particular part of the flower is hard for the automatic tools to differentiate from the background, I can switch to the Lasso Tool to draw in the exact area I want included or excluded.  And if my hand-drawing skills are too inaccurate, I can make the whole selection into a work path (done in the Paths panel) and then modify the path using the precision of the Pen Tool.

That’s just one example, but I think it probably gives you an idea how efficient and versatile the selection tools in Photoshop can be.

I think for these posts I will continue to focus on Photoshop.  I’m certainly learning a lot beyond this software (and about completely new topics like HTML/CSS and Acrobat), but it’s what I find most fascinating.

This week, I’ve learned more about the general ways to improve a digital image.  So I’m going to compare the new steps I’ve learned with the old way I was doing things; hopefully it will help me better absorb the information.  (Note: I’m sure this will continue to be revised as my knowledge of Photoshop evolves.  Nothing here is set in stone!)

Steps For Image Optimization

Step 1
Old (7.0):
Before anything else, I cropped and rotated the image with the Crop Tool (if needed).

New (CS4):
This step is the same, except now I know about the Ruler Tool, which allows me to draw a line across whatever I think should be horizontal in an image, then have Photoshop automatically rotate my image to make that line flat (by using Image>Image Rotation>Arbitrary).  Then I proceed with cropping.

Step 2
Old (7.0):
I continued by adjusting the Levels, using just the histogram that pops up with this tool to set my black points and my white points.

New (CS4):
Now I set the Levels with an Adjustment Layer, which means (unlike the previous way of doing it) I can go back and reset the black and white points I choose. The other nice thing about using an Adjustment Layer is the ability to add a Mask and block out areas of the image you do not want Levels (or Color Balance, Curves, etc.) to change.

I also hold down the Option key when setting black and white points now.  This changes the image display so I can see how the black and white areas of the image are being affected as I move the sliders.

Step 3
Old (7.0):
I made any changes to the colour balance with Levels, moving the black, white and gray point for each of the three colour channels (red, green, blue) to achieve the desired correction.

New (CS4):
I’ve learned that I can instead use Color Balance (as with Levels, added as an Adjustment Layer), which provides me with a better way to view the balance of each tonal range in the image (shadows, midtones, highlights).  However, the Levels route is still a valid way to do this step.

Step 4
Old (7.0):
I duplicated the background to create a layer for increasing contrast with a Blending Mode of Overlay, Hard Light or Soft Light (depending on the image) and an Opacity well below 100% to soften the effect.

New (CS4):
While the above action still works well for me, I can also use Curves (again, added as an Adjustment Layer) to give me more control over the contrast in the picture.

Step 5
Old (7.0):
I increased the colour of the image with a simple boost to the Master Saturation in Hue/Saturation.

New (CS4):
Now I can use Vibrance (as with everything else so far, added as an Adjustment Layer) to enhance the colour using Saturation (as I would normally) but also Vibrance, which specifically enhances the intensity of the less saturated colours more.

Step 6
Old (7.0):
I removed any problem areas from the image using the Healing Brush Tool or the Patch Tool.  I also lightly brushed over some facial features with a matching skin-toned colour (and brush Opacity set around 20%) to conceal things like sweat (as it hides the glare).

New (CS4):
The above still applies, but now I also apply the Clone Stamp Tool and the Spot Healing Brush Tool, which are other effective ways to not only remove unwanted parts of the image, but to smooth over the removal as well.

Step 7
Old (7.0):
I enhanced certain elements in the image.  For instance, I highlighted eyes by selecting them and sharpening them with Unsharp Mask or highlighted the colour of a flower by selecting it and increasing the Saturation in Hue/Saturation.

New (CS4):
These are still valid tricks, but I can also make a duplicate layer of just the eyes or the flower and paint on that layer with any number of brush Blending Modes like Color or Color Dodge or Saturation to make my enhancement (the plus of this way: I can then adjust the effect with the Opacity of the layer).

Step 8
Old (7.0):
I duplicated my background to create a layer for an edge burn with a Blending Mode of Linear Burn or Color Burn (depending on the image) and an Opacity well below 100% to soften the effect.  I used the Lasso Tool or Magnetic Lasso Tool to draw around the area I did not want to burn (generally with a Feather of 50-200px), then cleared that area.

New (CS4):
While this has not yet been covered in my classes, I imagine the better way to do this would be to create a Mask on that layer, so the amount of adjusting that can be done later is maximized.

Step 9
Old (7.0):
I finished by sharpening the image using Unsharp Mask, generally falling somewhere between a Radius of 1.0-3.0 and an Amount of 30-90.

New (CS4):
This step is the same, except now I know this can be more effective (and less noticeable, if that makes sense) with a low Radius (0.5, for example) and high Amount (like 250).  I’ve also learned – in instances where I want to sharpen only part of the image, which is often the case – that the Quick Selection Tool is indeed a very quick way to select the object I want to bring more into focus.

Image comparisons

I’m no expert at this point (clearly), but you can see improvement (I hope) with the following image comparisons.  The first comparison is an image manipulated in Photoshop 7.0 with the “old” rules vs. the same image from 7.0 manipulated further in Photoshop CS4 with the new rules.  (Unfortunately, I did not have the original to start from and show a full comparison, but you get the idea.)  The second comparison in an image straight from the camera vs. the same image optimized in Photoshop CS4.

Manipulated in Photoshop 7.0 with "old" steps

Manipulated more in Photoshop CS4 with new steps

Straight out-of-camera shot

After image optimization in Photoshop CS4