Home

Prion Cracked Stone effect

Use layer-styles, airbrushes, fills and selection tools to recreate the cracked stone looking interface present in the Prion mini-suite of themes, replete with realistic deep insets.

Prion cracked stone interface tutorial

Prerequisites: PhotoShop 6.0 or higher.Tiling stone texture (provided)

.: by mrbiotech :.

This tutorial will be easier if you activate your Layers and Colors/Swatches palettes(Window->Show Layers, Window->Show Colors, Window->ShowSwatches).

1. Save the following stone texture to your computerby RIGHT-CLICKing it, selecting “Save As…” and putting it somewhere you’ll find it. Open it in PhotoShop, press CTRL+A to select the entire image. Then go thru the menus: EDIT->DEFINE PATTERN and give it a name like “Stone” or “Stone Texture.” You’ll now be able to use it in LayerStyles and Fill Styles (which we’ll do). This excellent texture came from Ryan Lacdao’s Eyeball Design group:

2. Create a new file (CTRL+N) and set its dimensions at 150px wide by 100px tall, transparent background.

3. Select the Rectangular Marquee Tool !http://www.skinyourscreen.com/server/e107_images/articles/mrb-tut-prionstone/1.gif!, and set the Style for “Fixed Size,” the Width to 110px, and the Height to 60px. Make a selection in your document.

4. Select the Paint Bucket Tool: and fill the selection with any color you wish (we’ll becovering up the color with LayerStyles). Mine looks like this:

5. To make the shape more interesting, we’re going to give it a “shave.” Select the Circular Marquee Selection Tool: !http://www.skinyourscreen.com/server/e107_images/articles/mrb-tut-prionstone/4.gif!. If you don’t see it on your tools palette, click on rectangular marquee tool and hold it for a sec until the selection tool sub-menu pops out and grab it). Again, set the Style to “Fixed” and set the selection area’s dimensions at 50px by 50px. Make sure the Anti-Aliased checkbox ischecked and Feather is set to “0.” Zoom in to about 300-600% on the Lower-Left corner of the box you made and line up a circular selection with the edges, like this:

Press CTRL+SHIFT+L to invert the selection.

6. Select your Eraser Tool: set the Mode to “Pencil” and set the brush size to a diameter of 30px or less. Carefully erase around the bottom lower-left of the circular selection to smooth the edge ofthe box:

7. Repeat Steps 5 and 6 for the Upper-Right corner of the box. Then set your circular marquee selection size to 26px by 26px and perform the same shaving operation on the Upper-Left and Lower-Right corners of the box. Now, the box should resemble this:

8. Time to add some Layer-Styles! Double click on Layer 0 in the Layers Palette. Select PATTERN in the left column of the LayerStyle Dialog box, and pick the pattern that we saved earlier (“Stone,” or whatever you called it). Now click on the COLOR OVERLAY layer-style option in the left column. The image is kind of dark, so let’s lighten it up by selecting pure white as the color (#FFFFF), the Blend Mode as “Overlay” with 100% opacity. Now activate the BEVEL AND EMBOSS layer-style and set it as follows:

  • Style: Inner Bevel
  • Technique: Smooth Depth: 70-150% (I used 101%)
  • Direction: Up
  • Size: 13px
  • Soften: 7px
  • Angle: 120 degrees
  • Altitude: 63 degrees
  • Gloss Contour: Linear
  • Highlight Mode: Overlay
  • Highlight Opacity: 100%
  • Shadow Mode: Color Burn
  • Shadow Opacity: 30%

9. Select the CONTOUR layer-style from the left column, and set the curve as the one that bulges toward the upper left corner (mine was the curve immediately beneath the linear one).For added depth, we can add the default DROP-SHADOW layer-style by clicking it from the left column.Your shape should now look similar to this:

Next page: pull out your airbrush tool, we’re hand-rendering cracks!

That shape’s almost lookin’ like a good background. Let’s age it a bit by adding a crackled effect.1. Create a new layer by pressing CTRL+SHIFT+N, and name it something useful, like “Buford,” or “Chuck.” (Just kidding, “Cracks” will be more helpful).

2. Select your Airbrush tool (Press “J” or hit this button: . Then press the “D” key (which sets your foreground color to Black, and your background color to White). In the Air-brush-options at the top of the screen, select the smallest brush you have(approx. 1px), Mode: “Normal,” Pressure: “100%.” Zoom up to about 500% (shortcut: Press CTRL+”+” 5 times), then start airbrushing some cracks onto your stone. There is nothing precise about this; be as craggly as you can, overlap some of your lines a couple times, and don’t worryabout going beyond the edge of the stone shape! I’m telling you to be sloppy, but only in a “controlled” way, of course :) Here’s what mine looked like after some liberal scratching (with and without the stone behind it so you can see the actual airbrushed cracks):

3. Here’s where it begins to get pretty! On the Layer’s palette, select the layer with the cracks in it, and set it’s Style to “Soft Light“with an Opacity of 50-75%. Duplicate the layer by RIGHT-CLICKing it and selecting DUPLICATE LAYER. Name it “cracks2”. Duplicate either one again and call it “cracks-hilight.” Now you should have 4 layers,from top to bottom: 1) “cracks-hilight”, 2) “cracks2” 3) “cracks” (or Buford or Chuck), and on the bottom 4) “Layer 0” containing your stone. Click the “cracks2” layer to activate it, then press “V” to select your Move Tool !http://www.skinyourscreen.com/server/e107_images/articles/mrb-tut-prionstone/13.gif!, and press your “up” key followed by the “left” key to shift the layer up and left one pixel.

4. Click the “cracks-hilight” layer in the Layer’s palette to select it, and press CTRL+I to inverse its color from black to white. Press “V“to select the move tool and press your “DOWN” key followed by the “RIGHT” key to shift it down and to the right one pixel. You should have a craggly lookin’ piece of rock now:

5. Toget rid of the extra cracks that may extend beyond the stone,CTRL+LEFT-CLICK Layer 0 to create a selection of the layer’s contents,then hit CTRL+SHIFT+I to invert the selection. Now everthing OUTSIDE of the stone shape is selected. Click on layer “cracks” and press DELETE. Do the same with the “cracks2” and “cracks-hilight” layers to scrub any crackage beyond the stone.

Now that we’ve got a “firm foundation” (okay, okay, I know it was a bad pun…) we can start adding other features…-Like on the next page!

We’re going to put some divits in the stone where you could put titles, controls, funky glass orbs, or whatever you wish.

1. Create another layer on top of all the others by pressing CTRL+SHIFT+N and call the new layer “insets.” Create another unique shape accordingto the techniques we used to originally create the stone using selections and fills. I chose a 60% grey for my fill color on this newshape:

2. To this new shape apply the following layer-styles:

Your image should now resemble this:

Add a glass feature, as per the NonDisjunction Glass tutorial, however you see fit! To the following image I also added some metallic features, a broad, dark outer glow, and a background containing a solid color with a gradient and pattern layer-styles applied:

...and now

What others are saying.

 

Likes

Yup, that's my tumblog.

You can make your own at Tumblr.

Whatcha been doin', mrbiotech?

RSS / Atom