Psychologists studying perception have identified many principles of grouping: the means by which humans interpret disparate visual stimuli as part of a single object – more or less automatically. We've seen some of these at work already in thinking about proximity and color, but it's worth thinking about how to use these principles to communicate a shared level of attention, rather than for dominating a hierarchy.

For example, when objects' edges align, most viewers will treat them as related; when they share a color, we'll do the same; even when a line is discontinuous, but it matches a simple shape we recognize, we'll automatically try to fill in the missing pieces and see it as a single whole.

You may already have read about this in an optional assignment at the start of the unit, but you'd have to have gone past the first link I gave you to reach this page on visual perception, and then gotten through the text explanation to some visual examples. Those are still great readings, and I highly recommend them! But if you're in the market for a quicker introduction, you might like these examples from user experience (UX) design, which also gesture toward the web unit we'll start next week.

This is related to the Gestalt principle of common regions. Much as a comic strip uses boxes to indicate a sequence of connected moments in time, you can divide your canvas into distinct areas, which can provide breath and space while preserving movement. There are several ways to define your areas: with distinct blocks of background image, color, or pattern; with a semi-opaque layer of white or black, acting like frosted glass over the layer below; or with positive-space images that cut between one chunk of the image and another.

The same approach can also give you the effect of a museum poster, where the main image is framed as a single panel, with an off-image description delineated by a full-width rectangle (or full height, for a sidebar) of contrasting background. (Solid white or solid black often work well to signal "I'm not the image.") This technique can be useful for adding a clarifying slogan or title to an image, without messing up your existing design hierarchy.

Many of you are trying to get viewers to take an action; if you haven't yet, consider giving them a place to go to get involved, or to get more information. Make this link large enough to be easily readable, even though it probably won't fall at the top level of your visual hierarchy (because it makes more sense as the last thing, rather than the first thing, they see).

Even if you don't have such a call to action in your visual argument, you might want to add an unobtrusive link to your credits file on GitHub – e.g. in a small font-size along the border. This would serve as a compromise between filling a sidebar or footer with all the required attributions for your Creative Commons images (though that may be fine, too) and not actually making those names available – which would be a violation of the CC-BY and related licenses.

NB: A link shortener like bit.ly or ow.ly may help to keep this kind of link subtle enough to not detract from your design.

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. Food for thought!

We talked about this a bit at the start of the unit, but it may bear repeating: both GIMP and Photoshop deal primarily in pixels, not vectors. (For vector graphics, try Inkscape and Adobe Illustrator.) So when you scale down an image or text, the software throws away the pixels it no longer needs; but if you then scale back up, it has to guess about what could fill in the gaps, and usually you'll get a blocky, pixellated appearance. Unless you're going for a Minecrafty look, that's probably not what you wanted.

If pixellation happens to you, take note of the final size you settled on, then re-import the image (or re-place the text) at higher resolution, and scale directly to the size you now know you need.