Hey Guys, here’s a small freebie Speedometer Dock Icon I created a few weeks ago, I wanted to give a nice metal feeling using some textures and used some vibrant colours.

I’ve also published the Photoshop tutorial that explains the design process on rnel.net : http://www.rnel.net/photoshop-tutorials/create-a-speedometer-icon-in-photoshop

You can download the icon in 4 sizes: 64×64 – 128×128 – 256×256 – 512×512

Hey Guys, here’s a new Photoshop and Illustrator Tutorial on drawingclouds.com. In this Tutorial, you’ll learn how to create a Vector and Retro Mix Poster using some stock image, textures and creating some vector shapes in Illustrator.

A few days ago I created a Poster mixing light effects and vector shapes; I was thinking it could be nice to write a tutorial to share the creative process and techniques I used.

Resource Needed for this Tutorial:
- I Look Just Like Buddy Holly 1 by ~LL-stock
- Darkroom Texture Pack by =cloaks
- Starfield by ~TBH-1138
- Grungy paper texture v.5 by ~bashcorpo

Step 1 – Model Stock Image
For the poster we’ll use a stock image I found on deviantART called I Look Just like Buddy Holly 1 by ~LL-stock, you can find the link to download it in the Resources Needed Section, when you’ve downloaded the image, drag it into photoshop, we’re going to modify it before using it for the poster. I wanted the model to be exactly symmetric, select the Rectangular Marquee Tool (M) and make a selection of the right half part of the model and delete it, Downsize the height of the left part we still have using the Free Transform Tool (Ctrl+T). Next duplicate the layer (where you’ve got the left part of the model) and flip it horizontally using the Free Transform Tool (Ctrl+T) or Edit – Transform – Flip Horizontal, move it on the right to recreate the model. Save the new image we’ll need it for the next steps.

Step 2 – Vector Hair
Next I used Illustrator; you can use photoshop to create the vector parts of the model if you don’t have Illustrator. Open Illustrator and create a new document with the A4 Paper format, then drag the model image we saved in step 1 into the document. Let’s now create the vector hair of the model. I used the Pen Tool (P) to create the hair in black, just take you time and create some nice hair.

I wanted to add some colour highlights on the hair using the Pen Tool (P) again, create some pointy shapes on the hair to recreate some highlights. When that’s done add some gradient on those shapes, I used the same gradient for all the shapes with purple colours.

Step 3 – Glasses Part 1
Let’s now use the model to help create some vector glasses with highlights and shadows, its better if you keep the shape of the glasses from the model. Select the Pen Tool (P), and create the left part of the glasses, I created them in red in the tutorial so you can see the details better. When you’ve done the left part duplicate it, flip the new one vertically, Object – Transform – Reflect – Vertical. Move the right part so it looks like you have glasses on the model, next select both glasses parts and Unite those 2 shapes using the pathfinder.

Duplicate the glasses shapes and change the colour of the one to white, we’re going to use this shape to give an highlight effect of the glasses, when you’ve got your new shapes of glasses in white, select the Pen Tool and create a shape on the glasses of the part you don’t want to keep for the highlight. When that’s done select the white glasses and the new shapes then Subtract them using the Pathfinder. Change the opacity of the white shape to 10%.

Select the Pen Tool and create a shape in the middle of the glasses to give more depth, when you’ve created this shape place it behind the glasses in the layer panel.

Step 4 – Glasses Part 2
Next we’ll create the lenses, select the Pen Tool (P) again and create the left lens in the glasses with a black colour, when that’s done, change the opacity of the lens layer to 50%.

Duplicate the lens twice, change the colour of both new layers to white and the opacity to 20%, then select one of those new white lens, and move it a little bit in the bottom, some part of this lens is going over the glasses, select this lens and with the pen tool create some new points on the path then with the Direct Selection Tool (A) move the new points on the glasses shape, repeat the same process with the other white lens shape, but this time move it on the top. Make sure the 3 lens layers are behind the glasses layer.

Duplicate the 3 lens layers, to create the lens on the right part of the glasses, flip those 3 duplicated lens layers Vertically, Object – Transform – Reflect – Vertical.

Step 5 – Details
Next I created a few details of the model, eyes and wrinkles using the brush tool, start by creating the eyes outlines on a layer, then the wrinkles on an other layer, then create a new layer behind the outlines and wrinkles and with the pen tool create a shape for the inside of the eyes.

When all that’s done, just hide the model layer, we’ll wont need it anymore to work on illustrator, select all the vector parts we just created and copy them, Edit – Copy then save the document and go back to photoshop.

Step 6 – New Document and Background
Now we’re back in photoshop, let’s start the poster. Create a new document; I used the A4 format with 300dpi, that’s if you want to print the poster after otherwise just choose 72dpi, make sure the new document as a Transparent background. Next fill the only layer with black, Edit – Fill – Black and rename the layer Background.

Step 7 – Background Texture, Vector and Layer Mask
Next we’ll use a texture from a texture pack called Darkroom Texture Pack by =cloaks, we’ll use texture number 3 from this pack for this step and texture number 1 for a next step. Drag texture number 3 in photoshop, place it on the top part of the poster and use the Free Transform Tool (Ctrl+T) to resize and rotate it. Rename the texture layer Darkroom Texture; place this layer in a new group named Top Part – Vector.

Next paste the vector hair and glasses we created before in Illustrator on the poster, rename the layer Hair and Glasses.

Use the Polygonal Lasso Tool (L) to create a selection that looks like a torn paper edge, when you’ve created this selection, select the Darkroom Texture layer and create a layer mask, Layer – Layer Mask – Reveal Selection. Apply the same layer mask on the Hair and Glasses layer.

Step 8 – Model
We’re going to use the model image we saved in Step 1, open the model image in Photoshop and drag it into the poster document. Use the Free Transform Tool to resize it, rename the layer Model and place it in a new group named Bottom Part – Photo, Place this group between the background layer and the Top Part – Vector group. Use the Polygonal Lasso Tool to Make a selection around the model then create a layer mask on the model layer to cut out the model form the background, Layer – Layer Mask – Reveal Selection.

Duplicate the Model layer, Rename the new layer Model Desaturate 50%, then Desaturate the new layer, Ctrl+Shift+U and fade the desaturate, Edit – Fade Desaturate with a 50% value.

Duplicate the Model layer again, rename the new one Model Desaturate, Desaturate this layer, Ctrl+Shift+U then change its blending mode to Overlay and its opacity to 50%.

Duplicate the Model layer one more time, place the new one on top of all the other model layers, rename it Model High Pass and apply a High Pass filter on it with a 7px radius, Filter – Other – High Pass. Change its blending mode to Overlay and its opacity to 50%.

Merge all the model layers when you’re finished, rename the merged layer, Model Merged.

Step 9 – Model Gradient Map
Next let’s add some grey tone to the model, create a Gradient Map Adjustment going from white to black, place it in front of the Model Merged layer, then create a Clipping Mask, right click on the Gradient Map Adjustment layer and select Create Clipping Mask. Change its Blending Mode to Color and the opacity to 50%.

Step 10 – Background Texture and Colour
Let’s use the texture number 1 from the Dark Room Texture pack we used in Step 7, open texture number 1 in Photoshop, then drag it into the Poster document. Use the Free Transform Tool to rotate and resize it. Rename the layer Darkroom Texture and place the layer under the Model Merged layer in the Bottom Part – Photo group.

Create a new layer, place it in front of the Darkroom Texture layer, fill it with a purple colour, Edit – Fill – Color and choose the color you like. Change its Blending Mode to Screen.

Now let’s add some stars on the background, I used a texture called Starfield by ~TBH-1138, you can find the link to download it in the Resources Needed section. Open the texture in photoshop then drag it into the document, resize it with the Free Transform Tool, when you like the result change its blending mode to Color Dodge, Duplicate this star layer and with the Free Transform Tool resize it a little bit to make the stars bigger. Rename both layers Stars 1 and Stars 2. Place all the background layers in a new group named Background.

Step 11 – Custom Vector Shapes Part 1
Let’s switch back to Illustrator, we’ll create some Colorfull custom shapes to give a little bit of colour on the poster, I’ll just explain quickly how I did those shapes, be creative and create yours if you want. Create a new document or create a new artboard on the document we created before. Select the Pen Tool in illustrator and create five triangles shapes of the top left quarter of the canvas, next duplicate those 5 shapes, flip them Vertically, Object – Transform – Reflect – Vertical and move them in the top right of the canvas, select all the triangles duplicate them, then place them on the bottom and rotate them 180°, Object – Transform – Rotate – 180°. You should have something like this:

Step 12 – Custom Vector Shapes Part 2
Next we’ll use the shapes we created in Step 11 and cut them out using circles, the better thing to do for this process is to duplicate the original shapes each time you need to work on them, duplicate the original triangle shapes, then create 100x100px perfect circle using the Ellipse Tool (L), you’ll one circle for each triangle so duplicate this circle 19 times to have 20 circles. Select one of the triangles and a circle, then press the Intersect button in the Pathfinder panel. It can be a long process but the result is nice, repeat the same process for each 19 other triangles.

When that’s done, put all the small triangles we just created in a new layer or group and rename the layer 100px, duplicate this layer, rename it 200px, select all the duplicated triangles from the 200px layer and resize them to 200x200px to finish rotate them 180°. Repeat the same process to create triangle 300x300px, 400x400px, 500x500px and 600x600px. Duplicate the original big triangle we created at the beginning and place them behind the 100px layer.

Step 13 – Custom Vector Shapes Part 3
Now let’s delete some parts of the triangles, use the Direct Selection Tool and have fun just delete parts of the triangles and play with the colours.

When you’re done select the shapes you want to put in the poster, copy them, Edit – Copy and save the illustrator file.

Step 14 – Shapes in Photoshop Part 1
Switch back to Photoshop on the poster document; paste the custom vector shapes we just created, rename the layer Lines v1, and place the layer in the Top Part – Vector group between Darkroom Texture and Hair and Glasses layers. Add the same layer mask on this layer that we added on the two other layers in this group.

Step 15 – Shadows
Let’s add some shadow between the top vector part and the bottom part, create a new layer between both Top Part and Bottom Part groups, rename this layer Shadow 1. Use the Rectangular Marquee Tool (M) to create a horizontal rectangle selection in the middle of the poster and with the Brush Tool (B), a soft rounded brush of about 300px and black for the colour paint with the edge of the brush in the selection to give a nice shadow effect.

Duplicate the Shadow 1 layer, rename the new layer Shadow 2 and use the Free Transform Tool to resize it a little bit.

Step 16 – Shapes in Photoshop Part 2
Paste the custom shapes we created in Illustrator again, rename this layer Lines v1 and place it in a new group named Lines, then place this group in the Bottom Part – Photo group behind the Model. Duplicate the Lines v1 layer, add a Radial Blur filter on it, Filter – Blur – Radial Blur, with an amount of 45 and Zoom for the blur method. Rename this layer Lines v1 Radial Blur, change its Blending Mode to Screen and place the layer under the original Lines v1 layer.

Duplicate the Lines v1 layer again, rename it Lines v1 Gaussian Blur 1, next apply a Gaussian Blur filter on it with a 55px radius, Filter – Blur – Gaussian Blur. Change its Blending Mode to Overlay and place this layer under the Lines v1 Radial Blur layer.

Duplicate the original Lines v1 layer again, flip it Horizontally, Edit – Transform – Flip Horizontal, then apply a 45px radius Gaussian Blur on it, rename the layer Lines v1 Gaussian Blur 2, place it under the Lines v1 layer and change its fill to 40%.

Step 17 – Light Lines
Let’s add some light lines on the shapes and the model to give a more futuristic feeling. Select the Pen Tool and start creating some lines on the bottom part custom shapes, the better thing to do is opening the Paths window while you work on the lines, and each time you want to create a new line reselect the same Path. When you’re done select the Brush Tool with a soft rounded brush of about 3 to 5px, then reselect the Pen Tool, make sure you’re using white for the color and that you’ve created a new layer, right click on one of the lines and select Stroke Path, check the box next to Simulate Pressure and click OK. Rename the layer Light Lines 1, place this layer in a new group named the same and change the Blending Mode of the group to Color Dodge.

Add some layer styles on those lines to give some color. I added the Inner Shadow, Outer Glow, Inner Glow and Color Overlay layer styles, double click on the Light Lines 1 layer and enter those values:

Add some other light lines on the models shirt; repeat the same process that we just used.

Step 18 – Old Paper Texture
I really like adding a texture at the end of each poster I create; this time we going to add a texture called Grungy paper texture v.5 by ~bashcorpo, you find the link to download it at the beginning of the tutorial in the Resources Needed section. Open the texture in Photoshop, drag it into the poster document, place the texture layer on top of all the others, rename the layer Retro Texture, change its Blending Mode to Multiply and its opacity to 50%.

That’s it for this tutorial, I hope you had fun creating this poster and learned some new tricks; you’re now one step closer to becoming a Photoshop Ninja. Leave me a comment if you’ve got any questions or need help, also send me a link to your posters, I’ll posts them at the end o the tutorial. You can download the PSD File if you need help:

Hey Guys, Here’s the first tutorial of drawingclouds.com 2.0. In this Photoshop Tutorial, you’ll learn how to create a Fantasy Wallpaper using some stock images and some nice tricks.

A long time ago I created a wallpaper called Fantasy Out the Door, I thought it could be nice for me to share the process to create it. You’ll learn how to use some stock images, photoshop brushes and blend them all together to create a nice wallpaper

Resource Needed for this Tutorial:
- Old Dark Room by ~blOntj
- Fort Casey Tunnel Doors by ~mousgal
- Stock 69 by *UmbraDeNoapte-Stock
- Another Whitsunday view by Sam
- Key West Seascape II by Winterdove
- Grassy Field by ~FoxStox
- Stock 218 by ~sophia-T
- Light Beams Photoshop Brushes on deviantART

Step 1 – THE New Document and Background Colour
Let’s Start by opening photoshop and create a new document, I choose 1680x1050px with a transparent background. Then fill the background with white, go to Edit – Fill – White and rename the layer Background.

Step 2 – Dark Room Stock
To add a grunge/dark feeling to the wallpaper, I used a stock image called Old Dark Room by ~blOntj; you can find the link to download it in the Resources Needed section. When you’ve downloaded the image, open it in Photoshop and drag it into the document, use the Free Transform Tool (Ctrl+T) to resize it and rename the layer Dark Room.

Step 3 – Old Metal Door Part 1
Let’s now use a stock image called Fort Casey Tunnel Doors by ~mousgal for the door, download the image then open it in photoshop. Use the Polygonal Lasso Tool (L) to make a selection around the door, then when you’re done create a layer mask on the door layer, Layer – Layer Mask – Reveal Selection, Drag the Door into the wallpaper document.

Now we’re got a door, Use the Free Transform Tool (Ctrl+T) to resize and rotate it a bit, next rename the door layer Door 1 and change its Blending Mode to Multiply, Then duplicate the Door 1 layer, rename the new one Door 2 and change the blending mode to Overlay and its opacity to 60%.

Step 4 – Old Metal Door Part 2
You can see that the door is a little bit transparent in the bottom, so you can see some of the wall, pick the Smudge Tool with a soft rounded brush then select the Dark Room layer and start using the smudge tool on the bottom part of the wall to hide the lines.

Next let’s create the hole in the wall, select the Polygonal Lasso Tool (L) and make a selection of the inside of the door. Make sure you’ve got the Dark Room layer selected and create a layer mask, Layer – Layer Mask – Hide Selection.

Step 5 – Fantasy Landscape
Let’s create the Fantasy Landscape, for this step I use 3 stock images: Stock 69 by *UmbraDeNoapte-Stock, Another Whitsunday view by Sam and Key West Seascape II by Winterdove. When you’ve downloaded the 3 images, open the first one in photoshop (Stock 69 by *UmbraDeNoapte-Stock), we’ll just need a small part of this image for the wallpaper. Select the Polygonal Lasso Tool (L) and make a selection of the hills, next create a layer mask to hide the rest of the image, Layer – Layer Mask – Reveal Selection.

Drag the hills in the document. Place the hills layer behind the Dark Room layer, rename the layer Hills and place it in a new group named Landscape. Move the hills in the middle of the door.

Next open the Another Whitsunday view by Sam image in Photoshop and with the same process we use before, use the Polygonal Lasso Tool to make a selection of the Mountain and sea part of the image, next create a layer mask, Layer – Layer Mask – Reveal Selection. Drag the image into the document, place the sea behind the hills, rename the layer Sea and place it in the Landscape group behind the Hills layer.

To finish the landscape, open up the Key West Seascape II by Winterdove image in Photoshop, drag it into the document, then place the sky behind the sea, Use the Free Transform Tool (Ctrl+T) to resize it, rename the layer Sky and place it in the Landscape group behind the Sea layer.

Step 6 – Grey Part
Just to give a light grey feeling on the landscape I added a grey layer with low opacity, create a new layer in the landscape group in front of all the others, fill the layer with grey and rename it Grey. Next make a selection of the Sea and Hills layers by selecting the Polygonal Lasso Tool (L) and create a selection of the Hills and Sea. When you’ve got a selection create a layer mask on the grey layer with it to finish change the opacity of the grey layer to around 12%.

Step 7 – Grass
That’s the fun part of the tutorial, creating the effect of the grass growing in the room, to create the grass I used a stock image called Grassy Field by ~FoxStox. Open the image in Photoshop then drag it into the document, Use Free Transform Tool to downsize its Height and place the grass under the door. Rename the layer Grass and place it between the Dark Room and Door 1 layers.

Next create a blank layer mask on the Grass layer, select the Brush Tool (B) with a soft rounded brush and black for the colour, make sure you’ve got the layer mask selected, and start paint on the grass, paint on the part you want to hide, when you like the result select the grass layer.

Next we’ll add some shadows and highlights on the grass using the Dodge and Burn Tools. Pick the Dodge Tool with a 10% Exposure and a Soft Rounded Brush and start painting the highlights on the grass when you’re done select the Burn Tool with a 50% Exposure and a Soft Rounded Brush as well and paint to create the dark/shadow parts on the grass.

Step 8 – Hole
Let’s create the hole in the wall, create a new layer, then with the brush tool try to create a grunge old shape. When you’re done, make a rounded selection in the middle of the shape you just created and create a layer mask of the hole layer. Keep the selection you just created active and select the Layer Mask on the Dark Room layer, and fill the selection with black, this will permit us to add an image behind the hole.

To finish duplicate the Sky layer in the Landscape group and move the duplicated sky on the hole using the Move Tool (V) so it looks like there’s sky behind the hole.

Step 9 – Light Beams
In this step we’ll add some light on the wallpaper; I used some light beams photoshop brushes I found on deviantART, you can find a link in the Resources Needed section of a light beam search in the photoshop brushes section of deviantART, when you’ve downloaded some light beams brushes, load them in Photoshop. Create a new layer, name it Light Beam and paint a light beam in the top middle part of the landscape, when you like the light beam, you’ll have to hide the parts of the light beams on the doors, make a selection of the hole in the middle of the door and create a layer mask on the light beam layer.

Next create a new layer, rename it Light Beam as well, reselect the Brush Tool (B), and select a light beam brush, this time we’re going to create the light beam that is going to appear on the doors. When you’ve painted some light beams on the doors, make a selection of the doors and create a layer mask to hide the part of the light beam outside the doors. Change the opacity of the light beam on the door layer to about 20%.

To finish with the light beams we’ll add one coming out of the small hole in the wall, create a new layer and add a light beam in the wall when that done if you need to erase some parts of the light beam create a layer mask on this light beam layer and with the Brush Tool and black for the colour erase the parts you don’t want to appear.

Step 10 – Bird Part 1
Let’s add the bird into the wallpaper, download the bird stock image called Stock 218 by ~sophia-T, open it in photoshop, and with technique you’re the more comfortable with cut out the bird from the background.

Step 11 – Bird Part 2
Drag the bird we just cut out into the wallpaper document, rename the layer Bird and place it in a new group, rename the group Bird. Let’s now add a Gradient Overlay layer style to give it more color. Layer – Layer Style – Gradient Overlay and enter those values:

Next duplicate the Bird layer, rename the new one Bird Blur, and apply a Gaussian Blur Filter to it with a 2px radius, Filter – Blur – Gaussian Blur. Change the opacity to 50% and the blending mode to Overlay.

That’s it for the first tutorial of drawingclouds.com 2.0, I hope you’ve learn some new trick and techniques, don’t hesitate to send me a link to your creations, I’ll upload them at the end of the tutorial. You can download the PSD File if you need help:

Just launched my new portfolio supercolorstudio.com, featuring some of my recent and past artwork

supercolorstudio.com is my new portfolio I’ve been working on the past weeks, it features all my recent artwork going from posters to vector works. It will be often updated with some new artwork, Please take a look.

Here’s some screenshots of the portfolio, It’s still a work in progress, I’ll add some new features and sections.

Drawingclouds.com is back on track, with a new theme and some more tutorials coming.

drawingclouds.com has not been updated for a long time now, I’ve been working on other projects like my portfolio supercolorstudio.com and left design on the side for a while. I’m back working on drawingclouds, I’ll try to update the site at least once a week with new Photoshop tutorials, design related articles, freebies and some contests (a contest is on the rails).

Here’s some screenshots of the new theme, It’s still a work in progress so some little changes will be made.

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

1920x1200px

1680x1050px

1600x1200px

1440x900px

1280x1024px

1024x768px

Get testking 640-553 web designing training to learn how to create energetic and vibrant wallpapers and become expert using testking 70-647 design recourses and testking 350-029 video tutorials.

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.

Visit PsPrint.com and get your free calendar templates for printing.

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 1000x1000px 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 1100x400px 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 20x20px 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.

Visit PsPrint.com and get your free calendar templates for printing.

Learn the art of web designs using our testking PMI-001 web designing course. Also check out the testking 642-642 tutorials and testking 70-432 design resources to learn how to creater colorful header in photoshop.

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 1100x1500px.

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

Learning of web graphics is no more difficult with testkings online training program. Download testking mcitp video and testking mcts self paced study guide to become expert in web designs.

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

1920x1200px

1680x1050px

1600x1200px

1440x900px

1280x1024px

1024x768px

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. Follow the step by step instructions below, which really doesn’t require the same concentration as playing partypoker or writing an essay. In six simple steps you’ll have your Animated Cloud Icon, exactly where you want it. 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://drawingclouds.com/dC_Files/Tutorials/Moving_Cloud/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://drawingclouds.com/dC_Files/Tutorials/Moving_Cloud/2.png" /></li>
</ul>

Once you’ve pasted that code, change drawingclouds.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 1000x1000px 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:

Download testking 70-640 study guide to learn useful tips to create successful web designs and become expert using testking N10-004 design resources and testking 646-204 video tutorials.

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 1680x1050px 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.

Become expert web designer with testking 642-436 web designing course. Get free testking 220-702 design recourses with expert testking 640-816 study guide to learn how to create illustration in photoshop.

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

1920x1200px

1680x1050px

1600x1200px

1440x900px

1280x1024px

1024x768px

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 1680x1050px 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:

Get testking 70-642 training to learn about web designs and become expert graphic designer using testking 640-822 photoshop and testking 70-649 DIY design guides.

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 1040x1200px 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:

Sign up for testking mcdba training to become expert web designer and learn how to excel in your field using testking mcdst photoshop tutorials and testking mcp design guides.

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 1680x1050px 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:

Sign up for testking 70-680 training to learn how to create colorful wall papers in photoshop. Download testking 642-902 tutorials and testking 642-813 demos to become expert graphic designer at your pace.

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>

That’s all there is to it! Next time, we’ll get into how to include this effect on your WordPress Blog. That’s all for now, John out. =D

Download the Source Files that includes the JQuery, Html and Image Files

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 a Cd Icon in photoshop is the first tutorial I wrote for an other website, Exoph is all about coding and tutorials, You’ll learn a few techniques on gradients and shape tools.

Don’t forget to change your bookmarks and the links to some posts on your websites

We hope to see you soon on drawingclouds.com

New Adobe Cd icons, the tutorial will be published in a few days. Leave me a comment if you’ve got any request for a Cd icon with an other cover.

Photoshop Cd Icon

Photoshop Cd Icon

Illustrator Cd Icon

Illustrator Cd Icon

Dreamweaver Cd Icon

Dreamweaver Cd Icon

Bridge Cd Icon

Bridge Cd Icon

My last creation, I used a lot of textures and some different new techniques I learned lately. I hope you’ll like it. I also did the tutorial that explains how to make this wallpaper : Create a Watercolor Logo in Photoshop.

Desktop Version

1680x1050px

1600x1200px

1440x900px

1280x1024px

1024x768px

Create a Custom Photoshop Splash Screen, Tutorial in 2 parts, the first one is all about creating a new splash screen and the second one will explain how to change the original photoshop splash screen.

Like every photoshop users, I see the splash screen every time I load photoshop. I thought it could be nice to write a tutorial on creating a new one to make your photoshop unique.

Part 1 – Creating the Splash Screen

Step 1 – New Document
Open photoshop and create a new file, File – New with 624x354px for the dimensions, it’s important you put those parameters because some text is going to appear on your image when you load photoshop.

Step 2 – Background
Fill the background layer with white, Edit – Fill – White and name this layer Background.
Use the Free Transform Tool Ctrl+T to reduce a little bit the size of the background, put 96% for the Width and 95% for Height.

Add some Drop Shadow and Gradient Overlay Layer Styles to the Background layer.

Step 3 – Clouds
Create a new layer and name it Cloud 1, select the Ellipse Marquee Tool and create a cloud shape with circles and ovals, hold the Shift key while you create de selection. When you’re happy with your shape just fill it with white like we did in step 2. Then add some Layer Styles to the Cloud 1 layer

Repeat the same process with the other clouds till you like the result; I did 4 clouds layers named Cloud 1 to 4. Each time I created a new layer for each cloud and placed the one under the one I created before.
When you’ve done the clouds you must copy the layer style to the new ones so you can easily change the color and the drop shadow for each layer. Select the Cloud 1 layer and right click on it then select Copy Layer Style, then select the other layers without layer styles and right click Paste Layer Style.

For the color I choose #FFFFFF for the Cloud 1 layer, then #0066cb, #669acc, #99cdff for the other layers.

Step 4 – Text
Create a new layer and use the Text Tool (T) to write PS, use any font, I used the real PS logo.
When you’re done make a selection of your Text layer by pressing Ctrl+Left Click on the little preview in the layer panel and go to Select – Invert Selection. Then go on the Background layer and create a layer mask.

Step 5 – Adobe Photoshop CS4 Text
Create a new layer and write some text under the PS logo, I wrote Adobe Photoshop CS4 with the Eurofurence Font .Make sure it’s place like me because some text will appear on the splash screen when you run photoshop.

Step 6 – Save as PNG
We’re done with the creating part, save your document as a PNG file and make sure you name the file SPLASHARTBACKGROUND.PNG, so we can replace the original splash screen file in next part.

Part 2 – Incorporate the Splash Screen in Photoshop

Step 1 – Download ResEdit
Download and Install ResEdit software, you can download it here: ResEdit

Step 2 – PSArt.dll
Before launching or using ResEdit, make sure you make a back up of the original PSArt.dll file. You should find it in C:\Program Files\Adobe\Adobe Photoshop CS4, copy the file and paste it where you can find it easily. We did that in case a problem occurs in the process. Make sure Photoshop is closed.

Step 3 – ResEdit
Open ResEdit and click on Open, a window should open, go to C:\Program Files\Adobe\Adobe Photoshop CS4 and select PSArt.dll

Step 4 – Replacing File
If you followed step 6 in part 1 correctly, you saved your splash screen file as a PNG file and named it SPLASHARTBACKGROUND.PNG. When that’s ok go to C:\Program Files\TGTSoft\ResEdit\Temp and copy your file in this folder, click yes when it asks if you want to replace the existing file.

Step 5 – Saving
Go back on ResEdit, click on Save and then close the program.

Open Photoshop; here you are with a new customized splash screen. If you have a problem with the splash screen or you just want to go back to the original splash screen just copy the PSArt.dll file you backed up at the beginning in Photoshop installation folder.

You can now easily change your splash screen in a few minutes, 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

Selection of 20 photoshop tutorials I liked to read and make. You can learn a lot of new trick and aspects in photoshop.

I’ve been using photoshop for more than 2 years now, reading through those tutorials I leaned a lot of interesting techniques and some great tools in photoshop I hope they’ll be usefull for you.

Tutorials from Abduzeedo.com

Retro Geometric Vectors in Space with Illustrator and Photoshop

Abduzeedo 2 Years Art in Photoshop

Awesome Colorful Poster Tutorial

Shining Neon Text Effect in Photoshop

Super Cool Frilly Bits Typography

Magic lighting effect in photoshop

Tutorials from psd.tutsplus.com

Create a Poster Illustration with Floating Floral Elements

Creating a Space-Helmeted Future Retro Illustration

Creating A Fantastic Fantasy Night Sky In Photoshop

Create a Powerful Mental Wave Explosion Effect

How to Create a Dark Surreal Illustration in Photoshop

Design a Photo Manipulation from Sketch to Color

Tutorials from tutorial9.net

Design an Epic Fantasy Scene with Photoshop

Colorful Glowing Text Effect in Photoshop

Create a Vibrant Blueprint in Photoshop

Tutorial from psdvault.com

Bring Colour and Light out of Ordinary Image

Tutorials in French from wks.fr

Reproduire l’affiche MoonwalkeR de Michael Jackson

Toutes les astuces pour créer un background d’iPhone

Créer un line arts lumineux avec Photoshop

Créer un logo cartoon pour son site Internet

Create an Adobe box Icon in Photoshop, to fill your dock with new icons. Learn techniques on brushes, blur, layer mask and blend modes.

A few weeks ago, I did a tutorial to make a folder icon, I’m not really an icon designer but I love dock so I thought this little box box could be interesting to make. The tutorial is inspired from the original install icon of adobe illustrator and from a dock icon made by http://noove.deviantart.com/

Step 1 – The Inevitable New Document
Open photoshop and create a new document, mine is 1000x1000px with a white background.

Step 2 – Front and Top
In this step we’ll make the front and top of the box, select the rectangle tool make sure you’ve got those options selected.

Make a rectangle of about 720x440px name the layer Front, duplicate that layer and name the new one Top. Place it on top of the original rectangle then select the Free Transform Tool Ctrl+T, reduce the Height to 30% and place back the rectangle on top of the original one. Go to Edit – Transform – Perspective and move one the top corner inside till you have a box shape.

Step 3 – Layer Styles for the Rectangles
Add a Gradient Overlay to both Front and Top layers, go to Layer – Layer Style – Gradient Overlay or double click on the layer and enter these values:

Front Layer

Top Layer

Step 4 – Front Stripe
Select the Rectangle Tool again and draw a stripe in the middle of the box, name the layer Front Stripe. Next right click on the layer in the layer box and select rasterize. Then make a selection of the Front layer by doing Ctrl+Left Click on the little thumbnail in the layer panel and when you’ve got the selection go back on the Front Stripe layer with the selection still active and create a layer mask, Layer – Layer Mask – Reveal Selection.

Add a Gradient Overlay and Drop Shadow layer style to the Front Stripe layer like we did in the previous step, Layer – Layer Style – Gradient Overlay, Layer – Layer Style – Drop Shadow.

Now let’s create a glow on the stripe, select the Pen Tool (P) with these options.

Draw a curved shape on the stripe, when you like the shape, go on the Front Stripe layer make a selection of the stripe shape by doing Ctrl+Left click on the little preview in the layer panel, then go back on the curved shape layer we just created and create a layer mask, Layer – Layer Mask – Reveal Selection. Name the curved glow layer Soft Curves. Then add a Gradient Overlay layer style to it, Lower the opacity to 10% and the fill to 0%.

Step 5 – Text
ASelect the Text Tool, write what you want, I’ve just put Ai in white with a font called Qlassik Bold, you can download it http://www.dafont.com/qlassik.font. create a new group name it Front Stripe and drag the Front Stripe, Soft Curves and Text layers in it, place it between the Front and Top Layers.

Step 6 – Shadow
We’re going to add some shadow to the box, create a new layer and select the Rectangular Marquee Tool, make a selection a the bottom of the box, fill it with black and deselect it Ctrl+D. Apply the Gaussian Blur Filter on the layer, Filter – Blur – Gaussian Blur with about 4px. Name the layer Shadow, drag the layer between the Front and Background layers.

Step 7 – Opening
Create a new layer, select the Rectangular Marquee Tool then create a selection of about 2-3 px on top of the Front of the box, fill the selection with black on the same layer make an other selection of 1px and fill it with #b59965 colour. Then with the Erase Tool and a big soft brush erase both sides till it give you the effect of an opened box. Name the layer Opening, you can also use a layer mask to erase the parts you don’t want.

Step 8 – Duct Tape
Create a black line on a new layer in the middle of the top part of the box then select the Rectangular Tool and create a white stripe on the top, select the Free Transform Tool Ctrl+T and right click select Perspective then pull one top corner inside. Duplicate that layer and place the shape under, with the Erase Tool and a small brush delete some parts to give a torn effect. Lower the opacity of the line layer to 50% and 40% for the duct tape layers. Regroup all these layers in a new group named Duct Tape.


Step 9 – Glow and Light
Create a new layer, name it Soft Light. Pick the Brush Tool (B) with a big soft rounded brush and white color paint on the top part of the box, put 50% for the opacity and place the layer under the Opening layer.

Create a new layer, name it Top Glow. Make a selection of the Top layer and take the Ellipse Marquee Tool with those options on top.

Make an oval selection; it should erase a part of your original selection. Fill the selection with white and lower the opacity of the layer to 15%.

Step 10 – Saving
To save the box icon for your dock, hide the background layer so your background is transparent then save the file as a PNG file so it keeps the transparency.

I hope you liked the tutorial, you can replace the orange stripe by any color, logo or image and create a lot of different boxes. For any questions or problems on the tutorial leave me a comment. You can download the PSD source file:

Become expert web designer with testking and learn all about web design art using testking ccna guide and testking ccie photoshop tutorials.

Similar Articles:
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

My last creation, used a lot of stock photos and a little inspiration, I hope you’ll like the concept

Desktop Version

1680x1050px

1440x900px

1280x1024px

1024x768px

Selection of the best Artwork from the last opus of Grand Theft Auto

The designers of GTA 4 did a great work with providing some great Artwork on caracters and scenes in the game, Here’s some official and non-official artwork

Here’s a Selection of the best Patrick Brown GTA Artwork, You can follow is work on deviantART http://patrickbrown.deviantart.com/

Similar Articles:
World of Warcraft Loading Screens

Create a Frilly 2009 Typo wallpaper, learning techniques on brushes, textures, layer mask and blend modes.

I created a wallpaper while playing with some brushes and circles, I thought the concept was nice so I did a tutorial to explain the techniques, I hope you’ll found inspiration in this tutorial.

Step 1 – Brushes and Textures
Before starting the tutorial, download pixelchemist Orgumi deco Brushes, to load the brush set in photoshop just double click on the file, it should load them in your brush list. You also need to download 3 textures we’re going to use: Paper_Texture_v5_by_bashcorpo, Pink_Chiffon_by_gild_a_stock, Natural_Paper_II_by_cloaks.

Step 2 – New Document
Create a new document in photoshop, mine is 1680x1050px with a white color background, you can choose the resolution you like.

Step 3 – 2009 Mock-up
Create a new layer, select the Ellipse Marquee Tool and make a selection while holding the Shift key. Fill the selection with black, Edit – Fill – Black, keep the selection of the circle and go to Select – Transform Selection, reduce the width and height to 25%, press enter and delete the selection. On a new layer create a selection with the Rectangular Marquee Tool, fill it with black, with the Polygonal Lasso Tool make triangular selection on the left corner and press delete, when your happy with the 2 shape merge the circle and rectangle layer and name the new one “2”. You should have something like this:

Next duplicate 3 times the circle layer we created before. Make two of the duplicated layers smaller than the original one with the Free Transform Tool Ctrl+T, this represents the two 0 of 2009 place them like you want. On a new layer create a triangular shape to make the 9 with the last circle layer when your done merge the triangle and circle layer and name the merged layer “9”. Rename all the layers with the numbers their represent and place them in a new group called 2009 Mock-up.

Step 4 – Frilly Brushes
Before starting make sure the brushes are loaded in your brush library. I’ll explain how to make the 2; the process is the same for the other numbers. You will have to create a new layer each time you use a brush, start with painting with the brushes using the Brush Tool (B) on the 2 shape, choose some colors, I used 6 different colors but 3 is the minimum. When you’re done with arranging the layers like you want, regroup all the layers and put them in a new group call it “2”. Make a selection of the 2 shape by going on the little thumbnail preview on the 2 layer in the 2009 Mock-up group and press Ctrl+Left Click on it, then go on the 2 group and create a layer mask by clicking on the Layer Mask icon in the layers panel.

Repeat the same process for the 0’s and the 9 when you’re done just create a new group name it “2009” and put the 4 groups in it.
Hide the 2009 Mock-Up Group when you’re done.

Step 5 – Layer Style
Add some drop shadow to the brush layers select one of the brush layers and go to Layer – Layer Style – Drop Shadow, put the parameters like below then right click on the layer you’ve just added some drop shadow to and click on copy layer style then select all the other brush layers, right click and paste layer style.

Step 6 – Textures
We’re going to use the textures you’ve downloaded previously, Open the 3 texture files in photoshop and drag them in your document. Resize and rotate them with the Free Transform Tool Ctrl+T, put Paper_Texture_v5_by_bashcorpo texture under the other one, then Pink_Chiffon_by_gild_a_stock in the middle, desaturate this texture by pressing Ctrl+Shift+U or Image – Adjustments – Desaturate then change the opacity to 20% and the blend mode to Multiply. Then put the last texture Natural_Paper_II_by_cloaks on top of the others and change the blend mode to multiply and the opacity to 50%. Regroup the three layers in a new group name it Textures and place it just in front of the background layer.

Step 7 – Swirls
Create a new layer name it Swirls, place it between the 2009 and Textures Folders, select the Brush Tool and take one of the brushes we used previously this time with a big size and the white color just paint a bit shape on the canvas. On the same layer paint two other shapes with different brushes. When you like the result add a Gradient Overlay Layer Style on the layer by double-clicking on the layer or go to Layer – Layer Style – Gradient Overlay and put those values. Change the blend mode of the gradient overlay and the layer to Color Burn and then change the opacity of the layer to 50%.

Step 8 – Other Version
This version is giving the same color range for the 2009 Shape, I choose Blue but you can choose any color, go on the 2009 Folder and press Ctrl+Alt+E then with the new layer go to Edit – Adjustments – Hue/Saturation, click on the colorize box and then play with the parameters, click Ok and then change the blend mode of the layer to Hue.

I hope you liked and learned new techniques on this tutorial, leave me a comment if you’ve got any questions. You can download the PSD source file here:

If you want to learn web graphics then test king web designing course is best solution though. Download testking ccnp tutorials and testking ccda design guide to learn how to create beautiful wallpapers in photoshop.

Similar Articles:
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

New wallpaper with a frilly typo style, I used some paper textures and photoshop brushes, hope you’ll like the creation. The photoshop tutorial on how to make the wallpaper is in preparation…

Desktop Version

1680x1050px

1440x900px

1280x1024px

1024x768px

Create a Retro is Future Poster, using different mask techniques and creating a custom typo.

A few days ago, I did a wallpaper called Retro is future but the end product wasn’t really good for a tutorial so I did a poster using the same techniques and model, you’ll create the typo and the effects giving a nice retro look to the poster.

Part 1 – Model

Step 1 – Stock Image
Thanks to katanaz-stock.deviantart.com I can use this model in the tutorial, you can download the stock image here . Open the file in photoshop and stay on it.

Step 2 – Background
Double click on the layer and click Ok, name this layer Model then create a new layer named Background and fill it with white, Edit – Fill – White, place this layer beneath the Model layer.

Step 3 – Left Side
Now duplicate the Model layer, name the new one Left Side and hide the original one. We’re going to erase all the parts we don’t want on the model. First go to Select – Color Range and select the white part and click Ok, then press delete to erase the selection and deselect Ctrl+D.
Tip: it’s better to hide the Background layer so you can see what you’re erasing.

Next, take the Rectangular Marquee Tool and make a selection of the right side, delete the selection so you’ve got just the left side of the face.

Select the Eraser Tool with a soft rounded brush of 300px and erase the shoulders and neck, you should have something like this.
Finally create a layer mask on the Left Side layer, Layer – Layer Mask – Reveal All and with the same brush we used before select the Brush Tool (B) with a black color erase to edges to give a fading aspect, make sure you’re on the layer mask while using the brush.

Step 4 – Right Side
Duplicate the original Model layer; name the new layer Right Side and place it on top, hide all the other layers. Go to Image – Adjustments – Threshold and play with the cursor, to have the same amount of black has me, choose 95 and click OK.

Go to Select – Color Range, like before select some white on the image, click OK and press the delete button, then with the Erase Tool take off the shoulders and the necklace.

Save the model file as a PSD file so you can use it later.

Part 2 – Poster

Step 5 – New Document
Create a new document in photoshop with a transparent background, mine is 1040x1500px to match the website dimensions, you can make it bigger or smaller it doesn’t matter.

Step 6 – Model
Fill the background layer with white and name it Background, then drag the Left Side and Right Side layers in the new document from the document we saved earlier and place those two layers in a new group Layer – New – Group, name it Retro Model, select the group, resize and place the model with the Free Transform Tool Ctrl+T.

Step 7 – Layer Style
In this we’re going to add some layer style at the model and create a Flash shape. Select the Right Side layer and go to Layer – Layer Style – Gradient Overlay, enter these values:

Step 8 – Flash
Create a new layer still in the Retro Model group and name it Flash, select the Polygonal Lasso Tool and create the shape you like, I choose a Flash. Fill the selection with white and create a Gradient Overlay layer style.

Duplicate the Flash layer name the new one Flash Blur and add a Gaussian Blur Filter – Blur – Gaussian Blur of around 2-3px. Change the blending mode to Overlay.
Select the Brush Tool with a 300px soft rounded brush and go on the Layer Mask of the Left Side layer, erase a little bit of the edges so it fades better in the background.

Step 9 – Background
We’re done with the model, let’s create the background, create a new layer name it Gradient Frame Pink/Black and fill it with white then add a Gradient Overlay layer style to it.

Create a new layer name it Black Frame, go to Select – All then Select – Transform Selection and reduce the width to 96% and the height to 98% fill the selection with black. Keep the selection and go back to Select – Transform Selection put 99% for the width, 99,5% for the height and delete the selection, create a new group name it Frame and place the 2 layer we just created, place this group under the Retro Model group.

Step 10 – Texture
Download the texture here and open it in photoshop, drag it on the document and resize it with the Free Transform Tool Ctrl+T, change the opacity of the layer to 50% then place the texture layer in a new group named Textures and change the opacity of the group to 30%.
Go to Select –All, then like we did previously Select – Transform Selection and change the width to 95% and the Height to 97%, press enter and create a layer mask with the selection on the Textures group.

Step 11 – Text
Let’s create the text, create a new layer and make a rectangle selection with the Rectangular Marquee Tool, fill it with black, duplicate the layer, this time select a triangle with the Polygonal Lasso Tool and delete the selection. You can now create all the letters with those two layers, duplicate the original layers each time and rotate to make the letters. You will have a lot of layers, we will merge them later.

Step 12 – Gradient
Place the text like you want and merge all the text layers in one, call this layer RETRO IS FUTURE, and place it in a new group with the same name. Create a Gradient Overlay layer style on the Retro is Future Layer; put the same setting shown in Step 7 for the Gradient Overlay but put 135° for the angle.

Step 13 – Sparkles
Create a new layer name it Sparkles, then download the brush here, to load it in photoshop just double click on the brush file. You should have it in the list of brushes, take a size around 9-15px with a white color on the sparkles layer put some sparkles where you like.
Duplicate the Sparkles layer when you’re done with the brush tool and name the new one Sparkles Blur, apply a Gaussian Blur to it, Filter – Blur – Gaussian Blur.
Duplicate the original Sparkles layer, name the new one Sparkles Gradient and apply a Gradient Overlay to it. Place those 3 Layers in a new group named Sparkles.

Step 14 – Lines
Create a new layer, select the Rectangular Marquee Tool, make a selection and with a soft round brush and the white color draw a soft line, then deselect. Now just put soft lines where you want, using the Free Transform Tool to scale and resize, add some Gradient Overlay to some of the lines. When you’re done just place all the lines layers in a new group.

And we’re done, I hope you liked this tutorial, for any question send me an email or eave me a comment, you can download the PSD file for this tutorial.

Sign up for testking 642-832 training to learn best web design practices. Become master in design work with our testking EX0-101 live demos and testking 640-863 design tutorials.

Similar Articles:
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 a download icon in photoshop, to replace your old download button on your website.

I’ve just created this website/blog, every time I wanted to put a download link I used text so I thought I’ll create a nice download icon so the readers won’t miss the links. I hope you’ll like this quick tutorial.

Step 1 – New Document
Create a new document in photoshop of 1000x1000px with a transparent background

Step 2 – Circles
Create a new layer, Layer – New – Layer, then select the brush tool (B) and get a circular hard brush. Create a few circles with different sizes, be sure to create a new layer for each circles, I did 6 circles with 6 layers but you can put more or less.

Step 3 – Layer Style
We’re going to add some layer style at the circles, go to Layer – Layer Style – Inner Shadow and enter these values:

Stay on the layer style panel and add a color overlay, then regroup all the circle layers in a group, Layer – New – New Folder, name the group Cloud.

Step 4 – Arrow
Select the Custom Shape Tool and pick an arrow shape
Tip: If you don’t find the arrow shape in the list, you can load all the shapes in the shape by clicking on the little arrow button on the top right and click on All where you’ve got all the shape libraries names.
Create a new layer name it Arrow and create an arrow shape on it, change the color like you want and rotate it with the free transform tool Ctrl+T. Place the layer in the Cloud group beneath all the other layers.

Step 5 – Reflection
Now let’s create the reflection of the arrow, select the cloud group and hold Ctrl+Alt+E, You should have a layer that contains the cloud and arrow, name this layer Reflection. Then rotate it 180°, Edit – Transform – Rotate 180° and Edit – Transform – Flip Horizontal.

Place the image under, right click on the reflection layer, select Rasterize Layer and create a layer mask, Layer – Layer Mask – Reveal All. Apply a black and white gradient on the layer mask going from bottom to top.

Step 6 – Text and Saving
When you’re finished with the clouds, just add some text on or under it and then save it as a .PNG file, make sure your background is transparent when you do that.

Similar Articles:
Create a Dock Icon Folder in Photoshop
Create a Colorfull Pastel Typo in Photoshop
Create an Origami Swan Logo in Photoshop

New wallpaper I just finished, with a retro style. Used some stock photos and texture to make it. I’m thinking of making a tutorial to make it on photoshop. I hope you’ll like it !

Desktop Version

1920x1200px

1680x1050px

1440x900px

1280x1024px

1024x768px

Everybody knows World of Warcraft, the famous MMORPG. Here’s a selection of the best loading screens.

When I first saw the loading screens on World of Warcraft I was really impressed by the quality of it. They really represent the style of the game. There’s a lot of them in the game I choose the best ones.

Create a dock icon folder in photoshop, customize it and fill your dock with all your favorite folders.

In the last 5 years, programs called docks began to be more and more used on desktops, so I did a quick tutorial to create a folder icon .You can as well use it on the avedesk software.

Step 1 – New Document
Create a new document in photoshop with a transparent background, I choose 512x512px.

Step 2 – Front
Select the Rounded Rectangle Tool (U), with 15px radius and draw a shape like below,

then go to Edit – Transform – Warp and pull the four corners, pull the top corners a bit more, press enter when you’re satisfied with the result. The color of the shape isn’t important, name that layer Front.

Instead of using the Warp tool you can do Edit – Transform – Perspective it give a straighter look to the folder.

Step 3 – Drop Shadow
Apply a drop shadow to the Front layer, Layer – Layer Style – Drop Shadow or double click the layer and in the blending options choose drop shadow, set the values like this:

Step 4 – Back
Create two new shapes with the Rounded Rectangle Tool with 10px radius

Merge the two layers by selecting both of them and Right Click – Merge Layers, name the layer Back. Apply a drop shadow to the Back layer like we did in Step 3 with those values:

Step 5 – Customization
Choose an Image or a logo you’d like on your folder, I’ve choose a Firefox image : Here
Open your image in photoshop and drag it in your document, place it and scale it (Ctrl+T) where you want, duplicate the image layer. Take one of the image layers and place it in on top of the Front layer, make a selection of the Front layer, Ctrl+Left Click on the little thumbnail in the layer panel or Select – Load Selection. Select the image layer and create a layer mask Layer – Layer Mask – Reveal Selection, name this layer Front Image.

Select the other image layer we duplicated before and repeat the same process with the Back layer. Name the layer Back Image

Step 6 – Text
Just add some text on the top; I’ve put Firefox using a font called Cooper Std with 36px.

Step 7 – Reflection
To add a little glow you can do a reflection of your folder, to do that select all the layers and duplicate them. Merge all the duplicated layers you’ll have one layer name it Reflection. Rotate it 180° and go to Edit – Transform – Flip Horizontal. Drag the reflection just under the folder and create a layer mask on it Layer – Layer Mask – Reveal All. Then select the gradient tool going from black to white and make a gradient starting in the bottom going a little bit further than the reflection, make sure the layer mask is selected.

Step 8 – Saving
When you’re finished save your folder to a PNG File, make sure your background is transparent when you save it

Using testking a+ web designing guide and other free resources, learn to create inspiring web icons in photoshop. Learn all the basics of web designing with testking mcse tutorials and testking 350-001 live demos.

Similar Articles:
Create a Colorfull Pastel Typo in Photoshop
Create an Origami Swan Logo in Photoshop

Create a colorfull pastel typo wallpaper in photoshop while learning a few technique with layer mask and gradient overlay.

Step 1 – The Inevitable New Document
Open photoshop and create a new document, mine is 1900×1200 with a white background.

Step 2 – Choosing the Textures
I’ve choose 2 textures to give this paper effect to the background, the first one can be downloaded Here and Here
Open the first texture, drag it on the document and rotate it 90°, Edit – Transform – Rotate, then scale it by doing Ctrl+T so it fits the canvas. Change the opacity to 70°.
Open the second texture, drag it and rotate it 90°, Edit – Transform – Rotate, the scale it by doing Ctrl+T so it fits the canvas. Change the layer mode to Multiply.
Rename the two layers Texture 1 and Texture 2. Create a new group, Layer – New – Group name it Textures and drag the two texture layers in it. We’re done with the textures, let’s create the text now.

Step 3 – Creating the Text
Select the text tool (T) and write what you want, I choose to write COLORFULL. I used a font called Bifurk and 250px for the size, the colour of the typo doesn’t matter; you can find this typo Here

Step 4 – Creating the Pastel Color Circles
For this step, you just need to create several circles with the ellipse tool with different size and colours. Create a different layer for each colour. You can use the PNG file Here with a lot of different colored circles I’ve made for this tutorial here. If you use the file open it in photoshop and drag it in your document. To select the circles, use de selection tool, right click – Layer via Cut. Don’t be surprised if you’ve got a lot of layers we will group them afterwards.
Then Select all the layers with the same coloured dots and merge each colour layer together, you have one layer for each colour; Place all these layer in a group named Pastel Dots.
Tip: hold the Shift key when you use the ellipse tool while creating the circles.

Step 5 – Placing and Drop Shadow
Now just place the circles like you want on and around the text, select some of the circles and place them on a new different layer so we can apply a drop shadow effect on them. To apply a drop shadow select the layer you want to apply it to and double click on it or go to Layer – Layer Style – Drop Shadow. And enter those parameters:

Step 6 – Layer Mask
Create a new group Layer – New – Group, name it Pastel Dots and place all the layers with coloured circles in it. Make a selection of the text Ctrl+Left Click on the little image in the text layer and select the group we just created then create a layer mask by clicking on this icon in the layer panel or Layer – Layer Mask – Reveal Selection, you should have something like this:

Step 7 – Glow and Shadow
Now merge the Pastel Dots group Ctrl+E, now you’ve got a layer, duplicate that layer name it Pastel Dots Overlay, change the blend mode to Overlay and the opacity to 80%. Next apply a Gaussian Blur Filter – Blur – Gaussian Blur of around 4-5 pixels and click Ok move the two Pastel Dots layers in a new group called Pastel Dots. Duplicate the Pastel Dots layer again, name the new layer Pastel Dots Blur and place it under the other two layers. Apply a Gaussian blur with about 25-30 pixels.

Step 8 – Soft Lights
We’re now done with the text; we’re going to create some soft lights to add some colour to the texture. Create a new layer name is soft light and pick a colour mine is a soft red colour, Select the brush tool (B) and a soft rounded brush with a 500px diameter. Now draw on the side a big line, change the opacity to 20-30% and if it’s to strong change the layer mode to multiply. Repeat the same process for the other sides. Regroup the soft light layers in a new Group Layer – New – Group and name it Soft Light.

Step 9 – Soft Geometric Shapes
For this step I’m going to explain how to make a circle soft shape, the process is the same for every sort of shape. Create a new layer, then select the Ellipse Tool (U) and draw a circle shape, don’t forget to hold the Shift key while drawing the circle. Go to the layer styles Layer – Layer Style – Gradient Overlay and enter those parameters.

Next create a layer mask on the shape layer, Layer – Layer Mask – Reveal Selection and select a soft rounded brush with a parameter a little bit smaller the shape and erase in the centre till you have a soft shape
Tip: Make sure you’re erasing with the black colour in foreground
Of course the gradient can be different from mine; you should play with the colours for every shape. Now create different shape in different sizes following this process when you’re done just regroup the shape layers in a new group named Soft Shapes.

Final Image

Become expert web designer with testking SY0-201 course. We offer latest testking 640-802 design tutorials and expert testking VCP-410 design guide to help you learn how to create colorful typo in photoshop.

Similar Articles:
Create an Origami Swan Logo in Photoshop

Wallpaper I did a few weeks ago with the help of a tutorial on a great site called PSDTop.com

You can find the tutorial Here

Desktop Version

1920x1200px

1680x1050px

1440x900px

1280x1024px

1024x768px

New wallpaper I’ve just finished, I used different techniques I learned lately.

I hope you’ll like the concept !

Desktop Version

1920x1200px

1680x1050px

1440x900px

1280x1024px

1024x768px

New photoshop dock icon I’ve just finished. 2 versions are available.

I hope you’ll like it !

Photoshop Folder Dock Icon

1st Version

2nd Version

Create an Origami Logo in Photoshop with this tutorial, learning techniques with blending modes and layer mask

Step 1 – New Document
Create a new document in photoshop (mine in 1200 x 800px) with a white background.

Step 2 – Drawing the Head Part
Now we are going to draw the swan parts, create a new layer by clicking on this icon in the layer panel.

Name it head and select the pen tool (make sure this option is selected).

Draw a path like below, I’ve choose a different colour for each part so it’s easier to work.

Step 3 – Other Parts
Create five layer name them neck, left wing, left wing top, tale and right wing
Then in each layer draw a path like in the previous step with the pen tool.

Step 4 – Reorganise Layers and Parts
Reorganise your layers in the layer panel to see the final shape; you should have something like this.

Step 5 – Blending Options
Now let’s apply some drop shadow on the different parts, select the head layer and double click on it or on the menu layer – layer style – blending options. In the blending option panel make sure that the layer mask hides effect and the vector mask hides effect options are selected.

Step 6 – Drop Shadow
Go to the drop shadow panel, and enter 3px for distance and 6px for the size and uncheck the use global light option.
Apply this layer style to all the other part layers except for the right wing layer by right clicking on the head layer to select copy layer style then select the other part layers, right click and select paste layer style.
You can change the angle, the distance, the size and lower the opacity of the drop shadow in each layer like you prefer it by returning to the drop shadow option.

Step 7 – Pixellate
Select all the layers with a part of the origami in it and right click – Pixellate

Step 8 – Layer Mask and Drop Shadow
Now we are going to erase the shadow that shouldn’t appear on the logo, select the head layer create a layer mask.

Make a selection of the head by doing ctrl + click on it, go to selection-inverse selection, select the brush tool (B), take a soft rounded brush of 45px.
Make sure you selected the layer mask and start to erase the shadow. Do the same process for each layer

Step 9 – Colour
The next step is all about putting colour on each part, I used a gradient layer style for each part but you can colour them like you want, I used a red to white gradient for the neck and the tale and used a blue to white for the rest of the parts. Go to layer – layer style – gradient overlay

Step 10 – Shadow
Create a new group Layer – New – Group name It Origami Logo and select all the layers except the background and transfer them into the new group.
Create a new layer name it shadow, select the ellipse marquee tool, make a oval selection, fill it with black, to do that make sure your background colour is black and press Ctrl+Backspace, and deselect it Ctrl+D.
Then apply a Gaussian Blur Filter – Blur – Gaussian Blur of around 7 – 9 pixels and click OK, move the layer behind the swan group change the opacity to 60% and put the shadow just under the swan, then duplicate the shadow layer and move it to the right, change the opacity to 25%.

Now you just need too put your company or website name and your done, if you want to do the same origami text that’s in the final image use the same techniques we used to make the swan
Leave me a comment if you’ve got any question

Final Image

Download testking CISSP tutorials and testking 220-701 demos to learn how to create inspiring log designs in photoshop. Become expert graphic designer with testking 350-030 web designing course.

Here it is my first wallpaper on the site, it’s retro style, you can find the wallpaper in all resolutions in the article.

I hope you’ll like it !

Desktop Version

2560x1600px

1920x1200px

1680x1050px

1440x900px

1280x1024px

1024x768px

Desktop Version Without Skateboarder

1440x900px