Here’s a wallpaper I did a few weeks ago, just added some details to finish it today, after 3 weeks without posting anything because i was in holidays, i’m offering you this nice wallpaper. I used some nice stock image and a lot of playing with techniques to give a nice fading effect to the model. Just download it, put it on your desktop, lean back and appreciate.

Desktop Version

1920×1200px

1680×1050px

1600×1200px

1440×900px

1280×1024px

1024×768px

This tutorial will teach you how to create an Header using Vector Shapes, you’ll also learn how to apply a few blur filters and textures to give a nice colorfull effect to the header.

Hey designers, here’s my new tutorial. Last week I was playing in Illustrator and created a few vector shapes with circles and swirls, I thought it could make a nice background for an header, keeping it simple and colorfull.

Vector Shapes

Step 1 – Shapes
To create the abstract vector shapes I used Adobe Illustrator, but I’ll explain how make them in photoshop; you will have the same result. I just used some simple shapes like circles, swirls, drops and others. You’ll need to use the shape tools and pen tool to create those, create a new layer for each shapes.

Let’s start by creating a new document 1000×1000px with a transparent background. Don’t forget to create a new layer for each shape.

- Circles
To make some circles just use the Ellipse Tool (U) while holding the shift key, try to put smaller circles on bigger ones like me, of course you can let your imagination do the job, there’s not limit.

- Swirls
To create a swirl select the Ellipse Tool (U) and create a circle while holding the shift key, then select the Pen Tool (P) and create two curves shape like below, at the end just merge the Circle and Curve layers to have one shape.

- Drops
Very similar to the swirl, create a circle with the Ellipse Tool (U) then create triangle with the Pen Tool and merge the two layers.

Create some other shapes with those tools, when you’re done save the document as a png file so you keep the transparency.

Header

Step 2 – New Document
Create a new document in photoshop, I choose 1100×400px to fit my site resolution with a transparent background.

Fill the background layer with white, Layer – Fill – White and rename the layer Background.

Step 3 – Background Texture
To give a nice effect to the background I used a texture pack made by sanami276, download the texture pack Textures_80_by_Sanami276, I used the 06.png file, open the file in photoshop and drag it into your document. Resize and rotate 180° the texture with the Free Transform Tool (Ctrl+T), rename the layer Background Texture, place it in front of the Background layer and change the Opacity to 85%.

Step 4 – Import Vector Shapes
Open the PNG file with the vector shapes on it, and drag it into the document. Resize and rotate the shapes with the Free Transform Tool (Ctrl+T). Rename the layer Vector Shapes and change the Opacity to 15%.

Step 5 – Lens Blur Filter
To add a blur effect, we’re going to use the Lens Blur Filter, duplicate the Vector Shapes layer, rename the new one Vector Shapes Lens Blur and put the opacity of the layer to 100% in order to see what the effect does. Next apply the Lens Blur filter on it, Filter – Blur – Lens Blur and enter those parameters.

Place the layer between the Background Texture and Vector Shapes layers, and then change back the opacity to 30%.

Step 6 – Texturizer Filter
Duplicate the Vector Shapes layer again, then apply the Texturizer filter on it, go to Filter – Texture – Texturizer and put those parameters:

Rename the layer Vector Shapes Texture; change the opacity to 10% and the blend mode to Soft Light.

Step 7 – Radial Blur Filter
Last filter we’re going to use on the vector shapes, duplicate the Vector Shapes layer and rename the new one Vector Shapes Radial Blur, then apply a Radial Blur Filter to it, Filter – Blur – Radial Blur.

Resize and rotate the result with the Free Transform Tool (Ctrl+T), change the Opacity to 45% and place the layer on top of the Background Texture layer.

Finally add a Hue/Saturation Adjustment, I use Photoshop Cs4 so I used the Hue/Saturation in the Adjustment Panel, placed it on top of the Vector Shapes Radial Blur layer and created a clipping mask, but if you use a previous version of photoshop, select the Vector Shapes Radial Blur layer and go to Image – Adjust - Hue/Saturation and enter those values:

Step 8 – Search Box
We’re now going to create the search box; I did a big search box so the visitors don’t miss it. To start select the Rectangle Tool, then create a rectangle with black for the colour in the top right corner to make the search box background. Change the opacity to 25% and rename the layer Black Box.

Next create a rectangle on a new layer this time in white, smaller than the previous one then rename the layer White Box.

In order to create the magnifying glass icon we’ll create two layers then merge them. Start by selecting the Ellipse Tool and create a 20×20px circle, then change the fill to 0% and add a Stroke layer style to it with those parameters:

Next select the Rectangle Tool and create a thin rectangle to represent the handle, when that’s done rotate the rectangle 45° with the Free Transform Tool. Select the rectangle and circle layer and merge them, Layer – Merge Layers or Ctrl+E and rename the merged layer Search Magnifying Icon.

Add a Drop Shadow layer style on the White Box and Search Magnifying Icon layers

Finally create a new Group, name it Search Box and put the Black Box, White Box and Search Magnifying Icon layers in this group.

Step 9 – Colour Stripes
Create a new layer and select the Rectangular Marquee Tool, make a selection of about 30px height and all the width of the document, then fill this selection with white, Edit – Fill – White and deselect. Rename the layer Blue Stripe, add a Gradient Overlay layer style on it, Layer – Layer Style – Gradient Overlay and enter those parameters:

Then add an Outer Glow layer style, Layer – Layer Style – Outer Glow:

Finally just change the Fill to 0%.

Create a new layer, reselect the Rectangular Marquee Tool and make a selection of about 95px height and all the document width on top of the previous stripe. Fill the selection in white and deselect. Rename the layer Pink Stripe, add a Gradient Overlay layer style on it like in the previous step, Layer – Layer Style – Gradient Overlay and enter those parameters:

Then add an Outer Glow layer style, Layer – Layer Style – Outer Glow and change the Fill to 0% on this layer.

Step 10 – Colour Boxes & Text
To finish just add some coloured rectangles on the stripes with the Rectangle Tool, change the opacity of the blue rectangle to 65% and the pink rectangle opacity to 50%; I’ve put the same colours I used for the gradient in the stripes and add some text on the rectangles.

That’s it for now designers, those techniques can be applied on any creation, try to be creative in the vector shape part, and don’t forget to download the PSD File if you need help.

Similar Articles:
Create a Wooden Stack Dock Icon in Photoshop
Create a Dark Soldier Illustration in Photoshop
Create a Space Invaders Poster in Photoshop
Create a Watercolor Logo in Photoshop
Create an Adobe Box Icon in Photoshop
Create a Frilly 2009 Typo

For this month selection of the 10 best tutorials from June, I picked a lot of different styles going from illustration, webdesign to photomanipulation tutorials, I selected those tutorials because they cover a lot of techniques and tricks to learn and be more confortable with photoshop.

Super Cool Watercolor Effect in 10 Steps

This tutorial will teach you how to create a nice watercolor brush effect on an image, using some brushes, artistic filters and a lot of tricks on the layer masks.

Michael Jackson Wallpaper

This week, I saw a lot of creations or tutorials paying tribute to the King of Pop, I found this one on abduzeedo. You’ll learn how to create a wallpaper with light effects using some different filters and blend modes.

Photoshop Quick Tips #11: Creating Glow Lines

Quick, simple but effective tutorial to create some glow lines on text, use the pen tool and layer styles.

How to Mold Paint Splatter to a Face

In this tutorial you’ll discover how to integrate a paint splatter on a face, lately one of the big trends in design is to use paint or blood brushes, this one covers a lot of brushes techniques and some distort tools.

Create a Cute Furry Vector Monster in Illustrator

I don’t talk enough of Illustrator on drawingclouds, this tutorial will teach you how to create a cute vector monster using some simple shapes and gradients.

Create a Clean and Colorful Web Layout

Nice and fresh webdesign tutorial to create a colorfull layout using some layer styles, gradients and different filters.

Design an Awesome Space Dancer Scene with Nebula Texture

using some nebula textures and a dancer stock photo you learn how to give a space lighting effect using some manipulation techniques.

Photo Manipulate a Fallen Angel

this tutorials teaches you how to manipulate an image addind textures for the background and some stock images for the wings and feathers.

Dark Layout #2

In this tutorial you’ll learn how to create a black layout with patterns and gradients.

Draw Fairy Tale Characters

discover how to create a colored illustration from a sketches, learning how to add the shades, highlights and create the different parts of the caracters and the background using some shapes and brushes techniques.

If you’ve got any suggestions for the next selection of tutorials, send me links via the contact page.

Similar Articles:
Tutorials Best Of May
20 Tutorials I Liked

This tutorial will teach you how to create a Texture Based Vintage TV Poster using some paper and grunge textures. You’ll also learn some new tricks using the Wave and Motion Blur Filters.

Hey designers, here’s a new tutorial to create a simple and nice Retro Vintage TV Poster. If you’ve already read some of my other tutorial, you’ve saw I really like retro style, this time we’ll use some new filters and new techniques.

Step 1 – THE New Document
Open photoshop and create a new document, mine is 1100×1500px.

Fill your background with white, Edit – Fill – White. Rename the layer Background.

Step 2 – Background Texture
For the background I used 3 different textures, first download a paper texture made by bashcorpo called Grungy paper texture v.1 by =bashcorpo, when you’ve downloaded it, open it in photoshop and drag it into your document. To resize or rotate it, use the Free Transform Tool (Ctrl+T) and rename the layer Texture 1.

Next we’ll use a texture form the 10 old paper texture by `Bleeding-Dragon pack, I used the paper3.jpg texture, open it in photoshop and drag it into your document, use the Free Transform Tool again to resize or rotate it, rename the layer Texture 2 and change the blend mode to Multiply.

For the third texture used a grunge one from the 12 Experimental Grunge Textures post on lost and taken, I picked the number 10. Drag the texture in your document and resize it, rename the layer to Texture 3, then change the blend mode to Soft Light.

Step 3 - Brightness/Contrast
In this step we’ll adjust the Brightness/Contrast of the textures, I’m using Photoshop CS4, and so I selected the Brightness/Contrast icon in the adjustment panel. If you use a previous version of photoshop, you’ll need to merge all the texture layers then apply the Brightness/Contrast by going to Image – Adjust - Brightness/Contrast, enter 79 for the brightness and -50 for the contrast. When you’re done create a new group, rename it Textures and place all the textures layers (and the Brightness/Contrast layer if you use CS4) in it.

Step 4 – Vintage TV
Now we’re going to had the vintage TV image, I used a TV Stock image from a pack called retro stuff by ~shaketheglitter, download the pack and pick one of the retro TV’s, I choose the number 5. Open your TV image in photoshop, stay on this document and cut out the TV from the white background. I used the Pen Tool (P) but the Magic Wand Tool (W) will do the job, when you’ve selected all the parts around the TV just delete them. Drag your TV into the document and place it in the middle. Name the layer TV and place it on Top.

Step 5 – Film Grain Filter
Select the TV layer and add a Film Grain Filter on it, Filter – Artistic – Film Grain and enter those parameters: 2 for the Grain, 0 for the Highlight Area and 10 for Intensity.

Step 6 – Motion Blur 1
Duplicate the TV layer and rename the new layer TV Motion Blur 1, then add a Motion Blur Filter on it, Filter – Blur – Motion Blur with an Angle of 90° and a Distance around 30px.

Then add a Gradient Overlay layer style on the TV Motion Blur 1 layer, Layer – Layer Style – Gradient Overlay and put those parameters: I used 5 colours, #bc0000 - #f5c501 - #f0e76e - # db83bd - # 5099ac

Next just change the opacity of the layer to 70% and place the layer under the TV layer.

Step 7 – Motion Blur 2
For this step we’re going to use the same techniques we used in step 6, duplicate the TV layer and rename the new layer TV Motion Blur 2, then place it between the TV and TV Motion Blur 1 layers in the layer box.
Add the Motion Blur Filter on it, Filter – Blur – Motion Blur but this time put 0° for the angle and keep the same Distance around 30.

Next add a Gradient Overlay layer style with those parameters:

Change the opacity of the layer to 70%, create a new group, rename it TV and place the TV, TV Motion Blur 1 and TV Motion Blur 2 layers in it.

Step 8 – TV Interferences
We’re going to create some TV Interferences in the Screen. Create a new layer and fill it with white then add some noise to it, Filter – Noise – Add Noise, and put an Amount of 140%, select Uniform for the distribution and check the box next to Monochromatic.

Hide this layer, and with the Polygonal Lasso Tool make a selection of the screen on the TV, then with the selection still active, unhide the layer and create a layer mask on the Interferences layer, Layer – Layer Mask – Reveal Selection or click on the layer mask icon in the layer box.

Rename this layer TV Interferences, place it into the TV Group, and change the opacity to 50%. Next add an Inner Shadow layer style, Layer – Layer Style – Inner Shadow and enter those parameters:

Step 9 – Fading coloured Stripes
Now we’re going to create some fading stripes on top of the TV, it’s better if you create a different layer for each Stripe. I’ll explain how to create one stripe; you’ll use the same process for the others. Create a new layer, select the Rectangular Marquee Tool and make a selection going from the middle of the TV to the top of the document and with about 85px width. Then select the Brush Tool with a soft rounded brush of about 250px and paint with the outside of brush into the selection. I choose the same 5 different colours we used in the gradient overlay. Make the middle stripes higher than the side ones.

When you’ve done the 5 stripes, rename them by they colours, create a new group, change the opacity of the group to 70%, place the stripes layers in it and rename the group Fading Stripes. Place the group under the TV group.

Step 10 – White Highlights
Create a new layer and name it White Highlights, select the Brush Tool (B) with a soft rounded brush of about 13px and white for your foreground colour. While holding the shift key, draw some line at the intersection of some stripes.

Next add a Motion Blur filter on the White Highlights layer, Filter – Blur – Motion Blur and enter those parameters:

Change the opacity of the layer to 70%, change the blend mode to Hard Light and place this layer between the TV and Fading Stripes group.

Step 11 – Fading Paint
Select the Fading Stripes group, next press Ctrl+Alt+E and rename the new layer Fading Paint then place this layer under the TV group. We’re going to use the Wave filter to give a paint effect to the stripes. Select the Fading Paint layer, go to Filter – Distort – Wave and enter those parameters:

When you’ve applied the filter, apply the same filter with the same parameters 3 times or more to have the same result than me.

Finally select the Rectangular Marquee Tool, and make a selection from the middle of the TV to the bottom of the document, make sure you’ve still have the Fading Paint layer selected and create a Layer Mask, Layer – Layer Mask – Reveal Selection.

That’s it for now guys, you can see that with just some textures and filters you can create some nice effects and give a retro effect to a TV. If you’ve got any questions or problems to understand leave me a comment or send me a message via the contact page.

Don’t forget to download the source files

Similar Articles:
Create a Wooden Stack Dock Icon in Photoshop
Create a Dark Soldier Illustration in Photoshop
Create a Space Invaders Poster in Photoshop
Create a Watercolor Logo in Photoshop
Create an Adobe Box Icon in Photoshop
Create a Frilly 2009 Typo

Hey, Here’s a new wallpaper for all the beloved readers of drawingclouds.com, I did this creation a few days ago, using a few stock images, typo and textures, the tutorial will be released in the next days, I hope you’ll like it!

Desktop Version

1920×1200px

1680×1050px

1600×1200px

1440×900px

1280×1024px

1024×768px

Integrate an animated cloud icon into a current Wordpress Installation.

Hey guys, it’s me Johnathon, again. As promised, I’m here this time to show you how to take the Animated Cloud Icon from before, and integrate it into a current Wordpress installation. So, without diddle-daddling around, let’s jump right in!

Step 1
Before we go on and start integrating the download icon, you’ll want to make sure that you stop by here and complete the first part of the tutorial in which we actually add in our JQuery effect. Also, make sure you upgrade your version of Wordpress to 2.8 to make sure that you have the best settings to help you along in this tutorial.

Step 2
Once you’ve got the first tutorial up and running, it’s time for us to start the move.html file that will hold our effect and information. You’ll need to go ahead and create a move.html file in the root directory, which may also be called the public_html directory. We’ll need this to hold our icon animation files.

Step 3
Now, you’re going to want to upload the JQuery file and the two image files (1.png and 2.png) to the root directory. This is the first directory you see when you login to your ftp, and is sometimes also called public_html. So, you should upload a total of 3 files here. There is no need to upload the index.html file since it will be covered in the move.html file.

Step 4
Now, it’s time to dive into the display of the actual icon. Open up your move.html file that you created earlier in your root directory. Then, insert the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul.flow li').hover(function(){
$(this).find('img').animate({top:'20px'},{queue:false,duration:600});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:600});
});
});
</script>
<style media="screen">
ul.flow li {
list-style:none;
background: url("http://exoph.com/1.png");
width:262px;
}
ul.flow li a {
display: block; 
position: relative;
height: 353px;
width: 262px;
}
ul.flow li a { text-decoration: none; }
ul.flow li img {
position: absolute;
border: none;
}
</style>
<ul class="flow">
<li><img src="http://exoph.com/2.png" /></li>
</ul>

Once you’ve pasted that code, change exoph.com by your domain name, it’s time to save the move.html file.

Step 5
The next step is a simple one. All you need to do is navigate to: http://wordpress.org/extend/plugins/exec-php/ and download and install this plugin. Most likely, if you’re working with a tutorial this advanced, you know how to install plugins. But, if you don’t you’ll want to check out: http://codex.wordpress.org/Advanced_Topics#WordPress_Plugins_and_Customization as it explains how to install Wordpress plugins. Next, go to the Users menu —> Your Profile. On the Your Profile page, you can scroll down and see a setting for exec-php, you MUST tick this checkbox in order for the animated button to work, otherwise the code we generate will just come out as plain text.

Step 6
Once you’ve done this, you’re good to go. From now on when you want to display you’re moving download icon, just use the following code and swap out the download url. Then you just need to paste this in your post while editing it in HTML mode and not in Visual mode. These modes are toggled in the create a post page and appear on the upper right hand side of the post box where you type the post.

1

<a href=http://INSERTYOUROWNURLHERE><?php include("move.html"); ?></a>

That’s all folks! I hope that you’ve enjoyed this tutorial, and you have fun with your new Wordpress implementation. If for any reason you have difficulties with the execution of the php code, check the troubleshooting guide below:

Troubleshooting (2 Steps to Guarantee Success)
The following may only be necessary for some users: If you have trouble once you go through all of the tutorial, and can’t get the php code to display, then it’s because you admin user account on Wordpress does not have sufficient access to “unfiltered html”. To fix this, visit: http://bluesome.net/post/2005/08/18/50/#allow_execution install the plugin listed there, and follow the steps. And remember, most versions of Wordpress will work fine without this step, unless you used a faulty Wordpress Auto-installer from your Web Host. Some Auto-installers don’t distribute permissions correctly which could be what caused an error.

Can’t see the image behind the moving arrow? Then, your theme adds a background to linked images. This is a simple fix, in which you go into your stylesheet.css theme file, find a line of code that says something similar to “postimages a{“ or “postimg a{“ and delete the line that starts with background between the brackets.

Still having problems? Contact me on my blog: http://www.exoph.com and I’d be glad to help if you’ve made an honest effort yourself. This is an advanced tutorial, and it’s easy to see how someone could mess up along the process.

I hope you enjoyed my second tutorial here, and that you’ll use it to grow in your programming skills so you can add some awesome functionality to your designs.

John

Today i’m starting a new series of freebies : High-Res Textures, they’ll be all made by Callum Chapman founder of blog.callumchapman.com, he’s a new addition to the drawingclouds.com team and will offer you some great textures which are completely free to download and use in all your personal and commercial projects.

you wan find the download link at the end of the post

Here’s the download link for the 6 High-Res Scratched CD Textures Pack

On today’s tutorial i will be showing you how to create a wooden stack icon for your dock or any other programs using icons, we’ll use some wood textures and different filters to give a nice effect.

Step 1 – New Document
Open Photoshop and create a new document, I choose 1000×1000px with a white background; this size is good you can make more details, it’s better to downsize your icon at the end in order to use it on a dock.

Step 2 – Front Part
Create a new layer, name it Front and select the Rounded Rectangle Tool (U), choose 10px for the radius and select those options in the Tool option bar.

Create a rectangle shape then when you like it, use the Free Transform Tool (Ctrl+T) and the perspective option, right click on the shape and choose Perspective or Edit – Transform – Perspective and pull one of the top corners outside.

Step 3 – Top Front Part
Create a new layer, name it Top Front and select the Rounded Rectangle Tool (U) again with the same options we used in Step 2, instead of grey choose black for the colour, you can maybe change the radius to 9 or 8px if you want. Create a shape with a bigger Width and about 1/3 of the Front shapes for the Height. Place on top of the previous one. Use the Perspective option but this time pull one of the bottom corners outside.
Then right click on the layer and select rasterize when that’s done pick the Rectangular Marquee Tool and make a selection of the top part of the shape and delete it.

Step 4 – Top Front Shadow
Duplicate the Top Front layer, place the new one under the original and name it Top Front Under then with the Move Tool (V) move the shape down about 8px.
I’ve put it in red in the image to see it better but you should use black.

Step 5 – Top Part
Select the Rectangle Tool (U), create a thin horizontal bar of about 20px of height and the same width than the Top Front layer in black, then create a thinner vertical bar on the left, duplicate this bar and move the new one to the right. Finally merge those 3 layers and name the layer Top.

Select the Free Transform Tool Ctrl+T and use the Perspective option again Right Click – Perspective and pull one of the top corners inside. Place the layer under the Front layer.

Step 6 – Wood Texture
In this step we’re going to add a wood texture, first download the texture 7719-RikkDarkMoon by ~RikkDarkMoon then open it in photoshop and drag it into your document.
You’ll need to maybe resize it, use the Free Transform Tool (Ctrl+T), duplicate the texture layer and hide the new one we’ll use it after. Put the texture layer in front of the Front layer then right click on the texture layer and select Create a Clipping Mask, rename the texture layer Front Wood.

Unhide the duplicated texture, place in front of the Top Front layer and create a clipping mask, rename the layer Top Front Wood.

Step 7 – Sides
In order to give a better 3d effect, let’s create the sides, select the Pen Tool (P) and create a shape like me

Duplicate the shape layer and flip it the new one Horizontally, Edit – Transform – Flip Horizontal and place it on the other side. Finally name those layers Left Side and Right Side.
Place both layer under the Top layer.

Step 8 – Side Texture
For this step you can use the same texture we used all along, drag it again in the document, place it in front of the right side and with the Free Transform Tool resize it then use the perspective option, select one of the side middle square and move it up.

Then move the layer just in front of the Right Side layer and create a clipping mask, duplicate the clipped layer and flip it horizontally then move it on the other side and place the layer on top of the Left Side layer. Create a clipping mask like before and change the opacity of both texture layers to 90%.

Step 9 – Groups
Group all the layers except the background layer in a new group and name this group Stack 1, then make sure you’ve selected the Stack 1 group and press Ctrl+Alt+E this will create a new layer representing the group, name this layer Stack, Create a new group name it Stack 2 and place the Stack layer in it. You can now hide the Stack 1 group we won’t need it.

From now we’ll just work on the Stack 2 group

Step 10 – Back
When you’ll add your icons in the stack it’ll be better that they appear between the front and the side parts. Select the Stack layer and pick the Rectangular Marquee Tool, make a selection to select the sides like below.
Right click in the selection and select Layer via Cut, rename the new layer Back and place it under the Stack layer.

Step 11 – Radial Blur
Duplicate the stack layer and name the new one Stack Radial Blur then apply a Radial Blur on this layer, Filter – Blur – Radial Blur, Enter an Amount of 12, Blur Method Zoom and Good for the Quality. You can play with the parameters of course, it depends if you used the same texture or not. Change the Blend mode of the Stack Radial Blur layer to Darken and the opacity to 50%.

Step 12 – Erase Around
After applying the radial blur, you’ll have a part of the radial blur fading to much around the stack, it’s better to erase it, to do that make a selection of the stack layer to do that select the Stack layer and go to Select – Load Selection and click ok, then invert this selection, Select – Invert then go back on the Stack Radial Blur layer with the selection still active and press the delete key.

Step 13 – Burn Tool
Select the Burn Tool (O), with 65px brush, midtones and 50% for exposure, then on both Stack and Stack Radial Blur layers paint on some parts in order to darken them.

Step 14 – Shadow
Select the Ellipse Tool and with a black colour create a thin oval shape on the bottom of the stack, then apply a Gaussian Blur to it with 6,5px, Filter – Blur – Gaussian Blur. Name the layer Shadow Gaussian Blur and place it between the Stack and Back layers in the layer box.

Step 15 – Add Icons
For this step just add icons you like, I’ve added two icons from previous tutorials, the Adobe Box and the Dock Icon Folder, place your icons between the Shadow Radial Blur and the Back layers.

In order to use the Wooden Stack in a dock or as an icon, hide the white background layer or delete it and save your Stack as a PNG File

That’s it for this tutorial, you’ve got a nice wooden stack to put in your dock, send me your creations if you want, and I’ll post them at the bottom of the post.
Don’t forget to download the PSD file:

Similar Articles:
Create a Space Invaders Poster in Photoshop
Create a Watercolor Logo in Photoshop
Create an Adobe Box Icon in Photoshop
Create a Frilly 2009 Typo
Create a Retro is Future Poster in Photoshop
Create a Dock Icon Folder in Photoshop

Hi designers, in this tutorial You’ll learn how to create a Dark Soldier Illustration in Photoshop using some stock image, brushes and a few techniques.

Step 1 - The Inevitable New Document
Open photoshop and create a new document, I picked 1680×1050px to fit my screen resolution, but you can choose any size. Choose a transparent background.

Step 2 – Model
For this step, I used a stock photo made by mjranum-stock on deviantART that a represents a soldier with a gas mask, Download the image Future War m - 19 by mjranum-stock and open it photoshop. Double click on the layer with a little lock next to it and click Ok, this will allow you to modify the image. We’re going to cut out the soldier from the background then drag it into the document we created before. I often use the Pen Tool to cut out something but for this image you can easily do it with the Magic Wand Tool (W), so select the magic wand tool and select all the background around the model, invert the selection, Select – Invert Selection then create a layer mask, Layer – Layer Mask – Reveal Selection.

When you like the result select the Rectangular Marquee Tool and select all the bottom part of the model we won’t need it then delete it. Finally drag the soldier on the document we created in Step 1 and resize it with the Free Transform Tool Ctrl+T.

Starting now the preview images will show the centre of the illustration, so what’s appearing is just the illustration not all the wallpaper.

Step 3 – Background
Select the background layer and fill it with black, Edit – Fill – Black and rename the layer Background, you should rename the model layer Soldier.

Step 4 – Soldier Model
Select the Soldier layer, go on the layer mask and select the Brush Tool (B) with a big soft rounded brush of about 250px. Make sure you’re on the layer mask and your foreground colour is set to black. Paint on the model to hide the parts you don’t want like I did below.
I’ve painted on the edges, the eyes and hidden the part in the middle of the jacket.

Step 5 – Black and White Model
Duplicate the Soldier layer and rename the new one Soldier Black & White, Select the new layer and desaturate it, Ctrl + Shift + U or Image – Adjust – Desaturate. Then apply a the Gaussian Blur filter on it, Filter – Blur – Gaussian Blur with 1,5px and click ok, Change the blend mode of the Soldier Black & White to Overlay.

Step 6 – Layer Mask
Go on the layer mask of the Soldier Black & White layer and hide some parts like we did in Step 4, change the opacity of the brush to 50% before painting on the layer mask. You should have something like this.

Step 7 – Cloud Brush
For this step I used a cloud brush, you can find some on deviantART Photoshop Brushes section, If you download a brush, double click on the .abr file you’ve downloaded this will load it in the brush library. Create a new layer, name it Cloud Back and place it between the Soldier and Background layers, select the Brush Tool (B) and pick a cloud brush, then paint a cloud behind the soldier head, I just painted one white cloud but you can had more and use different colours, if you do that it’s better to create a new layer for each clouds.

Step 8 – Circle 1
In this step and the next one we’re going to create some circle shape. Create a new layer and name it Circle 1, then select the Ellipse Marquee Tool and create a Circle selection, hold the shift key while you make the selection. Fill the selection with white, Edit – Fill – White. Duplicate this layer and hide the new one we’ll use it in next step. Next add a Drop Shadow layer style on this layer, Layer – Layer Style – Drop Shadow and enter those parameters.

To add a fading effect on the Circle, select the brush tool with a soft rounded brush of about 100px and on both Soldier and Soldier Black & White layer masks and erase some parts of the soldier under the circle.

To finish the Circle 1, download the texture space 3 by ~SadMonkeyDesign-res, open it in photoshop and drag it into the document, Resize and rotate it with the Free Transform Tool Ctrl+T and place the part you like on top of the Circle 1, place the texture layer between Circle 1 and Soldier layers, rename it Stars and create a clipping mask on it, right click on the Stars layer – create a clipping mask. The clipping mask will allow you to move the texture easily, just select the stars layer and the Move Tool and move it like you want.

Step 9 – Circle 1 Blur
Select the layer we duplicated before, unhide it and place it under the Circle 1 layer, name it Circle 1 Blur and had Gaussian Blur filter on it, Filter – Blur – Gaussian Blur with 25px and click ok. Next add a Gradient Overlay layer style on the layer, Layer – Layer Style – Gradient Overlay and enter those values.

To finish, change the opacity to 30%.

Step 10 – Circle 2
Create a new layer, select the Ellipse Marquee Tool and make a smaller selection than the previous circle. Fill it with white and add a Gradient Overlay layer style to it, Layer – Layer Style – Gradient Overlay, and enter those parameters.

Place the circle next to the first one, rename the layer to Circle 2 and change the opacity to 50%. Place the layer between the Soldier and Stars layers.

Step 11 – Stars Background
For this step we’re going to use an other texture made by SadMonkeyDesign called Star Field 1 by ~SadMonkeyDesign-res, Open the texture in photoshop and drag it into the document. Resize it and place it behind the illustration, change the blend mode to Luminosity, then create a layer mask on it and with the Brush Tool (B) and a big soft rounded brush of about 750px paint on the layer mask with black around to hide the edges and just leave the centre behind the head of the soldier. Place this layer just in front of the Background layer and rename it Stars Background.

Final Preview

That’s it for this tutorial; you’re now a master of layer mask! Send me your creations I’ll post them under the tutorial.

Don’t forget to download the PSD file, if you need help leave me a comment I’ll try to respond as fast as possible.

Similar Articles:
Create a Space Invaders Poster in Photoshop
Create a Watercolor Logo in Photoshop
Create an Adobe Box Icon in Photoshop
Create a Frilly 2009 Typo
Create a Retro is Future Poster in Photoshop
Create a Dock Icon Folder in Photoshop

New wallpaper called Soldier in Space, I wanted to give a dark effect to it. I used some brushes and stock photos, the tutorial will be available in a few days

Desktop Version

1920×1200px

1680×1050px

1600×1200px

1440×900px

1280×1024px

1024×768px

New Domain, New Series, this month i’m starting a new series called Best Of Tutorials, Every Month i’ll try to pick the best published tutorials, trying to find different styles so you can learn a lot of different tricks.

For this month there’s a lot of Text Effects tutorials , all very different from each other. Try some of them and tell me if I did a good selection.

Create a Bright Retro Grunge Vector Illustration

Dance Photo Manipulation Part 1

Dance Photo Manipulation Part 2

Create Smoke Text

Create a Glossy Volt Icon

Awesome Milk Typography Effect

Photoshop Quick Tips #8: Making a Planet

How to Create an Imaginative, Magical Painted Scene

Create a Five-color Magazine Cover using a Spot Metallic

How to Create a Richly Ornate Typographic Illustration

Similar Articles:
20 Tutorials I Liked

Create an Abstract Color Wallpaper in Photoshop while learning new techniques and creating a custom photoshop brush.

New tutorial out of Imagination, Last day I was playing with photoshop, trying to make something nice and simple and that’s what came out, you’ll create an abstract wallpaper with shapes, textures and brushes.

Step 1 – New Document
Open Photoshop and create a new document with a transparent background, I choose 1680×1050px for the resolution, but you can choose the resolution you want, you’ll maybe need to tweak some parameters in a few steps.

Step 2 – Background
First fill the background layer with white, Edit – Fill – White. Next add a Gradient Overlay layer style to the layer, Layer – Layer Style – Gradient Overlay and enter those parameters.

Step 3 – Background Texture
We’re going to use a paper texture for the background, download the texture Grungy paper texture v.6 by bashcorpo, open the file in photoshop and drag it into the document. Place the layer in front of the grey gradient background layer. I just used the top part of the texture but you can rotate, resize the texture if you want using the Free Transform Tool Ctrl+T. Change the opacity to 20% and the blend mode to Multiply. Name the layer Paper Texture.

Step 4 – Paper Grunge Triangle
Create a new layer, and select the Custom Shape Tool, in the top bar select a triangle shape, if you don’t find it load all the custom shapes, you can do that by clicking on the little arrow in a circle then select all. Draw a triangle while holding the Shift key. When you’re done download the grunge texture Text 274 by ShadyMedusa stock. Open it in photoshop and place it in front of the triangle, then make a selection of the triangle by doing Ctrl+Left Click on the Vector Mask on the Triangle layer. Go on the texture layer and create a layer mask. You should have something like this

Add a Drop Shadow layer style to the texture layer, Layer – Layer Style – Drop Shadow.

Finally download a vintage newspaper image to put on the triangle, the image is Vintage News Paper II by LogicalXStock, drag it into the document resize it with the Free Transform Tool Ctrl+T if you need to and place the layer in front of the texture layer, then create a Clipping Mask, Right Click on the image layer – Create a Clipping Mask. Rename the layer to Vintage Paper.

Step 5 – Circles
Create a new layer and select the Ellipse Tool (U), draw a circle shape while holding the shift key then right click on circle layer and select Rasterize layer. Add a Gradient Overlay and a Drop Shadow layer style at the layer.

Place the circle on the bottom right corner of the triangle and name this layer Orange Circle.
Duplicate the Orange Circle layer and apply a Gaussian Blur Filter of 50px, Filter – Blur - Gaussian Blur.

Rename the layer Orange Shadow and create a layer mask on it. Select the Brush Tool (B) with a big rounded soft brush and black for your foreground colour, paint on the shadow, try to hide most of it but leave some on a side.

In order to create the next Ellipse just follow the same steps, just change the colours in the Gradient Overlay layer style like below:

For the name of the layer just name them Purple Circle and Purple Shadow and place them just in front of the Paper Texture layer, then select both layers and move the purple circle on the top left corner of the canvas.

Step 6 – Grungy Brushes
Next we’re going to add a simple grunge effect on the orange circle, create a layer mask on the Orange circle layer and select the Brush Tool (B). Pick a Grunge Brush, if you don’t have some, there’s a lot on deviantART brush section.
Make sure the black colour is your foreground colour.
Tip: to reset the colours to black and white, just press the D key.
Then just paint on the layer mask of the orange circle layer, this will hide some parts of the circle.

Step 7 – Rainbow Shadow
Create a new layer, pick the Rectangular Marquee Tool (M) and make a selection of about half the canvas, then select the Gradient Tool, choose some colours, 5 or 6 different colours is better, then draw a gradient in the selection, name the layer Rainbow and deselect Ctrl+D.
Next apply a Gaussian Blur Filter to it of about 150px.

Then use the Free Transform Tool Ctrl+T to rotate and resize the rainbow. Place the rainbow on the top left of the canvas and create a layer mask on the layer, select the Brush Tool with a big rounded soft brush of 600px and paint the edges of the rainbow. Name this layer Rainbow Shadow and place it in front of the Texture Background layer.

Step 8 – Soft Triangle
Create a new layer and select the Custom Shape Tool with a triangle shape like in step 4, draw a triangle shape while holding the shift key, then apply an Outer Glow layer style to it.

Lower the Fill of the layer in the layer box to 0%, name the layer Neon Triangle and place it between the Purple Shadow and Rainbow Shadow layers. Rotate and resize the triangle with the Free Transform Tool and place it under the Purple Circle on the top left corner.

Step 9 – Abstract Shapes
In this step we’re going to create some triangle shapes with the Pen Tool, create a layer for each shape, select the pen tool with those options in the option bar and just draw a shape.

You can easily change the colour of the shape by double clicking on the little colour box in the layer panel. I’ve added a Gradient Overlay layer style on one of the shape and Drop Shadow layer style on all the shapes layers to give a 3d effect at the wallpaper. Rotate the shapes and place them where you want.

Step 10 – Create a Brush
On a new layer, create a shape with Pen Tool, when you’re done, right click on the layer and select Rasterize. Then make a selection of the shape and go to Edit – Define Brush, change the name if you want and click ok. Next select the Brush Tool and open the Brush Panel, select the brush you just created and enter those parameters, you can play with the values if you want, when you’re done save your brush.

Create a new layer and with the Brush Tool, select your new brush and paint where you want, you can add a Gradient Overlay layer style on the layer if you want. Finally drag back the paper texture we used for the background resize it and place on top of the brush shape layer, then just create a Clipping Mask and change the Blend Mode to Multiply.

Step 11 – Paint Splat
Select the Brush Tool and with a splat brush, just paint a few splatters on the canvas, name the layer Paint Splat. I’ve left the splatters in black. Just save the document, if you want to use it as wallpaper just save it as a JPG or PNG file.

Final Preview with Layer Panel

That’s it for this tutorial, I hope you appreciated it and learned some new tricks, send me a link to your creations, I really like seeing what the readers create. Don’t forget to download the PSD source file for help:

Similar Articles:
Create a Space Invaders Poster in Photoshop
Create a Watercolor Logo in Photoshop
Create an Adobe Box Icon in Photoshop
Create a Frilly 2009 Typo
Create a Retro is Future Poster in Photoshop
Create a Dock Icon Folder in Photoshop

Create a Space Invaders Poster while learning how to use the the refine edge, poster edges and spherize tools using some textures and a few techniques.

Fresh tutorial just out of the clouds, use some textures and stock photos to create a nice space poster.

Step 1 – New Document
Open Photoshop and create a new document with a transparent background, I choose 1040×1200px to fit the dimensions of the site.

Step 2 – Space Girl Model
We’re going to use a stock image for the model, download the image Space Cadet - 3 by mjranum-stock, when you’ve downloaded the image open it in photoshop, stay on this document and double click on the layer with a little lock next on it and click OK.

You need to cut out the space girl from the image, I usually use the Pen Tool to cut out something but you can use the technique you prefer. If you’re not really good at cutting of the model you can use my file with just the model, Download it here. Drag the cut out model into the document we created in step 1, name the layer Space Girl, place de model in the bottom right corner and resize it with the Free Transform Tool Ctrl+T.

Step 3 – Model and Refine Edge
Select the Space Girl layer and make a selection of it, Ctrl+Left click on the little preview thumbnail next to the layer, go to Select – Refine Edge or Alt+Ctrl+R, this tool helps you correct the edges of any selection you’ve made, enter those parameters in the box, of course you maybe need to play a little bit with the parameters to fit my result.

Keep the selection on and create a layer mask on the Space Girl layer, click on the layer mask icon in the layer panel or go to Layer – Layer Mask – Reveal Selection. This will allow you to modify the image without a loss of the original image.

Step 4 – Poster Edges Filter
Select the Space Girl layer and place the model in the down right corner, then duplicate this layer, name the new layer Space Girl Edges and go to Filter – Filter Gallery and select the Poster Edges filter. Play with the parameters till you like the result. Change the blend mode of the Space Girl Edges layer to Darker Color.

Select a the Brush Tool (B) with a big soft brush, make sure your foreground colour is set to black, put the opacity to around 30% and paint on both Space Girl and Space Girl Edges layer mask on the centre of the helmet area, this will hide some parts of the helmet.

Step 5 – Helmet Reflection
Download a planet style image, I choose a stock image from Caprica Stock by Moonchilde-Stock, open the image in photoshop, drag it into the poster document, name the layer Planet in Helmet and resize it so it’s a bit bigger than the helmet.
Then go to Filter – Distort – Spherize and enter those values. If the effect is not good enough, apply the filter again.

Place the image just in front of the helmet and create a layer mask on the Planet in Helmet layer. Select the Brush Tool, with a soft brush and black for the colour and paint on the layer mask to erase to part of the image around the helmet.

Create a new layer and select the pen tool, draw a shape to make the reflection in white and lower the opacity to 10%

Step 6 – Background
Now we’re going to add texture to make the background, first download the space texture Space 1 by SadMonkeyDesign-res, open it in photoshop and drag it into the poster document. Name the layer Space Background and place it behind the other layers. Use the Free Transform Tool Ctrl+T to resize and rotate it.

Step 7 – Planet
Download a planet image, I’ve choose a planet made by superiorgamer, you can find it here, name the layer Planet Earth and place it in the bottom left corner, resize and rotate it. Create a layer mask on the layer and with a soft brush soften a little bit the edges of the planet.

Duplicate the Planet Earth layer and use the same Poster Edges Filter we used in Step 4, play with the parameters, click Ok and change the opacity to 60%.

Step 8 – Text
Select the Text Tool (T) and pick a font, I choose the Neon Font, type some text, I used a different layer for each words. When you’re done select your text layers and press Ctrl+Alt+E, this will merge the text layer in a new layer. Apply some Drop Shadow and Colour Overlay Layer Style to the layer by double clicking on the layer, Name the layer Star Text when you’re done.

Duplicate the Space Background layer and place the duplicated layer in front of the Star Text layer, resize and rotate it. Next Right Click on the layer and select Create a Clipping Mask.

Step 9 – Highlights
Select the Brush Tool (B) and with a big soft brush with around 300px, make sure the foreground color is set to white an the opacity to 50% in the brush options. Go on the Space Girl layer and paint on the edges with a white colour.

And we’re done, I hope you liked the tutorial and learned some new techniques, If you’ve got any question leave a comment, send me your creation if you want I appreciate seeing what the readers do. You can download the PSD source file:

Similar Articles:
Create a Watercolor Logo in Photoshop
Create an Adobe Box Icon in Photoshop
Create a Frilly 2009 Typo
Create a Retro is Future Poster in Photoshop
Create a Dock Icon Folder in Photoshop
Create a Colorfull Pastel Typo in Photoshop

Create a Watercolor Logo, using different watercolor and paper textures learning different techniques on brushes and layer mask.

A few weeks ago I created a wallpaper for the site, I thought it could make an interesting tutorial for every level designers, I hope you’ll appreciate the creation.

Step 1 – New Document
Open Photoshop and create a new document with a white background, mine is 1680×1050px so it fits my screen resolution.

Step 2 – Logo
Create a new layer and select the Text Tool (T), I used the Bifurk font; I already used it in a previous tutorial. Write your text; use a different layer for each letter so you can work on each one separately, I just used two layers with a D and a rotate G to represent a C for drawing clouds. Put each layer with a letter in a folder for each one of them. Rasterize both letters layers by doing right click – Rasterize.

Step 3 – Gradient and Rotation
I’m going to explain how to give a nice effect on the D. You’ll just have to repeat the same process for the other letters.
Duplicate the D layer twice, Use the Free Transform Tool Ctrl+T and rotate the two duplicated layer with about 6,5° for the first one and -6,5° for the other one. Name the duplicated layer d_01 and d_02

Add a Gradient Overlay layer style to those 2 layers. You can play with the angle and the colours.

Change the opacity of both layers to 50% and place them under the original D layer, Repeat the same process for the other letters.

Step 4 – Blur
Select the 2 gradient layers we just created before and press Ctrl+Alt+E, this will create a new layer, place it under the d_02 layer and apply a Gaussian Blur to it, Filter – Blur – Gaussian Blur with 3px, name this layer d Blur and change the opacity to 50%.

Do the same for the other letters, when you’re done select the entire letter folders but make sure the black letters layers are hidden, Ctrl+Atl+E and apply a 30px Gaussian Blur, place this layer under all the folders and name it Logo Blur, Change the opacity to 40%.

Step 5 – Watercolor Texture
I’ve used two watercolor textures from sadmonkeydesign-res’s deviant art gallery for this step, you can find them Here and Here, when you’ve downloaded both textures files, just open them in Photoshop. Drag the orange/pink texture into your document, resize and place it on top of the logo layers, make a selection of the D layer by doing Ctrl+Left click on the little thumbnail preview in the D layer, then with the selection still active, press Ctrl+Shift+left click on the G layer preview thumbnail in the layer panel, finally go back on the texture layer and create a layer mask, Layer - Layer Mask - Reveal Selection and change the opacity to 80%.

Drag the other texture and place the layer under the first texture. Make a selection of the d_01, d_02, c_01 and c_02 with the same process we used for the previous texture and create a layer mask on the blue texture, then change the blending mode of the layer to Overlay. When you’re finished hide the two original letters layers.

Step 6 – Background Textures
We’re not done with textures; we’re going to do the background now. You’ve got to download 2 more textures, download the 10 old paper texture by `Bleeding-Dragon pick one of those textures, I choose the paper2 one and drag it in your document, rotate it 90°, Edit – Transform – Rotation 90°. Place the texture layer in front of the background layer.
Next download a texture from ShadyMedusa-stock’s deviantArt gallery , resize and rotate it with the Free Transform Tool and place the layer in front of the first texture layer, change the opacity to 30%.

Step 7 – Lines
Create a new layer, select the Rectangle Tool and create a white thin stripe, duplicate this layer 3 times, each time move the new layer a little bit to the right, so you’ve got 4 stripes with the same spacing. Merge the 4 stripes layer and then duplicate the merge layer, place the new stripes under the original ones, you should have something like this.

Step 8 – Texture on lines
Select both stripes layers and use the Free Transform Tool Ctrl+T to rotate them, place them like on the image, then download an other watercolor texture Here, open it in photoshop and drag it into the document, place it on top of the first stripe layer, rotate and resize it with the Free Transform Tool, and create a Clipping Mask, Right click – Create a Clipping Mask, this will mask all the watercolor parts out of the stripes shape.

Step 9 – Layer Mask
Make a selection of all the D layers, D, d_01 and d_02 and invert the selection then create a layer mask on both stripes layers with this selection.

Step 10 – Paint Splat on Logo
Download some photoshop paint splat brushes, you can find some on deviantART Brush Library, to load them in photoshop, just double click on the .abr file you’ve downloaded or go on the brush library and click on load brushes. I used a new layer for every splatter and used the colours from the textures. When you’re done with the splatters, just create a new folder, name it Paint Splat, place all the splat layers in it and place it in front of the stripes.

Step 11 – Background Paint Splats
Create a new layer, name it Paint Brushes and place it just in front of the textures. Select the Brush Tool (B) and paint some more splat on all the canvas, when you’re done duplicate the watercolor texture layer in the stripes folder and place the layer in front of the Paint Brushes layer, Right click on it and select Create a Clipping Mask.

I hope you liked the tutorials, contact me for any questions and send me a link to your creations, I really appreciate seeing what people learn in my tutorials. You can download the PSD source file:

Similar Articles:
Create an Adobe Box Icon in Photoshop
Create a Frilly 2009 Typo
Create a Retro is Future Poster in Photoshop
Create a Download Icon in Photoshop
Create a Dock Icon Folder in Photoshop
Create a Colorfull Pastel Typo in Photoshop
Create an Origami Swan Logo in Photoshop

Create an animated cloud icon in PHP using the existing cloud icon tutorial PSD File.

Welcome to my first tutorial for DrawingClouds. I’m very happy to be hear, and to be adding some interactivity to some of the other projects that are already on the site. So, shall we dive right in?

Step 1
First, we’re going to take the PSD form the tutorial here.

Step 2
Now, we’re going to take our image, cut off the arrow and paste it to a new layer and then make that layer hidden, then lengthen the green stem and save it as “1.png” without the quotes or course. First, make sure that you crop your image to 262 wide by 353 tall in pixels. This is the optimum size for this tutorial, and is necessary for everything to line up in the end. If you change the dimensions here, be sure to do so in the final html file as well.

Step 3
Next, we’re going to go back, unhide the arrow layer, and hide the others. You may want to slide the arrow down a tad so it lines up with the longer stem. Save this as “2.png”. Once again, make sure that you crop your image to 262 wide by 353 tall in pixels. This is the optimum size for this tutorial, and is necessary for everything to line up in the end. If you change the dimensions here, be sure to do so in the final html file as well.

Step 4
Now, we’re ready to start the actual coding. For the purpose of this tutorial, we’re going to use JQuery. Below is the code. you should name it “jquery-1.2.6.min.js”. Don’t worry if this scares you. This is a preset code sample, sort of like Wordpress for blogging, this is JQuery for animation.

Download the JQuery Sample Here

Step 5
Let’s dive right into the code. First, I’ll show you the JQuery code to get you started. It automatically searches for our base image, and places it over the new image. Set the “20″ in animate to a higher number if you want the arrow to go lower, and a lower number to make it animate higher. You can also change “600″ in duration to change the speed of the animation. Note! - Please don’t use 1, or it might cause a seizure. Seriously, it can be damaging to certain users who might be prone to seizures.

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
$(function() {
$('ul.flow li').hover(function(){
$(this).find('img').animate({top:'20px'},{queue:false,duration:600});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:600});
});
 
});
</script>

Step 6
Now, we’re going to dive into the CSS, this will add our basic styling, and allow us to change some visually appealing settings that make our download “box” even more unique. The below is just the framework. Make this project yours, and add some background colors and image effects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

ul.flow li {
list-style:none;
background: url("1.png");
width:262px;
}
 
ul.flow li a {
 
display: block;
position: relative;
height: 353px;
width: 262px;
}
 
ul.flow li a { text-decoration: none; }
 
ul.flow li img {
position: absolute;
border: none;
 
}

Step 7 Finally, let's add our basic HTML to display all of our hard work. The following are just basic HTML tags, so there shouldn't be much trouble figuring out what's going on. Just upload this file, both 1.png and 2.png, and jquery-1.2.6.min.js and you're animated cloud download logo is complete. (The style and Javascript in steps 5 and 6 is just for explanation, it's already included in this step for ease of use. )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Float</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul.flow li').hover(function(){
$(this).find('img').animate({top:'20px'},{queue:false,duration:600});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:600});
});
});
</script>
<style media="screen">
ul.flow li {
list-style:none;
background: url("1.png");
width:262px;
}
ul.flow li a {
display: block; 
position: relative;
height: 353px;
width: 262px;
}
ul.flow li a { text-decoration: none; }
ul.flow li img {
position: absolute;
border: none;
}
</style>
</head>
<body>
<ul class="flow">
<li><a href="http://drawingclouds.comyr.com/?p=291"><img 
src="2.png" alt="Awesomeness!" /></a></li>
</ul>
</body>
</html>