Tuesday, March 9, 2010

In this tutorial you'll learn how to add images to a background picture, mask images, and change colors of pictures. You'll also learn how to create a sidebar where you can put extra information regarding you or your business. The first step is to open Photoshop. Note: this tutorial can be done in most versions of Photoshop. After you open Photoshop, go to File, New. When the New window pops up, change the Name to Twitter Background, change the width to 2100 pixels, and the height should be 1600 pixels. Color Mode can be RGB. The resolution should be set to 72:
photoshop tutorial:

Hit OK when you are done. Remember, the most common browser sizes are 1024 x 768 (36%), or higher (57%). So we made our image 2100 pixels wide to accommodate all the browser sizes.
Next, thecanvas may be a bit large so we'll need to zoom out a bit. We do that by selecting the Zoom Tool:
zoom tools

On your keyboard click on Alt and click the Zoom Tool on the canvas. Zoom out to about 25%. The canvas should now look like this:
canvas

Now it will be easier to work in. Next, we'll open a picture. For this exercise I'm going to open a nice picture of butterflies and a blue sky. You can open any picture you like that you think would work well as a background picture. Go to File, Open. Next, find your background picture and select it. Your Photoshop work area should now have this picture along with the Twitter Background canvas:
photoshop tutorial

Select the Selection Tool:
photoshop tutorial

Now, click on the picture you opened and, without letting go of your mouse button, drag this picture over to the Twitter Background canvas:
photoshop tutorial

The picture may not be as large as the Twitter Background canvas, so we'll need to enlarge it. We do this by going to Edit, Transform, Scale (Ctrl + T):
photoshop tutorial

You should now see transform boxes around your image. Select a corner box:
photoshop tutorial

Next, hold down Shift on your keyboard and drag this corner box upward to enlarge the image (you hold down Shift to keep the proportions the same). Keep dragging the corner transform boxes until your picture fills the Twitter Background canvas:
Photoshop tutorial

Now we'll add our logo. If you want to use a sample logo, right-click on the image below and select Save Image as...
logo

Open this logo into our Photoshop program. Then, drag it over to the Twitter Background canvas. Position it so that it's flush with the top left of the canvas:
photoshop

This logo's dimensions are 220 pixels wide, and 481 pixels high. When you are creating a Twitter Background you want to target the area at the top left of the image. The target area is within 220 pixels from the left edge and within 500 pixels from the top. This is the area that will probably be seen even on the smallest of monitors. This is a good image to drop into your Photoshop file just to use as a guide for the area you need to target. You can turn the visibility off when you're not using it. The visibility button is the little eye icon to the left of the layers:
photoshop

The next thing we'll do is add another image to the right side of the Twitter background. This is the image that will show up on most monitors. What we would like to do is to place a photograph into a circle on the right side of the background picture. Let's do that now. Select the Elliptical Tool (it's a sub-selection of the Rectangular Marquee Tool):
photoshop

Before we create the circle we need to make a new layer. In the Layers panel click on the Create a new layer button:
photoshop

This will create a new layer that we'll place our circle in. With the Elliptical Tool still selected, hold down Shift (to constrain the proportions) and click-and-drag a circle on the right side of the image:
photoshop

Next, we'll fill this area with color. Go to Edit, Fill. In the Fill window change Use to Black:
photoshop

Hit OK when you are done. The circle should now be filled with black:
photoshop

You'll see the tiny outline (called dancing ants) around the shape. To get rid of that click on Ctrl + D. Next, we're going to use this shape as a mask for our picture. Next, open a picture that you would like to place inside this shape. For this exercise the picture we'll be placing into the shape is the image below:
photoshop

Open the above image (or your own) in Photoshop. Next, drag it over to the Twitter Background canvas (remember to use the Selection Tool when dragging), Place it directly over the black circle:
photoshop

Now we're going to mask the black circle to this picture. We do that by putting our cursor right over the line that separates both layers in the layers panel:
photoshop

Click on Alt and your cursor will change to a different icon:
photoshop

Click your mouse button and your picture should now be masked within the black shape:
photoshop

The picture will be indented, which means it's being masked. If your picture is smaller than the circle, you'll need to enlarge it. First, make sure you select the picture's layer:
photoshop

Next, go to Edit, Transform, and Scale. You'll see a transform box surrounding your picture:


Select a corner, hold down Shift (to constrain the proportions), and drag upward to enlarge the picture. Keep enlarging the picture until it fills the black shape:


Hit Enter when finished. Next, we'll add a little flair to the circle. We do that by double-clicking on the black layer's thumbnail:


This will open up the Layer Style window. Click on Drop Shadow. Change Opacity to 75%, Angle to 90, Distance to 12, Spread to 14, and Size should be 29:


Next, click on Stroke. Select the color red. Change size to 3; opacity should be set to 100 and position should be Outside:
photoshop

Finally, we'll add a Inner Shadow. A Inner Shadow simple creates a shadow across the image instead of behind the image. Click on Inner Shadow. Opacity should be 75%. Distance is 19, Choke is 0, and the size is 49:
photoshop

Hit OK when you are finished. The image should look much better now:


If we were to upload this image to Twitter it would look something like this:


You'll notice that on a wide-screen browser you can see the masked picture on the right. Let's see what this image looks like on a smaller browser window:
photoshop

So even on a small browser we can still see the sidebar. When you're creating background images it's sometimes a good idea to scatter images across the background picture. You don't want it to look too busy, but you also want to utilize all the space. It's a sort of balancing act. If you're interested in learning more Photoshop tutorials you can click here.

0 comments: