Fresh features from the #1 AI-enhanced learning platform.Try it free
Fresh features from the #1 AI-enhanced learning platformCrush your year with the magic of personalized studying.Try it free

Everything I know about design I learned playing Starcraft

EngineeringNews · Posted by Anand  April 4, 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

skyscoops  

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

chambleton  

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

photosamyam  

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

Awesome_Dude17  

I play this game! Also, 4th comment!

Dogecoin  

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

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!

lyd_jordan  

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

simmer  

11th!!! comment

simmer  

never played it what is it like? 13th!

One-Winged-Angel  

15th comment! LOL!

ChaosCardShark  

wow just wow

cpalexb  

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

Emmets  

Best ever!

Emmets  

I love to have this!

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

headams17  

is it like world of warcraft???

ArcherSeraph  

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

Gabi_Rod  

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

rawells14  

Thanks, those were good tips

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.

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

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.

Austin-Smith1  

is starcraft free anyone know.

kearsarge  

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

Samurott318  

What system is it for?

AbigailBaldwin  

Woah this is so cool!

Meekjesse  

I like pirate 101 better

Evanthebigman  

Bosssss!!!!!!!!!

joshuaaldendennis  

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

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

cutekittykat  

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

kopenguin  

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

Maplehoof  

Holy Peewees! That guy is fast!!!

ellie_77  

Amazing!!!

waldo25  

59th new record! any wy thats cool

steelers43  

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

bookclub  

61st comment

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.

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

toby_the_epic1  

tried to do this, get it on first try

sazhassan  

THIS IS AWESOME!

itaybarylka  

Awesome post!

jacobpeek  

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

JJMan007  

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

Iron-Ben  

is not cool

baconguy  

i guess that makes sense if but nice siege tank picture

Yim_and_Yang  

Dang.....games ARE HELPFUL! Take that MOM!

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!

Charity_Barker  

Wow, neat analogy!

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.

ianandkath13  

Cool story. Might just play this game now!

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

JitteryOwl  

PHOTOSHOP RUSH KEKEKEKEKE

armandphipps  

starcraft is amazing

CyrilBiselx  

Thank you for this nice article!

Meekjesse  

Thats right jesusfreak200

mr_samosa  

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

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!

laidianyu  

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

Oshean  

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

stephen_miller9  

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

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

danilka1  

84th comment. Yahoo. LOL =)

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!

Lugeboy  

Sounds like starcraft is fun!

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

hilukasz  

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

ShadowMaster01  

Do you play Minecraft?

MirkwoodMeag  

wow....that guys good!

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!

bu3ta3lime  

LOVE THAT GAME!!!

safiasidek  

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

ichifish  teacher

Great article. Thx

Im_So_Hipstaaaa3  

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

Im_So_Hipstaaaa3  

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

Bridgette_G  

looks awesome!

GabrielF99  

You forgot micro tactics :)

wheatwolf  plus

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)

apocalypseShinobi  

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

AlexHDong  

Starcraft is really fun

eyal3400  

Kage bunshin no jutsu!

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.

dwane9903  

500th like!!!

jwils603  

good way to learn keyboard shortcuts

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.

yazminnava  

This is very complicated stof.

maceyroberts713  

is that another version of mine craft #COMPLICATED

keredd  

yay...? #confusedface

bluedomke  

yay...? #confusedface

marcieharper  

Interesting article!

Miss_Independent_cat  

115TH LLLLLLLLLLLLLLLLLOOOOOOOOOOOOOOOOOOLLLLLLLLL

AgentJaggedstar  

Me cunfuzled

austinbryant1996  

i want to be a game desigher

stassone333  

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

Julia_Carloyn  

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

Bromine_XZ  

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

Bromine_XZ  

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

clapee  

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

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.

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.

morhook  

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