Photoshop tutorial: Pattern 2

The next part of this tutorial will discuss on how to apply the new pattern you have made into a blog. This tutorial will involve Photoshop and some knowledge on CSS (Cascade Style Sheet).

Before applying the new pattern, we need to discuss the properties of a typical blog. The picture below shows the main section of a blog. This layout is based on my blog. As you could have seen, there are several sections such as body, base, header, main, sidebar and footer.

The new pattern can be filled into any of these section and for this, you need to know the width of the section that you are going to apply the new pattern. In this blog, I have used the pattern in Base which have the width of 800 pixels. You could have used the pattern in Main which have the width of 500 pixels.

[This measurement is based on my own blog. Thus, the exact width may be differ from your own website]

It is important to know the exact width as this have important consequence later :). Let say you are going to fill the Base which have the width of 800 pixels.

1. Create a new image 800 x 20 pixels with transparent background.

2. Next, choose fill tools and click pattern. Check the picture for clearer instruction.

3. Usually, the new pattern that you have made will be there. I would like to show you the other options of Pattern tools. Usually I saved all my new patterns under the category of self pattern 1.

If you have created several patterns, it is a better technique to save all those patterns under a new category. By saving under one name, it will help you to transfer your own pattern in case you have to reformat your computer or if you have to reinstall Photoshop.

If you click Reset Patterns, Photoshop will replace the current pattern with the default pattern. Choosing Save Patterns allow you to save the new pattern under a new name. By clicking any categories of the pattern such as Artist Surfaces, Color Paper etc, you can replace the current pattern with a new category. In my case, I need to click Self Pattern 1 as this is the category for all the new pattern that I have made previously :).

4. Next, choose the new pattern that you have made.
5. Now, choose the Fill tools again and choose fill Pattern with the following options. Check the picture :).

[If you could not found the Fill tools ie Paint Bucket picture, right click on the small black triangle. Remember that there are hidden tools as indicated by the small black triangle ;)]

6. Now, the mouse will become a Paint Bucket. Click the empty area on the image and the new pattern will fill the entire image. The image now should look something like this...
7. Now, click File / Save for Web ...and just click save and rename the file :). The new picture will be saved in the format of gif. Saving a picture as .gif reduce the size (and the quality too) of the picture and enhance the speed of viewing your website.

[All the pictures of these two tutorials are in the form of gif. Hence you might notice the low quality but faster speed of viewing the pictures]

8. Now, you should have an image that has been filled with the new pattern. Next, you need to upload the new picture into any website that can hosts the picture. You can use Blogger since they provide the option to upload the picture. Please remember the url of the picture ;). The final image will be looking like this. Since the pattern is the same as my background, probably you cannot see the exact picture. Try to click somewhere below this sentence :D

9. Now, this is the tricky part where you need to know a bit about CSS :). Remember that what I have said about the width. By creating a picture with 800 pixels width, the picture now can fill the entire Base section. But the picture is only 20 pixels in height. So, how do you manage to fill the entire section with the same picture?

Please check your CSS of your website and find the location of the section that you want to fill with the pattern. In my case, I need to find '.base'.

Now, type this under .base...

background: url('yourpicturelocation') repeat-y;

The trick here is 'repeat-y'. By writing this, the picture will be repeated along the y-axis (vertical) and thus fill the entire section till the bottom of the website. If you write 'repeat-x', the picture will be repeated along the x-axis and you can fill horizontally.

An example is shown below

.base {
margin: auto;
background: url('http://photos1.blogger.com/blogger/1708/517/1600/wrapper.0.gif') repeat-y;
width: 800px;

10. Now, having done that, you need to make sure that all the other sections do not have the properties of background or colours in their CSS. If they have those properties, your pattern in .base may be hidden behind .main, .sidebar, .header etc. Let me know if this sound too confusing :)

11. Hopefully, you can manage to do the previous step :). If you have any problem, feel free to leave your question in the comment box.

Beside doing pattern for your website, the picture below shows few examples on how you could use pattern.

For more photoshop tutorials, you can either click the link under Photoshop reference on your right or click here.

Photoshop tutorial: Pattern 1

I have been designing my own blog for the past two years. The current template was created using Frontpage 2003 and Photoshop CS2. The background of this blog is filled with a pattern that I created using Photoshop. Having pattern as your background make your website more interesting and it is a better alternative than using only colours to fill the background.

In this post, I will try my best to explain the steps involved in creating and managing your own pattern in Photoshop :). This tutorial will be quite lengthy as it is my intention to wrote this tutorial for the beginners. If the picture are not clear, please click for larger picture ;).

The objective of this tutorial is to create the image as shown below.

This tutorial will explain how to use custom shape as a pattern and save the new pattern in Photoshop.

1. Create a new file with size 20 x 20 pixel and make it transparent.
2. Next, choose your forecolours. Check the picture below. Double click the black box.

   [Note that the black box represent your foreground colour and the white box represent the background colour. It may not be the same colour depending on the previous colours you used in the past]

3. A new dialog box will appear and ask you to choose the colour. Make sure you do not click the box 'Only Web Colors' and put in 9dc6ca as your foreground colour.

   [For the purpose of this tutorial, the pattern that will be created is based on this blog. Thus the colour chosen will be the same as mine :)]

   With the same technique, choose your background colour by clicking the white box instead of the black box. Put c5d1d0 as your background colour.
   
4. Next, you need to choose custom shape tool.

   [Custom shape tool give you the ability to choose various shapes that are available in the photoshop]

   Check the red arrow on the picture below. The picture shows the location of custom shape tool but at the moment it is hidden.

   [In the Tools, there are more options shown but most of them are hidden. Can you see the small black triangle at the bottom right of the square? The small black triangle indicate there are hidden tools. If you check the rest of the tools, there are a lot of those small black triangle. Give it a try to check what kind of tools are available :)]

   The square shown in the picture represent the rectangular tool. Right click at the square....
5. And, a dialog box will appear. Click custom shape tool as shown below.
6. Next, a new option will appear at the top of the window. Click as shown in the red box.

   [Everytime you click any tools, there will appear a new option on the top of the window. It is not exactly top though, the option will appear below standard toolbar {File Edit Image Layer etc}]

7. Next, click the small black down arrow as shown in right red box. Choose unconstrained.
8. Next, we need to choose the custom shape that we would like to use. First, click the black down arrow next to the black bird (The image may be differ from yours depending on the last shape you used). A new box will appear. Click the down arrow as shown in the picture below. Then, choose Ornaments.

   [This step shows how you can replace and choose any custom shape available in Photoshop. There are few categories available]
   

   A dialog box will appear and ask you whether you want to replace the current shape with ornament.csh.

   [If you click ok, the Ornament shape will replace the current shape and by clicking append, it will add ornament shape to the current one.]

   Click OK.
   
9. Next, choose this shape :)
10. Since the file is only 20 x 20 pixel, we need to zoom in before applying the ornament shape. So, find the navigator tools on your top left and click as shown by the red arrow. Click it until you reach 600%.

    [The navigator tool is an important tool. If you zoom out and want to move to another part of the image, the easiest way is to drag the red box in the navigator tool]

11. After zoom in the image, apply the shape. Drag your mouse from top-left corner of the image to the bottom right corner. Make sure the ornament fit the whole box. The image should look like this...
12. Next, we need to create a new layer. Go to the layer tool on bottom right corner and click the symbol as shown in the red box.

    [The symbol is a shortcut to create a new layer. Tips: if you drag layer 1 to that symbol, a duplicate layer will be created. If you drag any layer to the dustbin ie the symbol on the right, the layer will be deleted]

    
13. A new layer will be created. Layer 2.
14. Next, we need to change the foreground colour to the background colour. Go the foreground tool and click the arrow as shown in the picture. This will change your background colour into foreground. The foreground colour now should be lighter than the background.
    
15. Make sure you have clicked layer 2. Now, choose fill tool and choose fill foreground as shown in the picture.
The mouse now should change into a paint bucket. Click the mouse on the empty area of the image and the foreground colour should fill the entire image.

16. If everything is right, the workspace should look like this.
17. Now, we need to move layer 2. Drag layer 2 below layer 1 and now it should look like this.
The image should be looking something like this now...

The final step is to save this image as a new pattern. Click Edit / Define pattern / and put whatever name you like.

Next tutorial will explain on how to apply this pattern such that it can be put into as background of the blog :)