Gradients, 'mood', transparency, brushes, eraser (PS 7)
Here's
a tutorial for making an icon. (Duh...) I chose to do one that's got nothing
to do with a celebrity, musician and/or movie, but rather something that is
more of a 'mood-icon', if such a thing exists... You can use whatever subject
you want, this is just to show you a few techniques.
All
right. We'll be going from
,
to this:
,
or this:
,
or this:
,
or even this:
First
step is preparing our subject. I've skipped a couple of steps here, but what I
basically did to our first image, was deleting the background (with whatever
method you prefer), flipping the image over (Image-->Rotate
canvas-->Flip horizontal) and using a filter (Filter-->Brush
Strokes-->Angled Strokes -at default settings) on it twice. Yes,
that's right. I repeated the filter. It will look better later. Trust me. I've
tried. ;-)
Result:
Okay.
We're just going to leave that for a while and create our base/background now.
Open up a new image of 100px X 100px and fill it with white. Make sure your
foreground color is black. Apply some brushes in black on your white canvas. (Note:
I used more than one and put each of them on a seperate layer, so that I could
play around with the opacity of each individual layer as well.) The
brushes I used are from a set of mine which can be found here,
but any brushes you like will do. As long as it gives some nice texture to
your base. I came up with something like this:
Create
a new layer. Fill it with a color of your choice. I picked #1A5B14. Set this
layer to Overlay. (If you're not sure what I mean by that, read a bit about
blending modes right
here.) My
result:
Next,
I duplicate this layer, use a Gaussian Blur of 1 pixels(s) and I set that
layer to Screen at 50%. Glowiness galore:
Fun
with gradients!
Set to color at 50%
renders
On
top of that:
Set to color at 50% renders
Not
done yet... ;-)
Set to multiply at 65% renders
Now
it looks a wee bit dull. So I duplicate the last layer, set that one to Hard
Light, et voilà! Vibrant colours once more!
Okay.
Remember that 'subject' we prepared before? Go dig that back up, because we'll
need it now. Resize it so it'll fit your base (in my case, I resized it by
only adjusting the height while 'preserve aspect ratio' was active). After
resizing, I needed to sharpen my image once to make it look okay again.
Just try and see what works for you. After that, I placed my 'subject' on top
of my 'base' and set said 'subject' to Luminosity. Looks like this:
Now,
if I were feeling a bit lazy, I'd be using this as an icon as is. I
like the colours and 'feel' of it, and it doesn't necessarily need more.
However, I'll include a few optional steps below, to give it a 'finishing
touch'.
Let's
add some text for starters. I'll have to create some sort of background for my
text first, otherwise the text will get lost in all the colours and the icon
itself will look overcrowded and 'busy'. So I take my rectangular marquee
tool, pick an area and fill it with white. Now that's too harsh for my tastes,
so I go to Filters and add a motion blur of 15 pixels at an angle of -45
degrees. That's better. Just for good measure, I set this layer to 75%. Looks
like this:
Subtle,
yet effective.
Now
for some text. In my primary colour (#1A5B14; remember from the first
colour-layer we applied?) I write 'Fever' in Arsis D reg (14 pt.) and 'Dance'
in Artide10 (14 pt.). Anti-Alias on both set to sharp. I position them how I
want and it looks like this:
See
how our little white blurb from before makes the text stand out a bit more?
Anyway, moving on. Adding a border.
The
simplest way of doing this, must be to go to Select-->All (the marching ants
will appear) and again Select-->Modify-->Border. A little menu will pop
up and you can choose how wide you want your border to be. I chose 2 pixels.
Next, go to Edit-->Fill and choose how you wan it filled. I used (again) my
base colour. Result:
Of
course, you could use a different border, such as the brush I used below by Liminalstate,
in the color #930A0A (which is a deep red) set to Luminosity...
BUT...
How about a transparent border??? I do like those... So, I merge all my
layers, get my Eraser Tool out and choose a brush that would make for an
interesting border. In this case, I used a brush by Hardie,
from their 'Framed' set. When set to 'Eraser', a brush does just that; erase
all that is usually the coloured part of the brush. I end up with this:
Once
you have your transparency, you'll need to save your icon for the web. Sadly,
because of the transparency, you'll have to choose .gif, which messes up the
quality, but seems to be the only format widely accepted by browsers. Really
too bad you can't save it in .png... Would be so much prettier... (Well, of
course you could, but most users worldwide would see a grey area
instead of transparent areas.)
Anyway,
that's it. Questions, comments and concrit are welcome! Would also love to see
your own creations made with this tut! Cheers!