Latest Updates

Everything I know about design I learned playing Starcraft

April 3, 2013

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.

Photoshop

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.

hover2

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.

Minerals

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.

d5
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.

e5
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.

f5
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

13-tank

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.

16-adobe

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.

sketch

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.

wall

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.

Comments

  1. skyscoops 

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

  2. chambleton Plus

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

  3. RyleHS 

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

  4. Lame_Sport 

    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. ladyaelin 

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

  8. simmer Plus

    11th!!! comment

  9. simmer Plus

    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. mistassassin 

    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. mistassassin 

    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 

    cool\

  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. gostallions6 

    I like pirate 101 better

  30. Evanthebigman 

    Bosssss!!!!!!!!!

  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 

    Amazing!!!

  37. waldo25 

    59th new record! any wy thats cool

  38. steelers43 

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

  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 

    hi

  44. sazhassan 

    THIS IS AWESOME!

  45. itaybarylka 

    Awesome post!

  46. sdfg123 

    beautiful

  47. jacobpeek 

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

  48. JJMan007 

    whoa

  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 

    Dang.....games 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 battle.net 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 

    ME= PLATINUM

  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 

    PHOTOSHOP RUSH KEKEKEKEKE

  60. armandphipps 

    starcraft is amazing

  61. CyrilBiselx 

    Thank you for this nice article!

  62. gostallions6 

    Thats right jesusfreak200

  63. allies4ever 

    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. Your_Fallen_Angel 

    hey, watch the language! there are little kids on here! :/

  69. JJJJJD 

    @Brainiac98

    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!

    @monologna
    (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

  70. danilka1 

    84th comment. Yahoo. LOL =)

  71. 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!

  72. Lugeboy 

    Sounds like starcraft is fun!

  73. Lugeboy 

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

    Thanks!

    Z

  74. hilukasz 

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

  75. ShadowMaster01 

    Do you play Minecraft?

  76. MirkwoodMeag 

    wow....that guys good!

  77. 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!

  78. Ehuang7123 

    LOVE THAT GAME!!!

  79. partypoisonn 

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

  80. ichifish Teacher

    Great article. Thx

  81. ejmaxi17 

    nice

  82. Im_So_Hipstaaaa3 

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

  83. Im_So_Hipstaaaa3 

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

  84. foreverdancer 

    looks awesome!

  85. GabrielF99 

    You forgot micro tactics :)

  86. fredthelizard 

    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)

  87. Brainpower47 

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

  88. udonsythia 

    Starcraft is really fun

  89. eyal3400 Plus

    Kage bunshin no jutsu!

  90. 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.

  91. dwane9903 Plus

    500th like!!!

  92. jwils603 

    good way to learn keyboard shortcuts

  93. 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.

  94. yazminnava 

    Nice !

  95. yazminnava 

    This is very complicated stof.

  96. maceyroberts713 

    is that another version of mine craft
    #COMPLICATED

  97. keredd 

    um

  98. keredd 

    yay...?
    #confusedface

  99. bluedomke 

    yay...?
    #confusedface

  100. marcieharper 

    Interesting article!

  101. Miss_Independent_cat 

    115TH
    LLLLLLLLLLLLLLLLLOOOOOOOOOOOOOOOOOOLLLLLLLLL

  102. AgentJaggedstar 

    Me cunfuzled

  103. AgentJaggedstar 

    That's fast

  104. austinbryant1996 

    i want to be a game desigher

  105. MT_29 

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

  106. Nepal_is_my_username 

    lol

  107. skang325 

    122th comment yah

  108. Julia_Carloyn 

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

  109. Bromine_XZ 

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

  110. Bromine_XZ 

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

  111. StudyMan23456 Plus

    wow, you rock Anand.

  112. clapee 

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

  113. NinjaKirby 

    @monroeg

    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.

Leave a comment

Login to leave a comment

Create Set