Digital Imaging & Graphic Design

Digital Imaging basics | Overview of Photoshop | Retouching | Typography & Messaging | Design Principles

Brief Overview of Photoshop

Photoshop is the industry standard for the editing of digital images. While learning how to be a pro at PS can take years, learning the basics is rather fast, and easy.First and foremost, is the opening screen. By default, if you create a new document in Photoshop it will make a document that is the same size as your clipboard area (at right). The first thing you notice is that you can (and should) choose a document name, rather than leave it as untitled-1. Second, in the Preset area, you can take the clipboard-sized picture, or select from various other presets, such as paper-size (legal, letter or tabloid), international paper (A3/A4/A5/A6), photo (2x3/4x6/5x7/8x10), web (640x480, 800x600, 1024x768[standard web sized now] etc..), mobile (240x320 [standard flip-phone], 320x480 [standard smartphone]) and video (which we will discuss in grade 12 comm tech).

Next, you'll notice that your width and height are, by default, in pixels (each pixel being an x,y coordinate in the document). You can adjust this via. a dropdown menu to inches, picas (used in typography), points (a subdivision of a pica, also used in typography and printing), or centimeters. The resolution refers to how many x,y points will be represented in the width/height that you have selected. By default this is measured in pixels-per-inch (ppi) but can also be measured in ppcm. 72 ppi is standard RESOLUTION for media designed for the web (any more ppi is indistinguishable on a computer screen, thus the file is artificially larger than it needs to be). Between 220ppi and 300ppi is print-quality, but the image size (bottom right of that panel) will jump noticeably as you increase the resolution. Larger file sizes means more horsepower needed for your computer, so design for the form of communications for which you will publish your works. Finally, you'll notice the colour mode. This is either greyscale, black and white, RGB colour, or CYMK. Typically we work in RGB colour (red-green-blue, displayed by monitors) for publishing to web, or CMYK (cyan, magenta, yellow, black) for publishing to print.

Tools:

Let's take a quick look at the tools available to use with Photoshop.

In Photoshop, or any other picture editing program, the toolbar comes grouped to make tools with similar function with each other easily intuitive and accessible. For example, in the pixel selection portion of the toolbar in Gimp and Photoshop, there is a basic square/circular pixel selector. The trick with graphic design programs is knowing what tool is fastest to accomplish each job.

Pixel Selection Tools

There are always a variety of ways in which you can select pixels in any digital image editing program. Photoshop is no different. The top collection of tools (above) you'll see the pixel selection tools used in PS. The marquee tool (M) is used to quick select pixels in predefined shapes such as a rectangle, oval etc.. The basic selection tool (V) is used to select elements from a layer or layers and apply transformations to them (be it scale, position, rotation etc...). The lasso tool (L) toggles between a freehand selection of pixels, a polygonal selection (straight lines), and a magnetic selection (which looks for edge contrast). Finally there's the quick selection tool (W) that will allow for mass selection of pixels of similar colour/contrast and pixels you 'paint over' - this is the most often used pixel selection tool.

Depending on what you're attempting to select, you will also bounce back and forth between various pixel selection tools and either add to your selection (by holding shift down) or subtracting from your selection of pixels (by holding alt down). You also have the option to 'feather' each selection (in the bar on the top after you have selected your tool) which adds a border of X pixels to your selection (where X is decided by you on your selection of the tool).

Pixel Manipulation Tools

The tools included in this second area are the heal brush/redeye tools (J) - used to blend the existing pixel with information from pixels at another location (or from a pre-selected colour). The brush tool (and pencil tool) (B) adds pixels at the location the cursor is. The colour of these pixels is determined by the foreground and/or background colour (seen at the bottom of the toolbar - black and white are the defaults. This is obtained by hitting D. The letter X allows you to quick switch the foreground and background colours. The clone stamp (S) tool makes an exact replica of pixels selected from another area anywhere you 'stroke'. The history and art-history tool won't be addressed in this course. The eraser (E) is obvious in its use. Next is the paint bucket (or gradient) tool (G). This fills a pre-selected are with either (paint bucket) a solid colour, or in the case of a gradient, in a progression from colour choice to colour choice. Smudge/Sharpen/Blur tools (R) take pixels from around the selection and manipulate them all together for a desired outcome (smudge takes colours and combines them with other colours, sharpen creates contrast and removes, to some degree, the blurring, blur does the opposite of sharpen). Finally, the dodge/burn (O) tool takes (dodge) the K values (think of black) and reduces them, while burn increases the K value at the pixel locations selected.

Vector Tools

The vector tools, all add shapes to the image that can be controlled via anchor points and involve masks. Masks are way in which you protect various areas of the image while manipulating the data in others. All vectors tools are enormously useful in that shapes retain the ability to be precisely manipulated even after you commit to inserting the shape. The tools in the vector area of the PS toolbar are: The pen tool (P) - which is used to create scalable shapes (you can make them bigger/smaller without loss of resolution), the text tool (T) used for text, and the shapes tool (U) used for either more elementary, or complex shapes. All tools in this area have the added advantage of being able to be precisely reformed using Bezier handles (anchor points that can be adjusted to give either sharp corners, or arcs).

Layers

Layers are the meat-and-potatoes of what digital imaging editing is all about. The layers panel can be found at the bottom right of the Photoshop screen (seen at right). Think of a layer as a transparency put on top of a physical picture. You can add anything you want to that transparency. Unlike a physical picture however, you can also perform complex mathematics to that transparency and combine it with layers above, or layers below it. The further to the top of the panel a layer is, the further to the forefront of your screen the layer is represented (see pictures at right).

A couple features, at a glance, include the blend-mode dropdown menu (seen saying 'Normal' in this picture), which combines the current layer's information and mathematically combines it with layers 'under it'. The opacity slider (top right of the panel), which determines how much of your current layer will be included in the mix resulting on the screen (100% being completely opaque, 0% being completely transparent). Other features include the visibility (the eye) of the layer (when turned off, you can't see the layer), the locks (should you want to protect the content of the layer) and the fill - which won't be discussed in this course. At the bottom of the layers panel are various other tools, they include effects (F/X - such as drop shadows, glows, bevels), layer masking (rectangle with a circle icon - allowing you to manipulate portions of your image while protecting others), adjustment layers (the black/white circle - which allows you to alter pixel color/depth, grouping (making folders to easily identify layers of similar use/content) and the add layers (ctrl+shift+N) and delete layers icons.

Filters

Filters are found at the top in the menu system of the Photoshop screen. While description of each filter is a course unto itself, there are a basic set of filters that are used once you've selected a pixel region. Blur Filters are used to, logically, blur an area. Various types of blurring can be used to effect, when you want to soften an area, to create random background noise and to hide imperfections. The Noise Filters are also useful in creating randomness, to mimic the chaos of nature. Finally, the Sharpen Edges filter is used in creating greater contrast between selections. While this doesn't do justice to any particular filter set, filters are something you can pursue and you'll find great descriptions around the interwebz about them, when to use them, and what kinds of things you can do with them that you might otherwise not think to use.

Layer Shortcuts and Tricks

Rename layers by double-clicking on the layer name.
Alter text by double clicking the 'thumbnail' of the text layer
Change the transparency of a layer by changing its opacity with the Opacity slider, or typing a value into the Opacity box (which is visible when you have the Selection, Move, or Crop tools selected).
Duplicate a selected layer by pressing Ctrl-J. You can also duplicate a layer by dragging it with select chosen and while pressing the Alt key.
Select multiple layers by holding down Ctrl and clicking the layer names. This forms a temporary link between the selected layers that allows you to move them as one unit, delete them all, and so on.
You can also link layers together. Select layers by clicking on them while holding down Shift or Ctrl. Once you have selected all the layers you wish to link, click the Link Layers button at the bottom-left of the Layers palette (signified by the chain). Linking layers allows the link relationship to remain even after you select a different layer (unlike the process of simply selecting multiple layers).
To unlink all the layers, select one of the linked layers and go to Layer > Unlink Layers. To unlink a single layer, select the layer you wish to remove from the link and click its corresponding link icon; the other layers will stay linked. To temporarily unlink a layer, hold down Shift and click on its link icon (a red “X” will appear over the link icon). Reactivate the link by holding down Shift and clicking the link icon again.
Rearrange layers by dragging the layer above or below other layers. Use the “move down” shortcut Ctrl-[ and the "move up" shortcut Ctrl-] to move selected layers up and down. Shift-Ctrl-[ and Shift-Ctrl-] will bring layers to the very top or the very bottom of the stack.
Select a layer by using the keyboard shortcuts Alt-[ and Alt-]. These keystrokes let you move up and down through the layers in the Layers palette.
Create a new layer by pressing Shift-Ctrl-N . This will bring up the New Layer dialog box. Want to create new layers quickly without having to deal with the dialogue box? Simply press Shift-Ctrl-Alt-N .
Merge a layer into the one beneath it by pressing Ctrl-E. If you have selected layers, this shortcut will merge those selected layers together.

Saving As....

When saving your file, the default save type is *.psd (photoshop document). If you choose File>Save As you have the option in the drop-down menu you'll see the following options (at right). Depending on what you're using the file for, and what the content of the image is, you can choose any of the following common file formats: (see next)

psd - Only useful in editing in Photoshop - is not open-able in programs other than Adobe products. It preserves layers and adjustments. It is the default save-type in Photoshop.
gif - Was the first web format for images. Useful in that it's highly compressible, but results in terrible pixelation and horrible colour reproduction. Used only where colours are highly limited and photographic realism isn't an issue (e.g. a logo). Supports transparency
jpg - Replaced gif as the format for images requiring compression, but still maintaining photographic integrity. Highly compressible.
PDF - Used in making documents write-protected, or sending images to print such that nobody can edit the picture. Can embed fonts. Quality ranges from low to high depending on export settings. High quality print settings result in very large filesizes.
PNG - Introduced after GIF, it has a wider colour range, supports transparency, and is generally more compressible than GIF but not as useful as JPG for photographic reproduction
BMP & TIFF - not really used used much since while it's non-lossy, it also results in ENORMOUS file sizes.

One thing you'll notice is that when the next screen comes up, you'll be given various options to save the file under different compressions - with an indication of the final filesize on the popup window. We'll see more of this as we explore Comm Tech in Assignment #1-3.

Assignment #2: Photoshop and website design

Find a stock image that you like for some sort of travel location. Make sure it's LANDSCAPE orientation (e.g. horizontal, not vertical). I used this one here, but as long as you find something from a royalty free stock like RGBStock, Pexels or Pixabay, then you're fine. Try to get something where 1/2 of the image is light.

Create a blank new PS document. Take the "web most common" option. Note on the right side that the pixel x/y dimensions are 1366x768. That's a 16:9 (or WIDESCREEN) design ratio. It's also 72 pixels-per-inch (ppi or dpi for dots-per-inch).

Drag your picture you downloaded from your working folder onto your document (or use File>Place Embedded).

You may need to resize the image to fit your artboard when you first bring it in. Go ahead and do so before committing the picture (the checkmark).

Now it's time to save your document so you don't lose everything if it crashes. File>SaveAs and put the PSD someplace logical (a comm tech folder in your documents). If you're on a chromebook and working on Photopea, things are automatically saved so you don't need to worry as much.

Step 1 - Selection & Fills

Make a new layer and call it BANNER. (CTRL+SHIFT+N in photoshop).

Make a selection using the rectangular selection tool (see image at left) and choose an area across the top you're planning on adding the title bar. Change the foreground colour to something near white (I used #EEEEEE see below)

Make sure your new layer is selected. Your rectangular marquee (looks like 'marching ants') should be visible. You will now fill this selection we made on the image by pressing ALT + Backspace (Photoshop is ALL about the shortcuts) - NOTE: if you like to do it the hard way, from the menu choose Edit>Fill>foreground colour. Alt-Backspace fills any selection with the colour that is the 'foreground' of the colours palette.

Choosing foreground color (above). At left is the selection after being filled.

To get rid of your dotted line (your selection), hit CTRL+D (or DESELECT).

Step 2 - Layers panel, blend modes and opacity

We want to see through this solid colour so there are a variety of ways we can go about doing this. We can either choose to select the blend-mode (which applies mathematical relationships between the layer chosen, and all layers underneath it) or change the opacity - which simply allows a % of the current layer to be seen. We're going to do both.

We'll choose to keep it as NORMAL blend-mode but change the opacity to 80% .

For detailed descriptions of the blend-modes check out Adobe's official page. The most commonly used blend modes are darken, multiply, screen, overlay and colour (in my experience), but all have a role depending on what you're trying to do.

Make a new layer. Call it bottom of top border

We're going to create a new very thin rectangular marquee at the bottom of your banner. We're going to fill it with a charcoal grey (I used #444444, and remember alt+backspace to fill).

You should have this.

One last thing we'll do to help make the line less obstructive. We'll change the blend mode of the "bottom of top border" to HARD LIGHT.

Finally, we'll move this layer UNDER the banner layer so it's not as strong. (click and drag the layer down or select the layer and hit CTRL + [ or CTRL +] )

We're also going to group those two layers so that we can move them together if we want. We do this by selecting both layers (CTRL+left click each layer) then group using the icon at the bottom (or by CTRL+G).

Rename this group to something logical. It should look something like this now.

grouping layers before (above) and after (below).

Step 3 - Creating the title border

A) my Logo for TravelBug

Come up with a catchy/clever name for your travel company. I went with TravelBug. As such I'm borrowing some CC artwork from the internet. If you want to design your own travel company logo (or do a CC search on google images for logos) feel free. I used this icon and brought it into the project in the banner link group. (NOTE: if you're on a MAC computer you won't be able to import SVG's and you'll need to use this PNG version of the icon here).

Generally we design illustrations like these in Adobe Illustrator. Illustrator reproduces text in VECTOR which means ultimately our text is crisp and is scalable to any size without losing fidelity. In fact there's an old (for you) expression that is: "Those who design use Illustrator, for those that can't, there's Photoshop". Nonetheless, we're going to use Photoshop because frankly, Illustrator is far harder to learn *smileyface*.

I added the word TRAVELBUG to the top left of my banner. I'm using the icon I borrowed from the internet to go beside it. I'm also coloring the two words in the compound word to reflect colours in my picture and in my logo (blueish for TRAVEL and green for BUG)

To get rid of the black background in my imported icon I'm pressing W. You will likely get the Object Selection tool by default, but you can click and hold down the icon and you'll see other tools behind. Ultimately you're choosing the magic wand tool (which selects all like-coloured pixels that touch the pixel you click on). How it works is if I click on a pixel that's black, it'll grow outwards and grab all pixels of that colour that are touching.

To hide the black, I'm going to ALT+CLICK the mask button (which hides everything in that layer that is NOT selected). You may not have to do this depending on what you use as an icon for your travel company.

B) Putting in my navigation items

Every travel company will have anywhere from a few, to a dozen subpages linked from the main page.

We're going to put each text line separately, as opposed to one large text-box because that gives us greater maneuverability in placement of each line of text. Click on your Text tool (T). Find a typeface (font) that you like for your company. Typically it will be a Sans Serifed font. We'll include the following as 3 separate layers of text.

FLIGHTS
HOTELS
PACKAGES

I chose a color of #888888 (light grey) for the color. When you're done putting in your 3 type layers, control click them all in your layers panel and use your select tool (V). With all 3 layers selected (ctrl-click each layers to select all 3) go to the top of the screen and select the icon indicated in the picture at right. This is a transform adjustment that allows us to, in this case, 'Align Right Edge' of each line of text. Additionally, we'll choose 'align vertical centers' to ensure they're spaced evenly . I've purposefully badly aligned them here to show you a before/after view

Before aligning (select tool MUST be enabled for you to see the alginment options)

After aligning the text

Depending on what choices you've made (icon and background image) you should have something that looks roughly like this.

Notice how 'flat' the text at right looks? Let's fix that in our next section.

Step 4 - Layer styles

Our text is flat. It's somewhat uninteresting. The bounce-rate for a webpage is a measure of a single-page to your website. And often people decide to 'bounce' within a few seconds of visiting your site if it's not visually appealing. We want to make what we are clear and obvious. Grab your first text layer and click on the F/X button on the bottom of the layers panel. Choose BEVEL AND EMBOSS. At any point you can double click the added styles on the layers panel and open back up the layer style panel.

We're going to copy that style over to the other menu options.

To do so hold down ALT and click and drag the EFFECTS to another type layer. In my case I started it on the word PACKAGES, so I held down ALT and dragged the effects to FLIGHTS and again to HOTELS.

Finally, I don't want my company title TRAVELBUG to use the exact same typeface (font) as my links. So I'm choosing a different font.

I also copied my bevel and emboss to the company name.

Without layer styles

with layer styles on the options

layer style on the company name only

As a designer, ultimately it's about readability. Personally I find I don't actually like the final product with the layer styles on anything other than the company name. So I'll clicked on the eyeball next to the effects to turn them back off.

Step 5 - Call to action

I'm now closing up my banner link group to focus on the "call to action" section of the page. It's a word or sentence that's going to get my prospective clients to engage in my product. Feel free to use my CTA if you'd like, or make up one of your own.

Based on my picture, in this case I'll use the phrase "Relax in one of our ocean-side beach huts" and BOOK NOW. I used a light sans-serifed font for my first sentence and put it in the middle of the page. But it's hard to read.

Because of the readability issue I'm going to include some outer glow. (click on FX)

I chose the following settings (at left). I wind up with something like this (below)

Now for the big wording in my CTA. TRAVEL SMARTER (whatever that means). So I put large type in the middle of my page and use these layer styles at left

But I don't like it. It obscures my beach huts. Solution? I can do is remove the fill on the words (set it to zero).

I'll create a fake button to click on that says BOOK NOW under these. We'll do that in the next section.

Step 6 - Vectors and paths

There's still something missing from our project. To adhere to the principles of good design (our C.R.A.P. rules from grade 10 a MUST-read for you)

We want 2 last things. A button to book and some way of finding out more information. But also to reflect our colour theme. We also want an indication people could scroll down and find out more information (which is popular in web-design these days).

Create a group (folder) called Vectors.

Create a blank new layer in that folder called Button (remember, CTRL+Shift +N).

Choose your foreground color to be compatible with your logo color (mine's that color of green)

Use the rectangle tool and draw a rectangle that will act as our button on the webpage.

To make that rectangle rounded, enter a radius in the top bar. Choose your Fill color and it will fill with the foreground color. Once drwan you can use the inside corner handles to reshape the rectangle to make it more, or less, curved

Try centering your button now. Notice the outside shape is still visible?

Go ahead and put in text saying BOOK NOW on top of your button

Lastly make a new layer called 'more info'.

Use a regular rectangle tool and draw a rectangle at the bottom of the page. Fill it with pure white. If you ever click off or lose track of the vector shape, then just go back to the paths tab near layers and fill using the dialogue at the bottom (picture at right).

I added another blank layer and used the circle shape (or use a brush) in the middle to give it a "tab look".

I also copied the bevel/emboss layer style over from the top words over to the button to help separate it from the background.

I'm finally going to use the line tool give people an indication that you can pull that down (or scroll down).

Drag your lines to be roughly the path at far right. If you screw up you can use the direct select tool to manipulate the points.

When you're ready FILL PATH (I used color #888888)

Finally, duplicate your layer that says 'relax in one of our beachside....". Drag it into your vectors group and change the type by double-clicking the text box.

Change it to something that lets the user know there's more information below.

We're done. Save the PSD again and turn it in. Also turn in a JPG this time from your export as dialogue.

You should wind up with something like this (below - obviously with your company name, logo and call to action).

Assignment #3: Layers, masking and blending - Creation of an on-line advert

You are going to use 2 photos. The (1) gear below, and (2) a closeup headshot of your partner in the class you take.

click on the gear image and then click the arrow at the top right to download it to get the full-sized picture from google drive, then save THAT file to your work folder.

Instead of taking your own second shot, If you would rather use the handshake image for the second image feel free to do so. I'll use it in my examples.

Step 1 - Setup

Open your GEAR picture in explorer. Double click the layer and call it GEAR

Now drag the shot you took onto the same photoshop document. Again, you'll see the handshake in the place where your shot would be

Before you hit enter (or click on the checkmark) we want to resize your shot so it "fits" mostly in the circle of the gear - problem is - we can't really see the gear since it is behind our hand at the moment. We want to hide some of the visibility of the handshake layer so at the top right of the layers panel - turn the handshake to 50% opacity (so we can see through it).

Step 2 - Layer mask

Resize the handshake so that the knuckles are just at the edge of the center 'ring'. Let's get into the habit of good PS etiquette, which is the name our layers. To do so, simply double-click on this layer, and rename it to handshake.

Turn the opacity back up to 100%

Some theory: the way that masks work is that anything 'selected with black' will blocked out from the selected layer (think of it as being cut out w/ scissors). In the picture below you can see roughly how a layer mask works. On a layer mask, whatever is painted black is made invisible. Whatever is white stays visible and is affected if it's an adjustment. Whatever is white is visible.

Make sure you have the handshake layer selected.

Make sure black is set to the foreground colour and white as a background colour. This is done by either clicking on the tiny black/white box next to the foreground/ background colour chooser at the bottom of the tools panel, or by hitting 'D' (for default). Look at the bottom of your tools panel to see the black/white squares.

Make sure you're on your handshake layer (i.e. the HAND should be selected). Let's take advantage of photoshop's automation tools and paint the background above and below the hands.

Grab the quick select brush (W). Quickly paint the background. There are a variety of ways to select the background to pick everything but the hands/arms then fill them with a solid black colour using the paint bucket (which is the equivalent of painting over them with black).

Notice however, once we've painted the background we've gotten bits and pieces of the watch and the fingers? We want to UNINCLUDE those by holding alt down and painting those bits. Those will remove those pixels from the selection.

Once happy with the selection, simply click on mask button (below). Notice however, that you're getting the opposite of what you wanted to keep. So undo (ctrl+z) now ALT CLICK the mask button and you'll get the isolation you wanted.

If you want you can refine the mask by clicking on the paintbrush and choosing white, or black, and painting on the MASK (not the hand) and you can either include bits you missed, or remove bits you accidentally got. This is 90% of a retouchers day. To select the mask to paint on, make sure the bracket is around the 'black/white' thumbnail, not the coloured thumbnail

Step 3 - Duplicating the gear

We're now going to duplicate the gear layer by selecting the layer and layer>duplicate or by simply dragging the layer name to the new layers icon. Or finally we can duplicate the layer by holding down ALT and dragging the gear layer to the top of the list.

Click on the mask icon for the gear layer. Start painting over the handshake area in black. What we're doing is painting over the gear and making it disappear everywhere on the inside, so the handshake can be seen. We will leave the outside of the gear as a 'frame' for the hands shaking.

We want to have the fingers out over the edge though, to give the illusion of 3 dimensionality (picture at right) to the piece so zoom in and paint in black take care to ensure that anywhere the fingers overlap the edge of the gears, they're masked so they're visible (see the picture at left).

Step 4 - Colour Adjusts using Layer Fill/Saturation

Next we're going to desaturate the picture with a hue/saturation adjustment to the layers.

To do this we'll click on the little black/white circle icon at the bottom of the layers panel (it looks like black/white circle) which will bring up a menu where we'll want to select a hue/saturation layer.

Now let's click on the colorize button on that menu and choose a value of hue of 200 and a value of saturation of 25 (keeping lightness at 0). You'll notice a nice blueish hue to your work.

Step 5 - Hue/Saturation adjust

We are about to do 2 completely separate things but to hue/saturation layers. So we will create 2 groups using the create group button at the bottom of the layers panel next to the new layer icon - it's the folder looking icon. Call the bottom folder/group BACKGROUND and call the top one BORDER.

Drag all of our layers we've worked on so far into the background folder. You can see that as you add them they all indent slightly in the panel, this lets us know they're part of the background group.

Next you're going to copy your hue/saturation adjustment layer into the border folder (easiest to hold alt and drag it ABOVE THE BACKGROUND FOLDER into the BORDER group. You should now have TWO hue/saturation layers that do the same thing (e.g. 200/25/0 settings)

Lock the background folder group by clicking on the little lock button.

Next, click the top hue/saturation layer (BORDER) folder's adjustment layer. Adjust the LIGHTNESS to 50. It's in the same place as you made your colour adjusts of 200/20/0 before. That should turn everything to a light blue/white. It looks awful doesn't it?

Click the rectangular marquee tool. Draw a rectangle on the border hue/saturation layer's mask. We want to paint the entire rectangle in the middle black so that it is 'cut out' of this whiter mask. With black being the foreground colour use our friend ALT+Backspace to fill it (see the picture above right)

This gives us a border-like effect with our tonal range

Because that leaves the edge very harsh, let's soften it by going to the bottom of the layers panel and choosing the button that says Fx. From that we want to choose the Inner Glow. You should choose the settings seen below (the blue is a colour of your choice).

Inner Glow Menu

Bevel and Emboss

Before we leave the effects, let's ALSO include a Bevel and Emboss and choose the settings from the picture left.

Step 6 - Text addition

This leaves only a few last things to do. We're advertising the OCDSB in this case, so let's go ahead and consider what we want to say in our statement. Likely something about technology, and the OCDSB, so let's choose a script-type font (I chose Mistral, but you choose whatever script fonts are available to you on your computers.

Next I chose the colour as white, and the font-size as 90 point. You'll wind up creating a text layer for Ottawa-Carleton and another one for District School Board. Do NOT include them in the background group. They should be in the Border group, and BELOW the border layer itself.

Notice how when they're outside the mask area, they are greatly reduced in transparency? Additionally, at the top right of the layers panel, I chose to make the opacity of each of those 4 text layers 60% (that means only 60% of the information will be 'pushed through' to be used in the layer.

Finally I made one last text layer, saying 'Technology' and kept the opacity of that layer at 100%.

To this layer I went to the effect panel and added a slight drop-shadow. You should wind up with something that looks like this when you're done.

Concept Check

Google Sites

Report abuse