Annenberg Classroom

Appealing YouTube copyright claims on Doc Group videos
Zachary Reese, Research Support Services

In most cases the music for Doc Group videos comes from an agency called Audio Network. Send a copy of the music cue sheet and invoice to claims@audionetwork.com and include a link to the YouTube video that recieved the copyright claim. Do not refute the claim through YouTube… that’s a last resort for when a license holder is being unresponsive. Remember, often these copyright claims are automated, not a malicious person trying to get a video taken down. Proving that we have the rights to the music is something we should expect.


AnnenbergClassroom.org Changelog
Zachary Reese, Development

2019-02-18

Google Tag Manager integration added. For some reason it was de-activated when deploying the site. This means there’s two days without data.

2019-02-16

Website relaunch using ac-onyx theme and ac-stalk infrastructure. See the ac-onyx documentation for further details.


Onyx Illustration Guide
Zachary Reese, Design

Overview

Most important thing to make note of: add layer prefixes to distinguish between different elements. This will make things much easier down the line. Photoshop’s later palette filtering will allow you to toggle only shadows, highlights, etc, for batch operations. It’s a nightmare to deal with otherwise.

  • [S] = Shape Layer
  • [T] = Texture Layer
  • [-] = Shadow Layer
  • [+] = Highlight Layer

For textures, we pull from The Walter H. and Leonore Annenberg Collection using The Met’s Open Access tool. These images are licensed as CC0, so we can do whatever we want with them.

Download or clone the repo from APPC’s GitHub to get all the images at once (requires login).

Organizing Files

We use the standard APPC file federation here… listing initiative code, project name, taxonomical descriptors, and subject using BEM-style separators. It sounds daunting but it’s reasonably straightforward in practive. Here are some examples.

  • source/ac-illo--topic__women.ai
  • source/ac-illo--utility__not-found.psd
  • source/ac-illo--constitution__amendment-09.ai
  • sketches/ac-illo-sketch--landmark-cases-banner.ai
  • renders/ac-illo--media__timeline--light--RENDER01.jpg
  • renders/ac-illo--utility__trophy--dark--RENDER01.jpg

In Illustrator

After creating the composition, the layers need to be broken apart and named. You can select a layer and choose Release to Layers (Sequence) from the Layers panel menu. This will put each shape object on its own layer.

Normally I try to keep multiple shape objects that make up the same element (like, light/dark components) as one layer, just to keep the number of layers from becoming overwhelming. Plus I find it’s handy to have a single layer that contains the entire shape that you’d be using for masking instead of having the different elements spread out between layers.

At this point, all the layers will get the [S] prefix because we only have vector shapes. The other layer prefixes aren’t used until we’re in Photoshop.

Go to File > Export > Export As… Choose PSD from the dropdown menu of file types. Make sure the Write Layers option is checked, and Anti-aliasing is set to “Art Optimized.” This will make the edges of shapes aliased, which is important for using them as selections in Photoshop.

In Photoshop

Textures

Super helpful tip: Hold command and click on a shape layer to make a perfect marquee selection of that layer. Then select the texture layer and click the Add Mask icon in the layer palette and you’ll have a wonderfully aliased mask applied.

You’ll probably want to unlink the mask so that you can reposition the texture freely without the mask moving.

Shading

I use a rich, dark purple (hex code #3b1b45) for any shadows.

This is super important: Don’t hand draw shadows. Since the shapes have such hard edges, dodging shadows by hand creates an odd dissonance. Instead, make a fill using an edge selection of the shape that’s casting the shadow.

Typically I’ll mask these, set the layer opacity to and add a Gaussian Blur of ~30px (depending on how “long” the shadow should be). If the shadows should be so dark that they’re almost black, you can change the blending mode to Linear Burn.

I typically use combinations of Linear Burn and Normal layers to get the depth I want.

Again, if you’re using a mask, unlink the mask before you apply any filters like Gaussian Blur. Otherwise the blur will apply to both the layer and the mask edges.

For harder, non-diffuse shadows, I get good results using the Path Blur and Field Blur in combination.

Exporting

Since we need to export these as JPEGs in order to get a useable file size, we’re going to take the entire composition and flatten it into a new document. Select the entire canvas (cmd+a) and copy merged (cmd+shift+c), then paste into a new document. Set the background color to either Annenberg Classroom $black or $white (#3c3c6d and #fffdfa, respectively).

Export using the Save For Web (Legacy) option. For smaller elements like topic images I reduce the output size to 25% in order to get it about 1000 square pixels. Then adjust the quality slider to try and get a file size below 150kb (under 100kb if possible, but there are some quality compromises at that size depending on the tonal transitions in the image).


Annenberg Classroom Design Patterns
Zachary Reese, Design

Typography

Headings

Use the <small> tag to mark a subheading inside of a headline.

<h2>Article I, Section 2 <small>Clauses 3-5</small></h2>

Books, Journal Articles, Court Cases

Alexander Hamilton, a framer of the U.S. Constitution, offered justification for an independent judiciary in the 78th paper of <cite>The Federalist</cite>.

Quotes

<figure class="quote">
  <blockquote>
    <p>The government of the Union depends almost entirely upon legal fictions; the Union is an ideal nation, which exists, so to speak, only in the mind and whose limits and extent can only be discerned by the understanding.</p>
  </blockquote>
  <figcaption>Alexis de Tocqueville, <cite>Democracy in America</cite> (1835)</figcaption>
</figure>

A quote can be made inline (styled sparsely to integrate into the text rather than breaking it out into a bordered box) by adding the quote-inline class.

<figure class="quote quote-inline">
  <blockquote>
    <p>...</p>
  </blockquote>
</figure>

Panels

Basic panel with header

<div class="panel">
    <header>
        <h3>Against Ratification of the Constitution</h3>
    </header>
    <p>...</p>
</div>

Text-excerpt panel

Add panel-excerpt to the containing div to format a panel containing excerpts from another source. panel-intro can be used on paragraph tags to mark text that comments on the excerpt.

<div class="panel panel-excerpt">
    <header>
        <h3>The Federalist No. 10: Growth will strengthen the republic</h3>
    </header>
    <p class="panel-intro">At the time that the Constitution was written, people worried that past republics had worked best in small governments such as city-states. James Madison saw different possibilities and argued in <cite>The Federalist</cite> that the American republic would grow stronger as it expanded because it would be harder for any one group to dominate it.</p>
    <p>The smaller the society, the fewer probably will be the distinct parties and interests composing it; the fewer the distinct parties and interests, the more frequently will a majority be found of the same party...</p>
</div>

Panel with 3-column interior

This uses CSS columns to evenly distribute items according to a top-to-bottom, left-to-right layout.

<div class="panel">
  <div class="panel-interior-3-column">
      <p>1. William Blount, senator from Tennessee, for disloyalty to the United States; in 1799 the Senate expelled Blount and dismissed the impeachment charges against him.</p>
      <p>2. John Pickering, federal judge; in 1804 the Senate found him guilty of charges of drunkenness and unlawful rulings and removed him from office.</p>
      <p>3. Samuel Chase, Supreme Court justice; in 1805 the Senate found him not guilty of his alleged mishandling of a trial.</p>
      <p>Etc...</p>
  </div>
</div>

Panel alignment variations

Small panel (50% width), left aligned: panel-left--small
Small panel (50% width), right aligned: panel-right--small
Large panel (67% width), left aligned: panel-left--large
Large panel (67% width), right aligned: panel-right--large
Full width panel with overhang: panel--full

<div class="panel panel-left--large">
    <p>...</p>
</div>

Panel color variations

Use panel--green, panel--red, and panel--blue to alter the color of a panel. Drop shadow modifiers are also available (panel--green__ds, panel--red__ds, panel--blue__ds).

<div class="panel panel--full panel--green__ds">
    <p>...</p>
</div>