How to Create a Background Layer

	This is a very basic, but yet extremely useful tutorial which will teach you how to an appealing background texture/pattern for your website. Start off by opening your Adobe Photoshop application. Then create a new Photoshop document. In order to create a new Photoshop document, you need to go to ‘File > New…’ *or simply by double-clicking anywhere on the empty workspace. Once you have done this, you should notice a ‘New’ dialog opening on the workspace. View Figure1 below as an illustration and reference to the values which you need to input into the prompting fields. Figure 1 Once you have filled in all the fields as shown in Figure1 above, you may press ‘Ok’ to continue with the creation of you new Photoshop document. This is a very small document which we are creating, but it will simply serve as a pattern for implementation on other designs. Press ‘Z’ to select the ‘Zoom Tool’. Now zoom in as much as possible. You will now select the ‘Pencil Tool’ from the ‘Toolbox’. View Figure2 below as an illustration to selecting the ‘Pencil Tool’. Figure 2 With the ‘Pencil Tool’ actively selected, you will now right-click anywhere on the stage of the new document to reveal the size preferences of the tool. Select the 1px size and click anywhere outside of the stage. Closely observe Figure3 below, for you need to clone the structure and effect as shown in Figure3 below. Simply click once with the ‘Pencil Tool’ on the corresponding positions to make a square dot. Figure 3 After you have achieved the same result as shown in Figure3 above, you are now ready to save the pattern for further implementation. If you are satisfied with the design, go to ‘Edit > Define Pattern…’ and notice a dialog opening on the workspace. This dialog will require you to type the appropriate name according to your personal preferences. View Figure4 below as an illustration to this step. Figure 4 We have now created a custom pattern, and thus we are ready to implement this pattern into our desired design. Create another new document. You can do this by going to ‘File > New…’ *or simply by double-clicking on the empty workspace. This will open up a ‘New’ dialog. View Figure5 below as a reference and exact illustration to the values which you need to enter into the prompting fields of this dialog. Figure 5 If you have filled in all the fields as shown in Figure5 above, you may press ‘Ok’ to continue creating the new document. Now move over to the ‘Layers’ panel. If the ‘Layers’ panel is not visible on your workspace, you can make it visible by going to ‘Window > Layers’ *or by pressing ‘F7’ as a keyboard shortcut. You will notice that there is one, empty layer named ‘Layer1’. We will now fill this layer with the pattern which we have saved previously. You can use the fill action by going to ‘Edit > Fill…’ *or by pressing ‘Shift’ + ‘F5’ as a keyboard shortcut. When you do this, you will notice a dialog opening on the workspace. View Figure6 below as a reference to the values which you need to input. Figure 6 You will notice, as seen in Figure6 above, that I have chosen the pattern which we created earlier on. Once you have done this, you may press ‘Ok’ to fill this layer with the pattern. Now rename ‘Layer1’ as ‘texture’. You can rename the layer by double-clicking directly on the text/caption of the layer and then typing the new name at the insertion point. Now create a new layer in the ‘Layers’ panel. You can do this by going to ‘Layer > New > Layer…’ *or by pressing ‘Ctrl’ + ‘Shift’ + ‘N’ as a keyboard shortcut. You should notice a dialog opening on the workspace. View Figure7 below as a reference to the values which needs to be entered. Figure 7 We are almost done with this tutorial. There is one last step which needs to be completed. Move over to the ‘Layers’ panel. You will notice that the ‘background color’ layer is above the ‘texture’ layer in the ‘Layers’ panel. Simply click and drag the ‘background color’ layer below the ‘texture’ layer in the ‘Layers’ panel. Move over to the color box which is situated on the ‘Toolbox’. You will now change the primary/foreground color to the color which you would prefer to use. I have chosen to use #009CFF as my foreground/primary color. View Figure8 below as an illustration. Figure 8 Ensure that you have the ‘background color’ layer selected in the ‘Layers’ panel. Now fill the ‘background color’ layer with the foreground/primary color. This can be done by going to ‘Edit > Fill…’ *or by pressing ‘Shift’ + ‘F5’ as a keyboard shortcut. When the ‘Fill’ dialog opens up on the workspace, simply press ‘Ok’. We have completed this tutorial, and you may view the background texture which I have created in Figure9 below. You can use the same idea and effect to create different textures and effects. Figure 9 I have decided to transform the ‘background color’ layer to a gradient of two different color shades. You can play around with different effects, filters and other features. View Figure10 below as my final result. Figure 10 (Final Result) Thanks to Tutorialized.com for this tutorial!