Step one:
Start with a large white canvas, in your layers window make a new layer set. Name it Custom Head Mascot Web Graphic.
Create a new layer then draw a 30 x 22 pixels, #7400FF ellipse using your ellipse tool. Use the fixed size setting under ellipse options to make the exact circle.
Add the following layer styles:

Step two:
Now make the head, first create a new layer then draw a 60 x 97 pixels, #DF87FF ellipse using your ellipse tool. Use the fixed size setting under ellipse options to make the exact circle.
Add the following layer styles:

Step three:
Create a new layer then draw a 13 x 29 pixels, black ellipse using your ellipse tool. Use the fixed size setting under ellipse options to make the exact circle.
In your layers window set the layers blending mode to soften light and add the following layer styles:

Step four:
Duplicate your glassy ellipse from step four.

Step five:
In a new layer add two black circles. This will complete the eye structure of your mascot.

Step six:
In a new layer create a 8 x 14 pixels, black ellipse. This will be the nose like structure.
Add the following layer styles:

Step seven:
Create a new layer then draw a 25 x 12 pixels, black ellipse. Use your ellipse tool to make the ellipse so you can use the fixed size setting under ellipse options to make the exact shape.
Add the following layer styles:

Final Image:
Custom Head Mascot Web Graphic.

Custom Glassy Text Effect.

Start with a large black canvas, in your layers window make a new layer set. Name it Custom Glassy Text Effect.
Choose your text tool and select font Eurostile from the font list. Set the font style to bold, size to 48 pt, anti-alias method to crisp and #7EC9DD for color. In a new text layer type your name.
Add the following layer styles:

Now type your name again using the same font styles, type etc from step one but black for color.
In your layers window set the layers blending mode to lighten and add the following layer styles:

Choose your text tool and select font Webdings from the font list. Set the size to 72 pt, crisp and #7EC9DD for color. In a new text layer type “e” which should render into an M with an arrow on the end.
In your layers window highlight your “e” text layer and right click then choose Rasterize layer. Now cut the the whole m structure so your left with the arrow.

Position your arrow to the end of your name.
Add the following layer styles:

Choose Select above your screen, choose Load selection and leave the settings default. Your arrow should now have a marquee selection, now create a new layer and fill selection with black color.
In your layers window set the layers blending mode to lighten and add the following layer styles:

Custom Glassy Text Effect.

With Valentine’s day around the corner it is the perfect time to sport these rss icons on your blog. There are 25 multicolored PNG icons so no matter what’s your blog color one of the Icon will fit your blog. You can also use them as your favicon feel free to do what you want with it (Only restriction is you can’t sell or take the credit). I have also included the original .psd source file so you can edit it the way you want it.

Preview :

More info :

Type: png/icons
Total PNG : 25
File Size: 700 KB

Download : cj_heartRSS.zip

The zip file includes all the 25 PNG ICONS and the original source .psd file.

Along with the Black and White PNG icons, these were to distributed across India in Digit DVD’s and also downloaded across the internet many times. There is a total of 17 PNG icons of the size 128px X 128px . The total file size is 309 KB.

Preview:

More details :

Type: png/icons
Total PNG : 17
Size: 128px X 128px
File Size: 309 KB
Download: cj_sunset.zip

As we observe the trend in web design we will notice that the website designs are moving from those heavy graphics to light, vibrant colour designs. Many of such designs are inspired by Mother Nature. Nature inspired designs are extremely calm and install freshness to the website. In this blog post I will try to point to few of such beautiful designs spread across the web. These designs also remind us of the need to connect to nature. We humans have already destroyed a great deal of nature. Each passing day we are realizing just that. Designs based on nature are very inspirational have a look yourself.

1. 4DESIGN :

This is one of the best design out there. No wonder it is on the top of the list. Just look at the design it is so refreshing and inspiring. When was the last time we something as beautiful and fresh as this. In this design you will notice wild flowers, a king fisher near it’s nest and a hot air balloon. The navigation is on a wooden like strip. Great Design!

2. N-DESIGN STUDIO :

NDesign-Studio has one of the best looking theme for wordpress. This custom made theme has a peacock, mountains, rainbow and roses. This design is drawn using Adobe Illustrator. NDesign has won many awards and recognition for it’s design. The point to note here is even the best designers are inspired by nature.

3. VOS RESSOURCES :

This design focuses on the wild side of the nature. The design consists of a beautiful leaf and the header sports a waterfall. This design also has bamboo’s at the right top. Even the favicon used in the site has the leave which also acts as the logo for the site, background colour is a pale olive leave colour. This layout is calm but not as vibrant as 4DESIGN.

4. ARBUSTS PHOTOGRAPHY :

This web design is for a website that does photography on wedding occasion. In this design the designer has show bride and groom enjoying lonely time with nature. Design shows a large lake, ice capped mountain and a tree which is showering leaves over the bride. All these are spread on a grassy plain. Designer has tried to merge the love between two person along side nature. A job well done.

5. BELFLORA :

This website is completely dedicated to nature. The complete first fold of browser ( The view area of browser which we can see without scrolling ) is covered by nature. Lots of grass, flowers and a cute butterly make this web design as close to nature as possible. The website is in russian.

6. HYPJO :

This design shows the nature at night. Be it day or night nature looks beautiful anytime. This layout shows a tree with birds returning to there nest after days work, half moon and stars. This design has a very unique navigation , instead of the usual buttons the navigation are person at work, roll over the icons to see the effect. Impressive! The layout is one of the most simplest layout of all we saw till now.

7. STUDIO 7 DESIGN :

This is another vibrant colour design. This design sports a country side scenery with some fresh vegetables. For information arbust photography website is done by Studio7Design. The logo shows a mountain and sun setting at background. This design is as fresh as it can get.

8. OPEN SOURCE TEMPLATES :

This website offers free templates, again this website template is done by Studio7Design. The header shows sunrising from mountains some clouds and birds flying around. Layout scales 100% to the browser and is mostly gray. Pretty simple layout.

9. CSS ZEN GARDEN :

The most simple of all design, a very light coloured layout which shows violet colour lotus. This layout also has a tree with lots of flower. Pretty calm layout and very easy on eyes.

10. KULTURBANAUSE :

This is the layout where nature is shown in it’s mystical form. It shows dried tree and the landscape is spread with fog. Looks a bit scary, if we scroll down we find the layout has a waterfall which falls down. Layout is mostly violet coloured with mountain in the background. A more of fantasy land layout.

In this compilation we saw nature under various moods. This also shows some of the best looking layouts are inspired by nature. The main reason why nature based layouts look so connecting is because we all can associate ourself with nature. Just a tip, if you are planning to enter any contest for making templates or design try do it on nature as your chances of winning is much higher than others.

Black and white PNG icnos. This PNG icons was released way back in may 2005 by me. Apart from online download thousands of Digit users also used these ICONS as it was distributed in the DVD which comes with the Digit Magazine. This set includes Icons of various Applications and Games. Perfect to spice your desktop when you use them as Docks.

Here are more details about the ICONS:
Type: png/icons
Total PNG’s : 60
Size: 128px X 128px
Download : cj_blackandwhite.zip
File Size: 439 KB

When was the last time you client requested you to use the same font as on the image. You would have probably spent hours asking other fellow designers and searching your archives for an same font or at least an identical looking font. Well the good news has arrived you don’t have to waste your time any longer.

It is as simple as scanning the image and uploading it to WhatTheFont. If you were unable to find the font that your are looking for there is an active forum and members across the world will help find it for you. How cool is that ?

After I uploaded it scanned the image file and tried to recognize the alphabets and should I say it matched so perfectly. Once you done, you should press ok. This will give you 5 possible match for your font and the first font probably has a 100% match.

Finally i founded that the logo made using the font at WhatTheFont is softie. Pretty interesting tool there!! Must bookmark for every designer. Do let me know your experience with this free online tool.

Advertisements:

Looking for symbol scanners? Get your barcode printer products from your #1 code resource! We carry a zebra label printer along with a credit card reader! Check out all of our barcode products today!

I will try to add up a list of top 10 tutorials website that every Photoshop learner must visit. These websites are selected on the basis of quality of tutorials, number of tutorials and their years of service. I will not be listing tutorial websites like Good-Tutorials or Pixel2Life as they just index the tutorials but the real tutorial writers are different. So lets get started.

PSDTuts: PSDtuts is a blog/photoshop site made to house and showcase some of the best Photoshop tutorials around. We publish tutorials that not only produce great graphics and effects, but explain in a friendly, approachable manner.

As you can see I have been using Adobe Photoshop all these years. Finally I have decided to learn Adobe Illustrator, for start let me clear if you know how to use Adobe Photoshop, it doesn’t mean you can use Illustrator. Both these softwares are completely different and serve different purpose. The most difficult tool to master is the pen tool. It requires hours to practice to perfect. I tried my hand by tracing a picture and came up with this image. Still there is a lot to learn for me but I thought I would share it with you all.

BTW, don’t mind her face ha ha.. Day by day I am getting used to Illustrator, the time I spend the better I get. Will surely post , if I come up with something interesting.

Image Preview:

In this tutorial we will create a Cool Blue Header Design for our website. Having a cool header really spices up the overall look of the site and it is essential to have a good looking header.

Step one:
Start with a 1000 x 130 pixels, #007EA2 canvas.

Create a new layer then draw a 1000 x 30 pixels, black rectangle across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the exact rectangle.

In your layers window set your layers blending mode to lighten and add the following layer styles:

Step two:
In a new layer draw a 1000 x 5 pixels, #C6ACE2 thick line across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the exact line.

Step three:
Now below all your current designs applied to your header add a 1000 x 30 pixels, #006C92 rectangle across your canvas.

Add the following layer styles:

Step four:
In your layers window make a new layer set, name it Navigation. In a new layer 19 x 19 pixels, black circle. Use your ellipse tool to make the circle so you can use the fixed size setting under ellipse options to make the exact circle.

Add the following layer styles:

Step five:
Create another layer. Inside your last circle draw a 10 x 10 pixels, white circle.

Add a stroke layer style to your circle layer.

Choose your text tool and type in your first navigation link using font Arial, bold, 11 pt, none and #FF0000 for color.

Step six:
Now complete your navigation system. Just duplicate your navigation layer sets and modify the texts.

Step seven:
In a new layer seperated from your layer sets draw a 1000 x 6, black line across your canvas.

Duplicate your thick line and nudge it below your original line, set the layers blending mode to Soft light at 28%.

Step eight:
Again in a new layer draw a 1 pixel white line located on the bottom edge of your last thick line. In your layers window set the layers blending mode to Soft light.

Step nine:
In a new layer draw a 1000 x 35 pixels, black rectangle across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the rectangle.

In your layers window set your layers blending mode to lighten and add the following layer styles:

Step ten:
Just at the bottom of all your designs so far draw a 1000 x 11 pixels, black rectangle across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the rectangle.

In your layers window set your layers blending mode to lighten and add a gradient overlayer layer style:

Step eleven:
Make a new layer set, name it Line detail. In a new layer draw a 1 pixel black line.

In another layer, draw a 1 pixel white line. Set your white line layers blending mode to Overlay at 37%.

Step twelve:
Add a line separator for all your navigation links.

Step thirteen:
Create a new layer then draw a 100 x 46 pixels, black rectangle above your second link. Note your second navigation might be different from this tutorial so your black rectangle should be different as well. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the exact rectangle.

In your layers window set your layers blending mode to lighten and add a gradient overlayer layer style:

Step fourteen:
Add the same black rectangle structure on your other links.

Step fifteen:
Choose your text tool and set the font type to Arial, bold, 22 pt, crisp and white for color. In a new text layer type your name.

Add the following layer styles:

Step sixteen:
Now type your slogan using font arial, bold, 10 pt, crisp and #FF0000 for color.

Final Image:
Cool Blue Header Design.