Lozzy (__iiconize__) wrote,

Tutorial 04: Kate & Jack [Full Icon Tut]


Program: Adobe Photoshop 7
Image Heavy: Yes
Difficulty: Medium. EXTREMELY begginner friendly.

We're going from this:  to this:

I was bored, so I made this as beginner friendly as possibly. If you already know how to do the basics i.e cropping ect. Skip straight down to Preparing the Base, but for those who want to read it all - you're more than welcome :) Also, if you now how to do these things already just scan the steps... sorry if I bore you :)

The Image:

Chose an image that you want to make into your icon. Try to get High Quality ones, that way less prepping is needed. But whatever you want to use is fine. Normally with Screen Caps you Duplicate the image and set the blend mode to Screen, but I'm not going to go into that right now ;) Anyway once you got your picture go to the top toolbar:

Select File and then from the drop down menu select Open As [Alt/Ctrl/O]. Then browse through your files until you find your picture.

I chose a picture from my haven Lost-Media:


1) It's really good quality
2) I'm really into Kate/Jack at the moment

Let's move on to cropping, shall we?


There are many different ways we can crop a picture. You can use the Crop Tool [], the Rectangular Marquee Tool []. Some people also use Free Transform [Ctrl/T] to resize their image. I do all of these and I think they're all basically the same. Though if you have an overly large picture I reccomend using the Free Transform to resize the picture. But while you are resizing your picture you have to hold down SHIFT otherwise your image won't stay in properation and look all weird. The general size for icons is 100x100 pixels. Though it doesn't really matter. Though if they're over 100 pixels, LJ won't accept them.

Anyway, moving on. Let's look at different crops we can have of this picture

1) Let's stick the picture straight onto a 100x100 canvas. You can do this by selecting your picture. Select [from the top menu, I showed you before] and then chosing All [Ctrl/A]. Now Go Edit-->Copy. To get your 100x100 canvas go File-->New, this box will pop up:

Make sure the Width box says: 100. Same for the Height option. Also make sure it's in Pixel format. Make sure the Resolution is 72 in the Pixels/Inch format. Also make sure the Transparent option is on.

Now, all you have to do is go Edit-->Paste [Ctrl/V]. Move the picture around with the move tool []. I came up with this:

Not bad I suppose, but it doesn't really leave a lot of room for text/effects. And this is a big NO for large images.

2) OK. Now let's use the Rectangle Marquee Tool set on a fixed size of 100x100 pixels. Select the tool. This toolbar at the top should pop up:

Make sure Fixed Size is selected from the drop down menu which currently is set to Normal. Then type 100 px in the width and height boxes.

Your result should be exactly like the previous one, your similar to it:

Again, this is a big no, for large images. Unless you use the Free Transform tool to resize it.

3) Now let's use the Crop Tool. When you select it, this menu should pop up:

Make sure the Width and Height both say 100 px that way, whatever you crop it will always be 100x100 pixels in size. Now I'm going to do 3 crops. A centred one, where Kate & Jack are in the middle, and there's an equal ammount of background next to each. A off centred one, where Jack & Kate will be to one side and the background on the other and finally one where I rotate the picture, which I will explain more about later.

a)  b)  c)

Which one do you think looks better? They aren't all that bad, but I think C is defiantly the best. B isn't bad either. But for some reason I just love the look of C [which has been rotated]. A I don't like at all... Try different crop angles than centred. Interesting crops make a great icon!

Rotating a picture:

Rotating a pic is so easy! All you have to do is Duplicate your image.

Image-->Duplicate [Ctrl/J]

Now hold down Ctrl and T.

Move your curser towards a corner of the picture. And when you get a curved looking arrow you can start rotating it! Just move the curser until you're happy with it.. Then just crop it and delete the bottom layer!

Now we're ready to make the icon!!

Preparing the Base:

. My base doesn't really need to be prepped [i.e Sharpened, Smoothed, Lightened]. So I'm just going to leave that. Standard preppings are one I mentioned, if you're not sure how to do them you can find heaps of tutorials around that can probably explain it heaps better than I can.

2. Duplicate your base 2 times. So now you should have three copies in your Layers Pallete. Your layers pallete shows you how many layers you have in your icon. It looks like this:

If you can't see it go Window and select Layers from the drop down menu.

3. Set the first of your duplicates to Screen. Do this by using the drop down menu above the pallete:


3. Set the next duplicate to Soft Light, using the same drop down menu.


4. Now it's time to Merge, normally you go Merge-->Merge Visible but I don't like doing that, I'm a layer-whore, plus we need the base for later steps so we're going to stamp. Do this by creating a new layer, then holding down Ctrl, Alt, Shift and E all at the same time.

Now you should have 4 layers. Your Screen and Soft Light one, plus your stamped one. It should look exactly like it does in step 3.

Adding Some Colour:

As beautiful as the base looks we could defiantly do with some more colour. So create a new layer. Layer--->New-->Layer [Ctrl/N]. Select the fill tool []. Now see this   part of your tools toolbar? Select the top colour, this box will now pop up:

Move the cursur up and down on the side bar to select a colour shade. Then one the larger bar move it around to select the one you want. See the box with the # next to it? That's for hexcodes. Anywayz, we need a dark blue colour, I chose #040259, which looks like this:

Copy and paste that number, into that box and click OK. Now move the little fill bucket over your icon and just click on it anywhere. Your icon should look like the colour you selected.

Now we're setting the blend mode to Exclusion and we're going to lower to Opacity to 50%. In the layers pallete there's a thing that says Opacity. In the box type 50.


6. Like in step 5 we're going to add another Fill colour. So let's get another new layer and fill it with a light yellow colour. I chose: #F4FCBF, which looks like this:

Set the blend mode to Color - don't freak out when it goes all yellow, we're lowering the opacity. Set that to 20%. Not a huge difference, but subtle.


7. Now we're going to be using a New Adjustment Layer. I love these because it changes all of your icon, instead of just the current layer. It's basically like stamping it.

Anywayz go Layer-->New Adjustment Layer-->Hue & Saturation. If you've done it right a box should pop, just click OK, and then this will come up:

Set the Saturation to -31. Leave the rest. Click OK.


Just for a recap, your layers pallete should look something like this:

Making the Texture Base:

Put your icon aside for a moment. We're going to be fixing up the texture to use on it. Choose any texture you like, I chose one from colorfilter. Which looks like this:

Really you don't have to do anything too it, if you don't want to, but I thought it looked a bit harsh so I duplicated and applied a Gaussian Blur to it.

Filter-->Blur-->Gaussian Blur. When the box pops up put the radius as 2.0:


Then I thought it looked a little too blurred, which won't look good so I sharpened it. Filter-->Sharpen-->Sharpen.


10. That wasn't a hell of a difference so then I applied the Sharpen More filter. Filter-->Sharpen-->Sharpen More.


I was happy with that. If you want to sharpen more.. or whatever you can. Once your happy Merge Visible.

Applying the Mask:

Probably the hardest part of your icon, but once you get the hang of it, they're easy. Layer Masks are great, when wanting to change skin colour, eye colour hair colour and in this case the background.

Copy & Paste your texture onto our icon. Now go to the bottom of your layer pallete. Click the Add Layer Mask button [].

12. Hit D on your keyboard. This should make the Default colors White and Black, like so:

Click that little curved arrow to switch black to the Foreground colour. Now white will be the Background colour.

Using the fill tool, click on the texture. Now your original picture should be showing through.


13. Take your Paint Brush Tool [] and make sure your settings match mine:

To change the brush size just click on that little arrow next to the brush option.

Now hit D on your keyboard again. Start painting the packground. The texture should start showing through! Now this can take a lot of patience, but it helps to zoom in [Ctrl/+]. If you make a mistake and accidently erase some of your picture switch to the Eraser tool []. Make sure your settings are the same as when you used your brush. Using the Eraser tool will bring back your original picture. Remeber to zoom in coz it really does help. I zoomed into about 600 and also played with the brush size ranging from 1-5. You may not have to zoom into 600 it was just coz of Kate's hair and I didn't want to erase it. So after much yelling and screaming at your photoshop, you should end up with something like this:


Adding More Colour:

Let's add some more colour to our icon shall we? Let's stamp once more [Ctrl/Alt/Shift/E].

Now copy & paste this Gradient onto your icon:  made by ??? Set the blend mode to Colour Burn and the Opacity to 60%.

 --> .

15. Copy and Paste this gradient:  and set it to Pin Light with an Opacity of 40%.


16. Time for another New Adjusment Layer! Another Hue & Saturation one. Set the Saturation to -36.


17. Yet another New Adjusment Layer. This time a Brightness & Contrast one. Set the Contrast to: +2 and the Brightness to +16.


18. One more New Adjustment Layer! This time Selective Colour:

From the drop down menu select Neutrals. In the boxes type:


Now Select Blacks. Put them ALL at +100.


Layer Pallete:


Final Touches

Come on, admit I bet you're all screaming. Yah! Yes finally! :P

19. Go right down to the bottom of you layer pallete. Duplicate the base and drag it all the way up to the top. Leave it on Normal but lower the Opacity to 20%. I do this with all my icons.


20. Then I added a whole heap of different brushes. From teh_indy crumblingwalls and maybe dtissagirl. If you don't know how to use brushes teh_indy has exellent guides.

 -- This was part of a brush that I erased a bit. #000000; Normal; 20%
 -- #000000; Soft Light; 100%
 -- #C29C77; Multiply; 100%
 -- #8F644B; Normal; 100%


21. Time for text! I was listening to "Hanging By A Moment" by Lifehouse so that's what I wrote! 'hanging by a moment' is in size: 8; font: Book Antiqua; Anti-Alias: Sharp; Kerning: 200.

'moment' is in size: 14; font: Heather;  Anti-Alias: Sharp; Kerning: 200.


. Then I duplicated the 'moment' layer. Then went Filter-->Blur-->Motion Blur. When a box comes up telling you that it will be changing it to a Raster Layer just hit OK. When the Motion Blur box comes up leave the Angle as 0 and set the Distance to 41.

I lowered the Opacity to 80% and moved it a bit.

Then I set both text layers to Soft Light.


23. For the line I used the Rectangular Marquee Tool at a fixed size of 100x1. Zoom in and fill it in with black. I move it so it was between the two text lines. I then erased the bits that weren't needed.


24. Duplicate the textured layer [that was a mask] and drag it all the way up to the top. Desaturate it completely Image-->Adjustments-->Desaturate. Set it to Soft Light.   

Teh End!!
[here's everyone let out a sigh of relief]

Anywayz, I hope you liked.. Sorry that it was soo explained.. Anywayz :)


Previous Tuts

Tags: jack/kate, lost, tutorial

  • Tutorial 12: Kristen Bell - Header

    Tutorial #12: Krissten Bell - Header We're making this: -Photoshop CS2 -Medium -Image Heavy 01. I chose two Kristen pics from KB Online:…

  • Icons and Header {last update}

    - COMMENT -CREDIT -DO NOT HOTLINK -TEXTLESS ICONS AREN'T BASES -ENJOY! 97 Icons: 34 Lost Pilot (Part 1 & 2) 3 What Kate Did (No spoilers!)…

  • Tutorial 06: Emma Watson [Coloruing Tut]

    Hey, Haha yes another tut. Nothing amazing just a coloruing tut. Program: Adobe Photoshop Image Heavy: Um... Maybe? Difficulty: Easy From…

  • Post a new comment


    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.

  • Tutorial 12: Kristen Bell - Header

    Tutorial #12: Krissten Bell - Header We're making this: -Photoshop CS2 -Medium -Image Heavy 01. I chose two Kristen pics from KB Online:…

  • Icons and Header {last update}

    - COMMENT -CREDIT -DO NOT HOTLINK -TEXTLESS ICONS AREN'T BASES -ENJOY! 97 Icons: 34 Lost Pilot (Part 1 & 2) 3 What Kate Did (No spoilers!)…

  • Tutorial 06: Emma Watson [Coloruing Tut]

    Hey, Haha yes another tut. Nothing amazing just a coloruing tut. Program: Adobe Photoshop Image Heavy: Um... Maybe? Difficulty: Easy From…