Free Online Classes

Learn how to create a moody dark interface using shapes and patterns. This tutorial is good for learning how to create patterns with layer styles and repeat those patterns to create an elaborate interface.

Dark Splash Page Photoshop Tutorial

Step 1

Let's start out by creating a new file. I used a 600x600 pixels canvas set at 72dpi, and I filled my background with a black color. Now create a new layer set and name it 'Side Panel Design'. Then create a new layer and draw a long rectangle with 24 x 453 px dimensions and #4B4431 color shade.

Step 2

Under Layer Style(Layer > Layer Style) add a Gradient Overlay and Pattern Overlay blending options to your brown rectangle layer.

Step 3

In a new layer draw a smaller rectangle with 20 x 46 px dimensions and #4B4431 color shade.

Step 4

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Gradient Overlay, Pattern Overlay and Stroke blending options to your the smaller brown rectangle layer.

Step 5

With all that blending options added to your smaller brown rectangle layer it should now look like this:

Step 6

Duplicate the smaller rectangle design four times and position them as shown below.

Step 7

Duplicate your 'Side Panel Design' layer set and merge it through Layer > Merge Layer Set. You should now have a new layer with the side panel design, flip the duplicate through Edit > Transform > Flip Horizontal.

Step 8

Position the duplicated side panel design on the left side of the original then modify the perspective through Edit > Transform > Perspective. When the transform points show up on the design, pull down the top left point so it creates the perspective shown below. Then set the layer's opacity level to 55%.

Step 9

Now we want two side panel designs standing next to each other, instead of having to create the second panel from scratch just add a marquee selection around the original and go to Edit > Copy Merged. Then go back to Edit > Paste, a second side panel should now appear on your canvas in its own layer. Set the layer's blending mode to Lighten so the black background will not interfere with the original side panel. Also apply a Sharpen Filter through FIlter > Sharpen > Sharpen more.

Step 10

Add a couple of spider cobwebs on the side panels, first select the Horizontal Type Tool and set the font family to Webdings, 36 pt, crisp and white color shade. In a new text layer type '#' which should render into a spider web. Now under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your text layer. Then set the layer's blending mode to Darken.

Step 11

Add the rest of your cobwebs by duplicating the '#' text layer. For better results make sure each '#' text layer has different sizes, rotations through Edit > Transform and opacity levels.

Step 12

Add another set of side panels turned the other way and positioned on the opposite end of your splash page. Use the same method to create the same side panel from step nine.

Step 13

Now let's add a stretch design on the middle of the side panels. First add a 1 px marquee selection line on the left side panel. Try to add your marquee selection on the same spot as shown on the picture guide for better results. Once you add the marquee selection go to Edit > Copy Merged. Then go back to Edit > Paste, a 1 px line should appear on your design. Stretch your line to the other end of your side panel through Edit > Transform > Scale.

Step 14

Under Layer Style(Layer > Layer Style) add an Outer Glow and Pattern Overlay blending options to your stretched design layer. Then set the layer's opacity level to 55%.

Step 15

Select the Horizontal Type Tool and set the font family to Footlight MT Light, 60 pt, strong and 242015 color shade. In a new text layer type 'ENTER' around the center of the splash page graphic.

Step 16

Now under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin, Gradient and Stroke blending options to your 'ENTER' text layer.

Step 17

Now set the font family to Wingdings and 60 pt. In a new text layer type 'N' which should render into a Skull icon. Add the same layer styles from step sixteen.

Step 18

The image looks quite dark right now and the text isn't very clear.

To fix this, select the top layer and choose Layers > New Adjustment Layer > Levels. First, click on Auto to let Photoshop automatically enhance the brightness. Then, click on the white input slider and drag it towards the middle until the image is brightened.

Final Results