So lets dig in and see how its done.

What are we making

We are going to start with a simple apple image that you can see here. We going to cut it out and add the dew effect over the apple to get final result that you  see below.

Final Result

Click to Enlarge

Getting the background right

We starting with a canvas size of 1500 x 1300 pixels. Fill it with a green with RGB values R:89, G:121, B:35. You should get a dull green color. Add a radial gradient effect to it. Set Blend Mode to Multiply set Opacity to 35%, check the Reverse box and set its Scale value to 147%. You should get something like below.

Add the Apple

Now lets add the apple to it. We have already cut the apple and removed the white background, so all we have to do is simply copy paste it above the background and scale it proportionally so that it fits in. It will look something like below.

Create a new layer and add a little shadow to the apple with a softbrush and move the layer below the apple layer. So now the apple looks grounded.

Now create a new layer, take a big size brush and set its color to white and click on the apple once. You should have something like below.

Now add this new layer to a group and move the entire group folder below the apple layer.

Set the groups Blending Mode to Color Dodge and Opacity to 60%. You will get a nicely back lit apple like this.

Add a bit mode dimension to the apple we add in a little inner glow to it. The settings are as below.

To make things more interesting & lively we are going to add a little more contrast to the entire composition. We do that with a Curve Adjustment layer.

Create a curve like above and you should have a nice high contrast image as below

So now that we done with the base of our composition its time to do the real thing, The Dew Effect.

The Text Effect

First we simply write the text Fresh scale it to proper size and rotate it to30 degrees. Font we are using is Berlin Sans FB Demi, you can find it in the source files zip. You should have something like below.

Then we wrap transform the text and give it a Bulge transform & Bend value 13.5. This makes the text look like wrapping the apple a bit. Wrap transform Button is located at top right in Photoshop CS4.

Next we will make the text layer transparent by making its Fill opacity 0. Remember that Fill opacity of a layer makes only the layer transparent but layer styles still remain visible & the Opacity setting above Fill affects both layer and its layer styles.

Now we add some Bevel and Emboss to the text layer with settings below. Take a note that we are using a custom curve as well in those settings.

Adjust the settings till you get the right results. The final text layer should look something like below.

After that we add some inner and outer glow to it to mimic refracted light and shadow on the text.

To finish we add just a small shadow to it to give it a bit more dimension. And thats is we are done with the text effect.

Adding the Dew

For the dew create a new layer. Now take a hard brush of about 30-50 pixel size depending on how bigger drops you want and change its settings as seen below.

Now simple move the brush over the apple you should get some scattered brush dots on as below. It doesnt have to be exact just random dots as you wish.

Hide the text layer for time being. Now using the wrap transform tool wrap the dots as is they are on the apple surface. At the end you will have something like below.

Now to remove the dots outside the apple simply Crtl + Click the apple layer to make a selection.

Then simply add a Layer Mask to the dots layer. You should get something like below

We are almost done, now simply copy the text layer styles and apply it to the dots layer. We have changed inner glow settings a bit as below.

Now turn on the text layer and remove the dots overlapping the text and you should have your dew and letters ready.

Download Source PSD

Final Words

So today we learned a neat little trick to quickly mimic dew in Photoshop. Let us know how you liked it. Also let us know what else you would like to learn. Feel free to post your queries & suggestions using the comment form below.

What To Create

First and foremost you need to decide what icon to make. Once you get is clear what you want to do then comes the next step.

Sketch It Up

If you can get it on paper you can do it in real, if its difficult for you to visualize the object seek references of real world object. We live in a time where we don’t have to go through magazines or other sources for inspiration you can get almost anything from internet these days so finding a reference is pretty easy.

The Perspective

Our world is 3 dimensional so nothing is flat. So depending on what you want to make decide on an interesting angle so that the object captures the viewers interest. All you need is some basic Knowledge of perspective and ability to visualize the object in that view. Again you can seek references to get is spot on.

Color and Texture

Colors & Texture are very important when making icons. They decide the look and feel of the object. You can use bright shiny colors to give a plastic or a glass finish or you can have a grungy rough finish to mimic leather or Metal. This is very important step in modern icon design and sky is the limit on how much detail you can put in. Remember The Devil is In The Detail.

Light & Shadow

Light is what makes an object appear 3 Dimensional to us. We recognize an object by the way light creates shadows of it or bounces of from it. So there are basically two lights illuminating any object in Natural environment, one is the direct light other is the bounced light. Both create different effects and different kind of shadows. We discussing this here cause if you have a good understanding of light you can easily make your icon more realistic. That’s the main difference between a good icon and a great icon.

Conclusion

Icon design is an art-form and the more you practice it you will get better. Observation of real world object helps, the more you see things minutely the better your skill will be, same as when you learn how to sketch its taught to observe the model well before drawing. Once you get that right rest is easy and computer can help you with that. There are so many objects around you that you can try to make as icons so start making them today, also if you would like to share what you create you can do that in comments and I will be glad to see them. Also if you got queries drop us a line and let us know what you would like to learn from this blog. For more such great tutorials and articles stay tuned….

P.S.- Subscribe today to our RSS to get more such awesome stuff in your email Subscribe to JMonit.com today.

Tips For Social Media

Most social media sites provide a limited number of settings to show your branding, the trick here is not to reinvent the wheel but to live within the constraints. For example in facebook they provide a fixed width on the profile picture but height can be variable, so if your logo is horizontal you need to create it vertically or simply rotate it 90 degrees whatever suitable. Below is the example of what we did with our logo for Social Media.

Twitter Branding

Twitter Provides two things you can customize one is the twitter avatar other is the background. Since new twitter was launched backgrounds have become obsolete as very less of it is visible when people are logged in but the background shows well when someone accesses your twitter profile directly. Checkout the photo below for comparison.

Twitter Page visible to users if they are not logged on to twitter.

New Twitter profile layout after a user logs in As you see very less background is visible.

Some part of the background will be visible through the transparent pane on right side. So you need to plan your background accordingly. If you get confused on the background there is an easier alternative called Themelon. Themelon allows you to customize twitter on the fly, it has many ready themes that you can try on and you can also customize them as you wish so check it out.

Now for the twitter Avatar. Twitter provides you a space of 128 x 128 pixels so you have to cram your logo into that. It might be difficult. So if you have a horizontal text logo you can break the words in two rows like we did with our logo. We also added in a heart to depict social media.

Else you can take initials of words and show your full logo on the background on to the left or right side of it as suitable. If you already have a symbol you can use it else you can simply crop your logo in a creative way so that your message still reaches the masses.

You can follow us on Twitter for more such awesome tips.

Branding Facebook

Facebook Pages are a great way to establish your branding on Facebook. Facebook provides a vertical space for your branding so you need to rearrange your logo accordingly. There is also a thumbnail that is generated with the profile picture, you get controls on what part of your logo needs to show in thumbnail space. Choose what is best suited in your case. Example below will make things more clear.

There is more to Facebook than Just a profile image, like you can create a new fresh page in Facebook or even something like a small site with the Facebook markup language FBML. Since that is beyond scope of this article we will see the detailed process on how to make an awesome Facebook page in upcoming articles. You can even follow us on Facebook to get updates.

Branding YouTube Channel

You tube also provide decent amount of control over styling and branding. You can change colors fonts and backgrounds. The settings are under “Themes & Colors” tab on your page.

You can add a profile picture. since profile picture is square space you can do same as we did with twitter avatar. Below is the example of how we changed our logo to match YouTube, notice we added a small camera icon in the background. Possibilities are endless and you can create innovative avatars.

One interesting feature that YouTube has is that you can make your channel page semi-transparent or completely transparent also you tube channel pages have a fixed width of 960px and by default it aligns background to the top center of the page. You can use all these features to your advantage by making and interesting background so that its visible through the semi-transparent page or a complete layout like background and make the page transparent so that it give a feel of a totally new custom page.

Our YouTube channel will be featuring videos on all topics related to design and online tips and trick so subscribe today and never miss a thing from us.

Conclusion

No site today can live without social media integration and we hope these tips will help you to build a better brand image on social media. Stay tuned for more such great stuff on our blog. Until next time…

Make Money Online

Alvin Phang’s GatherSuccess is a great resource where you can find lots of tips and articles showing you how to make money online. You will get to learn how to generate income out of your blog, also lots of neat tricks which will help your site traffic.

So here’s how you can make money online, simply click on this link Make Money Online and start making money online today.

Apart from design core concept we will be teaching stuff as well like photoshop tricks, HTML/CSS techniques, Javascript and many more web related things. Also we would like to hear from you on what you need to learn or want to read on the blog, we would love to make your request into a usable article.  So lets get started with things this new year.

HAPPY NEW YEAR 2011! Stay Tuned…