Gabriel here, with a new tutorial for you. Most of you have probably seen shining or sparkling text (maybe even both) on Flash websites and if you’re like me, probably wondered “hmm, how did they do that?”. If, however, you are a Flash or Photoshop guru, then you might want to skip this one, as it’s mostly beginner stuff for both. This tutorial will teach you how to create a shine and sparkle text effect, taking you from creating the text in Photoshop, to animating the effects in Flash.

This tutorial was created with Photoshop CS2 and Flash Professional 8, but I’m sure it can be done with newer versions of these programs as well, so don’t despair .

This is the effect we’ll be trying to achieve through this tutorial (click on the image below). If you’ve got a slower connection, wait a while until it loads the 200kb movie.

Step 1

Create a new Photoshop document of 1024×544 pixels. Fill it with #112538, then name the layer “Background”. Create a new layer (Ctrl+Shift+N) and fill it with #112538. Name this layer “Light”.

Create a new layer mask for the Light layer, then select the Gradient tool, Radial. With the layer mask selected, drag from the center of the canvas towards the top edge. Keep trying until you get a similar effect to the one below.

Step 2

Now let’s create a pattern which we will use. Create a new document, then grab the Pencil tool (B). Before you use it, create a new layer and hide the first layer under it to show just the transparency. Now “draw” one pixel using the Pencil tool anywhere on the canvas. Phew, exhausting, isn’t it? Grab the Rectangular Marquee tool (M) and create a selection of 1×3 pixels, like shown below. By the way, the document is zoomed in, that’s why the pixel is showing so large in the screenshot.

Go to the menu Edit › Define Pattern… and enter “Horizontal Line Pattern” in the input area (or whatever name you wish to give the pattern). Click OK. Now your pattern will show in the (oddly enough) Patterns list when you open the Layer Style window. But, we’ll see about that in a second.

Duplicate the Light layer and fill it with white (#ffffff). Make sure the layer is selected, not the mask before you fill it up. Rename this layer “Pattern”. Give it a Blending Mode: Overlay and set its Opacity to 20% (press 2 on the keyboard). Double-click on this layer inside the Layers window and select Pattern Overlay on the left. Set it up like below. Your pattern is now showing at the end of the list if you click on the little arrow next to the big pattern thumbnail. The result should look like below:

Step 3

Time to add some text. Press T to grab the Text tool and choose Adobe Garamond Pro if you have it, if not, you can use Comic Sans (just kidding) . I used Adobe Garamond Pro, Bold, 91px and placed it smack in the middle of the canvas. You should do that, too.

Step 4

Now let’s spice this text up a little. Bring up the Layer Style window for the text (double click the layer in the Layers window). Use the settings below:

1 2 3 4 5

Step 4

Got it? Cool. Time to export our stuff into Flash. Grab the Slice Tool (K) and draw a slice 570×96, or enough so that it includes the whole text, with shadows. Be careful not to cut off part of the shadow. Name the slice “shinytext”. Hide all other layers, then press Ctrl+Shift+Alt+S (I know) to export it. From the Preset box on the top right of the export window select PNG 24, so that we have full transparency in Flash, keeping our text lookin’ good. Press Save and go ahead and choose a folder where you want to save the image.

I usually choose the Desktop, because I’m lazy. Be aware that Photoshop will create an “images” subfolder in the one you chose and that’s where it will save the slice(s)..

Once you’ve saved the text, go back to your document and hide the text layer, but unhide the others. Press Ctrl+Shift+S to save the document, then browse to the folder where you saved the text image, choose JPG as the file format. Make sure it’s at its highest quality, name it “background” and save it.

Step 5

Now it’s time to open up… Flash! (*insert screams and creepy thriller violin music*). This is usually the part where spectators will scream “nooo, don’t go in there!”, but we’re gonna go ahead and do that anyway. Create a new Flash document 1024×544 pixels, make sure you set the Frame rate to 30fps for smoother animations.

Press Ctrl+R to bring up the Import window, then browse and select the background image and import it. Make sure that it’s set at 0px, both on the X and the Y axes. Name the layer “background” and lock it (see below).

Step 6

Create a new layer, then press Ctrl+R again and import the text image this time. Align it to the center of the document, by using the respective buttons inside the Align palette. Name this layer “text” and lock it.

Step 7

Create a new layer, name it “highlight”. Grab the Text tool and type your text anywhere on the canvas. It has to be the same text as the one you have imported from Photoshop, same font and size and of white color. We have to align it on top of the “text” layer (see image below).

Step 8

Select the contents of our “highlight” layer (the text) and press F8 to convert it to a symbol. A Flash symbol can be Graphic (static graphics or text), Movie Clip (animated graphics) or Button (behaves like a button, has only four frames in its “timeline” corresponding to its four states).

This time we’re choosing Movie Clip, because we want to create an animation that will play over and over (or only once, if we so choose). Give this Movieclip the name “shine”. I’ll be referring to the above symbol creating process again later in this tutorial, so keep it in mind.

Now, in Flash, symbols behave kind of like “groups” of objects (or layers) and can be “opened” in order to be edited, by double-clicking on them on the canvas or inside the Library.

Step 9

Go ahead and open the “shine” movieclip (unless it’s already opened from when you created it) and you’ll notice that inside there’s our Flash text. Click on it and press F8 again to convert this text to a symbol, this time choosing Graphic, and name it “shine_text”. Rename the layer it’s on “shine text”.

Step 10

Create a new layer and name it “highlight”. Grab the Rectangle Tool and draw a rectangle with an approximate shape of the one below:

With the Selection tool (V), click on the rectangle to select it, press Ctrl+C to copy it to the clipboard, then right-click anywhere on the canvas and select Paste in place from the menu. This pastes the rectangle in the exact same position as the one you just copied, which is handy when trying to align objects either horizontally or vertically.

Holding Shift and with the pasted rectangle selected, press the right arrow key to nudge it to the right, about 10px away from the old one (see image). Select the Free Transform tool (Q) and click on the second rectangle (the copy) and shrink it horizontally to about a third of its original size. You should have something like the image below.

Step 11

Select both rectangles, then in the Color Mixer palette, set Type as Linear. This gives your objects a linear gradient fill. Click on each of the two little color squares at the bottom and assign them both the color white. Click on the one on the right and select an Alpha value of about 40% for it. This makes the gradient go from white, alpha 100% (alpha meaning opacity) to white, alpha 40%. The process is illustrated in the image below.

Step 12

Select the rectangles again and press F8 to convert them into a Graphic symbol with the name “highlight”. Select this symbol you’ve just created and rotate it about 30 degrees clockwise. Make sure the “highlight” layer is above the “shine text” layer in the timeline, then right-click on the “highlight” layer and select “Mask” from the menu. This converts the respective layer into a mask for the layer right under it. A mask in Flash works just like it does in Photoshop (meaning the layer below will show only through the mask’s pixels), except that in Flash it can be animated! Woohoo!

Step 13

What we’re trying to do here is create the “moving highlight” or “shining” part of our animation, so we’re trying to move the mask from the left of the text to its right. Remember, the mask layer’s actual contents never show. They are simply a sort of filter for the layer they’re masking, if that makes sense, so the rectangles we’ve been messing with won’t actually show up in the animation.

Now let’s unlock the “shine text” and its mask layer. Right-click on the keyframe (the little rectangle with a dot inside) in the timeline and select “Create Motion Tween” from the menu. What this does is turn on the “animation switch”, so to speak, starting at that frame for that specific layer.

The way this works is it animates any changes in position, opacity etc. of that layer between two or more keyframes. Let’s go ahead and click on the frame 20 in the timeline and press F6 to create a keyframe. The layer contents at this keyframe automatically inherits its properties at the previous keyframe.

But, since we’re trying to create an animation, we need to move the layer contents at the second frame (the terminal frame, since this is where the animation ends). So let’s move the mask all the way to the right of the text, completely away from it, not overlapping at all. Now click on the 20th frame of the “shine text” layer and press F5 to insert frames from 1 to 20 for that layer.

Step 14

Now if we go back to frame 1 of our animation here and we press Enter we should see the mask layer moving from point A (the left of the text) to point B (the right of the text). What “Motion tween” did when we added it earlier was fill in all the missing animation frames in between point A and point B. Now let’s right-click on the Mask layer and select “Show masking”. This will hide the mask layer and now when we play our animation from the beginning we’ll see the actual “shine” effect that we’ve done all this for. Unlock the layers again and go to frame 100 in our timeline and press F5 for both “highlight” and “shine text” to add some more frames.

The effect of this is a small delay after each play of the shine effect, which is certainly easy on the eyes. Since we didn’t set a stop(); event at the any point in our timeline, and since we’re inside a Movie clip, our movie will loop ad infinitum. Go ahead and press Ctrl+Enter to test your animation. Or preview here the way it’s supposed to look.

Step 15

Next, we’re going to create our “spark”. Create a new layer and name it “spark”. Create a square of about 80×80px. Select the Free Transform tool, then holding Shift, rotate it 45 degrees (one step) either way. You should now have what looks like a rhombus. Now click outside the shape, then click on it again (with the Free Transform tool selected). Scale our shape to about 5-6 pixels wide, like the image, but really this is up to how thick you want the spark’s rays to be.

Once you’re done, click again outside the shape, then on it again. Press Ctrl+C, then right-click outside and select Paste in place. Rotate this shape to 90 degrees. You should now have what looks like a plus sign (see image below).

Same process as above, click outside the shape, then on it, Ctrl+C, then paste in place. Rotate this to 45 degrees and shrink it to about 40-50% of its size. These would be the spark’s “secondary” rays.

We need a little more work on our spark shape. Select it, then go to the Color Mixer palette and select Radial as the Type of fill. Repeat the same steps as you did with the linear fill (the two squares, white color, the one on the right make it Alpha 30-40%). You should have what looks like the bottom part of the above image.

Step 16

Select the spark shape and press F8 to convert it to a Movie clip symbol. Name this movie clip “spark”. Open it up (double click it) and inside there should be our spark shape again. Select it and press F8 to convert it to a Graphic symbol; name it “spark_graphic”.

Step 17

Let’s animate our spark. Go back to editing our “spark” movie clip. You should have our “spark_graphic” in it on its only layer. Right-click on the keyframe inside the timeline and select “Create Motion Tween”. I think you know where this is going

Click on our spark graphic and in the Properties window (should be docked at the bottom of your workspace) select color: Alpha and give it a value of 0%. Click on frame 20 on our timeline and press F6 to create a new keyframe there. Select our spark graphic at frame 20 and rotate it 180 degrees from the Transform window. Now go to frame 10 in our timeline and create a keyframe there as well. Select our spark graphic at keyframe 10 and give it Alpha of 100%, rotation of 90 degrees and scale it to 180%. Go to frame 100 and press F5 to add frames and a matching delay to our shine animation.

Step 18

Go back to editing the “shine” movie clip and duplicate the “spark” layer two times. Name the duplicates “spark2″ and “spark3″. Move the keyframe of the “spark” layer to frame 10. Move spark2’s to frame 5. Move spark3’s to frame 15. See image below for illustration and placement of the spark movie clips on the canvas. Once all this is done, make sure that all of the layers’ frames go all the way to 100, in order for the effects to synchronize.

Press Ctrl+Enter to test and export your movie and voilá! A sparkling and shining text.

That’s all, folks! Hope you guys enjoyed it. Be sure to please Digg it and leave a comment if you did (or not) or to show me your version! Thank you for reading.

Download Shining and Sparkling Text with Photoshop and Flash PSD and FLA sources (869 KB)

There are times when you really need some good cloud brushes (I know I do) and you have to scour and dig through the internet to find them. Be it for a personal project or for commercial work, it can be frustrating, not to mention time and sometimes money wasting finding that perfect brush set. I feel your pain, so today I present you 22 Photoshop cloud brush packs, all in one place, for your sky-designing, cloud-rearranging pleasure (for you OCD folks out there).

First and foremost, I would like to mention that I do not claim ownership over these brush packs. Their authors have all the rights over them and I suggest you visit each author’s link and if you are so inclined, thank them. Also, there is bound to be more goodness from each of these authors, so their pages are definitely worth a look.

Beautiful Clouds Brushes by Scully7491

Cloud brushes by LadyLyla-stock

Cloud 3D Cartoon Brushes by cloud-no9

Cloud Brush Pack by PhysicalMagic

Cloud Brushes by JavierZhX

Cloud Brushes ver.1 by cloud-no9

Cloud Smudge Brushes by Noise-Less

Clouds and Sky II by fabricate-stock

Brush Set – Clouds v1 by Ryoku15

Clouds Brushes by Coby17

Clouds Brushes by dawn-at-the-lake

Clouds Brush Set by IllusionsGlade

Clouds Brushes + imagepacks by fabricate-stock

Clouds Brushes by ro-stock

Clouds II Photoshop Brushes by redheadstock

Clouds Mist Photoshop Brushes by redheadstock

Clouds Brushes by xXxPaleGFXxXx

Cloudy brushes by Scully7491

Drawing clouds Brush by zevenstorms

Real Cloud Brushes by thiselectricheart

Soft Clouds Textures Brushes by KeReN-R

Stormy Clouds Brushes by SiR-FrAggZaLoTt

Hey there, people! I have returned with yet another Dark Knight tutorial. In this one, we’re going to attempt to recreate a Dark Knight poster (unofficial, mind you) that you can see here in all its glory. It’s a rather complex poster in my opinion, but I think we can pull off something similar looking. Now, I know The Dark Knight is long gone from the cinemas; this was an old tutorial I wrote, but haven’t published until today due to lack of time.

I just want to say from the start that this tutorial will not produce an exact replica of that poster, due to a number of factors. That said, let’s begin.

This is the poster I’m trying to recreate. This is the final outcome of this tutorial:

Step 1

Create new document (Ctrl+N), size 728×1024 (portrait), then fill up the layer with black. Download the image of the card that we will use, open it in Photoshop, then paste it in our document. Name this layer “Joker Card”.

Step 2

Duplicate the Joker Card layer, then hide the original layer. Open up the Layer Styles window by double-clicking on the copy layer inside the Layers window. Give it a Color Overlay of #040b15 and a white 1px Stroke, positioned inside. See below:

1 2 3

Right-click on the layer inside the Layers window and from the menu select Create Layers. This actually converts and divides the styles of the layer (Stroke, Color Overlay) into actual visible layers. Select the “Inner Stroke” layer and press E to bring up the Eraser Tool. Set it up as you see below and erase around the edges of that layer to give it a “worn” look to the stroke.

Select the “Color Fill” style layer. Load the “Chain – Torn Paper.abr” brush set and use them with the Eraser tool on this layer until you get something like below.

Select the layers “Color Fill”, “Inner Stroke” and the layer to which these are connected, by holding Ctrl and clicking on each of them inside the Layers window. Press Ctrl + E to merge them into one, then name the resulting layer “Card Back”.

We’ll be using this layer to fill out Batman’s head shape later on . Hide this layer for now and grab the batman’s face screenshot here.

Step 3

Open the screenshot in Photoshop and drag it or paste it into your poster document.

Next up, desaturate the screenshot layer by pressing Ctrl+Shift+U. Grab the Smudge tool (R), size 20, strength about 50% and start working the mouth area.

Try to smudge the whole area (the part where the skin shows) into a solid looking color. Basically, you want to erase his “original” mouth, as it doesn’t fit the look of our poster (we will add a better mouth later). Try to make this part look as smooth as possible, like the screenshot.

You should also use the Patch Tool (J) with the Patch property set to Destination. The way this works is you draw circular selections with it on the smoother areas and drag these over the not-so-smooth areas. It works kind of like the Clone Stamp Tool (S), which you will need to use to further “refine” and smooth the look of the skin. It should look something like the screenshot below.

Step 4

Cut using the Lasso Tool (L), leaving just the shape of the head and the upper torso. Then duplicate the head layer (Ctrl+J). Give the duplicated layer the blending mode Linear Dodge. This will enhance the details on the head and basically add contrast, so its features are much more visible.

Step 5

Time to add that new mouth on there. Grab a screenshot of Christian Bale here. Open it with Photoshop. Grab the Polygonal Lasso Tool (L) and draw a selection around the mouth, like the screenshot.

Copy that selection and paste it into our poster document. Press 5 to drop its opacity to 50% (to allow us to better appreciate where we should place it), then position the mouth where it should be (the mouth area of Batman’s head). It should now look something like this:

Grab the Eraser Tool (E), then from its properties at the top, select Mode: Brush, Opacity: 100%, Flow: 10%. Start erasing the parts of the “new mouth” layer that are overflowing the mouth area. When finished, press 0 to bring the “new mouth” layer’s opacity back up to 100% and you should have a result looking more or less like the image below:

Duplicate the “mouth” layer and give the duplicate layer the blending mode Overlay. This will saturate the mouth area and add some contrast. Select both “mouth” layers in the Layers window and press Ctrl+E to merge them together into one layer. Press Ctrl+Shift+U to desaturate this layer, then give it blending mode Overlay.

Step 6

Alright, now comes the fun part! If you remember the “Card Back” layer from way back on Step 2, you’ll need to unhide that layer. Give it a Drop Shadow with the settings like below:

Next, you will duplicate this layer to cover Batman’s face and basically draw a rough shape of his upper torso, like in the screenshot below:

Next up, let’s unhide the “Joker Card” layer from Step 1. Give it a Drop Shadow, same as the “Card Back” layer with the settings above. Make sure it’s above the “Card Back” layer and its duplicates in the Layers window. Duplicate the Joker Card all over the rest of the canvas, carefully rotating and placing the cards that are closer to center to “draw” Batman’s shape. See the screenshot of what I mean:

Select the Batman’s head layer and press Ctrl+L, then use the settings in the screenshot to alter its colors for a bluish tint.

Duplicate the Batman’s head layer and give it a Color Overlay with the color #162025. Give this layer the blending mode Color. In the Layers window, select this layer and the Batman’s head layer under it and merge them together (Ctrl+E). Name this layer “Batman”.

Step 7

Next, we’re gonna try to add some detail/texture to the neck and shoulders. Using the Clone Stamp Tool (S), follow the directions in the image below:

Use the Smudge Tool and Patch Tool alternately, as per the directions below:

Use the Dodge Tool with the shown settings:

Use the Smudge Tool and Patch Tool on the neck and shoulders area:

Step 8

What we’re gonna do now is add the image of Batman on each of the cards laying on their face. The process goes like this:

• Duplicate the “Batman” layer from Step 6 for each and every card we have on our canvas, except for the Joker cards.
• Place each of the Batman layer duplicates just above its corresponding card layer.
• With the Batman layer selected, we then hold Ctrl and click on the thumbnail of the corresponding card layer under it to create a selection area the shape of the card. We then go to the menu Select > Modify > Contract… and we contract the selection area by 1 px.
• Click the Add Vector Mask button at the bottom of the Layers window to mask the selected Batman layer.

Repeat this process for each of the cards until we have something looking like the image below:

Next, we must move the cards forming Batman’s image around a bit to give the impression of them being chaotically thrown around, as opposed to cleverly arranged

In the Layers window, select each group of two layers: the Batman layer and its corresponding Card Back layer. Move them around a bit (10-20px) in any direction you prefer, just enough to give the illusion of the image made up of random cards, but careful not to break it too much. My phrasing not making sense? See the image below:

Step 9

At the bottom of the Layers window, click on the Create new fill or adjustment layer button and from the menu, select Photo Filter. Use the settings in the image below. Create another adjustment layer, this time selecting Levels from the menu. Use the settings as shown below. Finally, create a Hue/Saturation adjustment layer, again using the settings below.

Place these 3 adjustment layers above all other layers in the Layers window. (heh, used the word layers a lot in that sentence.)

Our document should now look like this (more or less):

Step 10

Next up, we’re going to have to colorize the mouth area a bit. Grab the pen tool and draw a shape like below:

With the shape layer mask selected, press U and give it a fill color of #F6D18B, then give it a Linear Burn blending mode and an opacity of 60%.

Step 11

Time to add some blooooood on the cards. Download the blood brushes I used here, here and here.

Now, the basic procedure of adding blood on the cards goes like this (we’re going to need to repeat this procedure each time we want to add blood to a new area):

• Download and load the brushes into Photoshop
• Create a new layer above the layer you want to add blood onto.
• Select a red color. I used #4d0000.
• Grab the Brush Tool (B), select and use the brush you want to use. I used some blood spatter brushes, as well as drag marks etc. It’s all up to you.
• Once you’re done adding the blood stain, give the blood layer a Hard Light blending mode.

Once you’re done with the blood, your poster should look somewhat like this:

Step 12

Adding a little texture to the poster. Download the texture here. Open it in Photoshop, then paste it just below the 3 adjustment layers.

Desaturate it (Ctrl+Shift+U), then give it an opacity of 30%. Using the Lasso Tool (L), draw up a selection following the visible shape of Batman. Once you’re done drawing the selection area, press Ctrl+I to invert the selection (that is, select everything BUT Batman). Make this selection a layer mask for the texture layer by pressing with the texture layer selected. Give the texture layer a Hard Light blending mode. The outcome should look like this:

Step 13

Time to add some scotch tape to stick the cards together. Download the scotch tape brushes here, here, here and here.

Download and load the brushes into Photoshop, as usual. Using the color #f3ecbd, select the Brush Tool and create a new layer over the card you wish to put the tape on. Select the brush you want to use, Opacity 100%, Flow 100% and use it once. Give the layer a Drop Shadow with the settings as shown below:

Give the tape layer an Opacity of 50% and Flow 30%.

Repeat this process for the other tape pieces you want to add. The final outcome should look similar to this:

Step 14

I used a similar technique to the one I used on the blood to add the worn look to the Joker cards. Download the grunge/worn brushes I used here and here.

• Download and load the brushes into Photoshop
• Create a new layer above the card layer you want to add the worn look onto.
• Select a grayish color. I used #494845 for most part.
• Grab the Brush Tool (B), select and use the grunge brush you want to use.
• Try to brush in a non-uniform manner for a more realistic look (i.e. brush more on the corners or one side of the card).
• Give the grunge layer an opacity of 50%
• Add a layer mask () to the grunge layer in the shape of the card (Ctrl+click on the thumbnail of the card layer to load the selection).
• Do this for each of the Joker cards you have on your canvas

Final outcome:

Step 15

Time to get a little crazier still and mess up Batman’s face a bit.

Using one of the blood brushes, follow the steps in the image below, trying to keep each different brush stroke on a separate layer:

The final “smile” look should appear like this:

Add a bit of mold to the bottom part of Batman using the grunge brushes at flow of around 10-15%, then erasing around to give it an irregular shape.

It’s starting to look a bit better, eh?

Step 16

Download the exacto knife photo here. Cut out the background, then paste it into our document so that it’s above all of the card layers. Use the Burn tool on it to darken its edges a bit. Create a new layer and add a bit of blood using a brush. Mask the blood layer with the shape of the knife. Give the blood layer an Overlay blending mode. Add some wear the same way as you added the blood, using the color #0d140a. Give this layer a Difference blending mode.

Duplicate the exacto knife layer and give the original layer (the one below the duplicate) a black color overlay. Apply a Gaussian blur of 4px, then move the layer 5px to the right (press right arrow 5 times).

You should have something that looks like this:

Step 17

Let’s go ahead and add the title and copyright on there. I used the font TradeGothic LT.

Let’s add the crazy scratchy text now Unfortunately this will be up to you to draw, but I trust you will do just fine, given the fact that they look like they were drawn by a small child . I used the Brush Tool with the settings like below. The trick is to use only a couple of strokes per letter, but using more strokes for the “joints” of each letter. It also works to get in the mindset of the Joker, a crazy, erratic person, when making this writing. The color for the bat-shaped “hahaha” writing under the title is #51889c.

For the crazily drawn circle around the eye of Batman, you can use the same brush settings, except that you need to use black as the foreground color.

Make sure you use one layer for each doodle/writing chunk, so that you can move each of them around and change their properties (e.g. add Color Overlay) easily.

Step 18

A couple of final touches and we’re done!

Create a new layer and press D to bring up the default foreground/background colors (make it so that black is the foreground color). Press Alt+Backspace to fill the whole layer with black. Press 5 to make its opacity 50%. Add a layer mask to this layer.

Select the mask by clicking on it inside the Layers window. Press G to use the Gradient Tool, then, holding Shift draw a line downwards starting from the bottom of the title to about 10-15px above the bottom edge of the canvas. Press 0 to make the layer opacity 100% again. Place this layer right under the 3 adjustment layers at the top of the Layers window.

Repeat the process above up just before you created the layer mask. Now grab the Rectangular Marquee Tool (M) and draw a selection of about 100px away from every edge of the canvas. Press Delete to remove the selection, leaving the poster with what looks like a black 100px wide border. Apply a Gaussian blur of 50px, then give the layer an opacity of 70%.

Great! It looks like we are done. Now, I know this only resembles the original poster, but the idea behind this tutorial was to shed light some of the techniques the creator of the original poster has (probably) used.

If you liked this tutorial, please drop me a comment on here. If anything was unclear, I’ll try to help you out. If you have ideas for a future tutorial, let me know. As usual you can download the PSD file below (yes, it’s huge).

Thanks for reading and I hope you have enjoyed this tutorial as much as I did making it!

Download Recreating The Dark Knight Poster PSD (18.3 MB)

With the help of this tutorial you will learn how to create a very realistic 3D looking flag in Photoshop.

Before we begin, download the necessary files (ZIP) including the final PSD file. Aside from Photoshop, flag.jpg and silk.psd are pretty much all we need to continue. As you’ll see, the process is very quick and effective. Please note that these files have the same dimensions (resolution). This is important for an accurate “rendering” of the flag’s texture.

Step 1

Open up the flag.jpg image in Photoshop. Go to Filter > Distort > Displace… and use the settings in the image below.

A “Choose a Displacement Map” popup appears. Browse to where you saved the silk.psd file and open it. This applies the information from silk.psd as the displacement map for our flag image. You should have something that looks like the image below:

Notice that although the displacement map was successfully applied, all we’ve got so far is a distorted (or should I say “displaced”) image of the flag. We’re going to add that last ingredient in the final step below.

Step 3

Open up silk.psd in Photoshop and do a Ctrl+A (Select All), then Ctrl+C (Copy) to select the pixels of the silk image and copy them into the Clipboard. Switch to our flag file and paste the silk image over the Background layer. Go ahead and switch the silk layer’s blending mode to Overlay — and there you have it: a cool looking flag/fabric with a nice texture on it.

Thanks everyone for reading and I’m waiting to see the flags you got after following this tutorial

In this tutorial you’re going to learn to create a simple, yet cool menu with overlapping tabs. I’ve kept it simple not because of the lack of time or inspiration, but in order for you to be able to improve on it and modify it in any way you need/want, both code and graphics. It should also be easy to understand its “inner workings”, as we will see during this tutorial.

This should be a fairly easy to follow tutorial, although you should know your basic HTML and CSS before you try it out.

First of all download the tab image (right-click, then Save As…) which contains both on and off states. You can edit/customize this image in any way you want to fit your pages. You need to place this image in the same folder as your page

The HTML

Create a new HTML page in Dreamweaver, or Notepad for that matter. Make sure you’ve got the DOCTYPE set as XHTML.

In the body tag of the page insert this code:

<div id="ts_tabmenu">
<ul>
<li><a href="http://www.tutorialsphere.com/"><strong>Tutorialsphere</strong></a></li>
<li><a href="http://www.tutorialsphere.com/tutorials/photoshop"><strong>Photoshop</strong></a></li>
<li><a href="http://www.tutorialsphere.com/tutorials/illustrator"><strong>Illustrator</strong></a></li>
<li><a href="http://www.tutorialsphere.com/tutorials/fireworks"><strong>Fireworks</strong></a></li>
<li><a href="http://www.tutorialsphere.com/tutorials/flash"><strong>Flash</strong></a></li>
<li><a href="http://www.tutorialsphere.com/tutorials/css"><strong>CSS</strong></a></li>
<li><a href="http://www.tutorialsphere.com/tutorials/php"><strong>PHP</strong></a></li>
</ul>
</div>

What I did there was assign to each menu item a list item from an Unordered List (UL). I did this for the convenience of easy formatting using CSS.

The way the above code works is as follows. Think of your tab image as a two piece puzzle. We need two pieces in order for our tabs to stretch according to the length of the word it contains. First piece of the puzzle is a 10px wide piece of the tab. The second piece is the remaining part of our tab.

The CSS

You can either paste this code in the HEAD section of your page, wrapped in STYLE tags, or you can create a stylesheet (.css) file and paste it in there, then link to it in your HTML page. In order for everything to work right off the bat, you need to place the .css file in the same folder as the image and the HTML page. Otherwise you need to adjust some paths in it.

#ts_tabmenu {
font-size: .75em; /* set the font size */
padding: 20px 0px 0px 20px; /* set the padding */
}
#ts_tabmenu ul {
line-height: 1em; /* setting the line height now so we don't have any headaches*/
margin: 0px; /* let's keep the margin set to 0 for the same reasons as above*/
list-style-type: none; /* we remove the UL's default disc bullets */
float: left; /* we float the list to the left like we will all the elements inside*/
padding: 0px 0px 0px 5px; /* give it a left padding of 5px to counter the effect of margin -5px below */
}
#ts_tabmenu ul li {
float: left; /* floatin' left */
}
#ts_tabmenu ul li a {
text-decoration: none; /* remove the default underline off the anchor text */
display: block; /* we display this text as block so that we can apply padding/margin without problems */
float: left; /* floatin' left, to make the menu horizontal */
padding: 0px 0px 0px 10px; /* we give it a left padding of 10px to show the first 10 pixels of the tabs image. you can also use padding-left: 10px; */
background: url(tabs.gif) no-repeat left top; /* we link to the tabs image, no tiling, showing the top left part of it */
margin-left: -5px; /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
z-index: 0; /* keep it on layer 0 (default) */
position: relative; /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
color: #666666; /* color of the tab text */
}
#ts_tabmenu ul li a strong {
font-weight: normal; /* remove the bold effect */
display: block; /* display the strong element as a block so we can pad it, etc. */
float: left; /* float it left as well */
background: url(tabs.gif) no-repeat right top; /* now we show the right part of the tab and we complete the "puzzle" */
padding: 6px 10px 7px 5px; /* important, as through this you define the position of the text within the tab */
cursor: pointer; /* this makes the browser show the "hand" cursor when hovering over the tab */
}
#ts_tabmenu ul li a:hover {
position: relative; /* again, keep things relative */
z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
background: url(tabs.gif) no-repeat left bottom; /* now we show the bottom part of the tabs image, the "hover" instance */
color: #000000; /* we color the hovered tab's text black */
}
#ts_tabmenu ul li a:hover strong {
background-image: url(tabs.gif) no-repeat;
position: relative; /* keep it relative */
z-index: 5; /* show this on layer 5 as well */
background-position: right bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}


The Result

I bet most of you scrolled over to this section, didn’t you? Here’s our final menu.

Something Extra

Some of you might want that tab to stay on when the user clicks it and enters that page. You can do that with this menu with two small code additions.

You need to give each list item (LI) an id, like so <li id="li_tsmenu2">. This id needs to be unique on that page. Now our HTML code would look like this:

<div id="ts_tabmenu">
<ul>
<li id="li_tsmenu1"><a href="http://www.tutorialsphere.com/"><strong>Tutorialsphere</strong></a></li>
<li id="li_tsmenu2"><a href="http://www.tutorialsphere.com/tutorials/photoshop"><strong>Photoshop</strong></a></li>
<li id="li_tsmenu3"><a href="http://www.tutorialsphere.com/tutorials/illustrator"><strong>Illustrator</strong></a></li>
<li id="li_tsmenu4"><a href="http://www.tutorialsphere.com/tutorials/fireworks"><strong>Fireworks</strong></a></li>
<li id="li_tsmenu5"><a href="http://www.tutorialsphere.com/tutorials/flash"><strong>Flash</strong></a></li>
<li id="li_tsmenu6"><a href="http://www.tutorialsphere.com/tutorials/css"><strong>CSS</strong></a></li>
<li id="li_tsmenu7"><a href="http://www.tutorialsphere.com/tutorials/php"><strong>PHP</strong></a></li>
</ul>
</div>

Now that we have our id’s in place, we need to specify the id of the body tag, which should be something similar to the id of the list item we want to highlight.

For example, say we want to highlight the Photoshop tab. Let’s give the body tag an id of “tsmenu2″

<body id="tsmenu2">

Up to this part, our modifications would be pretty much useless if we didn’t have the CSS to enable us to use them. We need to make the following addition to our CSS code:

#tsmenu1 #li_tsmenu1 a, #tsmenu2 #li_tsmenu2 a,
#tsmenu3 #li_tsmenu3 a, #tsmenu4 #li_tsmenu4 a,
#tsmenu5 #li_tsmenu5 a, #tsmenu6 #li_tsmenu6 a,
#tsmenu7 #li_tsmenu7 a {
position: relative;
z-index: 5;
background: url(tabs.gif) no-repeat left bottom;
color: #000000;
}
#tsmenu1 #li_tsmenu1 a strong, #tsmenu2 #li_tsmenu2 a strong,
#tsmenu3 #li_tsmenu3 a strong, #tsmenu4 #li_tsmenu4 a strong,
#tsmenu5 #li_tsmenu5 a strong, #tsmenu6 #li_tsmenu6 a strong,
#tsmenu7 #li_tsmenu7 a strong {
background-image: url(tabs.gif) no-repeat;
position: relative;
z-index: 5;
background-position: right bottom;
}

You will notice that we’ve used the same rules as we did for the hover state of our tabs. You can obviously modify this so that the “current” tab has a different look, but for now let’s go with this

What I did there was define rules for each of the menu items, but since they would all be the same, I’ve organized them into two groups. We got #tsmenu1 #li_tsmenu1 a which is a CSS rule with multiple selectors (3 in this case). The way this works right here is this rule is only applied to the anchor contained within an element with the id li_tsmenu1 which also must be contained within an element with the id tsmenu1. Which is what we need: we’ve got the body with the id #tsmenu1 containing the li with the id id li_tsmenu1 and the anchor inside the li – Bingo!

I’m somewhat notorious for confusing explanations, so if the above was too much for you, here’s the working example of all that talk.

In order to change the currently highlighted tab you need to change only the id of the body tag and nothing else.

The End

Well folks, this concludes my first CSS tutorial ever. I hope it was easy enough to understand, but if you have any questions, the comment form is right there. You can use/modify this menu in any way you need, without my permission. A link back would be nice, however

Thanks for reading, you two!

Christmas is coming soon, so I thought I’d make a quick tutorial on how to create a Christmas decoration (globe) icon in Illustrator. You should be able to use this both in large size and small size (e.g. 32×32 pixel icons).

Step 1

Open Illustrator CS2 (or the version you currently have). Give it the size of 800×600px.

Grab the Rectangle Tool (M) and draw a rectangle of 800×600 (fill up the whole canvas). Color the Rectangle with #0E0F05. Press Ctrl + C, then Ctrl + F to duplicate this path.

Duplicate it again. Color the first copy with #565404. For the second copy (the one on top), give it a gradient fill of black and white, then make the gradient type Radial. Grab the Gradient Tool (G) and draw a gradient so that it looks somewhat like below:

Step 2

Select the top two layers by holding Shift and clicking on the little circle located to the right of their names within the Layers window. Go to the Transparency Tab (if you don’t have it showing, go to Window > Transparency). Then click on the little arrow icon at the top right of the Transparency window. Then click Make Opacity Mask. You should now have a radial gradient of green. Also note that the two layers have now “merged” into one layer, its name now having a dashed underline.

The steps are illustrated below:

Step 3

Create a big white circle shape by selecting Ellipse Tool (L), holding down Shift to draw a perfect circle. It should be about twice or three times in diameter as the document height. Go to Effect > 3D > Rotate… and change the settings to match the ones below:

Step 4

Now move the resulting ellipse up and make sure it is centered horizontally and aligned to the bottom of the document. Move it up until its top edge takes up about a quarter of the total document area. Now, holding Alt, drag one of the transform points at either the left or right edge of the ellipse until the top edge looks almost flat.

Go to Effect > Blur > Gaussian Blur… and give it a blur with a 48px radius. Then go to the Transparency window and with the blurred ellipse layout selected, give it an Overlay blending mode.

Confused? See the steps below:

Step 5

Now that we’re done with the background part, let’s move on to the actual decoration.

Draw a circle so that its bottom part goes over the bottom background highlight just slightly. Give this circle a radial gradient fill like below:

Step 6

Duplicate that circle and fill it with white. Duplicate the white circle and while holding down Shift, drag the bottom right corner of its bounding box towards the top left, scaling it down, until the smaller circle ’s outside top left bound touches the bigger circle’s top left edge.

Select both circles (big and small) and go to Window > Pathfinder to show the Pathfinder tab. Click the Trim button. This will now group the two circles together and the bigger circle will have a “hole” inside it the size of the smaller circle. Right click the group and select Ungroup. Click on the smaller circle and delete it. You should now have a shape such as in the slide #4 below.

Step 7

Apply a Gaussian Blur 9px on the half moon shaped path. Select the circle shape under it and duplicate it, fill it up with white, then select the half moon shape and click Ctrl + [ to send it back one step, putting it behind the white circle shape. Now select both the half moon and the new circle shape, right click on them and select Make Clipping Mask. You should now have something like the slide #1 below.

Select the blurred half moon shape and while holding Shift, rotate it until the base of the “moon” (i.e. the thicker part) is at the top right of the orange circle. You should have a result like slide #2 below.

Step 8

Notice how the intensity of the highlight is a bit too high? We need to adjust this.

Go into the Layers window and double click on the layer named Group to rename it, then give it the name “Main Highlight”. Within this group you have two layers/shapes. Select the last one (click on the little circle next to its name) then give it an Overlay blending mode. (See slide #1 below)

With the same shape selected and holding Shift, scale the highlight up until it the edge of the orange circle is sort of going through the half of the highlight, like in slide #2.

And voila! Our first highlight! Isn’t this exciting! Don’t answer that

Step 9

Select the Main Highlight group and Shift-rotate it so that the base of the highlight is at the bottom of the circle. Then, within the group, select the last layer/shape and give it a black fill. After that, give it a Soft Light blending mode. Double click on the group’s title and name it “Bottom Shadow”. You should have a result not unlike the image below.

Step 10

It’s time for our secondary highlights. Go ahead and duplicate the first Main Highlight and name it Secondary 1. We’re gonna have 3 of these secondary highlights.

Give the group a Soft Light blending, then move it and rotate it so that it’s in a similar position to slide #1 below. Then go to Effect > 3D > Rotate… and give it the options from slide #2. You should now have something that looks like slide #3 below.

Step 11

Duplicate Secondary 1 and name it Secondary 2. Scale it down to about half and place it in the position shown in slide #1 (so that it looks like it’s continuing the first highlight and forming a spiral).

Go to Effect > 3D > Rotate… and give it the options from slide #2. You should now have something that looks like slide #3 below.

Step 12

Pretty much the same thing for the third highlight. Duplicate Secondary 2 and name it Secondary 3. Scale it down and place it in the position shown in slide #1.

Go to Effect > 3D > Rotate… and give it the options from slide #2. You should now have something that looks like slide #3 below. Adjust until you are happy with the outcome.

Step 13

Select the orange shape, duplicate it, then fill it with white. Duplicate this shape as well. Nudge this shape using the arrow keys pressing right and bottom once each. Very slightly scale it towards the bottom right so that the bottom right of the edge slightly goes over the bottom right edge of the circle under it (see slide #1 and #2).

Then select both white circle shapes and in the Pathfinder window, click Trim. Then right-click the shapes, select Ungroup. Click the middle of the shapes and press Delete. You might have to lock the other layers for this one, otherwise you might select another layer that is on top of them. You should now have something like slide #3. Give this layer a Soft Light blending mode and we end up with a very subtle highlight, which is what we want. Name this shape “Slight Highlight”.

Step 14

Duplicate the Slight Highlight shape, Shift-rotate it to the position across, fitting the bottom right of the orange circle. Zoom in and make sure you place it exactly over the orange circle, otherwise you will have some rather nasty and distracting colors coming out. Finally, turn its opacity down to 50%. Outcome should look somewhat like below.

Step 15

Now, let’s make some sparkles. Select the Ellipse Tool (L) and create a very small white circle (slide #1). Duplicate it and slightly scale the new circle (slide #2). Apply a Gaussian Blur of 4px to the larger circle (slide #3). Apply a Gaussian Blur of 1px to the smaller circle. (slide #4). Select both shapes and press Ctrl + G to group them. Name the group “Sparkle”.

Step 16

Populate the globe with sparkles by holding down Alt and dragging and dropping them and re-scaling them for diversity. You could set a different Blending Mode for the ones located over the orange globe, such as Overlay for different colors. You should have an outcome similar to the image below.

Step 17

Using the Pen Tool create a shape similar to the one in slide #1 below (little crown). Give it a Linear Gradient like in slide #2. Create a little handle (slide #3) and select the Eyedropper Tool (I) and use it on the little crown to copy its gradient (slide #4).

Final Step

Grab the Ellipse Tool (L) and create a black circle like in slide #1 below. Give this circle a Gaussian Blur of 9px (slide #2). Go to Object > Expand Appearance to sort of raster the blur effect, this way it won’t adapt to the shape. Holding down Alt, scale down the shape vertically so that it looks more like a shadow, then press Ctrl + [ to send it back, until it is under the crown shape (slide #3). Give it a Multiply blending mode and set the opacity to 50%. (slide #4)

And there you have it, a nice Christmas globe icon. If you enjoyed this tutorial, I would appreciate it if you would leave a comment to let me know.

It’s way, way, way too late over here right now so, until next time! Merry (early) Christmas!

Download Vector Christmas Decoration Icon Illustrator File

We are still working on remedying some major errors that are still out there, so please do not submit any tutorials or create any new accounts yet.

UPDATE: We have now remedied most of the issues, however we will not be able to recover the users registered between October 10th and 20th, so we apologize for that.

On another note, we’ve updated the website design slightly. We hope you enjoy it and if you’ve got any comments or ideas, do not hesitate to drop us a line.

Hi people! I’m back with a new and (I hope) simple tutorial. It’s maybe a little late for it, but nevertheless I will be showing you how to replicate the Batman “logo” on the posters for The Dark Knight. There are probably other tutorials out there covering this, I honestly haven’t searched. I just went ahead and created it and thought I’d post it here as a tutorial for everyone to read. Hope you like it. Now, let’s get to work.

Step 1

Go ahead and create a new document (mine is 1024x900). Have your first layer named “Background” and fill it with Black.

Do a Google search for "dark knight logo" and find an image that’s large and clear enough for you to be able to trace out the Batman logo out of it. Paste it in your document and using the Pen tool (P) trace the shape. Make it white (for now, for visibility purposes) and name the layer “Shape”. You should now have something like the below image.

Step 2

Time to start building the light rays behind it. Create a new layer, name it “Light” and make sure it’s below the Shape layer. Grab the Pen tool and draw a spiked shape around the logo, kind of like below.

Give the layer a Radial Blur (Filter › Blur › Radial Blur) with the settings shown below (you may have to slightly adjust the brush size and strength depending on the details you are working on at one time).

Step 3

Now you can either duplicate the Light layer or create a new layer with the Pen tool as described above. Let’s go ahead and duplicate the Light layer (Ctrl+J) and transform it (Ctrl+T) and right-click and select Flip Horizontal. You should now have somewhat more “light”, but the shape looks a little to symmetrical. We need more chaos in there

Grab the Smudge tool (R) and smudge the edges of the Light and Light copy layer, both inwards and outwards, until you get an effect similar to the one below. Obviously, you can keep working on the details of the “light” until you are satisfied; you can also add more layers, if needed.

Step 4

Time to give the light some color. Duplicate each of the light layers (Light and Light copy). Then go ahead and select a color like #41b5ff as your foreground color. Holding down Ctrl, click on the first of the two new duplicated layers (this selects its visible pixels). Press Alt+Backspace to fill the shape with the selected foreground color. Do the same for the second duplicated layer. You should now have four “light” layers, two white and two light blue, each white layer should be below its blue copy. Select the Blending mode for each of the blue light layers as Color Burn. The result should look like the image below.

Step 5

Duplicate the Shape layer, press U and at the top select its fill color as #459ccb. Rasterize the layer (right-click, Rasterize Layer), then Ctrl+click the layer thumbnail to select its pixels. Go to the top menu: Select › Modify › Contract and select a 10px value, then click OK. This selects an area inside the shape that’s “contracted” by 10 pixels. Press Delete to clear the selected area, leaving you with the 10px border.

Let’s name this layer “Highlight” to try and keep everything a little organized. As a hint, it’s always a good idea to name your layers as it helps you find the correspondent layer to the shape on the screen much faster.

Apply it a Radial Blur (Filter › Blur › Radial Blur) with the same settings as before. I found it to be necessary to transform it and adjust its size a little (enlarge it) until it looks like the image below. Then, while holding Ctrl, click on the Shape layer’s thumbnail and click Add Layer Mask.This adds a mask in the shape of the (you guessed it) Batman shape. (Is that clever wording or what? ) ). Right click on the mask and select Apply Layer Mask.

Next, add an empty Layer Mask to the Highlight layer, then duplicate the layer 4 times, making 5 identical Highlight layers, each with an empty mask.

Press D to select the default colors for background and foreground. Select the Gradient tool (G) and make it a Radial Gradient. Select the original Highlight layer and apply the gradient as arrow #1 shows below. Select the second Highlight layer and apply the gradient according to arrow #2, and so forth until the last Highlight layer.

After you’re done with the Highlight layers, the result should resemble the image below.

And…that’s it!

The Dark Knight logo is complete! I hope you liked creating it, as well as enjoyed the movie itself. It was hands down the best movie of 2008 and one of the best movies I can remember seeing.

Go ahead and download the PSD file below. If any of you get to create it, I would love to see yours!

Download The Dark Knight Logo PSD file

• A new queue system which automatically posts the approved tutorials in order every hour
• Query optimization to improve the website loading times
• Squashed a few bugs (ongoing)
• Default thumbnails for each category (you don’t have to submit your own thumbnail anymore)
• Some minor tweaks

We are also working on implementing some new functionalities which we are very excited about. We’ll keep you posted as they are getting done

In the meantime, if you’ve got any suggestions or comments about new features that you’d like to see, feel free to drop a comment here on the blog. We look forward to hearing your thoughts!

Hi everyone. Sorry for the hiatus in writing tutorials, I’ve just been real busy these past weeks and didn’t have time to sit down and write. Today I had a couple of free hours so I decided to write another tutorial. We’re going to learn how to create a skin for your web video player. This is just the design part which we will do in Photoshop. Perhaps it will be followed up by a Flash tutorial on how to implement this skin into an actual working player.

I know this has probably been done a trillion times before, but I’ve tried to keep it as simple as possible, using layer styles that you can easily duplicate and a decent number of steps. So, without further ado, let’s start and fill up the web with good looking video players

Step 1

Let’s go ahead and create ourselves a new document of 800x600 resolution. Fill up the first layer with Black (#000000) and name it “Black Background“. Create a new layer (Ctrl+Shift+N) and fill it up (Alt+Bksp) with #33505f, then name it “Gradient Background“. Add a mask to it, then select the mask.

Grab the Gradient tool (G) and select Radial Gradient. Press D to ensure you’ve got the default background and foreground colors selected, then hold Shift and with the mask selected try to create a gradient similar to the one in the picture.

Don’t be too hard on yourself if it’s not identical, this is solely for the purpose of background effects. It’s not part of the actual player skin (at this point imagine me with a shy grin on my face side stepping and dashing away from the frame). But I digress.

Step 2

Next, it’s time to start creating the actual player interface design. Let’s select the Rounded Rectangle Tool and draw up a rectangle similar to the one in the image below, with a corner radius of 5px. You can make it as big as you need it to be. Apply to it the layer effects like shown below. Name the layer “Skin Background“.

1 2 3 4 5

Step 3

Duplicate the Skin Background layer, right click on it in the Layers window and select Clear Layer Style to strip it of all the effects. Name this layer “Screen“. Press A to select the Direct Selection Tool which lets you play with paths and select two absolute bottom anchor points (there are 4) like shown in the image below. Then press Delete to remove these anchor points.

Select the remaining bottom two anchor points and using the arrow keys (plus Shift to move them 10px at a time) move these points up, until you’ve got something that looks similar to the image below.

This will be the screen area and what we’ve just done is create a space where we want to put the player’s controls. Apply the shown gradient effect.

1 2 3

Step 4

Time to work on improving the details a little bit. Create new layer and name it “Ninja Gradient“. Select the Marquee tool (M) and draw a rectangle approximately as wide and high as the buttons area, but very importantly, move it down so that it’s one pixel away from the Screen, like shown. Press D and then Alt+Bksp to fill the selection up with black.

Add a layer mask and draw up a linear gradient vertically, so that it the darker (more opaque) area of the layer is at the top, like the image below.

1 2

Step 5

Let’s create the buttons. We’ll first create the general shapes and then we’ll style them. Grab the Rounded Rectangle Tool, set the Corner Radius to 30px and draw the Play / First Frame button. Name the layer just that. Draw the little symbols on the button using the Pen tool. Next, let’s create the position slider.

Select the same Rounded Rectangle Tool, set radius to 3px and draw a long and thin rectangle next to the button. Name the layer “Position Slider Bar“.

Select the Ellipse Tool and draw a small circular button on the right of the Position Slider. Name this button “Mute Button“. Pick the Pen tool and draw a small speaker icon on top of it. Name the layer “Speaker Icon“

Select the Rounded Rectangle Tool again, with a radius of 3px and draw an even thinner long line type of rectangle next to the Mute button. Name this layer “Volume Slider Bar“. Grab the Pen tool again and create a right triangle, colored black, 3-4 pixels or so above the Volume Slider Bar. Name this layer “Volume Indicator“. Set its transparency to 20% by pressing the 2 key on your keyboard.

Select the Ellipse tool and draw a small circle on top of the Position Slider, centered vertically on it and at the very beginning of the slider bar. This will be your “Position Slider Button“. Duplicate this layer and transform it (Ctrl+T) to about 50%. Move it over the Volume Slider Bar at the beginning of the bar, centered vertically. Name the layer “Volume Slider Button”. When you’re done you should have something like the image below.

Step 6

Almost there! Time to style these babies.

Use the following layer style settings for the Position Slider Button and Volume Slider Button layers.

1 2 3 4 5

Then, the Play/First and Mute buttons.

1 2 3 4 5

The slider bars.

1 2 3 4

Finally, select the Pencil tool (B), select the foreground color #717171 and draw a line in the middle of the Play / First Frame button. Duplicate this layer and move it over to the right by holding Alt and pressing the right arrow once. Hold Ctrl and click this layer in the Layers window to select its pixels, then fill it up with white. Change this layer’s blending mode to Soft Light. You are now done with the button separator.

Grab the Type tool (T) and write the current position/duration text (e.g. mins:secs/mins:secs or however you want to format it). Apply the layer styles below to the Play, First Frame and Mute button icons.

1 2 3

Here is the final look.

So there you have it: your own cool video player skin. I hope this tutorial’s been helpful. Don’t forget to leave a comment if this tutorial has helped you (or if it has not) and if you’ve got any suggestions for future tutorials don’t hesitate to drop me a line. Thanks for reading!

Download Web Video Player Skin PSD file