Icon Tutorial x2

[splendoris]

These tutorials were both requested. I didn't save either icon as a .psd, so I had to totally recreate both of them from memory, so they may be a little bit off, but I tried to get them as close as possible to the original. Both of these are made for moderate beginners who at least have some knowledge of how to use their program. Made in Photoshop CS, but should be easily translatable to anyone who knows their program.

Tutorial 01
01. Started with this image, (you can use your own if you want):
firebender.com/e12/images/fb0061.jpg

02. Cropped to this:


03. Duplicate the original layer.

04. Make sure the duplicate layer is selected, and go to Filter >> Blur >> Gaussain Blur... A window should pop up. Set your radius to 1.3 pixels and click OK. Should look like this:


05. Duplicate layer still selected. Set the layer mode to screen and change the opacity to 86% to both brighten and slightly blur the original image.


06. Take this texture:

Paste it on top as a new layer. Set the layer to Screen, 100%.


07. Duplicate your original layer, and bring it to the top. Desaturate it by going to Image >> Adjustments >> Desatuate. Set the layer mode to Soft Light, 100%


You can see this made the image more visible. If you'd like, you can repeat step 07 to achieve an even darker effect if that's just too much texture for you.

08. Add text/brushes as you see fit. For mine, I used this brush: and deleted the text. Then I added my own tiny text, and wrote FREEDOM FIGHTERS in size 10, Georgia, letter spacing 25

The tutorial makes this icon:
This was the original icon:
Pretty close, I think ^^ And it was pretty simple to make, now wasn't it?

----------------------------------------------
Tutorial 02
01. Original image:
firebender.com/e14/images/fb0186.jpg

02. Cropped to this:


03. Go to Image >> Adjustments >> Auto Contrast. You should end up with something like this:


04. Duplicate the base image and set the duplicate layer to Soft Light, 100%.


05. Add this texture:

Set it to Screen, 100%.


06. Duplicate the base image, bring it to the top. Desaturate it but going to Image >> Adustments >> Desaturate. Set it to Soft Light, 100%. Then duplicate the desaturated layer. Your layer palette should look like this:

And your icon should look something like this:


07. Add text/brushes as you like. I added some tiny text and the font used is a size 10pt Georgia on Small Caps with spacing around 75.

Tutorial:
Original:

------------------
I hope these were helpful to at least someone, especially the original requester!

[Siani]

*claps* that is a really good tutorial! I'll have to try it sometime. Did you make the texture too?

[mutchka]

The doubling of the image and blurring the bottom one.... I can't believe I never thought of that +____+ You are my hero <33

[Siani]

*giggles* I got bored so I decided to do the first tutorial. XDD I think I did ok. ^^'

Image:
www.firebender.com/e14/images/fb0105.jpg

Texture: (made by me)


Result:


If I had a premade texture I would have finished faster but I wanted to make my own. XD I also added a border just cause.... I think it turned out nice. ;3 Thanks splendoris!

[Zink]

Dang! I need to get some good textures. Awesome tutuorials, splendoris!

[rainstorm]

great tutuorials. but what photoshop do you use because mine has almost none of those tools.

[splendoris]

I use Photoshop CS, it says so in the first post ^^

[Taintedmushroom]

That's really nice. ^_^ Sometimes the easy tuts make great icons.

Some are really confusing. @_@ Anyway gotta try this one sometime.

[beautyfr.pain]

few questions:
1. where do you get textures? i never seem to find good sites
2. ...how do you make 'em?


yeah...heh. I've never even tried to create my own brush like that either...i should try one day.

and i always blurred the top layer..either I've been doing it wrong, or just different. hmm.

[edit]
i just thought i'd mention that when you modify the brushes, sometimes the words might not relate to the chinese character at all...it'd be kind of interesting if the word meant knife and you put peace or something. x.x

[splendoris]

There are a ton of great textures on livejournal. For a good starting place, try this community
community.livejournal.com/icon_textures/profile

Also, its really easy to make your own textures if you just play around with your default tools and try out different layer modes, etc. There's no right or wrong way to do it, just keep going until you find something you're satisfied with ^^ its also fun to run around your house and take closeup pictures of shiny things for textures

& I don't really care if they chinese character matches the text or not. I can't read it, and I forget what it says anyway. I usually try to pick something relavent if I can, but if I don't have anything that really matches, I'll just choose anything because it doesn't really bother me.

[jennypoo^.^]

I wish I could do that but i dont have the right programs (or do I). Can you use paint or Kodak to do that?

[splendoris]

Paint doesn't have layers, so no you can't do it in Paint =( However, I'm not familiar with Kodak. If you can use layers with it, though, you can probably adjust the tutorial to work with it ^^

[jennypoo^.^]

I'm not sure if I can or not. Well I will find out sometime.

[Potassium Hydroxide]

I love your tutorial; it really helps. I'm just wondering where you got the chinese text fonts. A website link would be great. Thanks.

[splendoris]

I probably downloaded them from community.livejournal.com/100x100_brushes/profile
I think someone just recently posted even more of these same type of brushes (similar but not exact) on the LJ community avatar_fans.