Everything I know about design I learned playing Starcraft

Photoshop and Starcraft may seem worlds apart, but skills like using keyboard shortcuts effectively, picking the right strategies, and working with teammates are essential for both.

Is your APM high enough?

Iterate at the speed of thought

APM (actions per minute) is a key metric for Starcraft players. It represents how fast you click and press keys, and this impacts how fast you can get things done. If you had Google Analytics hooked up to Starcraft, it’s one of the stats you’d constantly check.

Here is one of the best Starcraft players in the world, IM-MVP, playing against his opponent. Notice how fast his fingers are moving as he moves his units around the map and defends against attacks.

In Starcraft, nearly everything has a keyboard shortcut, and can be accessed in milliseconds. Professional players have average APM's of around 300. During intense battles, with their careers on the line, they can get up to 500 or 600. That's almost 10 separate moves per second!

Enemy zerglings are attacking the front of your base, but mutalisks are hovering above your mineral line, picking off your undefended workers. You have a few marines scattered throughout the base that need to be moved into position. You are seconds from being defeated. What do you do?

You need to move your marines back to the mineral line, pull a few of your workers to repair the front supply depots so the zerglings don’t break through, start construction of a missile turret and queue up a few more marines from your barracks — all at the same time. This requires a fairly high APM.

When you need to access your marines in the heat of a battle, you can’t be fumbling with the mouse trying to click on each one. Ideally you would just press a single key and the previously assigned control group for your marines would be activated. Then you just need to click where you want them to go and be ready for action at a moment’s notice.

Having a high APM is also essential for designing anything in Photoshop. Creating a pixel-perfect design often requires many, many iterations, and being able to get each one done as fast as possible leaves more time to get feedback and reach the optimal solution. Without efficient keyboard shortcuts, the hundreds of versions we usually go through on a project would end up taking months.

There are hundreds of keyboard shortcuts in Photoshop, with one for almost every feature. Additional shortcuts can be added and customized for your specific workflows. For instance, I have F2 assigned to rename layers, and Command + Shift + R to update smart objects—both things I do very often. You should at least learn the shortcuts for the couple dozen actions that are constantly repeated.

The whole company is standing over your shoulder, shouting out ideas. “Two pixels left! Make the logo bigger! What if there was a magic turtle?” Just like when being attacked by a swarm of zerglings, you can’t panic or lose your cool. Instead, rely on your solid APM, stay calm and keep playing.

Instead of scrolling through the list of layers looking for the logo, just switch to the Move tool by pressing V, and right click on it to select it instantly—similar to how you can hotkey your marines to be ready for battle. Need to make it bigger? No problem—Command + T brings up free transform. Hopefully it was a vector!

After a while, all the controls will become a muscle memory and using Photoshop becomes as fun and easy as playing Starcraft.

Game Starting in 3, 2, 1...

Command + N = New Document

In Photoshop, you start with an empty background layer and have to make new layers, grids, color palettes, etc. to get started. When coding, you need to link your javascript, CSS, and other assets and set up a basic layout.

Designers repeat these actions hundreds of times, and eventually they take very little time or attention. Things like basic boilerplate templates get reused and become part of your workflow as you fast-forward to the interesting parts.

The Starcraft equivalent of a boilerplate template is a build order, which informs which buildings to construct in the beginning of the game.

The first few minutes of a game are usually the same—the 6 workers you start off with will start to harvest minerals and construct buildings. I generally start with a very typical protoss build order.

Similarly, when designing a new page, I typically have a few predefined things to start with. Instead of being overwhelmed by a blank photoshop document and getting stuck, I can start by quickly putting up the basic foundation, similar to a Starcraft build order.

---

A Basic Photoshop Build Order

1. Load the page

Load up your browser, hide your bookmarks bar and any other things that may be distracting. You can even use the inspector to modify the title of the page or add a new navigation item.

2. Take a screenshot

On a Mac, Command + Shift + Control + 4 will bring up a crosshair to select what part of the screen to capture. (Pressing control is important, as otherwise the screenshot will be an image on your desktop instead of in the clipboard)

You can drag around the the browser and the background to get most of the screen, or press Space and only capture the clicked window without the background or any of the other windows.

3. Paste into Photoshop

Once the screenshot is in your clipboard, press Command + N to make a new document. It should come sized to the exact dimensions of what is in your clipboard. Then a simple Command + V will paste as a new layer.

4. Clear the content area

Making sure you're on the right layer, use the Rectangular Marquee tool (M) to select the content area and delete it. You may want to leave the header in place to avoid having to re-create it.

5. Fill the background

Use the eyedropper tool (I) to sample the right color and fill the background with it (Command + Delete). Use the gradient tool to make some shadows. Move the Screenshot layer to the top of the document. This will create a mask around everything else you do, so you don't need to worry about going out of bounds.

6. Set up some guides

Drag the rulers onto your document and line them up with key elements. Ideally elements should be on some sort of grid structure and line up with each other.

7. Start building your design!

At this point, you should be ready to go!

To Rush Or Not To Rush?

When a plan comes together

When embarking on a project, one often must decide whether to quickly make a proof of concept and launch the minimum viable product, or to spend a lot of time making it pixel perfect and super polished.

Sometimes you need to get something out the door as soon as possible in order to start getting user feedback and iterating accordingly. In other situations spending a lot of time making it as awesome as possible is the right thing to do.

There are a plethora of strategies and build orders in Starcraft, but most of them can be divided into two categories:

1. Rush - attacking early and overpowering your opponent before they prepare a defense
2. Macro - taking time building up a large invincible army before going in for the kill.

In any Starcraft match, deciding whether to rush or macro in a game is one of the major decisions. The right answer is usually a combination of who your opponent is, what they are doing, what races you are playing, which strategies you've been practicing, how important winning the game is, what map is being played, and even which starting position you were randomly assigned.

From Bronze League to Diamond

Always be learning

Starcraft has an online system that ranks players into different leagues depending on their win-rate and skill level. No matter at what skill level, there are always new things to learn.

We all start off in bronze league, but with constant practice anyone can rise up the ladder—to silver, gold, platinum, diamond, masters, and grandmasters. Even above that are the professional gamers, who spend all day training—many of them in Korea, where Starcraft is almost the national sport.

Nowadays, Starcraft games are constantly being commentated and broadcast on the Internet, not unlike basketball or football. A great way to learn and improve is to watch your favorite players, and see what their current top strategies are. However, you won't improve just by watching from the couch. To really learn and understand them, you need to try out their strategies in real games against others.

Similarly, you should keep track of what your favorite designers and startups are doing. Follow them on Twitter, Dribbble, Behance, etc. Read articles and tutorials published online. The web is constantly evolving as new designs and technologies become prevalent.

Play to your own strengths—you should tailor your game-plan around your own experiences, instead of directly copying what seemed to work for someone else.

However, sometimes when all you have is a hammer, everything can start to look like a nail. One common problem Starcraft players have, as well as many designers, is relying too much on just one thing, and using it every single time. For example, some players only make marines every game and don't have many other build orders. For the cases when it doesn't end up working, it's helpful to have at least a few backup plans to retreat to.

There Is No Best Unit

Use what works for you

People often ask, which unit is the best or most powerful? Which race is the best? What is the best build order? There's no single right answer, everything has its advantages.

Similarly, many people get hung up on which tools or styles are the best for design. Photoshop vs. Illustrator vs. Fireworks? Designing in the browser vs making pixel-perfect mockups beforehand? Flat design vs. skeuomorphic? There are heated debates happening every day, with fans of all sides chiming in.

I think everything has its purpose. Sometimes the best thing way to design something is on a whiteboard in front of an audience. Sometimes a whiteboard is too low resolution and pen and paper is the right thing. I personally love Photoshop, but many amazing designers I know swear by Fireworks or Illustrator.

I usually play Protoss, and am not that great with the other races. However, some of the best players in the world are Zerg or Terran.

The truth is that championships have been won by every race, and great designs produced with all kinds of tools.

Get on and Play!

Collaborate and conquer

Starcraft is meant to be played online with other people—not just by yourself. You can be on your own team, or have teammates and help each other out.

The same is true for Photoshop, and design in general. Working with friends and collaborating helps you win even faster and back each other up when under attack. At Quizlet, we design together in the day, and play Starcraft together at night. And then sometimes design some more.

Whether on a team, or playing by yourself, the best way to improve is with experience. So fire up Photoshop (or your tool of choice) and start designing something! How high can your APM go?

---

Anand Sharma is Design Director at Quizlet and usually plays Protoss.

Art assets courtesy of Blizzard Entertainment & Adobe.