Mary Helen Yates
This is a collection of materials relevant to my work as an educator and administrator. For more information, please contact me at mary@vividblack.net
Teaching Philosophy
Examples of Instructional Videos
Assignment Example: Portfolio Presentation
In the same way that your images will give confidence to a potential client, assignment editor, or curator and persuade him or her to take the needed risk in hiring or assigning you, your self-presentation is an important element in your future employability and success as a photographer. While the quality of your images is essential to your career, photography is still a field where communicating effectively with other people can make or break your efforts to gain work.
Soft skills—everything from basic communication skills to your ability to demonstrate comprehension of a client's needs—are an essential element in effectively competing for photographic assignments.
Description
In this task, you will create a 3- to 5-minute employer or client-targeted video where you will share the final version of the printed portfolio. This is a final presentation and should be given as an employer- or client-targeted self-presentation. This should be considered a promotional video to your target audience that you can use in the future as a supplement to your website or other video resource.
The video should demonstrate good production values and soft skills and clearly show the entire final printed portfolio page by page. The video should consist of the following:
One-third direct-address discussion: The direct address will be done as if you are speaking with a potential client or employer. You will appear on camera in this section, so consider your appearance, tone, and communication style. This portion should be tailored to your specific industry but should include a greeting, a brief description of your brand or artist statement (recall your pitch statement from Milestone 5), some highlights of your skills as a photographer, and some of the things that make your work unique.
Two-thirds demonstration: This would include demonstrating your printed portfolio with a voice-over (maximum 2–3 minutes). You should reveal the printed version of your work at some point in your presentation, but it is suggested that you take the viewer through a “slideshow” of your work in this section. Review specifications for creating the video and how to upload the file. The voice-overs for the specific areas here should reinforce what you have stated in the direct-address portion of the video.
Submission Specifications
3- to 5-minute video file of your presentation of the final print portfolio
- One-third direct-address discussion of photographic approach
- Two-thirds demonstration of actual physical portfolio
- MP4 file named AI_PHOA408_M6_T1_LastName_FirstInitial.mp4
- Steps for Success
- Complete all related learning activities.
- Prepare an outline of points that you wish to cover in the video presentation.
- Practice what you will say in the mirror or do a test recording.
- Prepare an uncluttered and quiet space where you can complete your recording.
- Review video specifications to make a manageable file size for upload.
- Light the space where you will record and test how that works on camera.
- Test your sound and equipment to troubleshoot any potential issues.
- Gather your printed portfolio (case, book, or box of prints).
- Make a 3- to 5-minute recording that covers your objectives and skills and showcases the work in your printed portfolio.
- Make any necessary edits to the video.
- Reduce size and save as an MP4 file.
- By the due date, upload it to the Discussion Area on the next page.
- By the end of the milestone, respond to a minimum of two of your peers’ posts by commenting on the video presentation created in this milestone as per the task’s guidelines. Your responses need to be a minimum of 150 words each and should cover the following points:
- Success of the video in presenting the photographer’s work
- Success as a targeted presentation demonstrating good soft skills
- Quality of production including lighting and sound
Grading Rubric
Example Assignment: E-Portfolio Course
Assignment 2: Final Project: Final Update and Revise E-folio Website Assignment Overview Building an e-folio website requires continuous revisions to keep it an updated and working portfolio. It is also important for a client to be able to find your e-folio when searching the web. By adding content and keywords, you can ensure that your e-folio website appears in search engine queries that are relevant to your work and experience. Assignment Description In this assignment, you will revise and update your e-folio website according to the specifications and suggestions given in the prior week and add keywords to ensure that a search engine can find you. Assignment Step-by-Step Instructions
Responses to peers are due by two days after assignment deadline. Post your assignment here.
For assistance with any problems you may have when completing this assignment—OR—to offer your assistance to classmates, please use the Questions for the Professor area located on the Learning Path. |
Example Lecture Content: Optimizing Images for the Web
When preparing an image to be displayed on the web, the foremost thing you should consider is the file size. If you use a high-resolution image, as you would in print, the file size is large and the image takes longer to download on the web. The viewer may not want to wait that long and might not view the images—you will potentially lose a client. If you want your image to download quickly, you need to size the image correctly and compress it to reduce the file size. However, this affects the image quality. So what can you do to strike a balance between the requirements of two variables—quality and size—with reciprocal values? Adobe Photoshop is a powerful application that provides you with full control over these two variables.
To prepare a web-based image, you should always be starting with a higher resolution file in order to ensure that the image looks good on screen. It is important to note that computer or device screens are fundamentally described by pixel dimensions; therefore, the web-based image should be described in terms of pixel dimensions as well. So if you have a 6 x 6 image at 72 ppi, the result will be a displayed image of 432 high x 432 wide. When we consider that same 6 x 6 image at 144 ppi, the result will be an image that appears as 864 high x 864 wide on the screen.
When saving files for the web, save as a JPEG, GIF, or PNG. Standard sizing is often 72 dpi with a red, green, and blue (RGB) color space.
The most suitable file formats for the web are JPEG, GIF, and PNG. However, most of the users get confused with which file format to use.

The GIF file format uses a small number of colors (less than or equal to 256 unique colors) to display an image. Therefore, the file size of the image is small. However, using the GIF file format to save an image that uses color gradients and a large number of colors can lead to pixilation. Therefore, you should use the GIF file format when images have flat colors and lesser variations in colors. The GIF file format also supports transparency. Therefore, when you need transparent pixels in the background of an image, you should save the image as a GIF file.

The JPEG file format uses a large number of colors to display an image. Therefore, when your image consists of detailed colors and has smooth color transitions and gradients, you should save it as a JPEG file. The JPEG file format uses a compression mechanism that enables you to reduce the file size by losing some of the image quality. This file format works well for images that have soft tonal gradations and must have a small file size. In such images, using the JPEG file format enables you to reduce the file size without apparent loss of image quality.

The PNG file format works in several bit depths, such as 8 bits (256 colors), 24 bits (16 million colors), and 32 bits (16 million colors with variable opacity). The PNG file format does not distort or alter the original image. Therefore, when you need a high-quality image with fine details and smooth gradients or color transitions, you should save the image as a PNG file. The PNG file format supports transparent background but older browsers may not support PNG and, therefore, may not support transparency. So if you are targeting a wide audience that may be using different browsers, do not use the PNG file format.
You are working on your own website to promote yourself as a photographer. You have several images you want to post on your website to demonstrate you can extract an object (such as a chair, a table, or a lamp) from an image using selection techniques. You want these objects to have a transparent background. You also want to ensure that all of the viewers browsing your website can view the images without installing a new software.
This is incorrect!
Although you can use the REG file format to obtain a small file size with a slight loss of image quality, this format does not allow you to save images with a transparent background. Therefore, you should use the GIF file format. It enables you to get a small file size without reducing the image quality visibly. The GIF file format also supports transparency, allowing you to save images with a transparent background. You should avoid using the PNG file format in this scenario because you want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions.This is incorrect!
Although you can use the PNG file format to save the images, the GIF file format would be a better option to use in the given scenario. You want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions. The GIF file format, on the other hand, is widely supported over the web. You cannot use the JPEG file format because it does not allow you to save images with a transparent background.This is correct!
The GIF file format is the best to use in the given scenario. As all the images use flat colors, you can save the images in the GIF file format to get a small file size without reducing the image quality visibly. The GIF file format also supports transparency, allowing you to save images with a transparent background. You should avoid using the PNG file format in this scenario because you want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions. You cannot use the JPEG file format in this case because it does not allow you to save images with a transparent background.
This is incorrect!
Although you can use the REG file format to obtain a small file size with a slight loss of image quality, this format does not allow you to save images with a transparent background. Therefore, you should use the GIF file format. It enables you to get a small file size without reducing the image quality visibly. The GIF file format also supports transparency, allowing you to save images with a transparent background. You should avoid using the PNG file format in this scenario because you want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions.
This is incorrect!
Although you can use the PNG file format to save the images, the GIF file format would be a better option to use in the given scenario. You want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions. The GIF file format, on the other hand, is widely supported over the web. You cannot use the JPEG file format because it does not allow you to save images with a transparent background.
This is correct!
The GIF file format is the best to use in the given scenario. As all the images use flat colors, you can save the images in the GIF file format to get a small file size without reducing the image quality visibly. The GIF file format also supports transparency, allowing you to save images with a transparent background. You should avoid using the PNG file format in this scenario because you want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions. You cannot use the JPEG file format in this case because it does not allow you to save images with a transparent background.
Once you have decided on the best resolution for your image, you can optimize it for the web by using the Save for Web & Devices dialog box (File > Save for Web & Devices) in Adobe Photoshop. This dialog box gives you complete control over how you can optimize images. It enables you to choose from different file formats. You can preview the original version of an image along with its three variations using different web format settings. This helps you decide the best format for the image, considering both the image quality and its file size.
Adobe Photoshop is a versatile application, which gives you many options to experiment with. It also offers some automation tools that help you speed up your work. Let's take a look at these tools next.
Example Lecture Content: Design Elements
While creating your portfolio, consider these elements carefully.
Logo
Your logo design is the calling card of your brand. It should be distinct, relevant to your work, memorable, and be just as effective in grayscale (on your business card) as in color (on your portfolio). Think about the iconic logo that Starbucks uses. It is immediately recognizable and communicates a consistent, professional company image that is associated with a quality product. Also, remember that a logo has to look good and small on your business card or portfolio as well as large on a banner or a signpost. You want the flexibility of using different sizes of your logo for your marketing materials.The logo is the signature for your brand and should therefore be a clean, simple visual statement that at a glance distinguishes you from your competitors. A logo is not necessarily your name but can be and is a graphic representation that is used to tie all your marketing materials together, including your portfolio.
Font Choice
Font is a complete set of individual characters that make up a typeface. The font family includes all iterations of the font in the typeface including bold, italic, lowercase, uppercase, and other variations.Keep in mind the following guidelines while selecting fonts for your web portfolio:
- Remember to keep it simple. You want your work to speak for you and not your font choices.
- Look for classic styles when selecting fonts. If you can't tell whether the typeface was designed somewhere in the recent past or one hundred and twenty years ago, then that's a good sign.
- Don't complicate your portfolio and marketing materials with a lot of outlandish, overly designed fonts. These elements will distract the audience's attention from your work.
- Don't use more than two font type families (including the bold and italic versions) in any project. This is another element to keeping it simple and avoiding a visually complicated portfolio. You can draw attention to certain parts of the portfolio by using up to two font families. Use fonts as a device to direct the viewer's attention to areas of emphasis.
- There is a fine line between picking a display font with character and using an overly designed cheesy font. Fonts can be quickly overdone like Adobe Photoshop filters. Some fonts to avoid are Comic Sans, Bradley Hand (or any handwritten font family), Papyrus, and the over-used Trajan. Do not use cutesy image-based fonts that look like animals, leaves, or dripping blood. Sans-serif fonts such as Helvetica, Gill Sans, or Verdana are commonly used as body text because they are easier to read on screen than serif fonts, such as Times, Bodoni, or Baskerville.
Color
Color has an immediate emotional impact. Color choice can make or break a design, including a portfolio. As a general rule, colors should be neutral or muted and not compete with your work. A shade of fuchsia may be a personal favorite but may lose its effect when used with an image with a lot of predominate greens.You can emphasize on colors that will stand alone and not compete with your work. For instance, a section separator may look great in brilliant red but that same red will command attention when paired with a subtle low-definition image and keep the viewer from appreciating your work.
Other Design Elements
Some people like to include other design elements such as lines, shapes, and other graphic elements in their portfolios to further distinguish their work. These should be considered carefully. Anything included should have a specific reason for being there and should not just be added for the sake of design. Remember, your portfolio should always let your work shine through, so if there is a reason to add a border around your image, do it; but if your work looks best by itself on a page, avoid complicating the design with additional graphic details.


















