inexorablyhere ([info]inexorablyhere) wrote,
@ 2004-08-22 20:53:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
TUTORIAL: FULL ICON
At the request of [info]callmefreak, here is a tutorial for the icon style I used in the last Jacob Hoggard set.





First I cropped my image and resized it to 100x100px. I also sharpened it.
Next, I duplicated the background layer. I desaturated it, set it to Screen, and lowered the opacity to 50%.
On a new layer, I made a gradient using #D2E3F5 fading out from the bottom right corner. I left this on Normal and at 100%.
Next I opened up a stock photograph in my collection, this particular one a brown rocky pattern. I dragged it into my icon file as a new layer on top of everything else, and set it to Lighten at 50% opacity.
On a new layer I drew a border around the image, making it thicker on the bottom and top, and filled it in with white. (The 1px gray border isn't an actual part of the icon, it's only there so the white border is visible for you.)
On a new layer on top of that, I filled in #0A182C and set it to Exclusion.
For the text, I used Times New Roman in italic with a letter spacing of 400. "Jacob" is at 6pt. The small text, which is just gibberish, is at 2pt with an opacity of 50%. All text has a 1px black border with an opacity of 50%.
Lastly, I colored the icon using Variations. With the slider on the second notch from the left, I went more red twice, more magenta twice, lighter twice, and less saturation twice.


And there you have it!



Advertisement

Customize

(Post a new comment)


[info]nawalst3r
2004-08-22 07:51 pm UTC (link)
thats great thanks! *adds to memories*

(Reply to this)


[info]teufel
2004-08-22 07:58 pm UTC (link)
Wow, that's great! Thanks!

(Reply to this)


[info]callmefreak
2004-08-22 08:45 pm UTC (link)
ahhhh did i mention i love you!!! thank you so much for doing this!!!

(Reply to this)


[info]summer_smile
2004-08-22 09:24 pm UTC (link)
excellent tut! thank you for sharing.

:D

(Reply to this)


[info]blueberryblondi
2004-08-23 05:15 am UTC (link)
Tutorial is fabulous, I'm going to have to try it later.

The icon is fabulous too!

(Reply to this)


[info]flordeneu
2004-08-23 05:27 am UTC (link)
Very useful! Thanks!

(Reply to this)


[info]lunacat
2004-08-23 07:08 am UTC (link)
Very nice tutorial, will have to try it out later, thanks! *Adds to memories*

(Reply to this)


[info]_kalaki_
2004-08-23 07:16 am UTC (link)
nice tutorial. I am adding it to memories.
BTW,I am new here. Can I add you to my friends list ?

(Reply to this)


[info]iridescent_life
2004-08-23 07:30 am UTC (link)
Great! Thanks. *Adds to memories*

(Reply to this)


[info]_secondthought
2004-08-23 10:02 am UTC (link)
i was just wondering, how do you make gradients? that was the only step out of your entire tutorial i couldn't follow =/

(Reply to this)(Thread)


[info]inexorablyhere
2004-08-23 11:08 am UTC (link)
Click the paintbucket tool in your toolbox and hold your mouse button down. A little menu will pop out, and the gradient is in that menu. Choose that, and you can make a gradient on a picture by clicking and dragging in the direction you want it to go.

(Reply to this)(Parent)


[info]blueberryblondi
2004-08-24 04:40 pm UTC (link)
The third and fourth step are the same, did you use a different colour gradient the second time, or was it the same? What I use the same gradient twice it doesn't look quite right. But this is my first time using PS so maybe it's just me...

(Reply to this)(Thread)


[info]inexorablyhere
2004-08-24 07:28 pm UTC (link)
LOL Whoops! My bad. I'll fix it!

(Reply to this)(Parent)


[info]cynicalskeptic
2004-08-25 01:52 pm UTC (link)
memories, will try when back from vacation. this looks awesome.

(Reply to this)


[info]__surrender
2004-08-26 04:21 pm UTC (link)
this is so awesome! thanks so much for this tutorial, this is great.

I only have one question, I use PSP7, which I was able to follow this tutorial pretty well using that, but I was just wondering what program you use, becuase I wanted to try out the step where you said 'All text has a 1px black border with an opacity of 50%.' But I had no idea how to do that in PSP7, do you have any idea?

Thanks so much!

(Reply to this)(Thread)


[info]inexorablyhere
2004-08-26 07:36 pm UTC (link)
I use Adobe Photoshop, and have no idea how to do anything on PSP. Sorry!

(Reply to this)(Parent)


[info]devilwrites
2004-08-27 02:04 pm UTC (link)
What tool do you use to draw your border? It looks so dang straight and even, which reminds me of a brush border, and I'd love to know how you did that exactly. :)

(Reply to this)(Thread)


[info]inexorablyhere
2004-08-27 06:11 pm UTC (link)
I didn't use a brush. I selected the entire image (CTRL + A) and used the selection tool to erase the middle (ALT + drag).

(Reply to this)(Parent)


[info]idiotequeicon
2004-10-14 05:32 am UTC (link)
madness, thanks. *adds to memories*

(Reply to this)


[info]thevulture
2004-10-15 08:20 pm UTC (link)
Hey, I'm just about to try your tutorial, what stock photo did you use?

(Reply to this)(Thread)


[info]inexorablyhere
2004-10-15 09:16 pm UTC (link)
Errr, not sure exactly, I got it from gettyimages.com. It's just this yellow/brown rocky texture.

(Reply to this)(Parent)(Thread)


[info]thevulture
2004-10-15 10:01 pm UTC (link)
Thanks!

(Reply to this)(Parent)


[info]thevulture
2004-10-16 01:14 am UTC (link)
Also, what did you mean by the blk border on the text?

(Reply to this)(Parent)(Thread)


[info]inexorablyhere
2004-10-16 06:26 am UTC (link)
I use Photoshop 7.0 so this is the onlyway I know how to do it. Right-click on the text layer on the layers window, and go to Blending Options. Then click the Drop Shadow text box, and set distance to 1px and fade (I think that's what it's called) to 0px.

(Reply to this)(Parent)(Thread)


[info]thevulture
2004-10-16 06:49 am UTC (link)
:D

(Reply to this)(Parent)(Thread)


[info]inexorablyhere
2004-10-16 06:52 am UTC (link)
Oooh, it's pretty! I love wider and shorter icons... I should make a set like that instead of sticking to 100x100.

(Reply to this)(Parent)(Thread)


[info]thevulture
2004-10-16 07:30 am UTC (link)
Thankyou very much for yr tutorial, you should make more <3 xox

(Reply to this)(Parent)


[info]ihartsnape
2005-01-13 08:46 am UTC (link)
Thanks you so much for posting all these tutorials! These are great! My icons look better already after reading these. Great work. Thanks.

(Reply to this)


[info]xsomethingbluex
2005-02-06 04:40 pm UTC (link)
awesome tutorial *adds to memories*

(Reply to this)


[info]akuen_
2005-02-11 09:49 pm UTC (link)
Beautiful tutorial; Adding it to my memories.
Thank you for sharing this!! :)

(Reply to this)


[info]countinglilies
2005-04-05 05:22 pm UTC (link)
the tutorial is wonderful! only; i was wondering...how do you make text italic in photoshop? i can't seem to figure it out!

if this isn't okay to ask; it's fine :) just ignore little old me ♥

(Reply to this)(Thread)


[info]inexorablyhere
2005-04-10 06:25 am UTC (link)
Look beside the pull-down menu for fonts, it should say "Regular." Not all fonts can be italicized but the commoners like Arial, Times New Roman, Verdana, etc. will.

(Reply to this)(Parent)


[info]angelie
2005-06-11 01:43 pm UTC (link)
Hello, here also the pics are not viewable anymore. Do you change that again? I love your tuts!

(Reply to this)


(Anonymous)
2005-06-18 11:20 pm UTC (link)
Hey I just want to tell you the pictures aren't showing up.

(Reply to this)


[info]mkstyle
2005-07-09 05:46 pm UTC (link)
i cant see the pics / icons.

(Reply to this)


Create an Account
Forgot your login?
Login w/ OpenID
English • Español • Deutsch • Русский…