Photoshop Retro Grid Background

8 Jan
Photoshop Retro Grid Background

Photoshop Retro Grid Background

Step 1: Create a new Photoshop document 18 pixels wide by 18 pixels high at 72 pixels/inch. Make sure to set the background contents to “Transparent”.

Step 1

Step 2

 

Step 2: Fill Layer 1 of the new document with solid black. Edit > Fill.

Step 2

Solid Black Fill

 

Solid Black Fill

Solid Black Fill

 

Step 3: Select the Move Tool (M) and hit the left arrow on your keyboard seven times and then hit the up arrow on your keyboard seven times.

Step 3

Step 3

 

Step 4: Create a new layer above Layer 1 (Layer > New Layer) and fill it with solid white. Edit > Fill.

Step 4

Step 4

 

Solid White Fill

Solid White Fill

 

Step 5: Select the Move Tool (M) again and use your keyboard to move the solid white fill left 7 pixels and up 7 pixels.

Step 5

Step 5

 

Step 6: Select the entire image. Select > All.

Step 7: Crop the image to remove the excess areas outside of the artboard. Image > Crop. You now have two 11 pixel by 11 pixel squares to play with.

Step 8: Select the Move Tool (M) one final time, and nudge the white square 2 pixels to the right and 2 pixels down.

Step 8

Step 8

 

Step 9: Set the opacity of the white square layer (Layer 2) to 14%.

Step 9

Step 9

 

Step 10: Set the opacity of the black square layer (Layer 1) to 60%.

Step 10

Step 10

 

Step 11: Define your new pattern. Edit > Define Pattern.

Step 11

Step 11

 

Step 12: Close the pattern document.

Step 13: Create another new Photoshop document.

Step 13

Step 13

 

Step 14: Fill the background layer of your new document with medium red (R 117, G 0, B 0). Edit > Fill.

Step 14

Step 14

 

Medium Red Background Fill

Medium Red Background Fill

 

Step 15: Create a new layer to hold your pattern. Layer > New Layer.

Step 16: File the new layer with your grid pattern. Edit > Fill.

Step 16

Step 16

 

Pattern Fill

Pattern Fill

 

Step 17: Set the opacity of the pattern layer to 25%.

Step 17

Step 17

 

Step 18: Add a gradient fill layer above the pattern. Layer > New Fill Layer > Gradient. Choose the black to white gradient fill (usually third one from the left).

Step 18

Step 18

 

Gradient Fill Layer

Gradient Fill Layer

 

Step 19: Finally, set the blending mode of the gradient fill layer to “Multiply” and the opacity to 65%.

Step 19

Step 19

 

Done: Download sample file(s).

Done

Final Result

 

Extra: Play around with the Transform tools and Distort filters to give your pattern some perspective.

Distorted Pattern

Distorted Pattern

Advertisements

20 Responses to “Photoshop Retro Grid Background”

  1. ghawyy January 11, 2009 at 3:49 am #

    great tut and wat make me like it cos its sample and clear one really thanks bro great work

  2. Karan January 11, 2009 at 6:50 am #

    Great work….Easy to understand……Its really impressive….

    keep it up….and thanks a lot….

  3. Rocky January 24, 2009 at 7:47 am #

    hi

  4. Alexwebmaster March 3, 2009 at 4:46 am #

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  5. dev.My April 20, 2009 at 12:30 pm #

    Great tutorial

  6. ebook cover desinger April 29, 2009 at 12:35 am #

    That was a nice and simple tutorial. Very useful too. Thanks for sharing…and looking forward to seeing more stuff from you.

  7. huwaw69 May 20, 2009 at 7:40 am #

    looks like a hundred of mirrors in the building.. hahaha but nice tutorial anyway!

  8. Stan Harris July 15, 2009 at 12:35 pm #

    Good clear tutorial… but now how do I use this as a textured background in a Flash site. (trying to fill background with a texture rather that simply selecting a color in the >modify document area

  9. Rob August 5, 2009 at 11:38 am #

    Fantastic tutorial

  10. RichardBlogorodni May 1, 2010 at 3:04 am #

    Май для россиян — это особенный месяц, отмеченный двумя очень важными весенними праздниками. День Победы и Праздник весны и труда — это дни, когда мы в очередной раз благодарим старшее поколение за мир и блага, ради которых они трудились и сражались.
    Спраздничком Вас thedesignplaybook.wordpress.com

Trackbacks/Pingbacks

  1. Outstanding Website Background Guide: 60+ Impressive Resources | Noupe - April 19, 2009

    […] – Photoshop Retro Grid Background […]

  2. tutorials for creatingTexture and Background Effects in Photoshop | Smashing Tips - May 8, 2009

    […] Photoshop Retro Grid Background […]

  3. Best Tutorials for Texture and Website Backgrounds - Hidden Pixels - May 15, 2009

    […] Photoshop Retro Grid Background […]

  4. Outstanding Website Background Guide: 60+ Impressive Resources - May 16, 2009

    […] – Photoshop Retro Grid Background […]

  5. Intro no After Effects at Franco Andrade | bLog - July 8, 2009

    […] Este monitor cardíaco aprendi em um tutorial da Creative Cow: library.creativecow.net/articles/rabinowitz_aharon/CC_Heart_Monitor/video-tutorial.phpFiz o fundo no Photoshop através deste tutorial e importei pro After: thedesignplaybook.wordpress.com/2009/01/08/photoshop-retro-grid-background/ […]

  6. 30+ Photoshop Background Effects and Texture Tutorials @ Techie Blogger - August 20, 2009

    […] Photoshop Retro Grid Background […]

  7. 30+ smashing tutorials for creating Texture and Background Effects in Photoshop @Smashing Tips - January 5, 2010

    […] Photoshop Retro Grid Background […]

  8. eagrapho » Top 40 Background and Texture Tutorials and Resources - January 14, 2010

    […] Retro Grid Background This tutorial shows you how to create Photoshop Retro Grid Background for your Web Layout. […]

  9. 30+ smashing tutorials for creating Texture and Background Effects in Photoshop | Smashing Tips - January 23, 2010

    […] Photoshop Retro Grid Background […]

  10. 30+ smashing tutorials for creating Texture and Background Effects in Photoshop @Smashingtips - April 15, 2010

    […] Photoshop Retro Grid Background […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: