May
25
2010

Quick Tip: Create a Carbon Mesh Background in Photoshop

In this quick tip tutorial, we will demonstrate how to create a cool ‘carbon cut-out’ effect using mesh and carbon textures made from scratch. Let’s get started!


Step 1: Creating the Mesh Pattern

Create a new document, 50×50px and name it "Holes". Fill the background in with #FCFCFC.

Best Web Magazine   72486b738c95f6541681ca8b0788eb3a   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 2: Alignment

Now we need to make a grid to help us layout the holes for the mesh pattern, so we need to create precise guides by going to: View > New Guide. And make the following separate guides:

  • Vertical: 12px, 25px and 38px
  • Horizontal: 9px, 17px, 25px, 33px and 41px
Best Web Magazine   7d8cd85cfedad9d441835b6549aac12b   Quick Tip: Create a Carbon Mesh Background in Photoshop Best Web Magazine   5f0453e345605ebea863ed4a9498bae9   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 3: Adding the Holes

Using the Elliptical Marquee tool (M), set the selection style to "Fixed Size" and enter 14px for width and height. Cmd + Click on the cross sections highlighted on the image below. This should create a perfectly centered eclipse around the cross in which we will fill in black (#000000). Repeat for the remaining points.

Best Web Magazine   75263047eccadc2c145eea143a27705c   Quick Tip: Create a Carbon Mesh Background in Photoshop Best Web Magazine   fb228aca2ccac59c73e261536ccf889a   Quick Tip: Create a Carbon Mesh Background in Photoshop

Should look something like this:

Best Web Magazine   c0b2602b8c65d7fa964dc1775e33e7ca   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 4: Adding Detail

Add the following layer styles: (Inner Shadow: Black, with Distance set to 1 and Size set to 3.

Best Web Magazine   aca1b9de4b600c32d694a90995104762   Quick Tip: Create a Carbon Mesh Background in Photoshop

Pattern Overlay: Pattern selected from Photoshop’s default ‘Artist Surface Pack’ called ‘Oil Pastel on Canvas’ , set opacity to 36%.

Best Web Magazine   22ae762cddce272034ae1492c08c3124   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 5: Saving the Pattern

Using the Rectangle Marquee tool (M) select the inner rectangle (as seen in the image). With it selected go to: Edit > Define Pattern (You may need to expand the menu, by clicking on "Show All Menu Items"). Call it "Mesh" and press Ok.

Best Web Magazine   6c6db61761d625a67e1097514a3d200f   Quick Tip: Create a Carbon Mesh Background in Photoshop Best Web Magazine   9de9c63a53be0aa490f3f1b96cea42a8   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 6: Creating the Carbon Pattern

Create a new document, 100×100px in size. Create a new layer (Cmd + Shift + N) and call it "Vertical Tile." Using the Rectangle Marquee tool (M) set the selection style to "Fixed Size" Using 25px for width and 50px for height. Make a selection in the very upper left hand corner and fill it in black (#000000) for the vertical tiles.

Best Web Magazine   cebc6d5cb95a9bb31e19f584fac3eeb4   Quick Tip: Create a Carbon Mesh Background in Photoshop

Best Web Magazine   e33111c530a914b7f3b07468589cab00   Quick Tip: Create a Carbon Mesh Background in Photoshop

Add the following layer styles: Color Overlay: with the color set to: #252627.

Best Web Magazine   4284ba66e66e8e8b9c3a4ed95bf4b31b   Quick Tip: Create a Carbon Mesh Background in Photoshop

Stroke: with the color set to: #121213, size on 1 and position set to: Center.

Best Web Magazine   5de1332c16ff67b4484f39f7f23fc9d2   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 7: Horizontal Tiles

We need to now create the template for the horizontal tiles, so create a new layer (Cmd + Shift + N) and call it "Horizontal Tile". Using the Rectangle Marquee tool (M) change the "Fixed Size" to 50px for width and 25px for height. Click right next to the vertical and make the selection flush in the upper right hand corner (as seen in the image below). Fill it in with black.

Best Web Magazine   f8717a209dfb47308e34a9f40b46f3ca   Quick Tip: Create a Carbon Mesh Background in Photoshop

Best Web Magazine   965ae5dc0c38f7ab1c2194b94c9b72a2   Quick Tip: Create a Carbon Mesh Background in Photoshop

Add the following layer styles: Color Overlay: with the color set to: #1a1b1c.

Best Web Magazine   4638326a647a84bd5810825d0be0d0dd   Quick Tip: Create a Carbon Mesh Background in Photoshop

Stroke: with the color set to: #121213, size on 1 and position set to: Center.

Best Web Magazine   5de1332c16ff67b4484f39f7f23fc9d2   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 8: Repeating the Pattern

We have the templates for both the horizontal and verticals tiles; by duplicating the layers (Select layer > Cmd + J to duplicate) we now have copies in which we can arrange in a pattern (Pattern template below) Making sure they are flush and not leave gaps (As this will affect the final outcome of the image). Repeat duplicating and ordering the layers to get the finish pattern (as seen below).

Best Web Magazine   9baa4f745d6741efbf631caa19662f84   Quick Tip: Create a Carbon Mesh Background in Photoshop Best Web Magazine   8fde07bf07f8448376fc3f8c76cba5c7   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 9: Saving the Pattern

Again using the Rectangle Marquee tool (M) select the whole document (or Cmd + A). With it selected go to: Edit > Define Pattern (You may need to expand the menu, by clicking on "Show All Menu Items"). Call it "Carbon" and press Ok.

Best Web Magazine   e4f3e4b2ffd8ea44d5790276999052bf   Quick Tip: Create a Carbon Mesh Background in Photoshop Best Web Magazine   9de9c63a53be0aa490f3f1b96cea42a8   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 10: Putting it All Together

Create a new document to what size suits you (I will use 1000×700px for demonstration purposes). Create a new layer (Cmd + Shift + N) and call it "Mesh", fill it in with black (#000000). Apply the Mesh pattern we made previously via layer styles (as seen below).

Pattern Overlay: The patterns we made are saved in the last pack you selected, so in our case the Artist Surface was our last. Select the Mesh pattern from the pack.

Best Web Magazine   b9262dd276ddbd6bc01fbbf8a4f943bd   Quick Tip: Create a Carbon Mesh Background in Photoshop

Create a new layer (Cmd + Shift + N) on top and call it "Carbon" and fill it in with black (#000000), apply the Carbon pattern we made previously via layer styles (as seen below).

Pattern Overlay: Select the carbon pattern in the same folder, and drop the scale down to 25%.

Best Web Magazine   4b7d6cecc7f9aec34ee1c97afaaeda8d   Quick Tip: Create a Carbon Mesh Background in Photoshop

Gradient Overlay: Starting color #000000 to #2e3033, drop opacity down to 65%.

Best Web Magazine   bbe6fa4f9f1930ebab037bf84f419004   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 11: “Cutting out” the carbon

Select the Carbon layer and again using the Elliptical Marquee tool (M); making sure the selection style is back to "Normal" make a rough oval selection from the middle most bottom of the document to the centre right portion. Press delete to remove that portion to reveal the mesh layer beneath, deselect the selection (Cmd + D).

Best Web Magazine   8e6dae5fa580703482e46316b7ba9db1   Quick Tip: Create a Carbon Mesh Background in Photoshop

Step 12: Adding Highlights and Shadows

Create a new layer (Cmd + Shift + N) between the Carbon and Mesh layer and call it "Carbon Shadow." Using a large soft brush (200-300px) with its hardness turned down to 0, opacity to 50% and color set to black (#000000), start to draw along the "cut-out". Use a technique of overlapping brush strokes to build up the shadow under the lip of the carbon, and to fade out towards the center of the uncovered mesh.

Best Web Magazine   0bda39e8079334fbfade49a5eabaf7cb   Quick Tip: Create a Carbon Mesh Background in Photoshop

To add extra detail we can create a very slight highlight on top of the carbon to give it the effect of catching the light source. Create a new layer (Cmd + Shift + N) on top of the Carbon layer and call it "Carbon Highlight" Using the same brush but using white (#FFFFFF) instead of black, Cmd + Click the Carbon layer, to load the selection and keep our highlight in. Now start to paint across the lip very softly to create that soft highlight, turn down the opacity down to 25%.

Best Web Magazine   0ea0bdbd79d2c0453948e07007296435   Quick Tip: Create a Carbon Mesh Background in Photoshop

Final Image

You’re Finished, I hope you enjoyed the tutorial!

Best Web Magazine   bcd509c2b1c8db8181e9dc979c36586d   Quick Tip: Create a Carbon Mesh Background in Photoshop

Similar Posts

WEBSITE COPYRIGHT © 2010 | bestwebmagazine.com