SOS San Francisco: A Case Study for Collective Visual Brainstorming

When a massive San Francisco real estate boom threatened to wipe out established communities and businesses, a group of local artists decided to fight back. Here's their story.

This article details the creative process used to develop the graphics for SOS San Francisco, a group of creatives and community leaders resisting cultural displacement in the city of SanFrancisco. The ideas and methods can be applied to all sorts of other projects with a diverse range of participants, applications, and output requirements.

The Inspiration: Pushing Back Against the Excesses of a Development Boom

Time and time again, San Francisco’s residents have been displaced by wealthy speculators. In its earliest days, the Missions and the Gold Rush all but destroyed of the native peoples of the Bay. Displacements  continued with the internment of Japanese Americans during WWII,  the clearing of vibrant African American districts shortly after the war, and then in an ongoing series of “Tech Bubbles” that systematically forced out more and more people who lived and worked in the city.

A number of cities around the world are coping with similar waves of speculative developers transforming working communities into gated luxury developments, and replacing essential local businesses into shuttered offices. But unless this most earthquake-cursed of U.S. cities experiences a social shift of seismic proportions, the current development boom may end up erasing the last vestiges of San Francisco’s famed cultural diversity and creativity.

During this past few years, thousands of long-term residents have been evicted from their homes and businesses, dozens of performance spaces have closed, and hundreds of artist studios have been converted into monoculture office space. Hoping to reverse this trend, I’ve become active with a number artist groups who join with fair housing activists to plan actions and to encourage new directions in development and advocacy policies for San Francisco.

The Cultural Action Network (CAN), one of the groups I’m connected with, offered to help with organizational skills and unifying graphics for a series of city-wide actions designed to highlight the current crisis, and to present visions for an inclusive and diverse San Francisco. Planning by committee is a snap compared with coordinating a loose coalition of artists and activists, but eventually the title SOS San Francisco was chosen. CAN member Flora Davis, a recently displaced sculptor, jeweler, and former graphic designer, agreed to art-direct and design the poster. Flora and I also run a sister group, the Cultural Space Coalition whose aim is to connect all of the city’s creatives and keep them up to date on actions such as this. So with Flora taking the helm, I signed-on to help with illustration and production of a logo, as well as the related posters and graphics for printing and online posting.

Designing the Workflow

The main challenge (in addition to the fact that we had less than a week to design something that would satisfy a dozen different cultural and activist groups), was that Flora and I aren’t currently working in the same applications. It was my preference to produce the main logo and illustration using Illustrator CC or CS6, along with Photoshop CC. But Flora would add the type overlay InDesign CS6 or CC. She no longer uses Illustrator at all, and stuck with the CS5 versions of Photoshop and InDesign.

So I had to figure out the best way to set up a workflow that allowed us to pass files back and forth during the process. Even though I’d be creating the final logo and backgrounds in Illustrator, in the brainstorm phase I had to keep everything in Photoshop and InDesign so Flora could work on it as well. Photoshop CC files open just fine in Photoshop CS5, but InDesign and Illustrator are not as forgiving. I decided to do all the sketching work in Photoshop and InDesign—I’d have to export any current files in InDesign’s .IDML (interchange format) in order for Flora to be able to open and work on them. To exchange files we used a shared Dropbox folder. (Warning: we corrupted our Dropbox accounts by testing the Dropbox Groups feature—I do NOT recommend using that at this time!)

Although for some reason I assumed that it would be easier to stay in InDesign CS6 if I’d need to export to IDML, it turns out that when you Package a document (File > Package) to collect files and fonts in CC, you can also choose to automatically export an .IDML copy into the package folder as well.

20160215-sosSF-idml

We narrowed down direction and approval input to a handful of advisors from the organizing groups including Peter Papadapoulis (co-Artistic Director Mojo Theatre and lead communications for the Cultural Action Network), David Brenkus (artist working with Eviction Free San Francisco on fighting evictions—including his own from home and studio of 34 years and initiator of SOS event), Josh Wolf (SOS webmaster and co-founder of the People’s Campaign).

The key to a quick and collaborative process is to not get hung up on clean renderings (or masks or details), but to quickly block in concepts in order for those involved to be able to visualize ideas to see if they work. What you’ll see here are a selection of the brainstorm images that we generated along the way.

Creative Direction and Brainstorming

Before we signed on to help, Josh had found a Creative Commons image that was great to use as a placeholder. Combining the images of The Great Wave off Kanagawa by Katsushika Hokosai  with a photo of the Golden Gate Bridge by Ali Johnson Photography, Philippe Teuwen had created an award-winning composite: “The Great Wave of San Francisco.”
The Great Wave of SanFrancisco
Creative commons composite by Philippe Teuwen (with Ali Johnson photo)


wave-sossanfrancisco-francisco
Josh’s web banner crop with text overlay.

As we already had a strong visual, our first idea was to adopt the “Great Wave of San Francisco” as a logo. I contacted Philippe and Ali and made certain they were OK with our use of the image. Additional requests from the SOS groups were along the lines of “we need something that reads like a large music festival combined with a massive ship… to capture the imaginations of both artists and spectators,” so we referenced some classic ship posters with Google Search.

Flora emailed me a sketch of her ship concept.

Flora's ship sketch

Folks liked it but the more we talked about it, the more Flora and I we concerned about the messaging of a ship. Ships convey messages of leaving or arriving—or would it be destroying the city? If we left the ship behind, why SOS? SOS is for aircraft too. This led to thoughts of planes and such, and in our subsequent image searches we saw some blimps. What if the blimp was heading for the bridge? Flora thought of Slim Pickens as a cowboy riding the bomb in “Dr. Strangelove.”

What if we put the MonopoLee parody adopted by BrokeAssStuart atop a sinking blimp plastered with corporate logos representing companies not paying their fair taxes in San Francisco?

But this opened a bunch of concerns about the bridge and waterfront being the wrong icon for the city in this case, so we dropped the wave and bridge.

SOS-blimp-SlimLee-type-3

Flora testing type with new concept and my notes back to her in the ID file.

This also brought up concerns about alienating folks in tech who would be otherwise supportive of our cause by blaming specific corporations. And the wave and bridge had to go completely. So we went back to the drawing board.

But then without a ship or a plane, how do you make the “SOS” naming relevant? Flora and I had a phone brainstorm session and came up with the idea of “beaming up the call for help” and adding spotlights that would converge on a big SOS at the top. A few folks suggested going the way of the classic 60’s psychedelic poster. Flora emailed me a sketch.

Flora-SOSbeam-sketch

In Photoshop, I used Free Transform to undistort the sketch and applied the Multiply blending mode. On layers below I roughed out a color version to send to the others.SOS-beam1-sketch-ss SOS-beam2-sketch-ss

SOSsketchLayersPSD

With an OK from the core group for our new concept, Flora worked in InDesign to play with ideas for how the SOS type would work for a thin web banner, and posted the notes for me.

 

Flora-colorSOS-IDsketch

Next, Flora experimented with specific type and posted that InDesign file for me.

SOS-typeOutlined

While Flora was working on the main type ideas, I created some sketches for the icons to be inserted within the circle. Remember, we didn’t know if this was even going to work, so it was important to not spend too much time at this point.

SSicons2

I lined up some of the icons for the city’s historic landmarks, and on another artboard I applied an arching envelope to them, and placing them atop a black oval.SSicons3-Envelope

To add Flora’s SOS type treatment, I exported her InDesign document as a PDF, which I then opened in Illustrator. Then in Illustrator, I re-created the type-on-a-path “San Francisco” so I could play with different typefaces and appearances. On underlying layers, I experimented with a few custom gradients, and some beams of light, sending Flora periodic screenshots.

ss-AIColoringTests

Josh was concerned that the arching “San Francisco” and the city image in the “O” made the logo look like one for a sports team (specifically, it was similar to the amazing local Golden Gate Warriors logo concept). So we opted to move the text below. Expanding the type into outlines (Command+Shift+O), I removed the detailing from the letterforms and altered the application of the compound paths to allow the inner paths to be filled white (instead of transparent). Wanting bolder icons, I went back to the non-enveloped icons, cleaned and bolded them up a bit, and assembled these within the “O.”

ss-AIColoringTests2-type

But this was too bubbly and candy-colored for the group. Could we make it more serious perhaps with some fog?

SOS-Poster-4.6b-lightfogr

No, Flora countered, not ALL fog, somehow the SOS is above it?

Flora-coloring-fogSketch

But that’s still too happy, I said. She sent me this darker version with some test type.

Flora-coloring-fogSketch-darker-type

AHA! Now I started to see how this might work. Let’s go with a dark night gradient in Illustrator. I’d make a version of the logo and background separately to place as Smart Objects in Photoshop.

ss-AI-SOS-Final-back-layersss-AI-SOS-Final-type-artboards

ss-AI-SOS-Final-fullAI

In Photoshop, with the logo and the background on separate layers, I slightly offset the logo so the glow came more from below, and the white showed through the top within the “O.” With various effects I created the beams on layers between the background and the logo, eventually making each into smart objects so I could resize and move them around.

SOS-Poster-5.6-nightclean

Adding some fog layers atop the beams (using the Cloud filter and masks), I started playing with blending modes and gradient masks.

SOS-Poster-6.5-nightFog1

Finally we came up with an approved overall design!

SOS-Poster-6.6-nightFog3

Integrating InDesign and Photoshop Files with Layer Options

I placed a flatter (and much smaller) version of the approved file in InDesign so Flora could overlay the event type on it. Then duplicating this layer and using Object Layer Options, I was able to make different layers of the same placed Photoshop file visible on different layers in the InDesign file. First, I used Object Layer Options to make only the Photoshop file’s background layers visible on the bottom InDesign layer. Then I duplicated this layer, and on the new layer I set the Object Layer Options to display only the logo layers of the Photoshop file. On a layer sandwiched in-between the two layers, Flora could set the type for each needed poster, and export as JPG or PDF as needed for each use.

SOS-POSTER.6.5b_moreFog-text SOS-Poster 6.6_tex-creeativeresistance

Creating Design Variations

Requests soon came in for black and white and minimally colored versions/tinted versions for folks to use for home printed flyers.

SOS-Poster-6.6-tint+logo-tint

Peter kept trying to describe another format he needed, but I was having trouble visualizing what he had in mind, so he emailed me this sketch.

PeterSketch

Which resulted in a 4 × 6 format version for posting specific Facebook events…

SOSposter_4x6-sm

…which resulted in an updated version for the Facebook page, and yet another set of wider files for the website.

SOS San Francisco

I saved simplified layered Photoshop files isolating major elements (beams, houses, background, logo) for each major proportion variation, so I it would be fairly simple to adjust the placement of elements within each one.

Where We Go From Here

With the visual concept and basic images created, Flora and I can easily create additional variations of the Photoshop files, and Flora can place new files into InDesign to modify type for these, or future events. We’re hoping to grow our resources and would be delighted if others step up and take over for the next series of events.

Tags
Posted on: February 15, 2016

Sharon Steuer

Sharon Steuer has been creating, writing about, and teaching workshops on digital art since the early 1980s. The current edition of her Illustrator WOW! book, The Adobe Illustrator WOW! Book for CS6 and CC, is the fourteenth book in the series, and her "Artistic Painting in Illustrator" online video courses are available from lynda.com. Sharon is also the author of Creative Thinking in Photoshop: A New Approach to Digital Art, and is a regular contributor to CreativePro.com. Her digital paintings and illustrations have appeared in numerous books and magazines and have been exhibited nationally. You can find Sharon via sharonsteuer.comfacebook.com/SharonSteuer,  instagram.com/SharonSteuer, and @SharonSteuer (Twitter).

1 Trackbacks & Pingbacks

  1. [Web Design] SOS San Francisco: A Case Study for Collective Visual Brainstorming | WHUZZUP!

Leave a comment

Your email address will not be published.


*