Loading

8 Crayons of Photoshop By Justin Hodgson

I introduce Adobe Photoshop in every class I teach and do so for 3 reasons: (1) it is industry standard for visual work (and valuable for visual rhetoric, by extension); (2) it is pedagogically useful—as I regularly ask students to create visual representations of course readings, critical ideas, and the like; and (3) it often plays a crucial role in many of the projects I invite students to create. Thus, whether students make an infographic, build an interactive webtext, or produce a video creation, knowing how to use Photoshop can be an invaluable asset in those undertakings—not to mention that these competencies expand students individual capacities for visual expression.

Now, while I say I teach Photoshop in each class, I use that phrase somewhat hesitantly. For my approach is less direct instruction and more an act of grounding and opportunity. Which is to say that I present the students with the 8 basic crayons of Photoshop (a fast introduction to a handful of considerations) and then simply expect them to paint Picasso. This is, to be sure, an unfair expectation, yet it consistently produces quality results. And the success comes not from my guiding them through the nuances of the software in order to make X or create Y, but rather from helping them grasp just enough know-how to be able to tinker with the software, to play with the interface, and, more importantly, to ask questions (and to know how to ask questions using the language of Photoshop).

Success comes from helping them grasp just enough know-how to be able to tinker with the software, to play with the interface, and, more importantly, to ask questions.

That said, while at some future point I intend to produce a short a video/how-to on this approach—both for my own purposes and so that others can use it/share it with their students as well—in the meantime I've put together a rough textual description of what I present to the students in class (which I cover in 30-35 minutes, leaving them with about 30-35 minutes of work time to complete an in-class Photoshop challenge). I refer to this approach as the 8 Crayons of Photoshop (a title and visual frame that plays on the original box of 8 crayons introduced by Crayola in 1903: red, yellow, blue, green, orange, brown, violet [purple], black).

In this first step, I walk students through the basics of opening the program and setting up a canvas. It is a rudimentary step, but the goal is to help them access the program and to orient them to the canvas metaphor, along with corresponding considerations of layout/size options, RGB values, and setting resolutions (print vs. Web). In regard to the resolution, the old rule was that 72 pixels-per-inch (ppi) was sufficient for web displays and 300 was the minimum for print imagery, but Apple’s retina display revolution changed this, not to mention that print technology has continued to improve. Thus, while Photoshop defaults to 72ppi for web projects and 300 ppi for print/photo work, I now cover a couple scenarios where resolution changes will matter (from file size to photograph work) and have half the class set the resolution to 72ppi and 800x600 pixels for canvas size and the other half to 300ppi and 10x13 inches in canvas size (alternating these settings so that side-by-side students are working in different settings). This helps create further awareness via comparative action as students will look at their neighbors work as they go and ask questions when things do not look the same. Remember, the goal here is just to provide a quick introduction to how to set up the Photoshop canvas and why it might need to be done differently, and then expose the students to a few scenarios where they can see the impact of different resolutions & size.

Once students have set up and generated a canvas, I begin introducing them to the basic operational metaphor of Photoshop: layers. The entire system works on layers—on stacking layers, manipulating layers, grouping layers, making layers visible/invisible, and the like. Thus, I guide them through an introduction to the layer panel in Photoshop: how to toggle the visibility, how to create new layers, how to reorder layers, and so on. At this point, I also make them drag in a couple different test images just to see how layers get created automatically and to help them understand the impacts of manipulating layer order. Of particular note in this section: I explicitly cover how manipulating different elements in the program is based on having the correct layer selected, a recurrent problem for novices. In truth, this “crayon” does not take very long to cover, but rushing through it leads to more problems than just about anything else.

This third crayon is about developing good habits of practice; forming effective procedures of operation early can pay huge dividends later as it helps with workflow efficiency—a matter of critical importance in complex or collaborative projects. The first part here is the art of naming the layers. While different companies and groups develop their own internal conventions—and there is, as a result, not really a universal guide to naming the layers—I tend to turn toward accessibility considerations and the practices of universal design. In this orientation, students are asked to be as descriptive as possible in their naming conventions. For a layer named “upper-left curved blue arrow” is far more informative than “Layer 2.” Over time students will like develop their own set of conventions, but early on being descriptive is quite effective.

The second part of this step (also subject to this naming practice) is the basic function of grouping layers—and here I include a simple “how-to” and “why.” In relation to the latter, I explain how grouping helps to organize lots of layers and to link a variety of layers together, which allows them to be impacted all as one. This is helpful in relocating several items on the canvas while maintaining their spatial relations to one another as well as in saving time with things like applying masks (and related masking manipulations). While masks are not part of the expectations of the first in-class challenge (below), I at least mention here in order to put the practice/basic idea in students minds: i.e., masks are a way of applying some manipulation, some effect, some thing to a particular portion of an image (or group of images). If time permits, at the end of class, I come back to this and demonstrate a mask + gradient application on one of the image layers. But only if time permits and/or if students specifically ask for more guidance on masks.

While some of the basic tools come up as a matter of course in the earlier steps (particularly the move tool and, relatedly, toggling of the transform controls option), at this point I systematically walk through each of the basic tools and their submenu options. I cover the move tool again and how the free transform practices work. And then I go through tools designed for selection practices (e.g., magic wand and lasso tools) vs. those for image manipulation (e.g., the blur and smudge tools). I also cover the erase tool, draw tool, and the shape tool in this section. The goal is to highlight the primary tool function and the submenu options (and/or how to manipulate the tool settings, where applicable).

Here I cover basic quick keys and some functional practices within Photoshop. This includes things like deselect (CTRL+D/COMMAND+D), the step back vs. undo commands, and copy & paste. I also cover the importance of the “enter” key—for far too often students get frustrated with Photoshop because it will not let them perform some action. In most cases, this is simply because it has not yet completed the last action/engagement the user initiated. Thus, I live by the following Photoshop mantra: when in doubt, hit enter. Meaning, if the system does not seem to be responding to one's actions, then hit the enter key and try again.

In this step, I introduce the basic elements of typing/adding text. I do not require that students use the pen tool or any typing-on-a-line functions as part of the in-class Photoshop challenge, but I do at least describe it so they are at aware of it as a design possibility going forward. The primary point here is, again, just to introduce a few textual basics: putting text on the canvas and making font type/size/color changes. I also use text layers to introduce layer effects (like changing color, drop shadows, stroke effect, and the like) as these are fairly easy to understand with textual layers and textual manipulations.

Once layer effects have been introduced, I move to filter effects and other large scale image effects (like desaturation). I find this progression to be something that students are able to follow fairly well. To this end, I demonstrate a couple of the filter effects (and how one manipulates their settings), show them canvas-level alterations, and introduce the adjustments panel. The goal here is to point things out and let the students play with them to figure out how the manipulations impact the visual elements of the project. The reason I find this so compelling as an approach is that telling students about “posterize,” for example, has no way near the resonance as letting them play with it themselves to see what it does in practice.

As the last crayon element in this process, I cover some key distinctions of file types and the saving of projects. This includes the Photoshop file format (as editable and transferrable workflow), and .jpg and .png file formats for different print and web materialities. For me, as I have them do a lot of creation for the web in the class, I also emphasize at this point how saving images with blank backgrounds is impacted by the .jpg vs. .png formats, which is critical if making buttons for a website or sprites for a video game.

The Challenge

The last element of this approach is that I ask students to complete an in-class challenge (for ~10 course points), which allows them to demonstrate a low-level, low-stakes, introductory kind of competency with Photoshop. I actually put up the prompt/challenge before I start the in-class introduction so that students with developed Photoshop skills can work ahead, complete the challenge, and either help their fellow classmates or work on something else. In most cases, those who are really good at Photoshop end up helping their neighbors, which facilitates the learning community orientation I try to foster in class. But I also give students with Photoshop knowledge/skills the option to move at their own pace and then to use the class time for something other than a revisiting of basics they already understand.

Challenge Guidelines

Students must create either an 1440x900 pixel, 72 ppi image or a 10 x 13 inch, 300ppi image that combines (a) a landscape photo of a castle, (b) a picture of a dog, and (c) a different sky-scape from the one in original castle image. The dog must be scaled (resized) out of proportion to the castle and located (visually speaking) partially behind the castle, yet in front of the sky. Students must also include (c) an inanimate object added to the foreground, (d) one layer of text (e.g., a headline from today’s NY Times), and employ (e) one layer effect and (f) one filter effect. Then (g) save the image as a .png and send it to me via inbox in Canvas (our university's course management system). Note: the end result should look something like the full image above that separates this section from the previous "steps."

UPDATE - 10/20/18

I walked my 7-year-old through the same basic challenge I offer my college students. Like many of them, he had never used Photoshop before. Of course, he had a lot more one-to-one instruction than what happens in my regular courses (as there is usually 20-25 students), but he did pretty good in his first attempt (and titled it himself).

"Ryan on the Step"

* We used Lightroom on my iPhone to take his photo and then pulled the image into his photoshop project via Photoshop CC.

Justin Hodgson | Associate Professor | Digital Rhetoric | Indiana University

Additional Resources

(4min) Introduction to Photoshop Interface by Adobe Care

(60min) Basic Tutorial to Photoshop by Terry White

Next Steps - Infographics

As part of the Adobe Creative Campus Faculty Development Institute (2022), Todd Taylor and Eric Cornish led a session titled, "Lesson Plans for Creating an Infographic with Adobe Express or Illustrator." To learn more about Infographics, Express, or Illustrator, click the button below.
Created By
Justin Hodgson
Appreciate

Credits:

Created with images by ponce_photography - "crayons coloring book coloring book color children" • bongkarn - "Young professional photographer editing his photo" • Artur - "Text sign showing Overtime. Business photo text Time or hours worked in addition to regular working hours" • magele-picture - "Bonus / Würfel mit Symbole"