In this tutorial, we will show you how to cover an object in a Jaguar style fur texture. In this example, we'll cover a computer folder, but this technique can be used with any other object, like a CD cover, a mouse, or even a computer.
Editor's Note:This tutorial was originally published in the Czech language at Grafika Online. Grafikahave kindly given permission for Vaclav to republish here on PSDTUTS for those of us who haven't quite mastered Czech...
Final Image Preview
Before we get started, let's take a look at the image we'll be creating. As always, the layered Photoshop file is available via our PSDTUTS Plus membership.
Introduction
Let's look at how this tutorial differs from other icon tuts across the net. First of all, a process like this can be applied to other objects (of course bigger object). Also, with icons the object can be viewed in its full size. Above all, any tiny inaccuracy can be easily corrected, or is small enough that it can't be seen at all. So it's possible to keep the length of the article standard without skipping any steps needed to create this Jaguar style.
This tutorial concept was made some time ago. After a few hours of creating in Photoshop, I made what you can see below. It is a folder, but I wasn't fully satisfied with this design, so I left the project for a while. Later, I came back to it with new strength and ideas. This serves as some advice for you in this article. Consider, opening your old work and trying to improve it. You can breathe new life into your old projects.
Step 1
Although we don't need the exact shape of the folder, let's show how to create such a shape. First, create a new document, where we fill 128 px by 128 px with a grey color, as show in (1), this is the area where the folder must fit. Then we draw the shape of folder with the Pencil Tool, as shown in (2). Then set the Grid on every pixel, shown in (3). Then begin redrawing the shape with the Pen Tool, as shown in (4) - (6).
Step 2
We keep doing this until the whole shape is drawn.
Step 3
Here is the example of the original drawing, and the new one created with the Pen Tool. Anyway, the original drawing (sketch) is enough to continue the process.
Step 4
Naturally, we need a good texture, which can be downloaded here.
Step 5
Next, let's try to mask certain part of the texture, so it looks "furry" on the edges. Then change the layer to a folder size. Go to Channels Palette, and find the right one with as big a contrast as possible. In our case, it's the Red Channel.
Step 6
Choose it (Ctrl + A). Then copy and paste it into the document. Then adjust the Levels so the white color. It is really white and black is black. Also, the middle tones may be lowered.
Step 7
Zoom in on the whole picture, and try to find a gradient between black and white, which should be used to create a brush. Then select the area, and duplicate it to a new layer (Ctrl + J).
Step 8
Hide the original layer. Then adjust this layer for the brush trail. We can use Levels again, or the Dodge/Burn Tools.
Step 9
This way we have good control over everything. All we want to do is make the white part really white and the black part black. We keep adjusting it until it looks like the image below.
Step 10
When we are happy, we can choose again with Shift + Ctrl + D. Then invert the layer (Ctrl + I), and make it a new brush trail.
Step 11
Open the Brushes Palette.
Step 12
Set the random size with Size Jitter of 100% and Angle Jitter of 9%. Notice the other settings shown below as well.
Step 13
Then add a color mask to the original (color) layer. Fill this with a black color. Then start drawing with a grass brush, and use a white brush trail.
Step 14
Set the right Angle for every side.
Step 15
We have finished the rough outline, now it's time to finish details. We can use a standard Photoshop brush next. Set the right size and angle, and draw into the mask.
Step 16
As soon as the layer looks "furry" enough, copy it, and make the folder smaller (Ctrl + T).
Step 17
Note that any shape imperfection can be corrected easily.
Step 18
Next grab the Smudge Tool and set it to the right brush.
Step 19
Make the second layer smaller in accordance with the back side of the folder, which is where we must cut into it on the right, as shown below.
Step 20
This is how both layers look merged.
Step 21
It's necessary to make the back layer darker. This can be done by adding a new adjustment layer of Brightness/Contrast, which must be set as a cutting mask (Ctrl + Alt + G). Then lower the Brightness to -100.
Step 22
Then we can make the front layer brighter.
Step 23
Next we add some reflections. Although, we must respect that fur doesn't have any reflection, so we come back to the "grass" brush trail we created and draw with it on the edges.
Step 24
It should be made irregularly, to make the reflection look real. The Smudge Tool can be used again.
Step 25
Then add a shadow, and our icon is finished. Or it isn't?
Step 26
If you want to continue, you can add a label. All you have to do is erase one spot with the Clone Stamp Tool.
Step 27
Then create a new text layer.
Step 28
Next we add some random brush strokes over the layer, and add one darker spot under it.
Step 29
We finish it all with the grass shaped brush. Keep in mind, the drawing must be made according to the angle of the fur.
Step 30
Don't "blur" it too much, as you want it to be readable.
Step 31
Still want more? OK, one last step. To create the background blur the original layer with a Median filter, so the hair is lost, but the outline is still good.
Step 32
Next we set the layer to Luminosity, and add a layer mask Then a draw gradient within the layer mask going from black to white.
Final Result
We add some text, and now our icon design is finished! Good luck with your work, and I wish you many great ideas!
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
User Comments
( ADD YOURS )giackop June 18th
cool one.. i love the icon tutorials.. thanx
blindsmile June 18th
Good Tutorial!
Andrei Constantin June 18th
Outstanding!
Alex Reusch June 18th
Especially the first “drawing-part” is quite interesting, thanks a lot.
John Eivind June 18th
Woaw! Thanks! This was great! Pure great! (It is so sad, really sad, that no clients whatsoever want an icon-set…)
zor June 18th
Loving the outcome.
BogDinamita June 18th
the angle of the 01 looks crooked
pica June 18th
cool one
i love how you made the brush from the texture
it’s such a thing you just gotta remember…
David June 18th
nice tut and fine result!
hoobsy June 18th
phenomenal - such a small icon and so many tricks - i enjoy dabbling
Web Design June 18th
Excellent!
Alex June 18th
Fantastic! Love these Icon tutorials, keep em coming!
Aaron June 18th
nice tip on using the channels palette to extract the brush. definitely learned something new. great tut!
HJ June 18th
Wow, certainly didn’t expect the fury edges!
Great tutorial.
bbdoll June 18th
very nice.
Master June 18th
Cool
Ruben June 18th
Lol that’s funny… though not very useful for me. Thanks anyway!
ZaFaR June 18th
Excellent!
Ben Griffiths June 18th
Really great, thanks
Love the icon tuts
Constantin Potorac June 18th
:))) this one is so funny. Really harry :)). Great job
Kim Dolleris June 18th
Agreed! More icons
Great tut thx!
A bit critik: I think the folder is leaning a bit to much - almost falling
Andrew June 18th
I love it, thanks!
D. Carreira June 18th
Great great great! Thanks!
David Carreira
SpazZ June 18th
Using a brush like that.. Great idea! Thanks for this tutorial!
FBdesign June 18th
cool one
D.T June 18th
It’s nice how the edges are jagged; that gives it a more realistic look.
Diesel June 18th
Hey that is one interesting idea…love the brush technique - thanks!
Wouter June 18th
lol
But it’s ok
Ben June 18th
hey guys come on…what are these comments ??!!..if you like that,don’t quit your day job…amateurs…
photoshop June 18th
nice tutorial
Clayph June 18th
Yeah, Czech ingenuity in its best. ^_^ Finally I have a great birthday present for my sister..
Great job Vašek!
chris rock June 18th
Best tut in a month. Nice. It’s very interesting how you create the icon.
Adam Charnock June 18th
Great tip on creating the brush. I would be interesting to see if the same method could be used in the grass tutorial I saw a while ago as I don’t fancying tracing around indiviadual blades of grass
I am not entirely sold on the white reflection on the folder. It seems too bright (esp. for fur). I would have thought that using shadows more effectively may give a better lighting effect. Bu then again, I haven’t been doing this that long!
Thanks for some great tutorials!
Matt Radel June 18th
Sweet! Great tut. Looks like you’re rockin’ Photoshop 7, eh? Friggin’ awesome.
Ariful Alam Khan June 18th
Nice effect
Mac Tyler June 19th
Love the icon tutorials! This one turned out really great. Only part I thought looked messed up was the perspective on the “07″ on the side of the folder. But anyone who knows their way around photoshop should be able to fix that on their own.
Zach LeBar June 19th
thats great! i love icon tutorials, and this is one of my favorites.
MONSTER June 19th
This is the best thing I’ve seen on this site so far.
Way to be creative!
Joefrey Mahusay June 19th
Nice one. Thanks!
Carlos June 19th
Not bad. Lots of steps for a small outcome
Brad June 19th
I like the brush making part with the fur - the label isn’t blowing me away though - I think the opacity could be turned down a bit and it needs to be skewed to the left to make it look like it’s actually on that plane.
wildwise June 19th
lot of fun
Tim June 19th
nicely done!
Danny June 19th
Looks great!
Snorri3D June 19th
cool tut
Shane June 19th
nice work - thanks for posting.
Alvaro Guzmán June 19th
wild outcome! nice
Leo Utskot June 19th
Which fonts are being used?
Zach June 19th
It’s like you guys know what I want to see, before I do. I’m using this for my AudioJungle submission. w00t!
Marianne June 19th
Nice tutorial! Keep up the good work!
Deddy June 19th
Ugly. Sorry.
D.A.T. June 19th
Nice tut thanks!
Aliqureshi June 19th
Nice, I liked the end result :]
aGS June 19th
Perspective is better achieve with “Vanishing Point” filter… oops… PS7 vs CS2… allthough fun result
Rocco June 19th
WOW!!!
Lamin Barrow June 19th
Nice icon. Thx for the tut.
CPG June 19th
Where would you use this?????? Super kitch…
goldenthunder June 20th
Very cool thanks!
w00p June 20th
Ahh so warm n fuzzy! Thanks for the tut.
marikikis June 20th
Very cool thanks! i made this with a cow texture
Jazz June 20th
Wow! Thanks for the awesome tut! This one is really great because you can apply the same technique using textures other than this one. Stones or paper, for example =D
jameslh June 20th
friggin’ brilliant
Kevin June 21st
You should know that these may not be Jaguar spots, but indeed are more similar to the markings of a leopard. The coloring is similar to a Jaguar, but they also have smaller spots in the center of each pattern area. Leopards do not have the smaller inner spots in their markings, thus this image can cast a confusing light on exactly which cat (operating system) the folder refers to.
pHeR-d June 22nd
i like the idea of making fur. thanks
Lulu June 22nd
people help please!
i cant find COLOR MASK
what is it and where is it located in photoshop menu???
Tayfun June 23rd
Forget the icon, this is a great tutorial for creating brushes! Would be ideal for digital painters and artists. Some of you jerks need to stop looking at the outcome and learn the techniques to develop your own style.
Andrei Constantin June 25th
I like the look and feel of that fur
J.T. Shaver June 26th
Cool icon! Sometimes hair/fur effects look awesome when done right and this one is pretty cool.
Kenneth Jensen June 29th
Leo Utskot >> The stencil font is called Cargo, and is made by URW++ http://www.fontshop.com/search/?q=Cargo&x=0&y=0 . I don’t know what the other font is called..
Maryam August 3rd
It was something neeeeeeeeeeeeeeew.
I loved it
crazyart12 August 9th
nice!!!!
Oliver October 23rd
WoW - the icon looks very great…
Seo November 12th
Cool PSD Tutorial and very useful - even for newbies. Thanks a lot.
nathan laban January 6th
superb….and we all know that UI designers are very inspiring…
Add Your Comment
( GET A GRAVATAR )Your Name January 8th
Trackbacks