Showcase & Discover Creative Work Sign Up For Free
Hiring Talent? Post a Job

Bēhance

GEARS OF WAR - How to Design a Sick Game Poster-Site

  • 4722
  • 307
  • 22
  • Gears of War - Design A Game Poster-Site

    Gaming is serious businessand users expect to be blown away in-game and online. This tutorial shows youhow to achieve the latter.
  • Youve more than likely played a videogame or two in your day and in all likelihood you probably have a favorite. Try and remember the last time you played that game and then decided to check up on it online; perhaps to catch up on some cheat codes, check outsome of the latest news, photos and videos, or even just to join in on the games community conversation.

    Did the look, feel and punch of that game transcend your TV and mirror itself onto the games website? Giving your users that cohesive brand experience online is critical. It helps sell the brand, the message, and perhaps some more titles.

    This will be a mid-level tutorial that focuseson designing a website for the high impact visual thriller, Gears of War. Once completed you will walk away with the important understanding of how to put together a poster-style immersive web site that focuses heavily on composition and lighting.

    These techniques can be used across the board for any variety ofsites as long as the techniques are used tastefully and with purpose. Now letus start where all great websites must start, with the first step


    Follow me on twitter - @ghoshal
  • The Final Design
  • 1. The Design’s Base

    Open a 1500px * 1200pxworkspace. Fill the first layer with a dark grey (#121212). Use a new shape layerto create a 35px high white band across the top of the layout. Add ablack/white gradient at 10% opacity to the white band. Now add a blackouterglow at size 18.
  • 2. Scratch Texture

    Give your background a“destroyed” look by adding a desaturated scratch texture down the center of theworkspace from top to bottom. Make the scratches toward the center of thelayout a slightly brighter grey (#1e1d1e) by airbrushing iton top of the texture and set your lighting blend mode to “screen.”
  • 3. Grunge Brush

    Sharpen the left and rightsides of the background by adding black fills, 108px in width down the sides.Continue enhancing your background’s “destroyed” look by overlaying a varietyof grunge brush strokes to the sides. The goal here is to make the texturesfeel as a part of the background and to blend them in.
  • 4. Background Lighting

    Lighting is going to be animportant theme in the following steps. Use your airbrush tool to lighten upthe center of the layout. Add an industrial pattern on top of the background;the one used here is a custom grey crosshatch set to blend mode, screen. Dropthe opacity of the pattern to around 30%.
  • 5. The Network Bar

    In your white band at thetop of your layout, you will want to put in the network logo and navigationtext. Use a transparent EPS of the network logo and set it to the left of thebar. Now with your text tool, fill in the navigation to the right. Use Arial,12px, at regular. You should now have your network bar.
  • 6. Main Navigation Background

    On a new layer, create aslightly irregular shaped black rectangle around 1099px in width. Apply a blackouterglow to the layer and set it to multiply and size 24. Add a linergradient, dark grey to transparent, and at 90 degrees. Use a grunge airbrush tomask out part of the sides to give it a “destroyed” look.
  • 7. Logo and Text

    To the left of the mainnavigation add a transparent red skull logo and set the layer to screen. Offsetthe logo on the navigation. Add in the game name as part of the logo, on top ofthe skull. Now to the center of the navigation, add your main navigation textwith partially masked out alpha.
  • 8. Search Box

    To the right of the mainnavigation add a grey rectangular box. Mask out the sides of the box with agrunge brush. Refer to the PSD for inner shadow, color overlay, gradientoverlay and outerglow properties of this layer. Now type “Search” into the boxusing light grey text.
  • 9. “GO” Button Style

    The button style you createhere will be replicated through following steps. Use a rounded rectangle shapelayer at 3px radius. Draw out a black shape big enough for a button; add a 2pxgrey inner stroke and type out your text on top of the button. Mask out some ofthe alpha from that text.
  • 10. Main Body

    Create layout guides asshown in the image. Toward the bottom of the layout create a 1100px * 461pxblack rectangle shape layer with a black outerglow set to 20% opacity and size24.
  • 11. Lighting Main Body

    Use your airbrush tool tolight and highlight certain areas of the main body frame. The example herefocuses a lot of it’s lighting toward the bottom. Vary the intensity of thelight.
  • 12. Destroy Main Body

    Add the final touches to themain body frame by using your grunge brushes to mask out the top and sides ofthe frame. Do not overdo this technique; use it scarcely.
  • 13. Footer Elements

    A site like this usuallyallows for some fun in the footer but try not to go overboard. This exampleuses a center-placed game vehicle with appropriate lighting. Add in anyfranchise and company logos to the left and right of the layout. Also, feelfree to add footer links to the right of the layout.
  • 14. Footer Blood

    This is a great example ofminor details that can make all the difference. Behind the footer, use yourairbrush tool to airbrush bloodstains onto the background. Use a bright red andthen set the layer to blend mode, multiply. This will add to the violent themeof the layout.
  • 15. The Money Shot

    This is where the user willfocus most of their initial attention so make sure to use great image. Use agame screenshot 1500px * 658px in size and place it behind the body frame, mainnavigation and network navigation. Composition is key; pick something withweight and something that tells a story.
  • 16. Masking

    Carefully use your grungebrush here. Use a layer mask on the main image and start to mask out the sidesand bottom of the image as if to make it look like it were part of thedestroyed background. Have fun with this step and take your time to make itlook and feel right.
  • 17. Hue and Saturation

    Put some final touches intothe coloring of this main image. Duplicate your image layer and mask out theleft and right sides to show only the center. Increase the saturation intensityof the center to make the fire glow and give it a bigger visual impact. Add awarm orange hue to the center as well.
  • 18. The Messaging

    Make sure to use a bold headline;something that catches the user’s attention instantly. Also, use big fonts andvary font sizes to focus in on certain words. Enhance the text by giving it a“destroyed” look and add a call to action button. It is important to give theuser a reason to want to click something.
  • 19. Video Tout

    In the left rail, create arectangle 333px * 150px in size. Fill this box with a compelling videoscreenshot of the game. Now give the image a black inner glow with size set to5 and opacity to 100%. Create a “Play Video” button and place it to the bottomleft of the video tout.  
  • 20. “Enlist” Tout

    Under the video tout, createa medium grey 1px * 333px line. Create a new layer above the 1px line and useyour marquee tool to select 333px * 55px in width. Use your gradient tool tofill a black-to-transparent shadow in this space. Add gaming consoles and DVDimage behind the shadow.
  • 21. “Enlist” Tout Text

    To the right of the consoleimage insert messaging text. Change your font size to 45px and type in“ENLIST.” Use your layer mask to mask out some of the alpha to give it thedestroyed look. Continue to add text under this to convey messaging and a redlink so users know where to click.
  • 22. Game Weapons

    No game is complete withoutcool weapons; grab three images of in-game weapons and place them in the rightrail. Use your layer mask to gradient-mask out the top and bottom weapons sofocus is on the center weapon. Add a drop shadow to the main weapon to make itcome alive.
  • 23. Weapons Grade Stats

    Use the same font from step18 for the name of the weapon here. Design weapon’s grade red stats bars foraccuracy, range, and power and name them appropriately. Add a black to whitegradient on the stats bars and set mode to multiply. Finish by adding a call toaction button.
  • Voila!

    Gaming site is now done. How did yours end up looking? I'd love for you to share it in the comments or e-mail me at bobby@theflud.com