Tutorial Details
- Program: Photoshop CS
- Difficulty: Beginner
- Estimated Completion Time: 25-35 mins
Download Source Files
Final Product What You'll Be Creating
In this tutorial, you’ll learn to design a realistic calligraphy pen from scratch. The tutorial involves a simple use of the Pen Tool and a few flexible Layer Styles. Lighting and reflection techniques are explained throughout the tutorial. This might be a quite useful for icon enthusiasts. Let’s dive in…
Step 1
Create a new document with these settings:
Step 2
Create a new layer set and name it “Pen”. Select Pen Tool (P) and draw a shape like one below. Before making the shape, make sure to select “Shape Layers” option from Options bar. Name this shape as "base" and give it a Gradient Overlay of gray shades.
Step 3
Draw another shape using Pen Tool and name it “body”.
Step 4
You need to add some reflections to the body. Create a new layer and Command-click on “body” layer, fill the selection on the new layer with white. Press Ctrl+T and reduce the width of the new layer to 75%. Now go to Filter > Blur > Motion Blur ,click OK after making the settings shown below. Finally, reduce opacity of the layer to 50% and give it a Gradient Overlay.
Step 5
Use Rectangle Tool (U) or Pen Tool (P) to make a shape like one below and name it “neck” for convenience. Give it Layer Styles as mentioned.
Step 6
Just like the body of the pen, add reflections to the neck but while doing so, change the opacity of first reflection layer to 75% and that of duplicate layer to 100%, keeping size reduction proportions same.
Step 7
Using Pen Tool (P), make a curved strip as shown.
The strip looks very smooth but actually it has got some aliasing which can create problems in the forthcoming steps. To fix this, right-click on the shape layer and select “Rastersize” from the menu. Now apply these filters to the layer:
Filter > Blur > Gaussian Blur (Radius = 0.5 px)
Filter > Sharpen > Sharpen Edges
Next, give the strip these layer styles.
Step 8
Create a new layer (name it “shadow”) and place it below “strip” layer. Command-click on strip layer and go to Select > Modify > Expand, type 2 px and click OK. Now fill the selection with black on the “shadow” layer. Next, apply Filter > Blur > Gaussian Blur (Radius = 0.5 px) to the layer.
A part of the shadow is overflowing on the pen’s body. To eliminate it, first Command + Click on the “body” layer, then Command + Shift + Click on the “neck” layer. Go to Select > Modify > Contract, type 1 px and click OK. With the “shadow” layer selected and the selection loaded, press Command + Shift + I and hit Delete.
Step 9
Create a shape like the one shown below using the Pen Tool (P) and give it a Gradient Overlay of the same colors as the ones we used for the “base” and “strip” layers.
Step 10
On a new layer, fill a selection with black using Rectangular Marquee Tool and Elliptical Marquee Tool as shown below. With the layer selected, go to Layer > Add Layer Mask > Reveal All. Drag a black to white gradient as directed.
Step 11
Use Step 7 and Step 8 to add a strip and its shadow over the nib, as shown.
Step 12
Right-click on the "Pen" layer set and select "Duplicate Layer Set" from the menu, click OK as the dialog box pops up. With duplicate layer set selected, hide the original layer set (as a backup copy) and press Command + E. By doing so, all the visible layers of the layer set will be merged into one layer. Go to Edit > Transform > Rotate, rotate the layer by 45 degrees clockwise. Finally, give some layer styles to the pen.
That’s it :). I hope you learned something new from this tutorial.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Asher Abbasi
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Wow, excellent end result, thanks for the great tutorial.
Yh, but. Swear I saw this tut before
first!
Would be better made in Illustrator, but anyway, it’s a nice tutorial.
Indeed but it becomes lot flexible with Photoshop.
How does it become more flexible w/Photoshop???
unless I just know nothing about Illustrator, PS offers more in the way of filters and transformations for rasterized graphics, granted a lot of this work is vector based. You could always make it in Illustrator then place it in PS.
If you wanted to make the pen more realistic with more steps and said filters/textures, you’d have to use PS. Illustrator is clean, but in my opinion the artistic possibilities and potential realism is greater in Photoshop.
Plus if some one is going to use it for the web in a layout, might as well be in PS since there’s a 99% chance you’re not doing a web layout in Illustrator.
“Illustrator is clean, but in my opinion the artistic possibilities and potential realism is greater in Photoshop.”
Obviously you’re not familiar with the gradient mesh tool. :)
Love this tut! Thanks!
I LOVE IT TOO SO MUCH!
It looks very good, great tutorial. It didn’t quite look right to me though, but I couldn’t work out why. So I discussed it with a friend and we decided the width/length ratio makes it look like a very short pen.
and it makes it a non-elegant (I dont know how express it) pen. =P
it’s a bit short and fat and it makes it a non-elegant (I dont know how express it) pen…As a child’s crayon…=P
I like short and fat pens. Very comfortable to hold.
The perspective is off, that’s why, Look at the shape of the ovals whixh arew separating the sections of the pen. They don’t match the position of the pen in space and they don’t correspond to each other either.
It’s always the perspective that separates the boys from the men…
Pretty tuts.
THANKS ENVATO!!!
Good tuts.
THANKS ENVATO!!!
Nice one, Asher!
Very good and nice to see an “easy” one. Only comment is that it could be a little longer and the icing on the cake would have been some ink coming from the knib with a little pool at the bottom.
Thanks for posting….
Really good idea :) I dunno why it didn’t hit my mind before writing the tutorial
Very good one, maybe more longer?
yup, you just need to increase the size of the pen, all other steps will still be same :)
Also: The shadow makes the pen look flat.
I agree with this comment! The shadow must be softer !
whats up with all the make an icon tutorials lately?
very nice tutorial :)
One retweet from me :D
YEAH make better tuts
I think it could have some more detail, but however, its nice.
Had this been an icon showcase site, I’d have included a lot more details.But this is a tutorial site.I wanted to include least steps with best possible result.
Though short, the tutorial contains many techniques which beginners are unaware of.
I’d suggest every reader not to spend time on observing the final outcome and pointing out negativites in it.Instead, go through the tutorial and see what’s new in it :).
The final result is of no use now since everyone can make it, it’s the techniques that should be extracted out of the tutorial.
Well said :)
And that is correct, you do the tutorial to learn new techniques, not to just copy the design and call it your own. Nice tutorial.
aevion – love your web page, great stuff!!!!
I really benefited from the list.
Thanks for your sharing!
Really, so beautiful work… so much better
This is a veru nice tutorial! Thumbs up! For a Photoshoholic, I really love when you did it excellently by Adobe Photoshop.
I don’t mean to act rude… Or sound unappreciative… But what is the point of tutorials like these. There are loads of tutorials that show you how to make everyday objects but what good is that. Surely the importance of it is very rare in everyday graphic design…
don’t hate me for saying this but that’s just what I think…
If you are a web designer, you surely will need icons for different sites.Icons are mostly based on everyday objects and the purpose of this tutorial is to show that quality icons can be designed in Photoshop alone.
I think the value here is not necessarily the final result, but rather the techniques shown throughout the technique so that you can apply similar techniques for your own situation. For example, the motion blur + Gradient Overlay in Step 4 is a nice way to give a nice three dimensional effect, whether you’re making a pen or a sign post or any cylindrical object.
Very nice. Tutorials like this is very good in learning new techniques.
Very good tutorial I like this for good help for creating photo shop creating & editing fountain pen and note book writing. very nice post.
seriously?
Very nice tutorial.
Thanks.
Nice one asher
A very useful lesson a long time searching for something similar, thanks.
its an excellent tutorial, it will be a great asset in my library.
for those who whine about the width or length it is easy to transform..
thanks!
GREAT TUT
Nice Tutorial
very useful thanks.
Hey Asher, Nice one. But where is the cap of the pen? (just kidding :-) )
Easy to follow by the way.
Glad you find it easy :) I intended to include the cap in the final result but skipped the idea to reduce the number of steps.
great tutorial Asher
keep it up buddy
Fantastic! and very useful.. Thanks.. :)
Is there anyone out there who will help me. I have Photoshop CS3 extended but have been unable to do much since I got it due to illness – - so now I so much need to know how to do what is probably a simple thing: I want to upload a picture onto what will be my new website. I scanned a tiny little picture of two little friends into Photoshop CS3 Extended. I made the background transparent because I want to use the little friends as an avatar on my new website store. I got the background erased and I got and saved a selection of the two little friends. Now I must reduce the size to 100×110 pixels -then upload it so that the transparent background disappears. Save it as what? Export it into Illustrator? How? Please please help and thanks to anyone who is willing to help
How can a transparent background disappear???
I Don’t know exactly what your problem is, but if you want alpha-transparency for the web you need to save as png-24. Go to File > Save for Web and Devices and pick the png-24 format.
You don’t need the selection and you don’t need Illustrator.
If you use png graphics on your website, make sure to have transparency work with the IE6 (there are several tuts over on net.tutsplus on how to achieve that).
I don’t know if this is the right place for such a newbee question, either. Maybe you want to look for a PS Beginner’s forum for that kind of stuff (there are myriads out there in the net).
Hope i could help you.
its really valuable tutorial,thanks g
not work for me.. some other collors..
Step 6 does not help in getting the final result….shame
Seems like most people comment having not done the tutorial….shame
This is turning into a community of haters and fan boys/girls who dont actually follow the tutorials.
I see very few people helping others, what community?! Brought together by hating/loving something they dont even do.
Save it as a Transparent PNG-8
Nice tutorial
Thanks this was really easy to follow, I used it as part of a flash animation where a pen writes the text. Cheers!
Salam
Nice tutorial, I like the result too.
Nice tutorial really help full…..
Tutorial simple, but very practical!
Very good and nice to see an “easy” one.
That was a good one. I made it! YEAH!
But one more thing, guys: PLEASE, PLEASE, PLEASE: Don’t just write “to this, and then this, and this, and that, and this”. Also provide the “WHY”. WHY should I do this, WHY should I do that. You know… the whole science behind this. Sure one can figure that out after a while and doing it a few times, but some more explanation on why 3 px width and why not 20 px, for example, would rock. After all of course there’s nothing to complain about, it’s a free tut, so I’ll shut up :)
I love it so much too
Hi Asher,
how about the license for this beautiful image? I’d like to use it within the icon for a little app named “GeoNamesTagger”. Is this possible?
Cheers Sepp
You lost me at Step 4 – not sure what I was looking for plus you use a lot of Windoze commands.
thank you for this tutorial..
this will very helpful for beginners …