This tutorial inspired by all the sci-fi movies where radiation glowing circles are pictured in great details; so we are going to make very vibrant, glossy and realistically curved text effect with extremely beautiful and original glow circles, that no other text effect has. We will be working with a lot of Contour settings, so this tutorial is for more advanced users.

So, let’s get started. Create a new canvas, we are using 600 x 370 pixels here.

Fill it with any background color and for best effect, fill it with background texture. Simply double click the background in Layers Panel, and Layer Style’s menu will pop up. Go to Pattern Overlay mode and fill with, preferably floral, pattern. Here we used Damask pattern which unfortunately isn’t available for a download by the author anymore, but you can get more free textures here.

When you are done, select the typing tool and type your word in the middle, with very big and gold letters. Should you decide to use a narrow or small font, the effect simple won’t be visible. We used the GEronto Bis font, 236 pt size, exactly as you see on the canvas below:

Now the magic will begin. Double click the layer with the letters, and start applying the layer styles as you see below. First, make a small shadow with Gaussian Contour.

Add inner shadow with dark gray hue (we used #4f4f4f) and for contour we available of another pre-installed curve called “Half Rounded”. If you are using Photoshop CS2 + version, you should find it among your default curves.

Add outer glow with a color that will complement your background, in our case we had blue damask texture as our background and chose the #3c447a blue hue as Outer Color.

For the Contour here, we used Ring – Double. This will also come pre-installed to your Photoshop. Please note that every setting in this tutorial makes use of different Contour curve, which makes our effect particular interesting and the effect stands out. This Double Ring is exactly what gives the nice radiation / explosion glowing rounds wrapping the text.

Inner glow with #ffffff white color, and once again Gaussian Contour.

Bevel and Emboss will give our text the depth it needs. Use the default Ring contour to get the best metallic / plastic look effect.

For contour, use the “Wow-sharp highlight” Contour element.

We also want to give more deep and extreme Satin effect but this time, since we found no contour that suited our needs, we created our own curve…

To get exactly the same results as we have here, please copy our mapping to your Contour Editor.

Finally add stroke to your text, with a lighter hue of blue that will complement your background. Please do not use white or black as these colors will look too contrasted with background.

This is what you have got so far:

white to transperant gradient

Finally, load a selection of for the upper part of the text . If you do not know how to do it, read on:

• Create a new layer on top of the text, and then hold down Ctrl and click on the layer in the layer’s panel, in order  to select it.
• Using the Gradient Tool Now that goes from #ffffff to transparency.
• draw a gradient from the beginning of the selection on top, down to it’s bottom.
• Using the Elliptical Tool, draw a selection from the middle of the text to the bottom, and press Delete, to leave just the little gradient on top of the letters.
• This will do the gradually-glossy topping effect.

Done! Hope you enjoyed the tutorial and please feel free to download the PSD file of this effect, the file is of 600*370 size, same as you see here.

First thing you need to remember that every photo or digital artwork must have 1 point that catches the viewer’s attention. It can be (and mostly is) face or the eyes, but it can also be any other spot, that is the leitmotif of the canvas. When having too many points that catch the visitor’s attention, your artwork loses it’s charm and simply may lack the zest it would otherwise have with less accents on the canvas. So first thing you need to remember that in art, mostly, less is more.

Second thing to bear in mind is the depth of field. When you concentrate your look on a certain point, the rest becomes a little blurred in your vision, especially if the rest of the objects lay far behind. This is what we call — depth of field. In other words, human face cannot be just as sharp on the picture, as the background house that appears to be a few miles behind the figure. Although this isn’t always true and we have different variations of art (and sometimes the unusual is the best looking surreal concept!) but I am giving this little info so you will understand WHY we blur certain points and why we play with light the way we do, in this Photoshop Tutorial.

Ingredients:

http://dracoart-stock.deviantart.com/art/Asbury-Park-NJ-5-118481560

http://liam-stock.deviantart.com/art/Faballa-4-111550452

http://flordelys-stock.deviantart.com/art/sky-017-62717553

http://dracoart-stock.deviantart.com/art/Balloon-Festival-30-102183167

Get started.

We were working on a rather big canvas, we started with 1024px × 764px new layer as these were the dimensions of our base image. However you may feel more comfortable working with smaller or bigger images.

Take the image with fence and sand and paste it unto your Canvas:

Using the Rectangular Marquee Tool, crop out and delete the sky and water upper half of the layer:

Don’t worry about the rough unnatural layer, we will work this out a bit later.

The next step is take the image with sky (from our ingredients list), and paste it on top of the  previous layer with sand. Using Eraser Tool with a small soft brush, remove the lower part so that you will have an image consisting from sky and sand, just as you see below:

The way our image looks now, it’s very far yet from been an organically blended scene, so let’s start blending the layers into one another.

To make the sand less cheery, the easiest way is to simply match colors with the clouds, so this is exactly what we are going to do. While the sand layer is selected, go to Image >> Adjustments >> Match Color and apply the following settings:

if you have already unselected, select the layer with sand again, and go to Curves. Using the RGB channel, darken the image by dragging the curve down somewhere in the middle. We used Output: 113 and Input:143.

This will give our image a nice tone. The next step is — select the sky layer and go to Curves again, create a small point at the bottom and drag the RGB channel’s curve down, to make the sky dramatically darker.

Yet we got a much better toned canvas but still it is very well visible that the image consists from 2 different pieces, even if these pieces match way better in color than before.

We will be using a very old trick to merge the horizon lines of both layers. Simply create a new layer and using a big, soft brush (we are working with Brush Tool, in case I didn’t make myself clear), chose a black color and paste over the horizon line including the sand area outside the fence.

After you have brushes over that area, set this layer to”Soft Light” and you will have a much darker illusion as the view gets farther…

Next, we want to create an extremely mild HDR effect for the wood, so what we will do is create a new layer above the rest of the files, but below the dark layer we brushed with black color. Please pay attention because the sequence is important. We will not be working with masked layers at all throughout this tutorial.

Once that layer is created, click on the little “black and white” icon at the end of your layers palettes, the one that allows you to create a new fill or layer adjustment. Select “Exposure” settings. You will have a new layer with exposure settings created:

Using the “white” droplet, drag the Gamma Correction up to 0.82. See how the wood looks now, as if it’s been exposed to moon light! isn’t it beautiful?

To accompany that bright path we have in the middle, create a new layer and using your Brush Tool, white color and very big soft brush (say, 300 pixels), create a spot in the middle.

This spot should be placed above all the other layers and with blending mode set to Overlay:

Next, take out your stock photo with flying balloons, and crop them out. Don’t worry if cropping isn’t perfect, because once you placed them on your canvas, we will resize them to much small size and any imperfections will be blurred naturally.

Once they are on the canvas, you will notice that they look terribly misplaced,  and they need something that will blen them in nicely. The easiest solution (and please bear in mind that our tutorial is targetted at beginners) is to add clouds, that will “cover” the balloons, easily blending them into the composition.

So, create a new layer and go to Filter >> Render >> Clouds. With your background color set to Black and your foreground set to White (this is important!) — create clouds..

Once the clouds layer is ready, press Ctrl + T  and drag the bottom line upwards, “compressing” the clouds into a smaller strap, about half of the canvas. Set the blending mode of the clouds layer to “Pin Light”. This way, you will only see the WHITE areas of the clouds and totally won’t see the black areas.

Move the clouds in a way that will allow the white areas in clouds to lay over the balloon, this way we can see that the balloons are actually floating somewhere in the area, partly obscured by the heavy sky… Use Eraser Tool with soft edge to remove any edges of the clouds layer once it’s moved and you can also duplicate that layer and make a few of them, so you will have more cloudy effect (which is what we have done).

Next, crop our beautiful Becca.

The cropping technique will not be explained here as being pretty much basic, but we want to emphasize that if you use our particular image, the cropping will be rather complicated, since at some points (such as arms) the contrast between skin and background is minimal, which makes the cropping rather difficult and we had to use a few steps to complete this task, first we used Polygonal Lasso Tool, them Magnetic Lasso Tool, them we “refine edges” as pictured below..

Place the girl unto the canvas, and desize her so she will fit in nicely..

To add our own contrast to the image, we want to make the clothes texture more visible, less dark areas yet without losing the overall contrast and juiciness of the image, so with the girl’s image selected, we went to Image >> Adjustments >> Curves, and created a custom curve that consists from 3 points, as pictured here:

Next we need a shadow underneath her legs. Draw a circle using the round shape tool and black color as your foreground Photoshop color. make sure it’s placed correctly underneath her feet and has an elliptical shape.

Resterize the layer and go to Filter >> Blur >> Gaussian Blur

Set the shadow’s opacity to Multiply 57%, and you will see that the shadow is mildly visible yet it is present and gives a more realistic illusion of the jump or fly in the air. Please also make sure that you place the shadow underneath the girl’s image!

Final Steps…

Although most of the colors we used here blended in well and eventually created an organically looking picture, we still need to equalize the layers together. What some people do, and I used to do it myself in previous tutorials, is to merge all the layers, or even flatten the image, and then work on the colorization and the levels. This is very easy and perhaps will do the trick with most beginners, but even if you are not yet that much of a pro with Photoshop,  you need to learn how to work with Layer Adjustments.

In your layers’ panel, you have a small icon below, that looks like Yin-Yang symbol.

Create a new layer on top of all the other layers, and click this icon; you have a menu with various options, select “Photo Filter” first.

Use the default “Warming Filter (85), which I think is best for any picture, if you are looking to get a quick and warm effect, and set the Density to about 25%. Basically, the rule of thumb is, if we use warm colors such as brown, pink and earthly shades, we will give our composition a warm feeling (which is our aim here!), however if you want to make your final outcome look more cold, dreadful, dramatic and morbid, use shades of blue and green.

Once this is done, white you still have a layer selected that is on top of all the others, click teh Layer Adjustments icon again, select “photo filter” one more time and this time apply plain yellow color filter, with 48% density.

Most of you might want to stop here, but we want to really make this image look awesome, so we go ahead and click the Layer Adjustments icons again, this time we pick the “Curves”. This will apply the Curve settings to ALL the layer that lay underneath these settings, which is a huge advantage as you need not go layer by layer.

Make two points, which will brighten up the image quite dramatically. Note that we are working with RGB channel.

Now, the very final touch is to give our composition a light lightly cold touch, as we spoke before, a bit of green hue will do this trick. So yes, we will click on the Layer Adjustments again, and select the RED channel this time. Darken the image a bit, using two points…

That’s it! Hope you enjoyed the tutorials, and please feel free to download the PSD file for learning purposes (1024 x 764). You can also replace the model of our tutorial with your own image, and you will have all the effects already in place. Click on the image below to full view.

Once you purchase the PSD, and complete the checkout, click the “return to merchant’s website” button — the download will start automatically. if you have any problem, please comment below and I will email you the file within 24 hours.

Today we are going to make a tutorial on frosty text effect. While it’s still cold and wintry outside, I thought it would be high time to supply some more wintry text effects for our readers.

So, begin with making  a new canvas of any desired size, and for now please use plain white (#ffffff) background. Later on we will add a custom texture or picture to the background, but for now, it will be much easier for your to work and see all the effects against the white canvas.

Select the typing tool and using Arial Rounded MT Bold font, set to “sharp”, use very big letters, say over 100. For the purpose of the tutorial we used 115, however if you choose to download out PSD, you will see that our original canvas consists from letters with font size 195.

Type your word.

The main part of this Photoshop tutorial consists from precise application of the layer styles as we are going to work with custom designed curved, textures (default) and a lot of other features. Let’s begin and please try to follow us throughout the tutorial if you wish to achieve the same result.

Go to Layer >> Layer Styles, and start off with “Drop Shadow” options. Apply the settings as you see below. For the shadow here we used a very dark blue, almost black color: #003059. However, feel free to chose a different hue if you are going to work with a light background canvas afterward.

Switch the tab to Inner Shadow. For Inner shadow we used a gray-blue color #0a7eaf, which will nicely complement the overall wintry feel of this text. Please pay attention to the fact that we are using “Noise” here at 3%, to add to the grainy / snowy effect.

Switch to Outer Glow and apply a very dark outer glow effect, we used #0a1732 with 35% which gave us light yet dark outlined shade.

Working our way down (in Photoshop..), to Inner Glow settings. This one gives our text effect the feeling of light and reflection, yet this is not going to be a direct spotlight, rather a cold reflection as you are used to seeing when looking on ice. Also here please note that we have applied a 17%, very visible noise.

Add Bevel and Emboss settings for extremely curved effect.

As you could see, for the Shading we used a custom design curve, which we developed especially for this tutorial. Click on the Gloss Contour icon and try to replicate the mapping as you see below. This could be a little tricky, so if you are stuck, when you download our PSD this will come ready and you will only need to save this one to your custom curves for future usage.

Inside the Bevel and emboss settings, you have an option called “Texture”. Select one of the default, pre-installed patterns called “Weave 5″ and apply with Depth  and Scale as you see below.

Please pay attention to the Depth here. The less you set it to, the less texture coming from the top you will see, so in our case, we use this Photoshop texture to create the illusion of fading snow and you can play around with setting it to even less than 4, to see how you cover just the top of it.

And now, Satin settings:

Gradient is going to be from dark hue of baby-blue shade #6ed3fe to lighter shade of blue #e4ffff

Now the last thing, we are going to add “Stroke”.

Colors: #000000 … #ffffff … #999999 … #cccccc …#000000

And here is what you got so far, if we zoom in a little:

Next step is, select the text layer, just press Ctrl + the layer in the layers preset.

Create a new layer on top of the text and press Ctrl + Shift + I to inverse the selection.

Fill the layer with one of the colors we used for our text:

Se the blending options of this layer to “Hue”. Now, at this point you are not really going to see any difference but what we want to do is add a nice wintry motif to the background, which will complete our frosty text atmosphere.

Take any image you like and paste it behind the text layer. Don’t worry if he hues of the image don’t meet the color scheme of your composition, because the blue layer with Hue overlay blending settings is going to equalize the images’ tones to match the text.

Here is your result (click the image to full view).

The PSD file of this tutorial is available for a download at only $1. Instant download upon payment verification, however if your browser blocks redirects and you have completed the transaction, email me to get the file within 24 hours. Enjoy!

8 Transparent Layer Styles & 3 Elegant Glass Text effects created by using them in combination. Works great for Icons and Buttons too!

INCLUDES :

.asl file with 8 transparent styles.
.psd (800px * 150px) file with the 8 transparent styles for easy copy and paste.
.psd file with editable text (800px * 1400px) with the 8 transparent styles layered to create the glassy text effects depicted.

FONTS USED :

Georgia, Tahoma, Snell Roundhand But these styles look great on a wide variety of fonts. Down;load these styles for only $2, sold exclusively through graphics river.

German: 8 Transparente Layer Styles & 3 Elegant Glas Text Effekte mit ihnen in Verbindung. Werke für große Icons und Buttons zu!

UMFASST:
. ASL-Datei mit 8 transparent Stile.
. PSD (800px * 150px)-Datei mit der 8 transparent Stile für einfache Kopieren und Einfügen.
. PSD-Datei mit editierbaren Text (800px * 1400px) mit der 8 transparenten Schichten Stile, um die Auswirkungen Glaskohlenstoff Text dargestellt.
Verwendete Schriften:
Georgia, Tahoma, Snell Roundhand Aber diese Stile sehen auf einer Vielzahl von Schriften.

Spanish:  8 Estilos de capa transparente de vidrio y 3 elegantes efectos de texto creado por su uso en combinación. Obras de grandes iconos y botones también!

INCLUYE:
. snm archivo transparente con 8 estilos.
. psd (800px * 150px) archivo con los 8 estilos transparente para fácil copiar y pegar.
. psd archivo de texto editable (1400px * 800px) con las 8 capas transparentes estilos para crear el vidrioso efectos de texto representado.
Fuentes utilizadas:

Georgia, Tahoma, Snell Roundhand Sin embargo, estos estilos ves muy bien en una amplia variedad de fuentes.

French: 8 Transparent Layer Styles & 3 Elegant Glass effets de texte créé à l’aide de leur combinaison. Travaux grand pour les icônes et les boutons aussi!

COMPREND:
. asl fichier transparent avec 8 styles.
. psd (800px * 150px) fichier transparent avec les 8 styles de simple copier-coller.
. psd fichier texte éditable (800px * 1400px), avec les 8 niveaux de transparence styles pour créer le miroir des effets de texte illustré.
Les polices utilisées:
Georgia, Tahoma, Snell Roundhand Mais ces styles fière allure sur une grande variété de polices.

It’s been a long time since I came up with a truly original tutorial and this evening I finally had muse to make something that will stand out. I can already see how this tutorial is going to become a classic masterpiece once it gains popularity, so just sit back and read, don’t forget to bookmark this website and subscribe to our feed, to make sure you never miss any of our future tutorials and freebies.

Inspiration: Although today’s horror movies are all quite cheesy, very predictable and always disappointing,  I drew my inspiration from one of the infamous and unpopular movies – “Long Distance“, starring the beautiful Monica Keena. Don’t be surprised if it does not ring a bell, I’d be surprised if it did. I myself however love the cover / poster of this movie, the original plot and I decided to make my own little scenery with my own little plot, which is more or less reflected in the film’s poster.

So, let’s get started. The canvas size is really your choice, you may want to make it slightly longer or even bigger, because we initially work wit ha small image here.

Paint your canvas in dark color, we used #211f1f.

Take one of the grungy backgrounds you like to use, make sure it’s pale enough and not too dark. We used a great image from here.

You don’t need to use a stained old paper, like I used here. You can also use bricks surface, old wood or any other old-looking texture because this is not going to be your leitmotif, we just need something to be on the background.

Now, once you have downloaded the texture you want to use, let’s move to the next step.

Paste the background you downloaded unto the dark canvas you are working with. You will need to either resize or de-size it. I didn’t bother downloading the full version of this background, so I just took the small image and stretched it across the canvas, because in this case, we don’t mind to lose a bit of quality.

Once pasted and resized, set the lending options of the background to “Overlay“. You should have it looking like this..

Once this background has been blended, let’s add some more horror – grunge effects. If the hue of your canvas turns to be different — don’t worry, eventually we will overwrite it all with black and white so the colors are irrelevant at the moment.

Next, we took this nice finger prints image, called “Tint black 2″. Again, paste it onto your canvas, resize, position slightly above the middle…

Set the blending options to “Darker Color” and Opacity to 80%.

This is more or less how it should look.

Next thing we need is a model for our main character in the movie. Here I really can’t advice you, feel free to use any photo you really like, if you want — use your own and then print it up as a poster, this could be a great idea for your bedroom! So… Choose a picture of a girl. We wanted to go with a dramatic look so we chose a fantastic photo taken by Zsolt Dreher of a woman under the rain. You can download it here.

Open the file in your Adobe Photoshop. This file was too dark, so we needed to correct shadows, otherwise in our final (dark)  result we won’t be able to see her face.

Go to Image >>   Adjustments >> Shadow / Highlight. Apply the following (automatic) settings…

Press OK.

Now, go to Image >> Adjustments >> Gradient Map. Chose gradient between white and black, this should be default. If you are getting a “negative” image (with revered colors), just click the “reverse” box. You will get a classic black and white photo with good contrast, thanks to the Shadow/highlight correction we did in the previous step.

We want it all to blend in nicely, so we place the girl’s photo over all the layer we have so far and set the blending option to “Overlay“.

Don’t worry if you get a messy mix of images because we will fix that too later. Most important is that main character image (woman, in our case) would be visible and not too dark.

To avoid the previous layer with fingerprints obscuring our character, use Eraser tool with soft brush to remove any finger prints from her face and body.

We want to still add more to our poster design, because it’s a movie poster, it has to have a CONCEPT. And, it has to reflect and represent that spooky and mysterious concept. So I looked up a nice and heavy photo of a road, taken by Romanian photographer Pniti Marta, and decided to blend to fold it into our composition.

Take the road’s picture, and place it over grungy canvas, yet below the woman’s face and fingerprints layers. Set the blending options to “Luminosity” just like you see on the picture below..

So far, this should be your result. Bear in mind that if you are working with different images and not the ones we used for this Photoshop tutorial,  your result may be different, darker or lighter, with better or worst contrast. Try to keep following the tutorial and see if it gets better when we will be adding more layers.

Next, we need a dramatic, classic horror element and I couldn’t think of a better stock photo to use than Silhouette by Cathy Kaplan. I took her image and since once again I didn’t want to wait for the big image to download, I used the small one and stretched it to match the size of the canvas, which also gave me slightly pixelated blurred effect I wanted to achieve.

Paste the small image (or large) on top of your digital canvas, press Ctrl + T, and while holding the SHIFT key pressed, to avoid losing proportion.

Set Silhouette’s opacity to 80%.

Drag the silhouette layer under the girl and finger prints layer, yet keep it above the road photo layer. The picture below should reflect your result so far. If you lost track with layer sequences and as a result your poster is turning out to be rather different, here is our layers order so far, from bottom to top:

Dark (#211f1f) color layer >> Grunge paper >> Road >> Shadow Silhouette >> Finger Prints >> Girl in the Rain

Next, when we have a great black and white background (it turned black and white when we placed a colorless silhouette’s layer over it), time to add the spicy little details and title. Let’s start with a cliche that any horror movie will have in it, and most of them are going to have it on the poster as well — knife covered with blood! (yep, we finally got to the chop-chop part!) Chose any weapon you like, we went with a classic kitchen knife I fished out of SXC.hu as well. Crop the white  background (in my case I just erased the bg with one click using the Magic Eraser Tool, then Selected the remaining part (knife itself, select it by holding the CTRL key and pressing on the layer, in your layer palette), then I went to Select >>  Modify >> Contract and set it to 1 px. Afterwords I pressed Shift + CTRL + I to inverse the selection and pressed delete. Voila, the knife is neatly cropped.

Place the knife somewhere at the bottom of the canvas to make sure it does not obscure any of our carefully selected characters.

Time to add a spine-chilling title. Since our poster is rather busy, I made a new layer, and using a black color with soft brush, I added a small black cloud at the bottom, where I plan to place my title.

To decorate it a little bit more, I also took one of the shapes I have in my computer and added it on top of the black cloud to give our poster a more of a Gothic look.

I also took one more shape, of a slightly lighter hue and placed it above the black cloud layer. Now this gives the poster a more of a devilish mood.

Finally, the most important part – the title. We made use of Birch Std font to write “Laura’s”, in white, 109pt letters; and placed the name over the black stain we previously made at the lower part of the canvas.

Apply these Gradient settings, by going to Layer >> Layer Style >> Gradient Overlay.. You may also add a shadow like we did but only if you have a dark overall feel on the canvas, otherwise the shadow will spoil the mysterious look.

The second word in our title is written in handwriting, which is more typical to horror movies and suggest a psychopath actually wrote it himself, with blood. We decided to go with an optimistically named font — “Chiller” (costs 29,00 USD to download). Also, just chose a red / scarlet hue of your choice and apply a light gradient, to give the font more depth.

That’s all, really. Hope you enjoyed the tutorial and it will help you to create something beautiful for yourself, your family or friends.

The PSD file you download is EXACTLY same size as the preview image you see, i.e. 546*655 pixels and presents all the layers you see in the tutorial. We do NOT sell or affiliate with photographers, whose images has been used. This PSD file is for learning purposes ONLY, if you don’t manage to follow the tutorial, you can download the source file and learn better from it.

OK, here is a text effect I came up with yesterday while making some crappy design and since it turned out pretty nice, I decided to make a tut about it. So, we will be making this nice oily text:

So, start off by making a new canvas, and fill it with a dark background colour, we used black.

type the word u like… we used customized GauFont PopMagic.

go to layer >> layer styles >> blending options, and set the following settings:

• Inner Shadow

• Inner Glow

and also…

• Bevel and Emboss

• Contour Line Inside

• Contour

• Satin

• Colour Overlay

After all these settings, u will have this:

Now, duplicate your layer.

Select the upper (copied) layer and go to Filter >> Blur >> Gaussian Blur, and apply THIS BLUR

Reduce the opacity of the blurred layer to about 70%.

That’s it, hope u like the result, please post any questions u have!

Please note, when buying the psd, after you proceed with the checkout, you must click “return to merchant” button, in order to go to the download page!

There are so many tutorials and guides online that teach you how to make effective use of the web 2.0 design. While most these tutorials are useful, at the same time they kill the originality in web design. For example, most “guides” tell you that web 2.0 is about having a glossy badge, stripes background, and bold fonts. Result? There are countless hundreds of designs with badges, stripes and bold big letters… and they are no different from one another. It does not matter if you make a web 2.0, web 1.0, or web 75.0 design, it all comes down to being original and memorable.

However, if can’t really find anything particularly original to symbolize your design, it’s “safer” to go with the current trends of web design. So here is a very small fragment of web design layout, and how to turn a regular layout into a web 2.0 layout.

This is what we had…

And this is what we are going to do…

We are going to work in Photoshop, using nothing but layer styles; focusing on mild gradients and shadows.

Start off by using the Rectangular shape with rounded corners, and drawing a… rectangle.

What we need to do first is give our rectangle some depth and life. Following the principles of web 2.0 design, only shadows, outlining and light gradients will give us this effect. So go to layer styles, and drop a little mild shadow. We used #96aed6 for this purpose.

To give the shape a little depth (so it won’t look like a flat object), add mild inner shadow, with darker tone (we used #304f82 )

Lastly, its important to add a little outlining. We will use the #FFFFFF white color, since our shadows from both sides are darker, we want to have a light and semi visible line that will contour the shape.

And this is what we got…

However, this won’t give us enough depth. We want to make this rectangle even more visibly curved, as it does not touch the surface evenly, but adding more shadow using the layer styles, or, making the shadow stronger won’t give us the desired effect. Use this horizontal divider offered by dezinpolio.com and add it to the middles of your shape, so that it will “fade” towards the corners, as shown below:

Now, remember we mentioned the bold letters? Web 2.0 makes a good use of fonts, preferable very easy to read, slightly cartoonish and bold. We had a hard time choosing a suitable font and decided to go with “Cooper Std”.

We are doing to add a very mild shadow (#5674a7) and light gradient from white at the top (#ffffff) to light blue (#cdd9de) …

This will give us a very cute baby design.

Web 2.0 is also about a good proportion and while designs are particularly asymmetrical, others are so to speak obsessively symmetrical. I prefer the second type, as it takes less originality and taste to create, all you need is a sense of proportion. Let’s say we add a few buttons at the bottom and side corner of our design…

Does this look good?

No, it doesn’t because the tabs look way too chaotic, so we will make sure the line of the left side tab,”meets” the line of the bottom tab, like this…

Now it looks proportional.

In case you wonder why we missed a step, the layer styles for tabs are almost identical to the ones we used for the main rectangle and same goes for the font and layer styles of the “tabs”. For learning purposes, you can download the PSD file and analyze the process. Remember that all these semi visible gradient, and 1px outlines is often what makes the difference between great web design and amature attempt in designing. Good luck!

After the successful release of “Precious Heart” on my other blog,

I decided to make a sister icon with a clover leaf. When I was in Prague last time I saw such an impressive variety of Swarovsky glass and it inspired me to make a graphic with similar structure, deep and subtly sparkling. Anyway, the download is free and you can use it any way you like The preview image is desized, otherwise blog template gets reformatted, you can previous the full version here.

Download FREE

Although I mostly prefer to make artistic PSDs, we can’t ignore the big demand in web 2.0 design elements, be it for software or website graphics. So, I decided to make a mini-icons set with animals. These icons cover the majority of web design trends, including rounded corners, juicy colors combination, folded edge, very light gradients on the icon and text, combination of bold and thin text in one line. I hope you will enjoy this file and as usual — feedback is welcome.

(100 kb, zip folder with the 3 icons in PSD format)