Instructor Demo: Linear Gradient Layer Masking.

Login Instructions:

Login name: Student CWID, Password: Student PIN.

Connecting to Server at NSCC:

1. Click Go>Connect to Server (nsccg4)
2. Username: macclass
3. Password: macclass
4. Choose the macclass folder/directory
5. Click the window's List Mode icon
6. Click the triangle to expand the Com2250_Designer's folder with the purple highlight.
7. Double-Click the current semester's folder, i.e. Spring2006

Create your Student Folders

1. Create and name a new folder inside of the current semester's folder, with your name, i.e. John_Doe
2. Double-click your named folder and create and name the following three folders inside of it.

• WIP (save your works in progress in PSD format to this folder)
• FINISHED (move your finished PSD files from your WIP folder to this folder)
• TOGRADE (this is where you will place a copy of your finished lessons saved in the Adobe PDF format for grading)
• GRADED I will create this folder for you. This is where I will return your "TOGRADE" PDF files with an attached PDF Grade Sheet.

For Photoshop Mama's Site: Because I am always updating this site, I advise you click your Web Browser's Refresh button to see updated versions of the pages. You can hold down the Shift Key while clicking the Refresh button and it will remove the stored cache of the previous version of the page and update it with the new one.

How to Reproduce the Ads from the Lessons:

First rule of creating ads - The first rule is to save your document with the naming convention outlined below in the Naming Your Files section. DO NOT work directly on or change the original asset images you download from the server. You should close the asset image immediately after copying or dragging it into your working canvas.

Removing the Brand X logo - The image assets all have a "Brand X" logo on them. Part of your job is to remove that logo, but get into the project a bit before doing that. Often the technique itself will hide or eliminate the logo. Other manual techniques that may have to be used are cloning, healing, patching, patch layer, painting over, and simply cropping it off if the design will still work. If in doubt, ask Mama!

Can't Find Font? If the suggested font is not available on your computer, pick an alternate that maintains the integrity of the original font's personality. For example, if the font in the original is a sans-serif font, substitute a similar looking sans-serif font.

Missing Instructions? If a logo or element that is in the ad example and is not included in the Classic Photoshop Assets folder, then "google" and find one.

If an element like a button or banner is visible in an ad, that means you have to create it, even if there are no instructions in the text.

If the text from the ad example in the book is too small to read, ask Mama for interpretation or instruction.

Scott does not give direction for every step, nor does he give the exact size of the final ads, in many cases. Use your eyes and judgement to determine the relative margins on all sides and the relative proportion of the book's example to your working example. Sometimes it may be necessary to extend your canvas or crop your canvas to match the proportion of the ad in the book. Often you will have to use the Transform Command to scale your asset images up to size to fit in the higher resolution documents you create.

Resolution for your Ad Projects:

Use 216 ppi: When type is too small to read from the book example.

The exception to the above, would be if the Type is being used as a "Hi-Tech" effect and is there merely for the purpose of design and not meant to be read.

Use 144 ppi: When type is very small but readable from the book example. This is the minimum resolution I am allowing for the Textbook ads! If the textbook says to create a document 6x8 @ 72ppi, then create it 6x8 at 144ppi. My instructions OVERRIDE the textbook's.

Go by the above dictates, not by what Scott suggests. It is much easier to manipulate and design with small text when the resolution is a larger amount.

Naming your files:

There are 15 mandatory lessons to complete. See the Mandatory Lessons list included in your Com 2250 Introductory Package, for lesson reference numbers to name your files.

For Lesson 1 Putting One Image Inside Another Image you should name your file "L1_Your first name. Here's an example using my name:

L1_Shan.psd

Some of the lessons may have a second or third part. Lesson 2's Blending Photo Into Solid Color Background has 2 parts. In this case you should save your files in the following manner:

L2_Shan.psd (for the first exercise)

L2b_Shan.psd (for the second exercise)

The logic is to add a smallcase sequential letter starting with "b" to indicate the second part, "c" for a third part.

If a lesson has multiple parts, you must finish all parts before uploading it to your TOGRADE folder.

Naming Protocol:

I would like you to lose any habits of naming folders or files that include spaces and/or punctuation marks. Although it is sometimes acceptable for the Computer System and for sending to some Printers, it would not fly for web design. If you want to be a stickler about web design encoding compatibility, you should also name all folders and files in lower case. But we'll take it one step at a time.

What is acceptable to separate words? Underscores and hyphens if you have to separate words.

What is unacceptable? Spaces and the following punctuation marks:

,<.>?/;:'"[{]}\|=+-_)(*&^%$#@!`~

The period should be used only once in a file name to separate the name from only one file format extension.

Good Example: security.jpg

Bad Example: security.jpg.psd

You will probably note that some of the companion images downloaded for our textbook have bad naming syntax.

Saving your files:

You should save all your works in progress into your personal WIP folder on the Server with layers in tact using the native Photoshop PSD (Photoshop Document Format) file format.

You should also back-up your personal folders by saving them to a USB drive or CDr.

When you have a completed final version of a lesson save it to your WIP folder. Then move the final layered version from your WIP folder to your FINISHED folder. Save a merged (flattened) duplicate in the Photoshop PDF format, (Portable Document Format) to your TOGRADE folder. I am requesting the PDF format, so that I will be able to use the Commenting & Highlighting Tools in Adobe Acrobat to comment and grade your work. Once I have graded your work, you can re-open your file from the Server, in Adobe Acrobat to view the comments and your grade.

You will be using the final versions of these lessons in your Mid-Term PDF Presentation Slide Show and as work examples for your Final Project, so keep a layered version and it is important that you have back-ups.

General Workflow:

If you are using a USB thumb drive to bring work you've done from home, here's how you should safely manage your files in class.

1. Login
2. Insert your drive
3. Go to Connect to Server and open the the macclass area, so that the globe icon is visible on your desktop.
4. Copy any works in progress from your drive to your WIP folder on the Server.
5. After the files have been copied, close the window for your drive and drag it to the Trash, to Eject it. Remove it from the tower.
6. Do not disconnect from the macclass area of the Server.
7. Launch Photoshop
8. Open any files you need to work on. Save them to the appropriate folder on the Server.
9. At 3:45 PM, you should save anything you are working on to the appropriate server folder.
10. If you need to bring files home, insert your drive and copy any folders or files back to your drive, from your Server folder. You may get a message saying the file already exists and you should choose to overwrite it if you wish to have an updated version on your external drive.
11. After the files have transferred, disconnect the macclass server.
12. Drag the icon of your thumbdrive to the Trash (or Control click on its icon and select "Eject".
13. Remove the drive.
14. Log out.

Saving final version and a flattened copy:

When you have finished a project you should have a layered PSD (Photoshop Document Format) file in your FINISHED folder and a flattened PDF (Portable Document Format) file in your TOGRADE folder. After I grade your project I will move it to your GRADED folder.

1. Make sure the macclass server is open. There should be a macclass globe on your desktop if you are indeed connected.
2. When you have finished a project first save the final layered file to your WIP folder on the Server.
3. After you have saved the layered PSD, and with it still opened, go to Image>Duplicate and check the Merged Layers box. This will generate a duplicate flattened file with the word "Copy" appended to the original file name.
4. Close the original PSD file.
5. With the Copy active go to file Save As> choose the Photoshop PDF format for this flattened file. Direct the save location to your TOGRADE folder. Once you click Save, you'll be presented with a second PDF dialog box to choose the compression codec. Choose ZIP. Click OK.
6. Physically move your final PSD file from your WIP to your FINISHED folder, either at desktop level or via Photoshop's File Browser. This way, since it is no longer in WIP, you won't work on it by mistake. You will also have a layered copy to work on in your FINISHED folder in case I find mistakes on the flattened PDF.
7. Does this mean you are given a second chance on the lessons? Yes, so long as your other projects are in on time. I won't accept a re-do of, for example for Lesson 1, if Lesson 3 is due and has not been turned in. The object is to stay abreast of the Lessons and if you have extra time and so desire, then you can re-do a previous lesson that received a less than perfect grade.
8. However, you cannot recoup points taken off for turning lessons in late.

Color Settings:

Opening Images with and without embedded Color Profiles:

If you open an image and it is in a different RGB color working space, choose to use that image's embedded RGB profile.

If you open an image and it has no profile, choose to use the current RGB working profile, which is usually sRGB IEC61966-2.1.

You can view and set your Color Work Space by going to Edit>Color Settings in the Adobe Photoshop CS2 program or in Adobe Bridge under Edit>Creative Suite Color Settings.(Mac & PC)

For Photoshop CS on a Mac, look for Color Settings under the top Photoshop Menu.

Common RGB Working Spaces & Profiles:

Adobe RGB - good general RGB workspace for inkjet prints; landscape & nature photography; produces high chroma and fully saturated color graphics. Also fine for high-end commercial digital printers. Using this space prior to CMYK conversion, for off-set press, often produces unexpected results because the gamut of Adobe RGB is much greater than that of the CMYK gamut. This means that if your image has very saturated colors they will "dull" quite a bit after the conversion.

Colormatch RGB - ideal RGB workspace to use before CMYK conversion for off-set printing and good editing space for portrait photography as it is kind to skin tones. Also fine for ink-jet printing.

sRGB IEC61966-2.1 - good general RGB workspace for web, and for printing photographs on commercial digital printers, i.e. your local drug store, grocery store, Costco. Also works fine as a workspace to use prior to CMYK conversion for offset printing but Colormatch RGB is the ideal workspace for that

Your Monitor Profile - (only recommended for closed loop workflow-meaning your images are only being opened on your system and printed on your personal printers).

Gamut - Each of the above Color Spaces has a different color gamut. A gamut is a range of colors. See Adobe Help for more information on Gamut and Color Working Spaces.

Monitor Calibration - See Adobe Help for more information on this. If your monitor is not calibrated you run the risk of making erroneous color correction choices on your images. See Adobe Help for more information about this and creating a Monitor Profile.

For Mac OS 10.4 use the Apple Display Calibration Assistant. Go under the top Apple Menu>System Preferences>Display>Color>, click Calibrate and check Expert Mode. Follow the on-screen instructions.

For Windows XP use the Adobe Gamma Utility found in Control Panels.

You can also purchase other software/hardware to create profiles for your monitor and your printer.

Mama's note: So far, I have not had any problem with using the Apple Display Calibration Assistant on my Mac and the free Adobe Gamma Utility to create a good Monitor profile for my PC. I've been working with Photoshop and Desktop Publishing programs since 1998. My output prints, both on inkjet and offset press have been close enough to the Monitor display. However, everyone sees color a little differently and the only "tools" used to judge values with the Adobe Gamma Utility and the Apple Display Calibrator are our "eyes." So, if you are not Color-blind and if you can "squint" you should be able to use these free "eye" based utilities to create a characterization profile for your Monitor.

The profile will make adjustments with the primary goal being "neutralization," which means that when equal amounts of Red, Green, and Blue light (or phosphors) cross over each other, that it produces a perfectly neutral color from black to white which includes all shades of gray, void of any particular color cast or dominance.

You will have to periodically calibrate your Monitor. Over time, certain phosphors may become weaker causing dominant color casts by other phosphors, much like the life of a fluorescent bulb. Re-calibrating or characterizing a new Monitor Profile will assure consistent color for your outputs, in that you won't be making color adjustments trying to change or compensate for your image in an erroneous manner due to a bad monitor profile. A tell-tale sign that re-characterization is necessary is when all of a sudden your prints no longer appear to be matching your monitor's representation. Granted that could be due to the printer software, or it's own calibration and needing a printer head cleaning. But if the printer's software is showing a full load of ink, is printing clean and calibration marks are in line, and you are still getting prints that are not as good as you've been used to, then re-calibrate your Monitor and print again!

Another thing I do on my Mac and on my PC is to choose a neutral gray background color for my Desktop. Color Casts show up more in neutral mid-tone areas, so if my Monitor starts to go outta-whack, it becomes apparent just by looking at the Desktop.

The neutral gray color I choose for my Desktop Background has RGB values of 128,128, 128. Or a hexadecimal value of "808080."

Setting Type in Photoshop:

Reset Characters to Default - To reset the Type Tool's Character palette back to it's default font, size, leading, tracking, etc. click the palette's flyout menu and check Reset Character. This is very important and you will find it a valuable command when executing all these project ads.

Be aware that any settings you have changed either in the Character or Paragraph palettes or top Options Bar for Type are "sticky" settings. They don't go away unless you manually change them back to default settings or other personalized settings.

Anti-Alias Type - When using the Type Tool in Photoshop, be sure the Paragraph Type and Point Type layers have some sort of anti-alias applied. This setting can be found in the top options bar when you have the Type tool selected and a Type layer. There are 4 anti-alias methods to choose from. A setting of "None" will produce jaggy edges on your type.

The following information on Open Type was extracted from the Adobe Help Files.

Open Type Features - The OpenType font standard was developed jointly by Adobe and Microsoft, and it brings the advantages of the PostScript Type 1 and TrueType font formats into a new format that takes advantage of Unicode character encoding. OpenType fonts use a single font file for both Windows and Macintosh computers, so you can move files from one platform to another without worrying about font substitution and other problems that cause text to reflow.

When working with an OpenType font, you can automatically substitute alternate glyphs, such as ligatures, small capitals, fractions, and old style proportional figures, in your text. For Japanese OpenType fonts, you can use ligatures, discretionary ligatures, Fractions Japanese 78, Japanese Expert, Japanese Traditional, Proportional Metrics,Kana, and italics if the font provides them. In Photoshop, these options are in the Character palette menu.

Substituting alternate glyphs in Adobe Garamond Pro

OpenType fonts may include an expanded character set and layout features to provide richer linguistic support and advanced typographic control. Feature-rich OpenType fonts from Adobe with support for central European (CE) languages can be distinguished by the word “Pro,” which is part of the font name and appears in application font menus. OpenType fonts that don’t contain central European language support are labeled “Standard,” and are designated by an “Std” suffix in the fonts’ menu names. All OpenType fonts can also be installed and used alongside PostScript Type 1 and TrueType fonts.

To apply OpenType features

1. Make sure you have an OpenType font chosen when using the Type tool. If you don’t select any text, the setting applies to new text you create.

2. From the Character palette menu, choose one of the following from the OpenType submenu:

Standard Ligatures Are typographic replacements for certain pairs of characters, such as fi, fl, ff, ffi, and ffl.

Type with the Standard Ligatures and Discretionary Ligatures
options unselected and selected

Contextual Alternates Are alternative characters included in some script typefaces to provide better joining behavior. For example, when using Caflisch Script Pro with contextual alternatives enabled, the letter pair “bl” in the word “bloom” is joined so that it looks more like handwriting.

Discretionary Ligatures Are typographic replacement characters for letter pairs such as ct, st, and ft.
Note: Although the characters in ligatures appear to be joined, they are fully editable and do not cause the spelling checker to flag a word erroneously.

Swash Substitutes swash glyphs, stylized letterforms with extended strokes (exaggerated flourishes).

Old Style Are numerals shorter than regular numerals, with some old style numerals descending below the type baseline.

Stylistic Alternates Formats stylized characters that create a purely aesthetic effect.

Titling Alternatives Formats characters (usually all in capitals) designed for use in large-size settings, such as titles.

Ornaments Are devices that add a personal signature to the type family and can be used as title page decoration, paragraph markers, dividers for blocks of text, or as repeated bands and borders.

Ordinals Automatically formats ordinal numbers (such as 1^st and 2^nd) with superscript characters. Characters such as the superscript in the Spanish words segunda and segundo (2^a and 2^o) are also typeset properly.

Fractions Automatically formats fractions; numbers separated by a slash (such as 1/2) are converted to a shilling fraction (such as ).

Real-World Type-Setting - Setting Type for the projects in Photoshop for this class it is fine, and in certain output instances it is fine. However, read on to get a clearer understanding of why typesetting is usually NOT done in Photoshop!

This is a Photoshop class, and so you will learn to use the Type Tool, Character, and Paragraph palettes contained within Photoshop. However, I want all my designers to have a clear understanding that when you design work for offset press, setting Type in Photoshop would be a grave mistake and a disservice to your client and to the design, as the PostScript type will be much sharper if set over your image in InDesign or Quark. This is because the PostScript type set in Desktop Publishing programs is not limited to the resolution that pixel based (raster) images are. In other words the PostScript type will print better, faster, and at the ImageSetter's output resolution (usually 600-1200dpi).

While all body copy should be done in a DTP (desktop publishing program), there are instances where some type should be created in Photoshop, whether it be for print or web output. It is acceptable to use a file with Header or Headline text from Photoshop if Layer Styles, Effects, or Filters are applied. These are some things which cannot be applied from within the DTP or HTML for web. Another acceptable instance for typesetting in Photoshop is if you are using the JPEG file format to reproduce work on digital photo printers. Usually the file resolution for this type of output is 300 pixels per inch, and it produces very sharp looking type, while lower resolutions will produce softer type. There is a recent trend for photographers and designers to create Comp or Promo cards using this type of photo output. You can get 4x6 high quality photo prints for as little as 14 cents a piece. Also, it is perfectly acceptable, in fact desirable to create any special effects text in Photoshop for Web output. But, here again, body copy on a web page loads faster and usually has better readability and editability, if it is formatted in an HTML editor or Web authoring program.

With that said, we will continue to explore setting type in Photoshop because there is value in learning more about the Paragraph and Character Palettes in this program. There is much you can do...and some things you shouldn't do.

If your output is for any type of printing you should NEVER use any "FAUX" options that are found under the flyout menu for the Character Palette. However, the other options found there are fine.

Typography Terms:

Point Size - The measurement of a particular type size in whatever point units are being used. Traditionally, this was done by measuring the distance from the top of the d ascender to the bottom of the p descender. An alternate definition is the height of the scaled font bounding box. But if the d ascender top and p descender bottom are not the farthest away from the baseline of any character extremity, the bounding box method yields a different result. Most fonts do not adhere to any specific sizing guidelines, although some type foundries do have a consistent set of guidelines across their product lines. In Photoshop a point is 1/72 of an inch.

Leading - (led' ing) The total distance due to space added between the baselines of lines of type on a page. A leading of 0 would superimpose lines of type. A value of leading larger than the point size is considered « positive, » while a value of leading less than the point size is considered « negative. » A common formula for traditional leading is 1.2 × point size, or 120 percent of the point size. I have noticed a trend toward more open leading, which allows more spacing between lines of type. (1.3-2.5 x point size). So named from the era of hot type, when strips of lead alloy were inserted between type bodies to set interline spacing. See also minus leading and solid leading.

Auto Leading - This will apply the traditional formula 1.2 x point size to calculate the spacing between lines of text.

Open Leading - This will apply greater amounts of spacing between lines of text than the traditional formula, to produce a very "open" feel to the body of text.

Solid Leading - This is when the leading amount is equal to the point size of the type. Also when referring to this formula for point size and leading it is called "Set Solid."

Tracking - The adjustment of space between characters by adding or subtracting the same arbitrary amount of space between all characters.

Wide Track - Increase amount of space between all characters.

Narrow Track - Decrease amount of space between all characters.

Kerning - The adjustment of space between two adjacent letters.

Horizontal Scale - Increasing or decreasing the width (x-axis) of Type or any element, usually creating a disproportionate appearance.

Vertical Scale - Increasing or decreasing the height (y-axis) of Type or any element,usually creating a disproportionate appearance.

Baseline - An imaginary reference line running along the lowest non-curved portions of characters such as b, d, A, E, etc.

Baseline Shift - Moving a letter or group of letters above or below it's original baseline.

Serif - A short stroke of varying design, shape, and thickness attached to the ends of character stems.

Sans Serif - A typeface design not having serifs. It is also known as « Lineale. » Examples: Helvetica, Arial, Verdana, Impact.

Typography Info Links:

Type Terminology by Cassie Hart
Learning the language of type is essential to mastering it. Get started with this glossary.

Type Palettes
How to choose and use font and typeface palettes.

The Language of Type
Keystroke combinations for Mac and PC to access special font symbols and characters.

What the Font? by Allan Haley
Type classification made easy with these sixteen groups of type styles. 

Ten Tips for Top Type by John D. Berry
It doesn't take much to produce pages with type that looks professional and pleasing, and that's easy to read.

Adding a Layer Mask to a Pixel Layer:

1. Highlight the pixel layer.
2. Click the Add Mask icon at the bottom of the Layers palette. This adds a Reveal All White mask thumbnail to the right of the Layer thumbnail. There is also a chainlink between the Layer thumbnail and the Mask thumbnail.
3. To edit the mask you must click on the mask thumbnail on the layer in the palette; you will see an obscure outline around the active thumbnail, and the document window's title bar should reflect the name "Layer mask". You can isolate discreet parts of the layer to control the transparency or opacity of those areas by painting in layer mask mode.
4. Click in the document window, and choose a paintbrush or linear black/white gradient tool.
5. Paint with black or drag a black/white gradient in the document window, and you will see that those parts covered with black are now transparent, giving the appearance as though erased. But paint over those parts again, with white and all the original pixels will be revealed.

The masking mantra is, "White Reveals, Black Conceals." or "Black Conceals, White Reveals."

Mastering Masking is key to becoming a Photoshop Power User and a more versatile designer!

Linear Gradient Layer Masking (Demo) - Jumped to Lesson 2 from the Syllabus, "Blending Photo Into Solid Color Background" and applied the technique of Linear Gradient Layer Masking to the Movie Ad with Security Guard and the Retreat Ad with the Beach image. Following Mama's directives and the instructions of the text --all designers created perfect looking masked images.

To learn more about Gradients and Masking, frequently check the Com 2250 Tutorials pages on Photoshop Mama's site, for any updated Tutorials with the words "Gradient" or "Mask(ing)" in the Title.

Shortcuts & Tips:

Command Option W - To close all open windows (not Applications) on a Macintosh Desktop.

D - Sets the foreground/background swatches in the Toolbox to the default Black/White.

X - Switches the positions of the foreground/background colors

Command I (Mac); Control I (PC) - Inverts the color to it's negative, complement, or opposite color on the color wheel. Menu location: Image>Adjustments>Invert.

Option Delete (Mac); Alt Backspace (PC) - Fills layer or selection with the current foreground color. Menu location: Edit>Fill-Use:Foreground Color.

Command Z (Mac); Control Z (PC) - To Undo the last step. Menu location: Edit>Undo.

Command T (Mac); Control T (PC) - Free Transform. Menu location: Edit>Free Transform.

Hold down the Shift Key while you drag the Linear Gradient Tool, to constrain it to a straight line.

(v.03.05.06)