Skip to main content

Visual Unit Studio 2

Work to have done:

Plan for the day:

  1. Guiding thoughts for Studio (5-15 min)
  2. Set intentions
  3. Studio time!
  4. Exit note

We have a guest today! Francis Quina is a multi-genre writer and a member of the English and Comparative Literature faculty at the University of the Philippines, Dillman; he is at Pitt studying literature and graphic writing. And he’s here today to observe and echo back to me my teaching, the lesson plan and its enactment, so we can both see better how it works – and how it might work better.

Today is all about working on your individual projects! Layer images, apply effects, watch relevant tutorials. I know your lives are busy; take advantage of this dedicated time free from other distractions and obligations to move your piece forward.

At the same time, it’s worth noting that you’re working in a shared space, in a studio. If you have questions, or you want feedback on something, you have your classmates and your instructor on-hand.

Guiding thoughts for Studio (5-15 min)

Some seeds of revision possibilities I want to plant, based on seeing the latest drafts (as of last night):

Consider naming and/or grouping your layers. GIMP doesn't let you select multiple layers at a time, but there is a workaround: as in PowerPoint, you can group objects (layers) together, and then move (or modify) the group as a unit. See docs.gimp.org/en/gimp-layer-groups.html. (Photoshop does let you select multiple layers, but it also lets you group them – and it's not a bad idea, both as a shortcut to selection and as a clear visual indication of which layers ought to be affected together.) Note the opportunity to then further organize your workspace with good naming practices!
Help your text pop.

If you have text on your image, it can be tricky to get it to stand out against the background. Luckily, in a digital medium, we can collaborate with the machine to get some automated help. Play around with drop-shadow, or even the Xach effect – a quick-hit combination of highlight and drop-shadow – as explained in this tutorial. NB: this works by adding two new layers (a shadow, and a highlight), one of which is masked; you can change the order of layers to affect only the ones you want.

There are lots of websites with more advice on drop-shadowing, so I recommend searching around for examples. Some key points:

  • The goal is contrast, so pick a color that's not too close to your text color – you especially want to change the luminance of the shadow relative to the text. Try giving the brighter color a luminance at least 4.5 times that of the darker color.
  • A little blur works better on image backgrounds than on solid backgrounds where it's more noticeable.
  • Drop-shadow works best on headlines, and less well on body text. If you need it everywhere, try going minimalist.

Or just reconsider whether that text needs that background. Some have argued that drop shadow is a "bandage" for bad design: that the real solution is to rearrange the layout so there's more contrast to begin with. Not always doable, but still: food for thought!

To integrate objects more fully, try adding shadows.

Without shadows, objects and images brought in as layers can sometimes feel two-dimensional, floating over the scene (or stuck onto it) rather than inside of it. Sometimes that's exactly what you want! But if you're going for the illusion that people or objects are in the same space, slanting shadows that react as if to a shared light source can add a great deal of polish and realism.)

Both GIMP and Photoshop come with automated drop-shadow effects, but depending on what you're trying to add, you'll get the best customization if you create a copy of your object to manipulate: painting it black, free-transforming it to the desired angle, and adding both blur and a gradient fade. I've found some good video tutorials for creating realistic shadows in GIMP and creating realistic shadows in Photoshop.

And if you're trying to add text to a curved surface, you might be interested in related tutorials in GIMP and in Photoshop.

Consider using alignment tools and spacing to reinforce the design's cohesion.

As you remember from the reading on gestalt psychology of perception, when objects' edges align, most viewers will treat them as related; if they're close-but-not-quite aligned, that feeling of not-quite-rightness may seep into viewers' first impressions of the design. (Note that this applies to symmetry, too: you can center or distribute things along a horizontal or vertical axis, and not just relative to the overall canvas.

Both GIMP and Photoshop offer tools for aligning or distributing objects – which, in this context, usually means aligning layers. Here's the official GIMP documentation and an outside tutorial, plus the corresponding Photoshop documentation and an outside tutorial there, too, for good measure.

Don't forget your README – and consider adding a title there.

A title can provide a context, a clue, a genre, a commentary; it can add an extra layer to viewer expectations. What will you call your collage?

Not sure where a title would go? Think of placards in museums: alongside the image is pretty common. You can put the title in your README. Sometimes the title is obvious from the image itself; sometimes it's not. Likewise, ad campaigns often have titles, even if they're not referred to in the ads themselves.

Okay, now go to!

As usual for studio time, please set a daily goal in the shared notes doc, both for accountability and so I can look for ways to help.

Don't forget to save periodically as you go:
  • as a project file
  • as a screenshot, showing your process
  • as a git commit, saying what you've just achieved

EXT: Feel like your project is finished, and not sure what to do?

  1. Make sure everything’s pushed properly to GitHub
  2. Make some lists: things I have learned about GIMP/Photoshop/fonts; questions I have about GIMP/Photoshop/fonts; things I have learned about gestalt principles of perception; questions I have about gestalt principles of perception.
  3. Work with the Internet, or peers, or me to answer the questions from step 2.
  4. Write a draft of your reflection; remember that you still have time to revise, though.
  5. Have a look at what your classmates have posted to the issue queue, looking forward to the integration/consolidation unit. Anything you’re excited by? Anything you want to add?

Quick report back (with 5 min left)

Just as a way for me to check in, I’d like to hear more about what happened today: did you find images? Level up on a particular GIMP skill? Which ones? Decide something about your project (what was it)? Raise a question in a new way that you’d like some help with?

Take five minutes to reply to your own notes in shared notes doc. If everyone finishes early, we can hear from a few volunteers out loud.

Homework for next time

Next class will be a moment of pause for reflection on the course as a whole, what’s working, what you’d like to do more or less of. I’ll ask everyone to speak at least once.

Other than that, we’re looking ahead:

  • You should already have done this, but just in case: if you don’t already have a syntax-highlighting text editor you prefer, please download and install the Visual Studio Code text editor. We’ll be using it for our upcoming web design unit.
  • Aiming for 11:59pm on Sunday, complete – at least for now – your visual argument / rhetorical collage. Your repository (on GitHub or in a shared Box folder) should include:
    • Your most up-to-date layered project file (.xcf for GIMP, .psd for Photoshop)
    • A series, now, of screenshots showing your GIMP project in progress
    • An exported flat image (.png or .jpeg), for speedy previewing or as a backup should something go wrong with the project file
    • An updated ASSETS.md (or CREDITS.md) file reflecting what you actually used, including documentation of any outside sources and your permission to use them (e.g. explicit licenses like CC, or rationales for claiming fair use)
    • An updated README.md file introducing your collage to a new audience. Give your piece a title! Make it something to live beyond this assignment, if you can. :¬)
  • By Tuesday’s class, write a prose reflection that incorporates images from your feedback and screenshots of your GIMP project. As explained in the prompt for the assignment, this should include:
    • At least 500 words
    • Your own assessment of how you met the baseline criteria and goals for the unit, as well as any aspirational goals as appropriate
    • At least one screenshot or blockquote of feedback you used (and please say how)
    • At least one or two screenshots of your work in progress (ideally, related to the discussion in the previous two bullets)
  • Post your reflection to the course site’s Issue queue, to make it easier to embed images.
    • If you want to then copy the source code into a file in your repo called reflections.md, I won’t stop you!
    • If you feel strongly that you’d rather keep your reflection private, you can email it to me instead. But my default assumption is that we learn from each other as much as from ourselves, so I hope you can find a way to write publicly about your experience with this project.