Tutorial: Create Blog Pattern Background using Photoshop Adjustment Layer

This tutorial will show you how to create background with line pattern for blog or website similar to example above (click at the image to enlarge) using Photoshop Adjustment Layer. You can also take a look at With Photoshop Adjustment Layer you can easily modify color and density of your new background. Moreover you can easily create another version of the background with different color.

The most tricky part to create this pattern background is to design and create Photoshop pattern preset. In this tutorial we will create one separate pattern file and define it as new pattern preset Photoshop. Then we will use several Adjustment layer to modify its color and density to achieve final result.

Create Photoshop Pattern File

1. First thing first, we have to create 45° line pattern. So lets start with create new 8px by 8px image. [Show Detail]
   Choose menu File » New or Press Ctrl(Command)+N to create new file and enter 8px in both width and height box then just hit “OK” to create new file.

   

2. Zoom in until you clearly see entire image, the select Pen Tool , make sure that Path option is selected, then start draw the shape as shown in example above.
   

   Tip: You can press and hold Shift key while drawing to fix the path with 45° increment.

   

3. Create New layer and fill entire layer with black then use the created path as Vector Mask. [Show Detail]
   Create new layer by click at New Layer Button at bottom of Layer Palette. With the path still active press New Layer Mask Button twice to add Vector Mask to selected layer. Then fill black color by assign black to foreground color (Press "D") the press Alt + Backspace (Windows) or Option + Return (Mac OS) to fill foreground color to the layer.
4. With all layer visible, Press Ctrl(Command) + A to select all image canvas and press Ctrl(Command) + Shift + C to do a copy merge command.
   

   Note: You can also access Select All command by choose menu Select » Select All. And access Copy Merge command by choose menu Edit » Copy Merge. The Copy Merge command will copy all visible layer in selected area into clip-board unlike Copy command that will copy only selected layer. When we do Copy Merge command we usually leave selection of the copy area selected to paste into same position, otherwise the copy area will pasted in to center of the image.

   

5. With topmost layer selected and the selection still active, Press Ctrl(Command) + V to paste to the new layer now you should have additional layer on top of all layers. Then Press Ctrl(Command) + I to invert color of current layer. Now you should have result similar to example above.

   

6. With the new copied layer selected, Press Ctrl(Command) + T to do Free Transform Command. Then rotate layer by 180° by Right-Click (Windows) or Control-Click (Mac OS) within the bounding box and select “Rotate 180°”.

   

7. Use Lasso Tool to roughly make selection around black triangle are at top left conner.

   

8. With the topmost layer selected press New Layer Mask Button to create new layer mask for the layer. Now you should have final result similar to example above.

Now your pattern file are ready, you should save it, and we will define the pattern to use it in Photoshop in the next step.

Define new pattern to use within Photoshop

To use your new pattern you have to define to save it to Photoshop preset. Like other Photoshop Presets or Photoshop Brush you can manage, save, load, delete or export your pattern using Photoshop Preset Manager. You can access Preset Manager by choose menu Edit » Preset Manager. To browser the pattern select Pattern in the drop-down menu.

To Define Pattern:

With all layers visible and image layer is selected (Not the Layer Mask). Press Ctrl(Command) + A to select all image canvas. Then choose menu Edit » Define Pattern. This will open Pattern Name windows, naming your new pattern and then click OK to save.

To use pattern to create background

1. Create new file with desired dimension, let’s say 280px by 150px.
2. Fill entire layer with your base color. I’ll use dark red color (HSB: H: 0 S: 99 B:65)
3. Create New Curve Adjustment Layer and slightly pull middle point down as show below. Your image should a little bit darker. Then click "OK". [Show Detail]
   You can create New Curve Adjustment Layer by click at New Adjustment Layer Button at bottom of layer palette and select Curve.

   

4. Select the Curve Layer Mask and choose menu Edit » Fill.

   

5. In the Fill dialog, select "Pattern" from drop-down menu. Then choose pattern you just define from "Custom Pattern" and leave the rest of the options as default as shown above. Click OK to fill the pattern to Curve Layer Mask.

   

6. To create the background volume, create another Curve Adjustment layer. Again pull mid-tone point down. This time we may need a bit darker density. You may also need to pull down the white point as well to archive result. Anyway don’t be worry about it too much, we can re-adjust it anytime later.

   

7. Now fill black color to entire curve mask. Then use Gradient Tool with linear option to shade white color from bottom to about center of the image. Now your background should look similar to the example below.
   

   Tips: While dragging the Gradient tool you can hole down Shift key to fix the tool with 90 degree direction.

   

8. Next we will create sharpe high-light at the top. Select Rectangular Shape Tool , make sure its option is set to path . Draw the shape tool at area you need to place header (See example below).

   

9. Make sure that the path still active, then create another Curve Adjustment Layer. This time pull up the midtone to lighten the image. The active path will automatically add to the new curve layer’s vector mask.

   

10. Select the high-light curve layer, then hold down Alt(Option) and click at New Layer Mask Button to add new layer mask with filled black color. Use Linear Gradient tool to shade white color to the Curve layer mask. By drag the Gradient tool from the bottom of rectangular path to the top edge of the image.

    

That’s it now you should have your new blog background. You can easily create color variation by fill the base layer with different color or just add another Hue/Saturation Adjustment layer above base color. You can also re-adjust the image density by modify each curve layer until you satisfy with the final result.

If you like you can download the example psd file that create in this tutorial along with the pattern preset below in this page.

Download: PatternBG.zip

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

This entry was posted on Thursday, April 10th, 2008 at 12:14 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.