Visual Unit Studio 2
Work to have achieved
- An optional short blog post about possible consolidation-unit projects
- Work in pursuit of a final visual argument / rhetorical collage
Plan for the day:
- Guiding thoughts for Studio (5-15 min)
- Set intentions
- Studio time!
- Exit note
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.
It's always a good idea to know what you're looking at! By default, both GIMP and photoshop will label a layer with whatever the file was called – and most of those names aren't especially helpful, let alone concise. So if you haven't yet, I highly recommend that you double-click the name of each layer and update it so you can tell, at a glance, which is which.
This is especially important if you have a lot of layers. At that point, you'll probably also benefit from organizing them into groups, so you can do things to them all at once: move them, toggle visibility, apply effects and tools, etc.
This is a matter of convenience in Photoshop, but in GIMP (at least before GIMP 3 is fully released), it's also the only way to operate on multiple layers at once. See docs.gimp.org/en/gimp-layer-groups.html.
Help your text pop.
If you have text on your image, it can be tricky to get it to stand out against the background, especially if the background is multicolored. Luckily, in a digital medium, we can collaborate with the machine to get some automated help. Play around with Filters > Drop-Shadow, or even the Xach effect (a quick-hit combination of highlight and drop-shadow) as explained in this tutorial, among others. 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 don't pick a shadow color that's 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, using HSL color selectors.
- Blur works better on image backgrounds than on solid backgrounds where it's more noticeable.
- Drop-shadow works best on headlines / top-level text, and less well on paragraphs.
- If you need more contrast everywhere, try going more minimalist. In other words: 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 into a scene, 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 (see above for one use, with text), but depending on what you're trying to add, you'll often 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 I hope you remember from the reading on the gestalt principles 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.
Consider pointing viewers toward a follow-up.
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). Some of you are already doing this, which is awesome!
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, depending on your design) and not actually making those names available – which would be a violation of the CC-BY and related licenses.
If you're wondering, "what border?" remember that you can always adjust the Image > Canvas Size to add a small extra strip along the bottom. If you give it a simple contrasting background, it should feel like it's outside of the image, rather than messing it up.
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 create a login, you can even customize the link.
Don't forget your required README updates – and consider adding a title there.
Part of the draft requirements due on Monday was "an updated README.md file, introducing the Visual Rhetorical Argument to an audience beyond our class." When peers and future portfolio perusers land on your repository, they shouldn't see my assignment first thing (though you can always move it to a new file, like we did together in the audio unit). Instead, they should see an introduction to the repo's contents, which is to say, an introduction to your project.
Some of you are doing great things with your Markdown: building tables of assets and their TASL information, adding hyperlinks to particular files in the repo, posting periodic updates on project progress, even keeping lists of the specific tools you're using and why (and, sometimes, with what settings).
Another thing you might want to do in a README is give your project a name beyond "visual argument." 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 yours?
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.
- 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?
- Make sure everything’s pushed properly to GitHub
- 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.
- Work with the Internet, or peers, or me to answer the questions from step 2.
- Write a draft of your reflection; remember that you still have time to revise, though.
- 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
- 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 project workspace 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 list of assets reflecting what you actually used, including Title, Author, Source (a direct link if appropriate) and License (e.g. explicit licenses like CC or unsplash, or rationales for claiming fair use)
- An updated README.md file introducing your project to a new audience. Go ahead and give your piece a title! Make it something to live beyond this assignment, if you can. :¬)
- By Monday at noon, 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, or paste it down at the bottom of your README, it should have all your images embedded, too!
- 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.
I know it's a little awkward to have this fast turnaround ending during break. As I mentioned last time, this timing will (a) let me get a jump on responding to your projects, and (b) let you have most of your week to unwind between projects.
That said, if you need extra time – especially if you're traveling at the start of the weekend and won't have that pre-deadline time available – just let me know you need an extension and we can work it out.
Looking ahead: when we get back, it’s our web design unit!
- 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, install, and get comfortable with either Visual Studio Code text editor or Pulsar. We’ll be using text editors extensively for our upcoming web design unit.
- If you’re using VSCode, you may want to check out some intro tutorials. I also recommend this list of HTML-specific features and optional settings.