1. Create a New file in Photoshop that is 20 x 20 pixels wide, RGB.

2. Next, I used the fill tool and fill it with a dark background color.

3.Use the line tool and make a few lines and such. patterns can be tricky, when they repeat you might not get what you expect. You can also create a grid. Make sure the lines are not too contrasting, otherwise the background may look a little busy. This is an easy way to learn how it works with random lines.

4. Once you have finished your pattern, select Edit > Define Pattern

You will be asked to name your pattern.

5. Once you have defined your pattern, all you have to do is apply it to any background. I usually create a back ground for my webpage, however try it with a new file. Create a new file that is 200 x 200 px. For the background layer, make sure to define it as a layer. You can do this by double clicking on it and renaming it. After it is renamed, you need create a layer affect. Do this by selecting Layer > Layer Style > Pattern Overlay.

After selecting Pattern Overlay, you will be prompted to a layer dialog box. Choose the arrow by the pattern and then you will see your pattern in the selectable squares. Select it.

After doing this, your page will have a tile of the pattern you created. This works on any size layer or shape, like a rectangle. Experimenting with patterns is a lot of fun!

As you can see the tiles just repeats itself over an over. There is definitely a science.

Below are 2 few example of cool pattern from Kaliber10000

How has PhotoShop CS4 helped you? I would love to hear!

The intention is for you to use the CSS in the header of your document or in a linked Cascading Style Sheet (.css)

First lets start with an image as illustrated below:

I need to crop this image and I want to give it a caption directly on the photograph. For this particular instance I just need to show the front of the vehicle.

First I will start by creating a DIV contain for this:

<div><img src=”http://myserver/mycar.jpg”></div>

Above is a line of code that creates just a simple container. Next we need to create a class for the image for the CSS. You will actually use the class tag within the image tag to call to the CSS. The CSS class beloow will be added to your stylesheet.

.image {
border-width: 1px;
border-color: #ffffff;
border-style: solid;
width:225px;
height:70px;
background-position:50% 95%;
background-repeat:no-repeat;
}

In the CSS code above, I have created an image class with a 1 px border and and an area much small than the image. I have also told the background not to repeat itself.

Above you will see my cropped image with a title at the top in black. To make the image appear you HAVE to put in some kind of text for the image to show.This is what I used for the code:

<div class=”image” style=”background-image:url(http://myserver/mycar.jpg)”><div>Pontiac G6</div></div><br />

Notice that I had to use a little in-line CSS to make the image appear (background-image). This way, you do not have to put the background-image URL in your style sheet, in the case if you want to have several images cropped with a specific size using the .image tag as a reference. Also make sure to have the break behind the last DIV.

Now, how would I make the text in visible in a different position and in a different color? Start by creating a “title” class like we previously created the “image” class.

.title {
font-family: Arial, Gadget, sans-serif;
font-size: 14px;
font-weight: bold;
color:yellow;
position: relative;
top: 25px;
left: 30px;

}

Above you will see that I have positioned the text and have styled it to be a different font, color, and weight. By setting the position to Relative and adjusting the top and left, you can position your text to be anywhere within this DIV container.

Again, this is a case where we created a style with the CSS file so that we could create a “template” of sorts that we could reference again. The other method is to put all of the styling within a “style=” tag within the DIV.

Ever wanted to have an image within an image? Lets say you have a background image of something, yet you want a certain part of another picture to peek through it. You could easily cut part of the picture and paste, however masking gives you the benefit of moving around the image underneath, and re-aligning the “portal” that you are looking into.

First Step: Define the background image

Open an image that you want to use:

Second Step: Draw a portal. You can use just about any shape tool to do this and use a color that is easy to see against the background image. I will use the circle and select yellow as the color.

Third Step: Add another picture to the file. Choose another picture that you want to use. make sure it is larger than the portal, however smaller than the background. I recommend opening the image, resizing it to something smaller than the original background, then either copying the whole image onto the background or dragging it to the background image. You can easily re-size the image by pressing CTRL T and then while holding SHIFT, dragging the image. I would only recommend reducing. If you need enlarge it there may be pixelation.

Step 4: Applying the Clipping Mask. Open your Layers pallet. You should have 3 layers, one for the background image, 2 for the circle, and 3 for the overlaying image. Make sure that the top image is a layer above the shape, in our case the yellow circle. Right click on the top layer (the image) in the layers palette and select Create Clipping Mask.

Step 4: Save your file to whatever format you want, however make sure to keep a PhotoShop source file saved! If your image is not in the correct position, now worries, you can easily move either the masked image or the circle to your specifics. This is a lot easier than cutting and pasting. You can also adjust the size of your shape as well if it is too large or small.

Good luck masking!