Icon Tutorial For Adobe PS 7.0
Icon Tutorial: Getting The Colors And Icon.
Hey, I'm new at this icon making thing, and I tend to cap a lot as I go along, this tutorial is graphic-heavy. And can be quite confusing.
Tutorial By: poetic_arts (livejournal)
Program(s): Adobe Photoshop 7.0 (Translatable to PSP - if you're a Pro)
Level: Medium
Version: 1.1 (Final)
Version 1.1
#1. Completed Tutorial
#2. Proofread
#3. All links now open in a new window
#4. Fixed some images/code/HTML
Basic Shortcuts In Regards To This Tutorial:
Open a new canvas/file - Ctrl + N
Open a saved image/file - Ctrl + O
Hit Ctrl + Shift + Z to backtrack (undo)
Hit Ctrl + Z to Redo State Change (move forward from where you last undo)
Hit Ctrl + A to select all
Hit Ctrl + D to deselect any selection.
Hit N for the Note Tool
Hit C for the Crop Tool
Take Note
#1. I just started doing icons quite recently, so my skills are on the Beginner side.
#2. No steps is absolute or a must-follow, experiment and try your own.
#3. I make icons for fun and to experiment new techniques.
Off Topic:
You people tried this tool yet? (
) It's called the Notes Tool (Hit N to access it). It acts like a notepad, I always use it to jot down effects and commands I found useful when making a particular icon/graphics, then saves it as a .PSD. It's all for reference sake.
See It In Action:
Figure 1.0
Haha
Figure 1.1
Hah!
We're going to make this icon:
Credits:
icon_tutorial's
Memories (For their Tutorials)
I made the Gradients
Google.com's For Images (For Kill Bill)
quebelly's Cropping Tutorialskywaterblue's Crisp & Clean Tutorialpekeana's Tutorial (From Dark To Light?)
--- Begin ---
Download These Images:
Image of Kill Bill 01 > Link / Save as 01.jpg
Image of Kill Bill 02 > Link / Save as 02.jpg
For reference sake.
01. Cropping > Image "01.jpg"
Size: 100 x 100, You will need to crop the image first, I am not a pro at this so instead I will refer you to this site on Cropping, it's really good.quebelly's Excellent Cropping Tutorial > Link
My Result:
Figure 1.2
Figure 1.3
I used the Crop Tool (Hit C) and "forced-crop" it to 100 x 100.
You're finished with Cropping, now on to the next step.
02. Improving & Enhancing The Base
Duplicate the layer (Layer > Duplicate Layer) 'Background' Layer first, just in case if you messed up.
Figure 1.4
I followed these tutorial to brighten (improved) my images, courtesy of pekeana's and skywaterblue'sskywaterblue's Crips & Clean Tutorial > Linkpekeana's "From Dark To Light Tutorial" > Link
I applied these extra steps, after following the above tutorials.
Filter > Gaussian Blur 0.9 - 1.2
Edit > Fade > 77% > Soft Light
Personal preference. You should be done, or until you're happy, play around with it.
03. Softening
At this point, you may or may not want to flatten all the layers (Ctrl + Shift + E), I suggest you flatten, for we're going to soften the base. Hit Z for the Zoom Tool, and zoom in at about 500%
Figure 1.5
Now take the Blur Tool (Hit R) it's shaped like a water droplet. Strength at 50% and I used the following brush
Figure 1.6
You can play around.
Result:
Figure 1.7
Not good, just play around, until you get the desired result.
Note:
If you're afraid of getting confused (or if you've yet to flatten all the layers), now is the right time to flatten everything (Ctrl + Shift + E).
04. Contrast
Now to add contrast or brighten the base, Flatten everything (Ctrl + Shift + E), duplicate (Layer > Duplicate), set the top most layer to Screen and reduce its opacity to 50%.
Watered-Down Version:
#1. Flatten all your layers (Ctrl + Shift + E) after softening
#2. Duplicate that softened layer
#3. Set the duplicated layer (will be at the top) to Screen at 50% Opacity
As a final step, I merge all Layers (Flatten), yes again (Ctrl + Shift + E) and duplicate the already flatten layer (again), this time setting the topmost layer to Soft Light at 100% Opacity or if it is too bright for you, reduce it as you see fit. Alternately you can try the "Brightness/Contrast" Method (Image > Adjustment > Brightness/Contrast). Arr I hope that wasn't confusing?
After all that enhancing & adjustment, I got the following:
Figure 1.8
05. Getting The Colors
Now to achieve the colors.
Note:
Ctrl + Shift + N to open a new layer
Layer > Duplicate Layer to duplicate an existing layer
All newly opened Layers, will be arranged at the top automatically.
I will cap my Layer Palette to guide you, use it if necessary
Merge/Delete/Remove whatever Layers that is left, only to save and keep the final edited base. Duplicate the Base layer (Layer > Duplicate), Desaturate (Shift + Ctrl + U) the bottom-most layer like so:
Figure 1.9
Create a New Layer (Ctrl + Shift + N) I applied this Gradient
I realized not the most creative one, I lacked creativity in the Gradient department. Copy the Gradient (Ctrl + A to Select All) and paste in the newly opened layer, or just paste, it will open a new layer for you (Ctrl + V to Paste) or make your own Gradient if you would like.
^ Setting:
Color Dodge at 40% Opacity
Open a New Layer again, this time I applied this Gradient
Copy the Gradient (Ctrl + A to Select All) and paste in the newly opened layer, or just paste, it will open a new layer for you (Ctrl + V to Paste) or make your own Gradient if you would like.
^ Setting:
Soft Light at 60% Opacity
06. Other Images/Elements
Open up "02.jpg" which is an image of a hand holding a knife/sword (?) and start playing, I cannot give any specific guide as I experiment with things at this stage, but if you must know or need some sort of visual, I've capped these for you: Oh yeah you can follow the blend mode for the layer: "02.jpg"
Figure 2.0
The Layer Palette
I reduce the image's size for "02.jpg" (Image > Image Size) so it fits into the 100 x 100 canvas
Figure 2.1
Bigger version of the thumb You can see I only erase certain area of the image. Play around.
I duplicate the same Gradient:
This time setting it to Screen at 30% Opacity, create a new layer, then using this color (#D55928), hit B for the Brush Tool and choose 35 Px Soft Brush (refer to Figure 1.6), brush at the lower left side and set it to Overlay at 100% Opacity, here's some cap
Figure 2.2
Figure 2.3 - Layer Guide
Do you get the same thing? Or do you experiment? Hahaha.
Adding Brushes (Optional)
There's still more, I used a Splatter brush from AnotherBrushResource.com (now defunct, I could have create the image pack, but I've no rights to distribute it, so get an alternate splatter brush or a different brush (set) altogether), create a new layer. And set this to Multiply 100% (even though I see no difference from that of Normal 100%)
And then I duplicate this Gradient:
^ Setting:
Vivid Light at 30% Opacity
Figure 2.4
And a last look at the Layer Palette:
06. Text
You can be creative with the Text, I used 04b_03b (which can be downloaded from DaFont.com):
Font: 04b_03b
Size: 8 Px
Misc: Type in caps (Uppercase)
I'm done, if you have any suggestion, or any doubts, then comment ahead.
Final
Adding Border:
01. Ctrl + A (select all)
02. Then open a new layer (Ctrl + Shift + N) Edit > Stroke (Position: Inside) - 3 - 5 Px
(Re)naming a Layer:
01. Just double click on the Layer (on the layer palette) that you wish to rename.
What Are The Benefits of Naming Your Layers?:
01. You won't get confuse.
02. For future References.
03. A more organized Layer Palette.
04. Try "Layer Sets" if you want to be more* organized, here's a few link
01. Layer Set > Link
02. Google's Result > Link
--- End ---
Resource/Links
DaFont.com
Stock Xchange
Icon_Tutorial's
Library (Memories)
Photoshop Cafe
Adobe Photoshop
My Other Tutorial: Blending In PS 7.0
