Since I added the

LittleLines.com

website to my Featured Sites list, I’ve had a few of you ask for a lesson on creating a similar website navigation concept in Photoshop, so In this tutorial I’ll show you how to create a clean navigation layout based on the LittleLines site.

I’ve said it before and I’ll say it again… One of the best ways to learn and grow in Photoshop is to deconstruct and attempt to recreate designs that inspire you. So in that spirit, lets jump in and take a closer look at the LittleLines.com navigation to see what we can learn about how they initially created their lovely little nav bar.

Notice all the details in the expanded view below, the borders, gradients, sizes and colors. In instances like this, the zoom tool can be your best friend.

Lets jump right in and open a new Photoshop document. For illustration purposes I’ll make my document 540×200px at 72ppi, but obviously if you were creating a website concept you’d want to have a document size large enough to design the whole site rather than just the navigation.

For the moment, lets ignore the wooden background texture and set a solid color for the background of the navigation. Click on the Foreground swatch at the bottom of the Tools palette to open the Color Picker, then pick a complimentary color for the background. I chose a nice orange color #e07814.

Create a new layer by clicking on the Create New Layer icon at the bottom of the Layers palette. When the new layer appears double click on the layer’s name to rename it

Nav Background

. From now on when I tell you to Create a New Layer and give it a name, this is what you’ll do.

(*note: If the Layers palette isn’t visible, bring it up by choosing Window>Layers from the main menu.)

Now lets create a selection by pressing the M key to switch to the Rectangular Marquee tool. As we know from the closer look from Step 1, the navigation background measures 50px in height. I like to keep the Info palette visible so I can see the exact dimensions of my selections (Window>Info from the Main menu), this way as I click and drag my selection I can watch the sizing and always get the selection I’m after on the first try.

Once your selection is created, simply press Option-Delete (PC: Alt-Backspace) to fill the selection with your newly selected foreground color. With your selection filled with color, deselect by pressing Command-D (PC: Ctrl-D).

Achilles’ Love move

(*note: You can also use the Fixed Size option in the Marquee options bar at the top of Photoshop to create a perfectly sized selection, but I find that using the Info palette is quicker.)

Ask the Dust download


Now lets set the stage for our buttons. Create a new layer called

Button Background

, set your foreground color to #47361f, and create a selection above the

Nav Background

that’s 38px in height and sufficiently wide to accommodate the buttons you wish to create (*note: you can always narrow the area if it’s too wide to begin with). Fill the selection with the new foreground color by pressing Option-Delete (PC: Alt-Delete) and deselect by pressing Command-D (PC: Ctrl-D).

Annie Get Your Gun the movie

Now lets add a light gradient to the

Button Background

. Create a new layer called

White Gradient

and set your foreground color to white by either using the Color Picker as we’ve done before, or simply by pressing the D key to reset the foreground and background colors to black and white respectively and then by pressing the X key to switch white to the foreground.

Switch to the Gradient tool by pressing the G key, and choose the Foreground to transparent swatch from the Gradient picker in the Gradient options bar at the top of Photoshop.

Before we apply the gradient, lets create a Clipping Mask from the

White Gradient

layer to the

Button Background

layer by Control-Clicking (PC: Right-Clicking) on the

White Gradient

layer in the Layers palette and choosing Create Clipping Mask from the menu. This will make it so that only the pixels from the

White Gradient

layer that overlap the

Button Background

layer will be visible. You will know a clipping mask has been created because the layer will indented with a small arrow pointing to the layer it is clipped to.

• 
  Women film
  
  

(*note: An easy way to create a clipping mask between two layers is to hold down the Option (PC: Alt) key and then moving your cursor to the line between the two layers in the Layers palette, at which time the cursor will change to what looks like two overlapping circles. When the cursor changes, simply click your mouse to create the clipping mask.)

Shooting Dogs dvdrip

With the layers clipped together we can go ahead and add the gradient. To do this, simply click and drag downward with the Gradient tool from the top of the brown button background area to about 50% of the distance from the top to the bottom.

(*note: Holding down the Shift key while you click and drag your gradient will constrain it to a completely vertical line.)

• 
  Silver Bullet movie download
  
  

Obviously the effect of our newly created gradient is much too strong, so lets go over to the Layers palette and lower the

White Gradient

layer’s Fill to 20% and change it’s Blend Mode to Color Dodge.

Next, lets create the double border at the top of the brown buttons. Create a new layer called Double Border and set your foreground and background colors to #644239 and #866d53 respectively.

Cassandras Dream


Locate the Rectangular Marquee tool at the top of the Tools palette and Click and Hold your mouse on it to reveal it’s fly-out-menu. Choose the Single Row Marquee Tool from the list and click on the stage at the top of the brown button background to create a single pixel horizontal selection on the stage. Don’t worry if your placement isn’t perfect, you can always move the border up or down once we’re done creating it.

With your single pixel line selection made, press Option-Delete (PC: Alt-Backspace) to fill the selection with the foreground color we set in the last step. Press the Down Arrow key on your keyboard once to move the selection down one pixel, then fill the selection with your new background color by pressing Command-Delete (PC: Ctrl-Backspace). Now you can deselect by pressing Command-D (PC: Ctrl-D).

If your lines aren’t in the right place, switch to the Move tool by pressing the V key and then move it up or down with your mouse (or the arrow keys) until it’s covering the top two pixels of the brown button background. I’ve zoomed in below so you can see exactly how things should be shaping up.

• 
  Macbeth video
  
  

The last thing we need to do is add our

Double Border

layer to the clipping mask we’ve already created down to the

Button Background

layer, so just like we did before, Control-Click (PC: Right-Click) on the

Double Border

layer in the Layers palette and choose Create Clipping Mask from the menu.

The House of Fear download


With the background now complete, switch to the Type tool by pressing the T key and lets prepare the font and style. The LittleLines website uses the Lucida Grande font which is an Apple system font found native on the OSX operating system, but Windows users, don’t fret, just read on. We’ll setup our type by first making sure the Character Palette is visible (if it isn’t, choose Window>Character from the Main menu).

download 2 Fast 2 Furious movie

Windows Users

: The Lucida Grande font was Apple exclusive until the release of the Safari browser for PC in which Apple included both the Lucida Grande and Lucida Grande Bold fonts. Since this is an Apple font, I can’t give it away in my lesson download, but if you want this font, you can download and install the

Windows version of the Safari browser from the Apple’s website

and then navigate to the Program Files > Safari > Safari.resources folder where you’ll find both the standard and bold versions of the font. You can then drag those files to the Windows Font Manager in the Control panel to install them. (*note: You may have to restart Photoshop to refresh it’s font list.)

From the font drop-down menu at the top left of the Character palette find the Lucida Grande font and select it, if for some reason your computer doesn’t have Lucida Grande installed, you can use a similar sans-serif font like Verdana, Arial or Helvetica to achieve a very similar effect. Set the font weight to Bold, the size to 11pt, the color to #bcb19b and the anti-aliasing style at the bottom of the palette to Crisp.

Click onto the stage to start a new text instance and type out your links. When mocking up a site like this I use spaces to separate the links and in this case I used 9 spaces between each link item. When you’ve finished your text, click on the little Check Mark icon in the Text Tool options bar at the top of Photoshop (or simply hit the Enter key). You’ll notice that a new Text layer has been created for you in the Layers palette.

With the Text layer still selected in the Layers palette, hold down the Command (PC: Ctrl) key and click the Add New Layer icon at the bottom of the Layers palette. This will add a new layer below the current layer. Name this new layer

Button Current

.

Press the M key to switch to the Rectangular Marquee tool (*make sure you switch it back to the Rectangular Marquee tool from the flyout-menu if it’s still set to the Single Row Marquee tool that we used to create the horizontal lines) and create a rectangular selection from the upper left corner to the center between the first two buttons as shown below.

Press the D key to reset your foreground and background colors to black and white respectively, then simply fill the selection with white by pressing Command-Delete (PC: Ctrl-Backspace). You can no deselect by pressing Command-D (PC: Ctrl-D)

Young Adam movie download

Next we’ll use Layer Styles to add the gradient and outline to the

Button Current

layer, but first, click on your foreground color swatch in the Tools palette and change the color to #c8a282.

Open the Layer Styles dialog box by Control-Clicking (PC: Right-Clicking) on the

Button Current

layer in the Layers palette and choosing Blending Options from the menu. Then set the following Layer Styles, being careful to check each setting with the ones below. Notice that in the Gradient Overlay style options area, when you click on the Gradient Picker, the foreground to transparent swatch is using the foreground color you just set. This way we avoid having to create a custom gradient with that color.

(*note: If your gradient doesn’t seem to be positioned where you like it, you can simply click and drag it on the stage to the position you want.)

If you did everything right, your menu should now look like the one below.

The current button on the LittleLines site has black text on the current state, so lets switch to our Text layer, press the T key to activate the Type tool, select the text of the first button and change the color to black by changing the color of the selected text in the Character palette.

The final step in the button preparation is to add the black divider line between the remaining buttons. Click on the

Double Border

layer and then create a new layer above it called

Divider Lines

. Create a Clipping Mask for the the

Divider Lines

layer by Control-Clicking (PC: Right-Clicking) the new layer and choosing Create Clipping Mask from the menu. There should now be 3 layers clipped to the

Button Background

layer as shown below.

To create the black lines, lets press the D key to reset the foreground color to black, then from the Rectangular Marquee tool fly-out menu choose the Single Column Marquee tool which will make 1 pixel vertical selections.

The Compass ipod

From the original example we can see that the little black vertical dividers are only placed at the left border of each button, so click on the stage between the second two buttons to create a single pixel selection, nudge it left or right with your arrow keys if the placement isn’t perfect, then fill the selection with black by pressing Option-Delete (PC: Alt-Delete). Continue this process until you’ve divided your remaining buttons and don’t forget the one at the far right edge of the last button. Press Command-D (PC: Ctrl-D) to deselect when you’re done.

For those of you who wish to go the distance and add the wood texture to the background, I’ll explain that here as well (since I know I’ll get 50 emails about it if I don’t!).

Mr. & Mrs. Smith dvdrip

Karma, Confessions and Holi film

First, you’ll need to find a wood texture you’d like to use, I think the

defcon-x

site is one of the best places for these sorts of textures and they’ve got a wide variety of high-resolution wood textures to choose from. I’ll use

this texture

incase you want to follow along at home. Command-Click (PC: Right-Click) on the image and choose Copy Image, then return to your Photoshop document.

Click on the

Nav Background

layer to select it (It’s the one with the orange stripe on it), then simply press Command-V (PC: Ctrl-V) to paste the copied texture into the document. A new layer will automatically be created which I will rename

wood

sun Valley Serenade dvd

. The wood texture now fills the entire document, so lets clip it to the

Nav Background

layer by Control-Clicking (PC: Right-Clicking) on the new

wood

layer and choosing Create Clipping Mask from the menu just like we’ve done before.

(*note: If you feel like you’re not seeing enough of the wood grain because of the high resolution, you can always use the Free Transform tool to shrink the texture to a size the suits you.)

The final order of business will be to add a slight black to transparent Gradient Overlay layer style to the

Nav Background

The Dark Knight video

layer, so Control-Click (PC: Right-Click) on the

Nav Background

layer and choose Blending Options from the menu, then set the following Gradient Overlay Layer Style.

And that’s it folks, your navigation is complete. I hope you learned a little something along the way!

In this Photoshop tutorial I’ll show you how to create a watercolor text effect with a watercolor paper background. You’ll learn about a few of the the Brushes palette options and how they can help achieve a realistic watercolor result.

download The Puppet Masters dvd


watercolor is one of those mediums that can be difficult to replicate digitally, but with a little practice and experimentation I think you’ll find it can be rather fun. This tutorial will be based around creating a text effect, but this technique works just as well when creating paintings in Photoshop.

Lucky Numbers movie full

Lets begin with a new document, mine is 540×300 at 72ppi for those of you playing along at home. Since by default Photoshop locks the original

Background

layer in any new document, lets start by double clicking on the layer to bring up the New Layer dialog. Change the name in the dialog from Layer 0 to

Background

and click OK. This will effectively unlock the

Background

layer and make it a normal, workable layer.

The reason we had to unlock the

Background

layer is because we need to add a Layer Style to it, which isn’t possible if the layer is locked. This Background layer is going to be the watercolor paper which we’ll be painting on later in the tutorial.

To add the layer style, lets go ahead and double click to the right of the layer’s name in the layers palette to bring up the Layer Styles dialog window (you can also access this dialog by Command-Clicking (PC: Right-Clicking) on the layer and choosing Blending Options from the menu). Inside the Layer Styles dialog box choose the pattern Overlay option from the list on the left. Be sure to click on the words and not just the checkbox. Just clicking the checkbox will apply default pattern Overlay settings, but clicking on the text will open the pattern Overlay options section of the Layer Styles window.

Click on the pattern swatch to bring up the Pattern Picker. We want to load the Artists Surfaces pattern set, so click on the little circle with the arrow in the upper right hand corner of the Pattern Picker and choose Artists Surfaces from the drop down menu. The pattern we’ll be using here is “Wax Crayon on sketchpad (150×150 pixels, grayscale mode)”, if you place your mouse over each swatch, the tool tip will appear to tell you what the swatch is called.

Use an Opacity setting of around 10% and a Scale of 50% then click OK to apply the layer style.

Now lets place some text on the stage. Press the D key to reset the foreground color to black and then press T to invoke the Type tool. Click on the stage and create your lettering. Choose a large bold font so you’ll have the most room to paint within. Using the text tool creates a new layer above the previous layer.

For the moment we’re done with the text layer we just created so lets temporarily turn it off by clicking the little eye icon to the left of the layer thumbnail in the Layers palette.

No Reservations movie download

Next create a new layer by clicking the Create New Layer icon at the bottom of the layers palette. double click on the new layer’s name and rename it

Paint

.

Tyrannosaurus Azteca dvd

Super Capers film

It’s now time to prepare our paint brush to create the watercolor effect. Start by pressing the B key to invoke the Brush tool. From the Brush Options bar at the top of Photoshop choose a brush that you’d like to paint with. For this tutorial I’m going to use a 35 pixel round soft edged brush which I chose from the default brushes in the Brush picker. Set the brushes Blend mode to Multiply, the Opacity to 10-20% and the Flow to 50%.

We need to set some additional properties for our brush, so lets open the Brushes palette by choosing Window>Brushes from the main menu. In the Brush Tip area, set the Spacing to 1% (for this brush that seems to be the most cohesive setting, if you’ve chosen a different brush this may vary).

Choose Texture from the list and use the same settings and texture that we used to create our

Background

layer’s texture.

Choose Other Dynamics and set the Opacity Jitter to around 100%, again this one is brush dependant. Then check the Wet Edges option (this option has no additional settings). Now the brush is ready to use and you can close the Brushes palette if you’d like.

Since we really want to constrain the painting to the lettering we created on the text layer, lets load that layer as a selection by Command-Clicking (PC: Ctrl-Clicking) on the Text layer’s thumbnail in the layers palette. Notice that the Paint layer is still the selected working layer.

Pick a nice dark color for your foreground color in the Tools palette and begin painting. Notice that the paint is constrained to the selection and if you release your mouse and begin painting again it will add dimension to the watercolor by showing overlapping brush strokes.

(*note: If the “marching ants” around the selection bother you, simply press Command-H (PC: Ctrl-H) to hide them. The selection will still be active and you can bring it back by pressing the same keyboard shortcut again.)

Try switching colors and overlapping your brush strokes until you’re happy with the result. When you’re done, release the selection by pressing Command-D (PC: Ctrl-D) to deselect.

If you’ve ever looked at a watercolor painting up close, you’ve noticed that often the artist will have lightly sketched a basic line drawing directly onto the paper before they began to paint. This little line art makes for a neat effect and it’s the reason we’ve kept our original text layer. Lets click on that original text layer in the layers palette to make it our working layer and click on the little empty box where the eye icon used to be to turn the layer back on.

Harry Potter and the Sorcerer’s stone ipod

Obviously we don’t need the black color of the text, so lower the layer’s Fill opacity to 0%.

Silver Bullet movie download

Jeepers Creepers film

Now lets open the Layer Styles dialog box for this layer (just like we did in Step 2) and this time we’re just going to add a 1 pixel Stroke (outline) to the text as shown below. Once you’ve applied the stroke, click OK to commit the Layer Style.

Usually the artist won’t have painted exactly within their pencil lines, so press V to invoke the Move tool and then using the arrow keys on your keyboard (or by dragging with your mouse), move the outline just a touch so that it’s just offset from the painting. If you feel that the outline isn’t dark enough for your tastes, you can always go back and darken it by applying a darker gray in the Stroke layer style.

Vipers hd

• 
  download Tarzan Escapes
  
  

Otto; or, Up with Dead People psp

And there you have it, a nice little text effect using watercolors. Like I said in the beginning, this is one of those techniques that requires a little practice to get good at, and by experimenting with different brushes and varied settings, you can get some really great results.

When I got finished I decided that my colors needed a little more pop so I added a Hue/Saturation adjustment layer to the top of the stack. If you download the .PSD file at the end of the lesson you can see exactly how that works.

In this Photoshop tutorial I’ll show you how to create those great old time photo corners while exploring in depth the Bevel and Emboss filter with it’s Contour feature. We’ll also use various Layer Styles and Blend Modes for our final result.

(*note: This tutorial assumes that you have a basic working knowledge of how to use the Pen tool to create and bend paths.)

As always, when trying to create a digital version of something that already exists in the world, I like to have a piece of reference material. In this case it’s a photo I downloaded from

iStockPhoto

. If you’d like to get the same image to follow along (although I am including a small clipping of the image for this tutorial) you can enter the product id 4836864 in the iStock search field.

I’ve clipped down the image to just one of the photo corners because once we’ve created one, it’s simply a matter of duplicating and rotating it to create the others. We’ll also be creating our corner on a large scale so we can downsize it to fit any application in the future.

Lets get things started by creating a new layer by clicking the Create New Layer icon at the bottom of the Layers palette. I’m going to rename this layer

photo corner Bottom

by double clicking on the layer’s name in the Layers palette.

(*note: If your Layers palette isn’t visible choose Window>Layers from the main menu.)

We’re really only using this piece of reference material to get the basic shape of the photo corner, so lets trace it now by pressing the P key to invoke the Pen tool. Trace the entire outline of the photo corner until you have a completed path encompassing the whole thing. In the example below I’ve lowered the opacity of the original photo to make my path easier to see.

It’s always a good idea once you’ve created a path to switch over to the Paths tab in the Layers palette and rename the path. This also avoids loosing the path when a new “working path” is created.

Switch back to the Layers palette when you’re done.

Change the foreground and background colors in the Tools bar to #554e4b and #3a3430 respectively and press Option-Delete (PC: Alt-Backspace) to fill the entire layer with the foreground color.

Now lets add some variation to the color. Choose Filter>Noise>Add Noise from the main menu and use a setting of 8%, Gaussian and make sure the Monochromatic box is checked then click OK.

Now lets convert the path we created in Step 3 to a selection by pressing the P key to invoke the Pen tool again, then Control-Click (PC: Right Click) on the path and choose Make Selection. In some versions of Photoshop this will be followed by a Make Selection dialog box, choose a Feather Radius of 0, make sure the Anti-aliased checkbox is checked and that New Selection is selected then click OK.

Johnny Suede movie download

The Telling movie

Chocolat movie

• 
  Forced Vengeance divx
  
  

Cold Creek Manor dvdrip

Since we want to delete everything BUT what’s inside our current selection, lets go ahead and invert the selection by choosing Select>Inverse from the main menu (or you can use the keyboard shortcut Command-Shift-I (PC: Ctrl-Shift-I)).

Now simply press Delete (PC: Backspace) to remove the excess color and press Command-D (PC: Ctrl-D) to deselect.

• 
  Special Dead psp
  
  

Good Will Hunting download

At this point we’re done with our reference layer, so we can either delete it or simply click the little eye icon to the left of it’s layer thumbnail in the Layers palette to hide it.

Now it’s time to dig into the layer styles for this layer and really bring out some neat little details. Open the Layer Styles dialog box by Control-Clicking (PC: Right Clicking) on the layer and choosing Blending Options from the menu.

• 
  Are We There Yet? download
  
  

The first Layer Style we will be applying will be the Bevel and Emboss style, so choose Bevel and Emboss from the list on the left of the dialog box and apply the following settings. (*note: Click on the WORDS Bevel and Emboss to bring up it’s options. If you only check the checkbox it will apply a basic Bevel and Emboss without giving you all the options.)

The second part of the Bevel and Emboss technique will determine how the effect is applied and for this exercise it’s really the point of the whole thing. Click down to the Contour Layer Style (right below Bevel and Emboss) to display it’s options. The contour of the Bevel is how we’ll give the photo corner it’s center impression.

Click on the Contour thumbnail inside the Contour dialog and move/add points until your contour profile looks like mine below.

Doom hd



The Money Pit move



The final layer style we’re going to add is a little texture to the photo corner. Click on the pattern Overlay layer style option and use the following settings. I am using the Heavy Weave (128×128 pixel grayscale mode) texture found in the Artists Surfaces pattern set. You can access these by opening the pattern Picker by clicking on the pattern icon, then click on the little arrow in a circle located in the upper right corner of the Pattern Picker, choose the Artists Surfaces option and you can either load just this pattern set or you can append your current patterns and add this set to the end of the list.

When you’re done applying the Pattern Overlay go ahead and click OK to commit the Layer Styles and close the dialog box.

After applying the layer styles here’s what my photo corner looks like so far. Notice how the Contour that we built in the Layer Style creates a nicely embossed center area inside the photo corner.

Because of the way we had to create the center Contour we weren’t able to add any definition or contour to the edges of the photo corner. For this we’re going to use another layer but we need it have the same base shape as our current layer. To achieve this lets duplicate the current layer by pressing Command-J (PC: Ctrl-J) and lets name this new layer

Photo Corner Top.

Obviously we don’t want to use the same set of Layer Styles, so go ahead and Control-Click (PC: Right Click) on the Layer Styles icon to the left of the layers name in the layers palette and choose Clear Layer Style from the menu.

Lets start by lowering the layer’s Fill opacity in the Layers palette to 0%, this will make the color pixels of the layer invisible while still allowing the Layer Styles we’re about to add to show through, basically allowing us to add a new set of layer styles on top of the ones for the layer below.

Open the Layer Styles dialog like we did in Step 9 and add the following three styles.

Let me explain what we just did. With the Inner Glow set to black and Color Burn we were able to darken the edges all the way around the object. With the small Bevel and Emboss we added dimension to the edges of the object. And with the Satin effect set to black and Color Burn we added a nice little dark streak through the middle of the photo corner which gave the effect of it being a little older and faded in some spots.

Gandhi film

• 
  The Generals Daughter trailer
  
  

Here’s how the photo corner should look now.

At this point we’re pretty much done creating the photo corner. I’ll want to merge the two layers that make up the corner, but not before creating my other 3 corners. The reason for this is that if we merge the layers first and then duplicate and rotate them, all the highlights and shadows will be rotated as well and the realistic effect will be blown. So first I’m going to select both layers and press Command-G (PC: Ctrl-G) to group the layers together into a folder which I’ll then name Bottom Right.

Then it’s a simple matter of duplicating that group and rotating it to create the other corners. (I’ll include all 4 corner groups in the lesson download at the end of the tutorial). Notice in my example below how the highlights and shadows are all consistent.

At this point I’m ready to flatten each group and resize my corners to fit my photograph. Once I’ve merged the corners and resized them I’ll add the appropriate drop shadow to match the size and SHAZAM! We have a completed project.

Lovely by Surprise move

Johnny Suede full movie

In this Photoshop tutorial I’ll show you how to create Windows Vista icons using a few basic layers, creative layer styles and some web 2.0 gradients.

I’ve had a few requests for icons like this, so here you go folks!

Lets first take a look at a few Vista icons. The icon we’ll be working towards is the Error icon on the left, however by simply changing the color in the Layer Style you’ll be able to easily adapt this icon to many others and perhaps even come up with some on your own.

New Jersey Drive trailer

If I were actually going to be creating an icon for either Windows Vista or Mac OSX I’d be starting with a document size of 256×256 with a transparent background, so if you actually want to turn your file into a usable icon I’d suggest starting with that document size. Since this is just an illustration of technique, I’m going to use my standard 540×300 tutorial image size. I’ll also drag my example error icon down to the corner of the stage so I can refer to it as I work. Using reference is always recommended when you’re trying to mimic an object that already exists.

Transmorphers


Lets get started by creating a new layer by clicking on the Create New layer icon at the bottom of the layers palette. As always, I suggest you name your layers upon creating them and I’m going to call this one

Border

.

Press the M key to invoke the Marquee tool and choose the Elliptical Marquee tool from the fly-out menu in the tools bar (since we’ll be creating a circular icon).

Holding the Shift key to constrain our selection to a perfect circle, click and drag a nice size round selection. If you are creating an icon in the 256×256 file size, you’ll probably want to use up nearly all of that space with your circle so lets make our selection 240×240 pixels. If you want to be exact here you can either watch the Info palette (accessed by choosing Window>Info from the main menu) or you can use the Fixed Size style option that appears in the Options bar at the top of Photoshop when the Marquee tool is selected.

(*note: As a side note, you can switch between the Rectangular Marquee and the Elliptical Marquee tool once you’ve got the tool selected is by pressing Shift-M.)

Press the D key to set the foreground color to black and then fill the selection by pressing Option-Delete (PC: Alt-Backspace).

Now that we’ve got the selection filled, we want to shrink the selection and delete the middle leaving only the outer ring as the border for our icon. From the main menu choose Select>Modify>Contract which will bring up a dialog asking how many pixels you wish to contract the selection by, set the size to 10 pixels and click OK. Now just press Delete (PC: Backspace) to remove the black inside the newly reduced selection.

I know you’ll have the overwhelming urge to release your selection right now… but don’t do it!

Before releasing the selection lets create a new layer called

Middle

and with the new layer selected fill the selection with a different color, any color will be fine so pick something you like, maybe something that looks like split pea soup.

The Amityville Horror

Now it’s ok to press Command-D (PC: Ctrl-D) to release the selection.

Now we’re ready to start adding some layer styles. Click back to the

Border



Police Academy 6: City Under Siege


layer to make it the active working layer and by Control-Clicking (PC: Right-Clicking) on the layer choose Blending Options from the menu to bring up the Layer Styles window. Using layer styles we are going to create the nice reflective chrome effect for the border on our icon.

(*note: You can also bring up the Layer Styles window by simply double clicking to the right of the layers name in the Layers palette.)

Add the following 3 layer styles and click OK. Be careful to check each setting here.

This is where you should be so far. If you’re having a hard time following along with the layer styles dialogues feel free to jump to the end of the tutorial and download the .PSD lesson file so you can follow along as we go. By double clicking on the layer style icon in each of my layers you can bring the Layer Styles dialog box for that layer back up and see every setting for yourself.

Ok, now lets click up to the

Middle

layer in the layers palette and give it a few Layer Styles of it’s own. Just like you did back in Step 6, open the Layer Styles window for this layer and apply the following styles.

Notice in the Gradient Overlay area we choose some nice red tones that completely mask the lovely split pea soup green we had going on before (this is why I said color doesn’t matter). Because the only area in these icons that holds actual “color” is the center, if you ever want to switch the color of your icon, all you need to do is change the values inside this particular layer style.

Now the icon is starting to take on the look we’re going for. Here’s what mine looks like to this point.

Shiloh 2: Shiloh Season movie

It’s time to add the little X to our error icon. For this you can either find a font that works or you can draw it by hand. The X that microsoft uses is an equal sided one with slightly rounded corners. Since all sides are equal and look more like a plus sign than an actual X I typed a plus sign (+) onto the stage and scrolled through my fonts list until I found one that looked right. In this case the font that worked best for me is called Army and it’s available in the lesson download at the end of the tutorial or you can download it for from at DaFont.com by clicking

HERE

. I’m using Army Regular with a size of 300 pt.

(*note: If you’re using Mac OSX and try to install this font, your Font Book program may try and tell you there are problems with the font, but it’s actually fine as far as I can tell.)

The Prince and Me 2 film

Obviously we need to rotate the plus sign 45° so it looks like an X so lets do that next. Press Command-T (PC: Ctrl-T) to invoke the Free Transform tool, hold the Shift key to constrain the rotation and rotate the selection by holding your mouse over one of the corners until the pointer turns into a little arc with arrows on each end and then clicking and dragging the selection until it’s in the X position. hit Enter (PC: Return) to commit the transformation when you’re done and center it using the Move tool (keyboard shortcut V) or by using the arrow keys on your keyboard.

Before we go any further we’re going to need an additional copy of this X layer so press Command-J (PC: Ctrl-J) to duplicate the layer. I’m going to call these two layers

X Top

and

X Bottom



On the waterfront ipod


respectively.

We’re going to work on the

X Bottom

layer first, so lets click on it in the Layers palette to select it and lets also click the little eye icon next to the

X Top

layer to temporarily hide that layer.

The

X Bottom

layer is going to be our 3D edge and shadow, so lets add a 1 pixel white Stroke to make this X just a touch bigger than the one above it and a Drop shadow. Pull up the Layer Styles window for this layer and add the following two styles.

Now lets go to work on the

X Top

layer by clicking on it in the Layers palette and making it visible again by clicking in the empty box to the left of the layer thumbnail in the Layers palette (where the eye icon was before we turned it off).

Are We There Yet? hd

This layer needs the same sort of metallic feel that we gave to the

Border

layer so lets give it a Layer Styles of it’s own. This one will be easy, just a simple Gradient Overlay

The last step to get the X to look just right is to switch to the Move tool by pressing the V key and then simply press the Left Arrow key on your keyboard one time to shift the

X Top

layer 1 pixel the the left. This will expose a wedge of our

X Bottom

layer underneath creating a nice little 3D edge effect.

The final step in the process will be to add a Web 2.0 style gradient to the icon. In Microsoft’s error icon’s case however the “gradient” isn’t officially a gradient since the effect isn’t heavier at the top than at the bottom, which makes our job here even easier.

Create a new layer called

highlight

above the

X Top

layer. With the new Highlight layer selected as the working layer hold down the Command (PC: Ctrl) key and click on the layer icon next to the

Middle

layer to load it as a selection. This will create a nice round selection exactly over the middle area of our icon.

Press the D key to reset the foreground and background colors to black and white, then fill the selection with white by pressing Command-Delete (PC: Ctrl-Delete).

Obviously we can’t have the middle of our icon covered with a solid white blob so lets drop the Highlight layer’s Fill opacity down to about 10%. The effect will now just look like it’s dulled our colors a little bit, but hang on to your hats, we’ve got one more step to go!

The MatchMaker

Last but not least, lets hit the M key to switch back to the Marquee tool. The Elliptical Marquee tool should still be active since it’s what we chose the last time we used the Marquee tool.

Drag out a nice big round selection and position it over the icon as shown below. Press Delete (PC: Backspace) to remove the highlight within the selection area and press Command-D (PC: Ctrl-D) to release the selection. And there’s your Web 2.0 style highlight!

Here’s what my icon looks like after Step 18. See, you can do this! Those guys at Microsoft aren’t really that smart after all.

Throw your sexy new icon into a clever little Vista error window and you’ve got a great little effect.

Yes Yes, I did actually include the .PSD for my final image in the tutorial download as well as the Army font and the main tutorial file. Enjoy!

In this Photoshop tutorial I’ll show you how to create a cool old photo transfer edge effect using a piece of stock photography, an alpha channel and the burn and dodge tools.

Welcome back my naughty little monkeys! I was up most of the night with this nasty flu that’s been going around, it’s not even noon and already I’m on my third can of Dragon, so if my writing’s a little off kilter, you’ll understand why. Did I just use the word kilter?

Night Passage movie full

Lets get this party started with a visit to

iStockPhoto

where I found a cool looking stock image of an old medium format film border. There are tons of these available for free as well if you’re willing to put in the time to search. Incase you want to replicate this exact effect you can enter the product id (1249016) into the

iStockPhoto

search field. The nature of my contract with

iStockPhoto

doesn’t allow me to give away the original but if you know where to look, I may have “accidentally” left the associated alpha channel in the download at the end of the lesson.

Here’s the image I got from

iStockPhoto

. Did I mention I got it at

iStockPhoto

?

Since I ultimately want to use this image as a mask, lets go ahead and invert the tones by choosing Image>Adjustment>Invert from the main menu, or by simply pressing Command-I (PC: Ctrl-I).

What I really want from this image is a true black to transparent mask, but what we’re currently working with is a black and white composite. It’ll take a few steps to do it, but trust me, the result will be worth it. Follow along closely, most of this will be keyboard shortcuts that won’t have any visual reference. Don’t worry, I’ll explain it as we go.

Press Command-A (PC: Ctrl-A) to Select All, then press Command-X (PC: Ctrl-X) to cut the entire image onto the clipboard (Yes, everything will disappear and you’ll be left with a white canvas… it’s ok, that’s what’s supposed to happen).

Now click over to the channels tab in the Layers palette (*note: If your layers palette isn’t open choose Window>Layers from the main menu). Click the Create New Channel icon at the bottom of the Channels palette to add a new alpha channel to the bottom of the list of channels. Click on the new channel to select it and press Command-V (PC: Ctrl-V) to paste the image we cut from the stage into the channel.

The advantage of having the black and white image in an alpha channel is that it allows us to load the highlights as a selection where a standard layer will not. Lets do that now by holding down the Command (PC: Ctrl) key and clicking on the layer thumbnail of our new alpha channel. Although the selection looks rather random and doesn’t seem to encompass all the white areas of the image, it actually does.

With our selection made, lets click up on the RGB channel at the top of the Channels palette to make it active (*note: this will hide the channel we were just working on and make only the selection visible.

Click back to the Layers tab and add a new layer by clicking the Add New layer icon at the bottom of the layers palette then double click on the layer’s name to rename it

Frame

.

Since our alpha channel allowed us to select only the highlights but what we really want are the shadows, lets go ahead and invert the selection by choosing Select>Inverse from the main menu or by using the keyboard shortcut Command-Shift-I (PC: Ctrl-Shift-I).

Press the D key to reset your foreground color to black and then fill the selection by pressing Option-Delete (PC: Alt-Backspace). We’re now done with the selection, so you can press Command-D (PC: Ctrl-D) to deselect.

Mobsters psp


HERO! You might be saying, this looks just like the image we started with! … and of course that would be true, but things aren’t always as they seem. If I change my background color to red (you don’t need to do this, I’m just illustrating my point). You can see that the black has indeed been separated from the white background and is now isolated for use.

Ok, we’ve done all the preparation, now lets get to work on the rest of the effect.

Grab the Polygonal Lasso tool from the Lasso tool fly out menu and clicking from point to point create a nice square selection inside the photo area. This selection doesn’t have to be exact or even, in fact, the less perfect the better. When you get back to your starting point the selection will close itself.

• 
  Million Dollar Baby movie
  
  

Now that the selection is made, lets soften the edges just a touch by choosing Select>Modify>Feather from the main menu (*note: In some older versions of PS the path to the Feather option is Select>Feather.) This is a low resolution example, so I’m going to use a small 2pixel Feather, but if you’re working at a larger resolution you’ll want to adjust accordingly.

Now lets duplicate the selected portion of the layer by pressing Command-J (PC: Ctrl-J). This will put the selection onto it’s own layer above the original. Lets call this layer

Photo Holder

. In order to see what we’re working with lets also turn off the

Frame

layer by clicking the eye icon to the right of the layer thumbnail in the Layers palette.

The edges of this layer are far too hard for this effect to be convincing, so lets press the E key to invoke the Eraser tool, and then by choosing different brushes from the brush picker we’ll delete small areas around the edge of the photo area. I used a variety of grunge edge brushes to distress my edges and I’m including those Photoshop Brush sets in the download at the end of the lesson. Yes, you’re right, that is very cool of me!

Attack of the 50 Foot Woman movie

Here’s my

Photo Holder

layer after all the distressing. Remember that you can rotate the brush tips in the Brushes palette like I taught you in the

Rotating Brushes

tutorial to make the brushes work for every edge.

Lets take a break from this file for a moment and open the photo we will use for the effect. Mrs. Hero took this shot of me on a motorcycle trip to Telluride, Colorado last year. Yes, I look cool, I know.

• 
  Chasing the Green movie download
  
  

For this effect I wanted to use a grayscale image (though you don’t have to). Because this tutorial isn’t about black and white conversion I just chose Image>AdjustmentS>Desaturate from the main menu to make it easy. If you want to get into black and white conversion in detail, I’d suggest picking up Scott Kelby’s

Photoshop Channels Book

and reading Chapter 4 in particular which covers using Calculations for B&W conversion (though the whole book is fantastic).

With your photo open, press Command-A (PC: Ctrl-A) to Select All, then Command-C (PC: Ctrl-C) to copy the photo to the clipboard. You can now close your photo if you want by pressing Command-W (PC: Ctrl-W). How’s that for a bunch of keyboard shortcuts mashed into a few lines?

Now that we’ve got the photo copied to the clipboard (no, there’s no actual clipboard, it’s just an expression to let us know that the photo is copied into Photoshops virtual memory), lets return to our working file and more specifically to the

Photo Holder

layer which should still be selected as the active layer in the Layers palette. And just like we did when we were in the Channels palette, lets go ahead and Command-Click (PC: Ctrl-Click) on the

Photo Holder

layer icon to load it as a selection.

From the main menu (and this is the cool part) choose Edit>Paste Into. This will take the image we just copied to the “clipboard” and paste it into the selection, creating a new layer and using the selection as a layer mask! How awesome is that?

Happy Birthday to Me divx

Ok, lets turn on the Frame layer again by clicking in the empty box to the left of the layer thumbnail (the eye icon will reappear long with the layer’s contents). Now technically we don’t need the Photo Holder layer anymore, but I’m going to leave it incase I want to modify it later. I’m also going to name the new layer with the photo on it

Photo

.

With the photo thumbnail selected on the

Photo

layer I now used the Dodge and Burn tools (found in the Tools bar / keyboard shortcut O) and using a soft edged medium sized round brush with the Range set to Highlights and the Exposure set to around 20% I’m going to darken around the edges and corners (Burn tool) and lighten around the subject (Dodge tool). This effect mimics the old darkroom techniques of dodging and burning an image to get this style of look. Perhaps the subject of a future tutorial, but I won’t be going into any further detail about the technique in this tutorial.

(*note: Dodging and Burning aren’t necessary steps here, and I’ll use a layer style in the next step to mimic the edge burning anyway.)

Doctor Strange trailer


If you don’t feel comfortable using the Burn and Dodge tools too much yet, that’s ok, lets use a layer style to mimic the edge burn effect by double clicking to the right of the layer name in the Layers palette, or by Control-Clicking (PC: Right Click) on the layer and choosing Blending Options to bring up the Layer Styles dialog. Choose Inner Glow from the list on the left (Click on the text, not the checkbox) and add the following settings.

The Land Before Time II: The Great Valley Adventure movies

Here’s what my image looks like so far.

Dark water


I want the photo to look a little more aged so I’m going to use a fantastic brush (which is included in the download at the end of the lesson) called Scratch Heavy to do a little more distressing.

Create a new layer called

Scratches

, switch to the Brush tool by pressing the B key, load and select the Scratch Heavy brush and press the D key to reset the foreground color to black. I used the bracket keys [ and ] to size my brush to it was just a little larger than my image, then clicked once on the canvas.

Obviously we don’t want the scratches to extend beyond the borders of the photo, so Control-Click (PC: Right-Click) on the

Scratches

layer and choose Create Clipping Mask from the menu. This will clip the

Scratches

layer to the

Photo

layer and the clipping will be indicated by an indentation of the Scratches layer and a small arrow between the two layers. The scratches are a little harsh though, so lets lower the Fill opacity of the

Scratches



The Kingdom movie download

The last thing I want to do is add a little sepia tone to the image just to make it feel a little older. Click on the Create New Fill or Adjustment layer icon at the bottom of the layers palette, choose Photo Filter and choose Sepia from the Filter drop down menu, leave the other settings alone and click OK. Now just Create a Clipping Mask with this layer as well just like we did in Step 18 and you’re done!

And that’s it folks, a cool aged photo effect with a nifty edge detail. I hope you learned a little something along the way. I’m off to take a nap.

The shadow movie full

In this Photoshop tutorial we will be creating a Levi’s style copper rivet while learning a little bit about creating compound bevel Layer Styles. I’m sure there are probably some cool digital scrapbooking ideas this can be used with, or perhaps a website concept with a denim theme.

I’m using the denim background we created in the

Frayed Denim Patch With Stitches

tutorial to give the project a little context.

Lets dive right in and create a new layer which I’ll rename

Main

by double clicking on the layer name in the Layers palette. (*note: If your layers palette isn’t visible simply choose Window>Layers from the main menu.)

Choose the Elliptical Marquee tool from the Tools bar and while holding the Shift key to constrain the selection to a perfect circle, click and drag a nice large selection onto the stage. For this tutorial we will be creating the object on a large scale with the intention to scale it down for practical usage. This will allow us to see all the details as we work. If you’re curious… and I know you are, my circle is 260×260 pixels.

Disappearances trailer

In the tools palette change the foreground and background colors to #caa78b and #846145 respectively and then press Option-Delete (PC: Alt-Backspace) to fill the circular selection with the lighter foreground color.

Knights of the Round Table rip

With the selection still active choose Filter>Noise>Add Noise from the main menu and use the settings as 9%, Gaussian and Monochromatic. The Noise filter gives us our beginning copper tone variations and uses both the foreground and background color swatches to create it’s effect, which is why it was important to set them correctly in Step 2.

Because our circular selection is still active, lets go ahead and cut a nice hole from the center using the current selection as our starting point. Choose Select>Transform Selection from the main menu to bring up the transform controls around the selection. While holding the Option and Shift (PC: Alt and Shift) keys to constrain the circle and transform towards the center, grab one of the corner points and drag it towards the center. This will be the space we’ll cut out in the center of the rivet.

Once the selection is reduced to your liking click Return (PC: Enter) to commit the transformation, then press Delete (PC: Backspace) to remove the area inside the circle. Press Command-D (PC:Ctrl-D) to deselect.

Now we’re going to add a series of Layer styles to the Main layer to create depth, contrast and better tone. Be sure to go through each setting carefully. I’ll explain anything that’s not obvious in the next few steps. Go ahead and double click to the right of the layer name in the Layers palette to bring up the Layer Styles dialog box. (*note: You can also access the layer style dialog box through the main menu by choosing Layer>Layer Style>Blending Options or by clicking on any of the distinct layer styles in the menu that follows.)

We will first add a nice little Drop Shadow followed by an Inner Glow. Notice in the Inner Glow settings however that I’ve changed the color to black and the blend mode to Linear Burn. This allows us to darken the entire inside edge quite effectively.

When you finish with these two Layer Styles, move on to the next step without closing the Layer Styles dialog.

Next we’ll add some depth with the bevel and Emboss layer style as shown below. Things get tricky when we get to the second part of this step… Click on the Contour option below bevel and Emboss. Here we will be dictating exactly what sort of edge contour the Bevel will be adhering to.

Click on the Contour preview window (which is probably set to a straight 45° line) and by clicking and dragging points along the line modify it to resemble the one shown in the second image below. (*note: If there’s ever a point you want to remove from the curve, simply click and drag it out of the editing window to make it disappear.)

Flushed Away psp

Lastly lets add some Satin to add a nice darkened ring to the interior of the rivet. When you’re finished here, go ahead and click OK to commit the layer style and return to the document.

If you followed the directions carefully your image should now resemble the one you see below. If not, go back to Step 6 give ‘er another try.

Aliens movie

The Onion Movie

Lethal Weapon 4 dvdrip

Next lets create the middle of the rivet, the round little ball that sits in the center. Create a new layer called

Center

and with the Elliptical Marquee tool create a circular selection right in the center of the existing doughnut (mine is 73×73px). Fill it with foreground color and add noise just like we did in Steps 2 and 3 then press Command-D (PC: Ctrl-D) to deselect.

Now lets add a whole bunch of Layer Styles just like we did before (except these are a little different so pay attention). We won’t use a Drop Shadow this time, but an Inner Shadow instead, and a few of the other styles have been modified as well including the Contour for the Bevel and Emboss so pay close attention because I’m going to throw them all at you at once this time!

Here’s what you should have so far.

Churchill: The Hollywood Years

Dogville movie download

Sharpshooter move

In the layers palette click down to the

Background

layer and add a new layer above it called

Hole

. Normally I’d get into more tonal detail in this area, but because these rivets are going to end up so tiny when we shrink them to actual size, lets just create a circular selection with the Elliptical Marquee tool and fill it with black. Press the D key to reset the foreground color to black, make your selection and then fill it by pressing Option-Delete (PC: Alt-Backspace).

Press Command-D (PC: Ctrl-D) to deselect when you’re done.

Click on the

Center

layer and add a new layer above it called

Text

(which will now be our top layer).

Switch to the Custom Shapes tool in the tools palette and choose the Ellipse tool from the fly out menu (or from the options menu that appears at the top of Photoshop when you select the Custom Shape tool). Make sure that the icon for Paths is selected because now we’re going to place a circular path for our type to follow.

click and drag a path onto the stage in roughly the same size as the one I’ve made below, remember to hold the Shift key to constrain the circle. If you need to move the path once you’ve drawn it out to size, simply hold down the Command (PC: Ctrl) key to change the cursor temporarily to the Path Selection tool (a black arrow) with which you can grab and drag your new path to a spot that looks right.

• 
  Under Siege 2: Dark Territory
  
  

With the path laid out it’s time to switch to the text tool by pressing the T key. I’m using the font Arial Rounded MT which is basically a bold Arial font with the corners rounded off but any nice bold font of your choosing will be fine. If your Character palette isn’t visible, you can open it by clicking Window>Character from the main menu. The important part here however is to click over to the Paragraph tab and choose the Centered Text option.

The Fox and the Hound dvdrip

When you hold the text tool over the top center anchor point of the path we created in step 15 you will notice that the standard Text cursor changes to the Type On Path cursor (basically adding a little wavy line at the bottom of the cursor icon), this is how you know that the text tool recognizes that you wish to type on the path. Go ahead and click and type your text.

When your text is complete, use the Font Size and Font Tracking features to adjust the text to your liking.

Lower the Fill opacity of the Text layer in the layers palette to 0% (which will momentarily make the text invisible), then add the following two layer styles to give the text some depth and texture.

Your final rivet should look like this. Lets move on to the final image now and put the rivet in context.

download Lake Placid movie

I selected all 4 layers containing the rivet components and pressed Command-E (PC: Ctrl-E) to merge them together, then invoking the Free Transform command by pressing Command-T (PC: Ctrl-T) I sized the rivet to my liking. Add a little color shift, some basic stitching and SHAZAM! the final result!

In this Photoshop tutorial we will explore the wonderful world of repeating patterns while creating one from scratch using a Photoshop custom shape.

Spy Hard release

Those of you who’ve been here before have probably noticed my affinity for elaborate and decorative backgrounds in my projects and I’ve received quite a few requests for a tutorial on the subject… so without further adu, here you go my naughty little monkeys!

Fahrenheit 9/11 hd


The first step in creating a good repeating background is an organized working document, so lets set one up now. Start by creating a new document with a white background.

Not all repeating backgrounds are the square variety, in fact some of my most elaborate are rectangle, but to start lets stick with symmetry. Create a new layer by clicking the Create A New Layer icon at the bottom of the layers palette and then grab the Rectangular Marquee tool by pressing the M key and drag out a nice sized selection on the stage. It doesn’t have to be centered or anything, this will just help us define our work area.

Press the D key to set the foreground color to black (or pick any color you like, it’s not important at this juncture just as long as it stands out from the background but you know how I feel about purple). Then fill the selection with color by pressing Option-Delete (PC: Alt-Backspace).

If your Rulers aren’t visible at this time, press Command-R (PC: Ctrl-R) to bring them up. Now lets click and drag guides from the rulers onto the stage. We want a guide for each edge of our selection, and by default the guides will snap into place nicely when they get close to the edge of the selection.

While we’re setting guides and still have the selection active lets also drag them into the center of the selection where they should snap into place as well.

(*note) If your guides aren’t snapping into place, choose View from the main menu and select Snap. You can also use the Snap To item in the same menu to designate what will snap.)

Our colored square has served it’s purpose, so lets delete it by pressing Delete (PC: Backspace) and then deselect by pressing Command-D (PC: Ctrl-D). The layout is now complete and we can move on to build the pattern. We’re also done with the rulers, so if they’re bugging you press Command-R (PC: Ctrl-R) to hide them.

Robot Chicken: Star Wars hd

I’m going to change the color of my guides at this point to make them less distracting. You can do this by choosing Photoshop from the main menu, clicking Preferences and then choosing Guides, Grid, Slices and Count.

Press the U key to call the custom shape tool. Make sure that Fill Pixels and custom shape are chosen from the custom shape options bar and then choose a shape from the drop down menu. The shape I chose is a sort of victorian swirl from a collection of custom shapes I have laying around for a situation just like this… and yes, of course I’ve included it in the download at the end of the lesson in .csh form so you can load it right into your custom shapes palette and follow along if you’re so inclined.

Press the D key to insure that your foreground color is black and then click and drag on the stage to lay down the custom shape. Holding the Shift key while you drag will constrain the proportions and keep things nice and tidy. I’m also being careful to keep my shape within the bounds of one of the four boxes we created with our guides earlier. This will ensure that we can replicate the pattern within the space correctly.

Jennifer movie download

It’s time to position this little guy for replication, so I’m going to drag it to the left edge of the big square of guides and down until its center snaps to the horizontal center guide. Wow, that sounded confusing. Check out the graphic below if that went over your head.

Now lets duplicate the layer and setup the right side of our pattern. Press Command-J (PC: Ctrl-J) to duplicate the layer, then drag the shape to the right edge of the guided box. Holding the Shift key while you drag will keep the movement on a perfectly horizontal plane.

Erin Brockovich dvdrip

Peter Pan move

Because my shape is semi symmetrical and I want the centers of the design to look pretty, I’m dragging my shape to the other side, but not flipping it horizontally or vertically. If we used a shape that wasn’t symmetrical this may be necessary and could be done using the Edit>Transform>Flip Vertical (or Horizontal) options in the main menu.

Ok, now we need to create our top and bottom portions of the pattern. For this I’m going to hold down the Command (PC: Ctrl) key and click down to the first layer we created, effectively selecting both layers at the same time.

Command-Click (PC: Ctrl-Click) on one of the two selected layers and choose Duplicate Layers. (*note: Because we’ve got more than one layer selected, the standard Command-J (PC: Ctrl-J) keyboard shortcut won’t work.)

The Portal dvdrip


Click OK when the dialog comes up asking you to name the layers (although you should name them once they’re where we want them). You will notice that now we have two new layers created above our originals and they are by default both selected. While they’re both selected choose Edit>Transform>Rotate 90° CCW from the main menu.

• 
  download CJ7 dvd
  
  

We’re now finished with our guides, so you can press Command-H (PC: Ctrl-H) to hide them because the tricky part is coming up and we don’t want anything obstructing our view.

download Wonder Woman movie

Press the M key to call up the Rectangular Marquee tool and drag a selection around the approximate middle of our new pattern, don’t worry if it’s not exact because we’ll modify it in the next step. As always, the holding down the Shift key will constrain the selection.

I’d suggest zooming in on the pattern until it’s as large as you can get it while still being able to view the whole thing. At this point every pixel matters and if we don’t make this selection perfectly the pattern will end up matching up poorly and then you’ll just feel silly.

Choose Select>Transform Selection from the main menu. This will give you the same transformation controls that you’ve used before using Free Transform, but this time all we’re transforming is that nice square selection. Our goal is to bring the sides in until we can see that they will line up perfectly with the opposite side when the pattern is tiled. I find it’s best to find a common bold feature on one side and place the selection at its edge, then drag the opposite edge to the corresponding spot.

Once your selection is perfect press the Return (PC: Enter) key to commit the transformation to the selection.

Since we want this pattern to work perfectly on any background, we need to get rid of the white background layer. You can either delete the layer, or just click on the little eye icon next to the layer in the layers palette to turn its visibility off, either is fine. With the background gone you’ll see the classic Photoshop checkerboard pattern in the background telling you that all that space is going to be transparent in our final pattern.

From the main menu choose Image>Crop and then press Command-D (PC: Ctrl-D) to deselect.

And our final step in the creation of the pattern is to choose Edit>Define Pattern from the main menu. Give your pattern a name and click OK. At this juncture the pattern has been stored in Photoshop and technically we don’t need this file anymore, but I usually keep it open until I’ve tested the pattern. Lets do that next.

Open a new document with a white background big enough that you will be able to see multiple tiles of the pattern. Create a new layer and choose Edit>Fill from the main menu. When the Fill dialog pops up choose Pattern from the drop down menu in the Contents area and then choose your new pattern from the Pattern Picker (it should be the very last one). Click OK and the stage will be filled with your pattern.

If everything looks right, your pattern is ready to use, if not you should probably take a break, get something delicious to eat, then come back and try to figure out where you went wrong. As luck would have it, mine turned out perfectly.

Ok, how bout some real world use for our new pattern? I’m not sure why I’m asking you… since I’m going to go ahead and do it anyway, but whatever.

Open a new document and lets put down a pretty radial gradient in the background. Set the foreground and background colors to #207e9e and #09526c respectively. Press the G key to invoke the Gradient tool and choose Foreground to Background and radial gradient from the gradient options bar at the top.

click and drag to create a nice gradual radial gradient on the stage.

Trois 3: The Escort download

• 
  Just My Luck movie
  
  

Shred dvdrip

Blood Diamond film

Ok, lets explore another (and much better) way to use a pattern. Yes, I’m talking about adding a layer style, so go ahead and double click next to the name of your layer in the Layers palette to bring up the Layer Styles dialog. (*note: You can also Control-Click (PC: Right-Click) on the layer and choose Blending Options from the menu to access this dialog).

(*note: If you double click on the Background layer (which is by default locked), you will get the New Layer dialog box pop up. Don’t worry, give it a name and click OK, then double click again to pull up the Layer Styles dialog.)

Click the option on the left hand side called Pattern Overlay (click on the words, not the check box, otherwise you won’t be shown the Pattern Overlay options window).

The Outsiders divx




The Time Shifters divx

Choose the new pattern by clicking on the Pattern picker (again, it’ll be the last one at the bottom). This is where using the Pattern Overlay feature outshines simply using the Fill dialog because we can now change the blend mode for our pattern as well as change it’s opacity and scale. I’m going to switch the blend mode to Color Burn (because it will interact with the gradient better), lower the opacity to 25% and change the Scale to 50%.

Hopefully you’ve come up with something you can use, if not, you can always try, try again. Patterns are an extremely useful and often overlooked design element but when used properly they’ll bring you fame and fortune… well maybe not fame, but fortune for sure. That’s ok though because fame is overrated anyway.

In this Photoshop tutorial I’ll show you how to create a Custom Brush using a folded piece of paper and then how to use that brush to create an old piece of paper.

To begin this tutorial I took a plain white piece of paper, folded it in fours and left it in my pocket for a few hours. Next I scanned the paper using the Grayscale setting on my scanner. Because the both the paper and the scanner back are white, I placed a dark colored magazine behind the paper giving the cool result of a little text showing through onto my scan as you can see below.

I’ve imported the scan into Photoshop directly from the scanner by using the File>Import dialog from the main menu and then placed the scan above a white background layer. (*note: You can make a Custom Shape from ANYTHING you can bring into Photoshop from photos to line drawings.)

Grumpy Old Men movie download

No matter what you’re trying to make into a Custom Brush, it will need to be black and white. If you’re using a color photo or image, you can quickly discard the color information by choosing Image>Adjustments>Desaturate from the main menu.

It is important to understand that when we create a Custom Brush anything on the stage that is white will be transparent when we convert the image to a brush, black will be opaque and the gray areas in between will be partially transparent.

Choose the Rectangular Marquee tool from the Tools bar by pressing the M key, then draw a selection around the area that you would like turn into your Custom Brush.

With the selection made, choose Edit>Define Brush Preset from the main menu, give the new brush a name and click OK. How easy was that? Your new brush has now been saved and if you switch to the Brush tool by pressing the B key and choose the brush drop down from the Brush Options menu at the top of Photoshop, you’ll see that the newly created brush has been added to the end of the list.

I can now delete the Scanned Paper layer from my document and get to work creating a new piece of paper.

Create a new layer called Paper Background and set the foreground and background colors in the Tools bar to #d3c29d and #b7a783 respectively. Press the M key to call up the Rectangular Marquee tool and since the standard aspect for a piece of paper is 8.5 x 11, we will set the constrain options for the Marquee tool to Fixed Aspect Ratio with a width of 11 and a height of 8.5.

Wolvesbayne movie full

Now that we’ve got our colors selected and the Marquee tool setup, lets go ahead and drag a nice big selection onto the stage and fill it with the foreground color by pressing Option-Delete (PC: Alt-Backspace).

With the selection still active choose Filter>Render>Clouds from the main menu. This will create a nice variant of color on our old paper using a mixture of the foreground and background colors we set in Step 4.

At this point it’s safe to deselect by pressing Command-D (PC: Ctrl-D).

We will now use an Inner Glow layer style to darken the edges of the paper.

• 
  Origin: Spirits of the Past movies
  
  

• 
  Ciao Manhattan hd
  
  

To call up the Layer Styles dialog you can either double click to the right of the layer name in the Layers palette, or Control-Click (PC: Right-Click) on the layer and choose Blending Options, then click on Inner Glow text on the left to add the following effect. Click OK when you’re done.

Add a new layer by clicking the Add New Layer icon at the bottom of the Layers palette and name it

Folds

.

Now we’re going to use our new brush to create the folds and texture of the paper.

Press the D key to reset the foreground and background colors to black and white, then press the B key to switch to the Brush tool and from the Brush drop down at the top choose the new Folded Paper brush we created earlier. If you were following along at home you’ll now notice that the brush we created is oriented horizontally, but our paper is vertical. This problem can be solved easily by opening the Brushes palette from the main menu by choosing Window>Brushes. Click on Brush Tip Shape in the menu on the right and change the Angle to 90°.

Position the brush over the paper and use the bracket keys

[



The Cry rip


or

]

to enlarge or reduce the brush size until it’s just a few pixels larger than the paper size then simply click once to paint one instance of the brush onto the stage.

Next lets Control-Click (PC: Right Click) on the

Folds

layer and choose Create Clipping Mask. This will clip the

Folds

layer to the

Paper Background

layer and will effectively hide anything outside the papers area. The clipping mask also allows the Inner Glow layer style which was added to the

Paper Background

layer to apply to the

Folds

layer as well.

Now lets make the Folds layer blend correctly with the underlying layer by changing the blend mode to Color Burn and the layer’s Fill opacity to 40%.

An old piece of paper should have some blemishes around the edges so lets click back down to the

Paper Background

layer in the Layers palette to select it and then add a layer mask by clicking the Add layer mask icon at the bottom of the Layers palette. This will allow us to rough up the edges of the paper without actually erasing from the actual layer. When the layer mask is added you will notice that it is by default selected (*note: You can tell the layer mask is selected rather than the actual content of the layer because of the black brackets that appear around the icon of the layer mask.)

Press the B key to switch to the Brush tool, then choose the Chalk 60 pixels brush from the Brush Picker. This will be the rough edge brush I’ll be using to antique the edges of the paper.

With the foreground color set to black use the brush to paint black into little sections around the edge of the paper, effectively removing those areas from view. The black we paint onto the stage with the layer mask selected will be masked away.

With the

Paper Background

still selected, press the Create A New Layer icon at the bottom of the Layers palette to add a layer directly above it. Notice that the new layer is also clipped to the

Paper Background

layer just like the

Folds

layer.

• 
  A Officer and a Gentlemann full movie
  
  

Storm of the Century


Press the X key to change the foreground color to white, then using the same brush with it’s opacity set to 30% paint around the worn edges with white to add a little dimension to the wear.

If you downloaded the grunge brushes from the

Create An Old Envelope

• 
  buy Angels with dirty Faces
  
  

tutorial you can use them here on a new layer called

Grunge

to add some nice watermarks and grungy effects to the paper. I used a blend mode of Color Burn and lowered the fill opacity to 22%.

Click back to the

Paper Background

layer and add a nice Drop Shadow layer style as shown below.

The last thing our paper needs is some writing. Click on the

Folds

layer (or whatever you called your top layer) and switch to the Type tool by pressing the T key. With the Type tool drag a rectangle onto the stage where the text on the paper should live then using a font like Bickham Script Pro or

Champignon

, type out your text.

Of course we’ll need to age the text to match the paper, and luckily we’ve already done most of the preparation. Change the layer blend mode to Color Burn and lower the opacity to 50%.

While still on your

Text

layer hold down the Command (PC: Ctrl) key and click on the thumbnail for the

Folds

layer to load the layer as a selection. This will create a selection using only the information contained on the

Folds



download The Puppet Masters


layer.

Now simply click the Add Layer Mask icon at the bottom of the layers palette to convert the selection into a Layer Mask that will instantly age the text consistent with the folds and wrinkles on the paper.

Because of the blend and opacity changes the text is now too light, so simply press Command-J (PC: Ctrl-J) to duplicate the Text layer. This will double the effects of the Color Burn blend mode as well as effectively increase the density of the text creating a more convincing effect.

And there you have it, a nice effect produced by creating your own Photoshop Custom Brush. Nice work!

Often times as Photoshop users, both beginner and advanced, we get so used to using a tool in a certain way that we often overlook it’s possibilities. I had a recent request for a tutorial on creating a digital “matte” effect so I decided to tackle the idea using a set of layer styles which could be saved and reused easily.

This tutorial is geared towards the beginning Photoshop user, so feel free to skip through the hand holding if you know what you’re doing.

• 
  Aliens full movie
  
  

The first step is to obviously choose a photo to work with. Mrs. HERO took this photo of me during my infamous hair crisis of 2007. The year I began with a head of golden locks past my shoulders and ended completely bald. Not to mention the 6 stages of stupid in between. And of course, all of that directly relates to the tutorial, so I hope you’re taking notes.

The Haunting video

Lets start by pressing Command-J (PC: Ctrl-J) to duplicate the Background layer. double click on the layer’s name in the Layers palette and rename it

Photo

.

(*note: If your layers palette isn’t visible, you can open it from the main menu via Windows>Layers.)

Les douze travaux d’Astérix divx

Shrek 2 movie full




The Messenger: The Story of Joan of Arc dvdrip


Now we are going to fill the

Background

layer with white. Click on the

Background

layer in the Layers palette to select it then press the D key to reset the foreground and background colors in the Tools palette to black and white respectively. Now simply press Command-Delete (PC: Ctrl-Backspace) to fill the layer with the layer with white.

(*note: If your tools palette isn’t visible, you can open it from the main menu via Windows>Tools.)

Godzilla full movie

Click back to the

Photo

layer in the Layers palette and lets shrink the photo so that we have room to work. Invoke the Free Transform tool by pressing Command-T (PC: Ctrl-T) and while holding your Shift key to constrain the proportions, click and drag one of the corners towards the center of the image. You may also try holding the Shift and Option (PC: Shift and Alt) keys at the same time which will drag all the corners in at the same time and keep the photo centered.

When the photo is resized to your liking press Return (PC: Enter) key to commit the transformation.

Next we’re going to add a series of Layer Styles to the

Photo

layer to achieve our desired effect. I’m going to talk about each of these individually from step to step, but you need to keep the Layer Styles dialog box open until we get to the end of Step #XXXXX.

double click with your mouse to the right of the

Photo

layer’s name in the Layers palette to open the Layer Style dialog. (*note: This can also be done by Control-Clicking (PC: Right-Click) on the layer and choosing Blending Options. It’s a good idea to move the dialog box to a spot where you can see your photo clearly.

Immer nie am Meer dvdrip

Lets first add a Drop shadow with the following settings by choosing the Drop shadow style from the top of the Styles list. I used the following settings, but again, based on your image size you will want to adjust these visually to your liking.

Our inner matte will be created using the Inner glow layer style, so choose the Inner glow style from the Styles list to reveal it’s options. Typically this layer style is used to apply a soft glow to the inside edge of an object, but by changing the Blend Mode to Normal and the Opacity to 100% we begin to create a more solid effect. Change the Technique to Precise and the Choke to 100% to really get things right.

I chose a size of 15 pixels, but again, based on your photo size you may want to add more. And finally I clicked on the color swatch to open the Color Picker, then by moving the mouse over my image (which changed the cursor to the Eye Dropper / Color Picker tool) I clicked on a nice light blue in my jeans and clicked OK.

Now lets create the outer matte. Click the Stroke style from the bottom of the list on the left hand side of the Layer Style palette to reveal it’s options. A stroke is an outline that can be applied to your layer. The default position for this style is Outside, but it yields a rounded edge outline that’s not conducive to what we are doing, so switch it to Inside instead. For my example a 10 pixel stroke looks good but depending on the size of your photo you’ll want to adjust it accordingly.

Here also you click on the color swatch at the bottom it will open the Color Picker from which you can choose any color of the rainbow for your outline. In this case I chose white.

Piglet’s Big Movie ipod

Lastly, I thought it would be nice if I could figure out a way to place a tiny shadow under the white matte we just created with our Stroke style. To do this choose Inner Shadow from the Style list and apply the following settings.

The Choke set at 100% means there’s no gradient, it’s a hard edge. The size of 11 pixels is just 1 pixel larger than my 10 pixel Stroke, so only a single pixel of this style shows through. I lowered the opacity to a point where I felt like it looked more like a shadow than an extra layer.

The sunshine Boys film

• 
  Carver buy
  
  

With our effect now complete lets save it as a Style that we can use again later.

At the upper right hand corner of the Layer Styles dialog box there is a button called

New Style

. Click it and give your style a name, make sure that the Include

Layer Effects

box is checked. We didn’t use any Layer Blending Options, so you can leave that box unchecked this time and simply click OK.

Now you can go ahead and click OK in the Layer Styles dialog box. This will commit your layer style to your layer and close the dialog box.

You will now notice that the

Photo

• 
  Final Approach ipod
  
  

layer contains a Layer Styles icon indicating that styles have been applied to it. You can double click on this icon at any time to view and change all the styles we just applied.

You should also notice that in the Styles palette, which can be accessed via Window>Styles, that the last style in the palette is the one we just created.

Now any time you want to apply this same style to a different image, all you have to do is open your Styles palette and choose it from the list!

Young Doctors in Love film


And a little text for a nice final image. Great work!

• 
  Mad Max Beyond Thunderdome download
  
  

• 
  Driving Miss Daisy release
  
  

The Wingless Bird hd

In this Photoshop tutorial I’ll show you a creative and extremely effective way to improve an overexposed image by using Luminosity and the Multiply blend mode.

• 
  Severance full movie
  
  

Along Came Polly release


Here I have a photograph of the Bandon Lighthouse near Bandon, Oregon. This was a tricky shot because the front of the lighthouse was in shadow while the sky was still quite bright. The resulting photo as seen below needs a little fixing.

Be aware that if you’ve completely blown the sky (or any other element in you photo) completely out by overexposing the shot, this technique won’t help. At least some color information must be available for this to work.

Click on the Channels tab in the Layers palette then while holding the Command (PC: Ctrl) key, click on the thumbnail of the RGB layer. This will load the Luminosity of the image as a selection. Luminosity represents all the light areas of the photograph.

With the Luminosity selected, click back to the Layers tab in the Layers palette.

Now simply press Command-J (PC: Ctrl-J) to duplicate the selected areas to a new layer. Your Layers palette should now look like the one below. Notice that a new layer with only the selected areas has now been created above the original layer and by default it is named Layer 1.

Fright Night ipod

(*note: You can double click on the name of any layer in the Layers palette to change it’s name. I highly recommend getting used to naming each layer.)

• 
  The One and Only video
  
  

For visual reference I’ve turned off the original Background layer so you can see the Luminosity layer by itself. Notice that only the light areas of the photograph have been copied to the new layer.

Ok, I’ve now turned the Background layer back on and the final step is to change the blend mode of the Luminosity layer to Multiply by using the blend mode drop down menu at the top of the Layers palette.

The Multiply blend mode multiplies the color intensity of the top layer with the bottom layer. This produces darker colors within the composite image, giving the blend more contrast.

You can increase the effect by duplicating the Luminosity layer again by pressing Command-J (PC: Ctrl-J).

Here you can see the dramatic difference in the image.

Change of Habit divx

The Hard Word release

My final image consists of 2 layers of the Luminosity layer and minor adjustments with Curves and Hue/Saturation, the majority of the magic however happened by simply adding the Luminosity layers.

In this Photoshop tutorial we will create a nice liquid text effect using a free texture found online, a radial gradient, a blending mode change and a few simple layer styles.

• 
  Kill Switch dvd
  
  

Lets start by laying down a nice radial gradient on the “Background” layer. Grab the Gradient tool by pressing the G key, then set the foreground and background swatches to #3bbff8 and #002c59 respectively. Make sure that Foreground to Background is selected in the Gradient style box, and that you’ve chosen the radial gradient icon, then click and drag from the center to the edge of the document to apply the gradient.

Now open the wet texture file you want to use. I got this one for free at

Maytag

. click and drag the texture into the working file. This will place the texture on a new layer just above the “Background” layer. double click the layer name in the Layers palette and rename it “Texture”

• 
  Primitive Pluto full movie
  
  

The Man from Earth

Use the blend mode drop down menu at the top of the Layers palette to change the layer’s blend mode to Soft Light.

The planets movie download

mister Lonely release

The

Soft Light

blend mode lightens or darkens the image depending on the color of the top layer: if the top layer’s pixel is dark, then the bottom layer’s pixel is darkened; if the top layer’s pixel is light, then the bottom layer’s pixel is lightened.

With the background all set, invoke the Text tool by pressing the T key. If the Character palette isn’t visible, bring it up by choosing Window>Character from the main menu at the top of Photoshop. Click on the stage and type out your text. Once your text is finished, use the Character palette to adjust the font and size until you get something you like. I used a font called Techno at 150pt.

• 
  download Infected aka Dark Island movie
  
  

(*note: We’re actually going to make the fill of the text transparent later on, so it doesn’t really matter what color the text is.)

Now add the following Layer Styles to the layer by Right-Clicking (Mac: Command-Clicking) on the text layer and choosing Blending Options, which will bring up the Layer Styles dialog box. When you’ve added all 6 styles click OK.

For the Boys buy



Harpies movie

Young Guns II video

If you got all that correct, your text should look something like this.

Remember back in step 4 when I said that the color of the text wasn’t important because the actual color would be hidden? … Well lets take care of that now by dropping the layer’s Fill opacity to 0% as shown below.

download Buddy Buddy

At this point we could call it quits with a nice effect, but lets take this thing one step further and add a little more realism to our text. You’ll need to follow the next few steps very carefully.

Command-Click (PC: Ctrl-Click) on the Text layer’s thumbnail in the Layers palette to load the text as a selection.

Click on the “Texture” layer in the layers palette (*note: it will now be highlighted) then press Command-J (PC: Ctrl-J) to duplicate only the selected area of the texture layer. This will create a new layer above the “Texture” layer called “Layer 1″. Go ahead and double click on the layer’s name and change it to “Text Effect”.

Now click and drag the new “Text Effect” layer to the top of the layers stack.

The Naked Gun 2½: The Smell of Fear movie


And that’s it folks. Great job!