Inside Quizlet

Everything I know about design I learned playing Starcraft

Engineering & News ·
Choose a platform

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!

We're under attack!

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

Ready, set, go

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.

I had to take a picture, since you can't take a screenshot of taking a screenshot

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.

The Beginning

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.

Zerg Rush

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.

the leagues

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 2

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.


  1. skyscoops

    I've never played that game. Looks like a fun way to motivate oneself.

  2. chambleton

    Ooooh COOL! Never played it. But it looks fun!
    Hey 2nd Comment!! I've never been in the top 3 comments before!

  3. photosamyam

    That is a really neat way to look at it. Interesting.

  4. Awesome_Dude17

    I play this game! Also, 4th comment!

  5. Dogecoin

    Wow that's really cool! I have never heard of that game but it sounds fun. :)

  6. Dogecoin

    Oh my gosh in the video they type so fast! You can hear the constant clicking woah! That amazing what these people can do. Their fingers move at the speed of light!

  7. lyd_jordan

    Ninth comment!! Closest to 1st I've ever been!!

  8. simmer

    11th!!! comment

  9. simmer

    never played it what is it like? 13th!

  10. One-Winged-Angel

    14th comment!

  11. One-Winged-Angel

    15th comment! LOL!

  12. ChaosCardShark

    wow just wow

  13. cpalexb

    Yayy StarCraft II Analogy to real life.... seems good to me. At least you make the most of your job.

  14. Emmets

    Best ever!

  15. Emmets

    I love to have this!

  16. cpalexb

    Ooooh I finally saw what Quizlet did! Go Quizlet for finding a way to stop spammers without restraining good ideas to a few words! This revelation is worth my last comment.

    Mistassassin, over and out

  17. headams17

    is it like world of warcraft???

  18. ArcherSeraph

    i think this website is used to how to studying.....

  19. Gabi_Rod

    (26th comment! new record for me.) thats awesome! im going to go get that game now...

  20. rawells14

    Thanks, those were good tips

  21. rawells14

    I think this is a good tip, and was well put together. I greatly thank you and Im sure alot of people liked it. I also think you should post more things like this because it shows that study websites arent just boring but are actually fun.

  22. Lavox

    Wow! This is the most helpful "Inside Quizlet" ever! Not only did I learn about a great game, I also now know how to actually use photoshop! =P

  23. kittymandog


  24. JFQwillrocku

    I have a question. Sometimes I see on the home page for a set that the scatter score is 0.1 seconds, but when I look at the actual scoreboard (I guess you would call it) the high score is a more reasonable time. Also the person who it said had the high score actually has't scored anywhere near that. Do you know what is happening?
    BTW I've seen it twice.

  25. Austin-Smith1

    is starcraft free anyone know.

  26. kearsarge

    ive heard about starcraft its supposed to berealy good but really hard

  27. Samurott318

    What system is it for?

  28. AbigailBaldwin

    Woah this is so cool!

  29. Meekjesse

    I like pirate 101 better

  30. Evanthebigman


  31. joshuaaldendennis

    Hmm I like the comparisons and it is an interesting view. Also cool game!!!

  32. ChaosCardShark

    are u calling me a "video-game hater" cause if u are I own 3 seprate gaming consoles and play on a regular basis. EXECPT I just cant stand starcraft.

    ---Live Free, Die Hard

  33. cutekittykat

    i can't stand video games at all. I prefer the movies and volleyball. :)

  34. kopenguin

    Holy Cow! That guy is fast. I have never heard of StarCraft.

  35. Maplehoof

    Holy Peewees! That guy is fast!!!

  36. ellie_77


  37. waldo25

    59th new record! any wy thats cool

  38. steelers43

    That is awesome and extremely fast 500 to 600 WPM amazing!!!!!!!!!!!!!!!!!!!!11

  39. bookclub

    61st comment

  40. Planar

    @dpontiff: If you haven't recalled, it was stated that this "Behind the Scenes" section was meant to be a place where the staff can post, literally, what's "behind the scenes." It's supposed to be like a Twitter page. Besides, this post isn't meaningless. You were looking at this post a different way than it was supposed to be looked at. This post was NOT trying to say "HEY GUYS I PLAYED THIS VIDEO GAME CALLED STARCRAFT AND NOW I CAN SMASH THE KEYS ON MY KEYBOARD AND DO STUFF!" It was trying to tell that even the most unrelated things can teach you something academic by giving you inspiration or motivation.

  41. Brainiac98

    Commentated huh? I've never seen ANY, or even heard of the game. All I see now is minecraft... But I think that's cool how it all works like Photoshop... I use a 3D modeling program called Blender, and it's got keyboard shortcuts for everything as well. I still haven't got the hang of it. :D

  42. toby_the_epic1

    tried to do this,

    get it on first try

  43. R_J_C_O_R_B_A


  44. sazhassan


  45. itaybarylka

    Awesome post!

  46. abhaytangella


  47. jacobpeek

    Heard of it....NOW IT SOUNDS SO KEWL!!!! Does it cost money though? Great review and......THATS JUST KEWL!

  48. JJMan007


  49. JJMan007

    That's..........that's....................mindblowing...... It's still great! ^.^

  50. Iron-Ben

    is not cool

  51. baconguy

    i guess that makes sense if but nice siege tank picture

  52. Yim_and_Yang ARE HELPFUL! Take that MOM!

  53. williamrowell

    thats awsome i meet very few other people who actually play SC. to people asking you only buy it once make a account and no its not like WoW its a strategy game and now its an actual sport that people get paid to play!

  54. Charity_Barker

    Wow, neat analogy!

  55. LeonardEllyteShin


  56. Vortico

    This is why I never use GUIs. The mouse is horrible for "APM", but I can launch anything in a second with my tiling terminal interface.

    Also, since design is often performed on computers (Photoshop in your example), you shouldn't try to get a high button-press rate but prefer thinking smart over thinking fast. Write macros in Photoshop, learn high-level web frameworks, write scripts to automate tasks, and find clever ways of doing things to avoid the typical naive method.

  57. ianandkath13

    Cool story. Might just play this game now!

  58. Brainiac98

    I've always wanted to try out Photoshop, but can't since I don't have the money to pay for it. I'm an amateur "Game-Maker" and I'm terrible at sprite making. so Photoshop, or some other image editing software would be great for me, along with Blender... :D

  59. JitteryOwl


  60. armandphipps

    starcraft is amazing

  61. CyrilBiselx

    Thank you for this nice article!

  62. Meekjesse

    Thats right jesusfreak200

  63. mr_samosa

    This is nice... Makes me wanna play Starcraft!!!

  64. monroeg

    I love starcraft. However, the Quizlet team is wrong about there being no best race. Protoss are far superior in my opinion, because you can use combinations of units like a scalpel. Zerg is just fun because the strategy is to use brute force and superior numbers to overrun your enemies. Terran is vanilla!

  65. laidianyu

    I play Starcraft II. It is really fun. I love it.:)

  66. Oshean

    I love Starcraft II and Minecraft! They are awesome! (Comment 82)

  67. stephen_miller9

    Thanks, Anand! I wish more designers kept the importance of keyboard shortcuts and of helping people to achieve high APMs in mind.

  68. JJJJJD


    I use this tool called GIMP. If you google it, it will come up. It is pretty much a free, probably lower quality, version of Photo shop. I like it. I'm not sure if it has what you want, but I know that you can cut, paste, crop, draw, add layers, layer masks, and you can probably find ways to do really complicated things! Hope this helps!

    (I'm combining this because of the limit on comments :-) )
    To add your profile pic, you click on your name, so that you come to the place where it tells you all the sets you created, days of membership, discussion messages, classes, etc. Under your name, there should be a link that says "Change Picture". Click it. You should now be at a page that lists a lot of different pictures you can pick from. To upload your own, click the "Browse" button that should be under the header "Upload a different image". You can then open any image that you have saved on the computer, or a thumbdrive, or something of that sort. I hope this

  69. danilka1

    84th comment. Yahoo. LOL =)

  70. danilka1

    I have seen people playing starcraft on youtube. I really wanna play it even though I'm only 12. I love the zerg the best. (They are so cute) I love zerg because of everything except that you have to spread creap!

  71. Lugeboy

    Sounds like starcraft is fun!

  72. Lugeboy

    I also like to program. So if you can, could you give me a few pointers on programing? I would absolutely LOVE that.



  73. hilukasz

    Don't forget to use space after you hit cmd + shift + 4, lets you take a SS of the window faster.

  74. ShadowMaster01

    Do you play Minecraft?

  75. MirkwoodMeag

    wow....that guys good!

  76. MirkwoodMeag

    i got photoshop elements for xmas and it is cool!!!!!!!! and i like minecraft but i dont play it... my sister plays starcraft a lot. im about start starcraft RIGHT NOW!

  77. bu3ta3lime


  78. safiasidek

    Educational article. Thank you. Also, that title was excellent.

  79. ichifish TEACHER

    Great article. Thx

  80. ejmaxi17


  81. Im_So_Hipstaaaa3

    wow that is like so freaking rad bro I can like feel it in the litosphere

  82. Im_So_Hipstaaaa3

    and also nice if you see this like this and add me to the team please

  83. Bridgette_G

    looks awesome!

  84. GabrielF99

    You forgot micro tactics :)

  85. wheatwolf

    Thanks for the Photoshop shortcuts and adding control to the mac screenshot shortcut! I haven't used shortcuts on photoshop before and have always manually clicked (whoops)

  86. apocalypseShinobi

    Thanks for the article! I definitely need to play this game.

  87. AlexHDong

    Starcraft is really fun

  88. eyal3400

    Kage bunshin no jutsu!

  89. nunu10000

    People often look at me like I'm crazy whenever I tell them that they should learn keyboard shortcuts. This definitely puts that into perspective. Also, very cool way to compare work to play.

  90. dwane9903

    500th like!!!

  91. jwils603

    good way to learn keyboard shortcuts

  92. MrClintonElliott

    Thanks for a great article. You provide a good introduction to StarCraft and Photoshop. My entry point has been Flash but find my cropping skills weak with this tool and end up resorting to paint for some things. Definitely want to improve my design work.

  93. yazminnava

    Nice !

  94. yazminnava

    This is very complicated stof.

  95. maceyroberts713

    is that another version of mine craft

  96. keredd


  97. keredd


  98. bluedomke


  99. marcieharper

    Interesting article!

  100. Miss_Independent_cat


  101. AgentJaggedstar

    Me cunfuzled

  102. AgentJaggedstar

    That's fast

  103. austinbryant1996

    i want to be a game desigher

  104. stassone333

    haha... but id rather play outside- like softball- instead of sitting playing starcraft!

  105. Nepal_is_my_username


  106. Julia_Carloyn

    YEAH!! 123TH COMMENT!! 1... 2.... 3....

  107. Bromine_XZ

    124th comment, dang it I wanted a square or cubed number so I'll do 1 more

  108. Bromine_XZ

    Woohoo! I did it 125th comment and the cubic route of 125 is 5 yeah

  109. clapee

    there should be a way to make quizlet your own by using costume colors and backrounds of your class

  110. NinjaKirby


    I personally think that you are incorrect, though i play protoss as well, you could be overwhelmed pretty easily in the early game. Thus making no race the best.

    Anyway, for the people saying that starcraft 2 costs money, well you can always try the starter edition. Just saying.

  111. Alpacacat PLUS


  112. jdomar24__

    LOL I am not Korean so my AMP is not as high. I cant move like MVP does. Besides I am Zerg player didn't enjoy him beating RET haha.

  113. morhook

    Thanks for posting this one! Hopefully everyone in Quizlet still play a lot of starcraft.

Leave a comment

Login to leave a comment