Chamber of Secrets

Chamber of Secrets (http://www.cosforums.com/index.php)
-   Magical Masterpieces (http://www.cosforums.com/forumdisplay.php?f=34)
-   -   HP Icon Tutorials (http://www.cosforums.com/showthread.php?t=111209)

Tenshi August 21st, 2007 9:34 pm

HP Icon Tutorials
 
Welcome Members,

I created this thread, with permission of the staff, for posting Harry Potter related tutorials for icons. A lot of people here are into icon making and it's always a good idea to get inspiration and ideas for own icons and small graphics.

Icons are usually a size of 100 x 100 pixels. But you are welcome to post bigger one, up to 125 x 125 pixels (for CoS avatar size).

Everybody is welcome to post their tutorials here. Please don't simply link to other pages or post tutorials of other people here.
I will link the tutorials here in the opening post later.

Some small rules

[X] When posting a tutorial, please state what program you are using and whether it's translatable (in case you know it).
[X] You are welcome to ask if people know how to achieve a certain effect.
[X] This is not to ask other people to make icons for you. It's about learning to make them on your own
[X] Don't use any of the created images without permission of the maker.
[X] Please be nice to other members and follow the Forum Rules.

**************

List of Tutorials

Photoshop CS




Tenshi August 21st, 2007 10:44 pm

Re: HP Icon Tutorials
 
Program: Photoshop CS
Selective Colors/Curves or the like?: No
Translate able to other programs: No idea



Step 1
Duplicate your base 5 times and set the first 4 to Screen and the 5th to Softlight and desaturate the Softlight layer.

When you don't like it so bright you can make less screen layers.


Step 2
Add a new layer and fill it with #091B29, set it to Exclusion, Opacity 60 %
http://i138.photobucket.com/albums/q...tch_zstep2.png

Step 3
Add this Gradient (by unkown) and set it to Softlight, opacity 100 %
http://i138.photobucket.com/albums/q...tch_zstep3.png

Step 4
Apply this texture (by unkown) at Color Burn, 40 %
http://i138.photobucket.com/albums/q...tch_zstep4.png

Step 5
Add this gradient at Softlight, 50 %.
http://i138.photobucket.com/albums/q...tch_zstep5.png

Step 6
Duplicate your base again, drag it to the top, desaturate it and set it to Softlight 100 %

And you are basically done.
http://i138.photobucket.com/albums/q...tch_zstep6.png

Step 7 (optional)
Apply this texture (by girlbohemme@livejournal), set it to Multiply 100 % and flip it Horizontal
http://i138.photobucket.com/albums/q...tch_result.png

Optional: Creating the rain
1. Add a new layer and fill it with #000000 (basically black :lol: ).

2. Go to Filter -> Noise -> Add Noise and set it to the following:
http://i138.photobucket.com/albums/q...h_raincap1.png
(click to enlarge)

3. Then go to Filter -> Blur -> Motion Blur and set it to:
http://i138.photobucket.com/albums/q...h_raincap2.png


Angle depending on from where your rain comes
(again click to view image in full size)

Result:
http://i138.photobucket.com/albums/q...h_raincap3.png

4. Duplicate this layer and Rotate it 180

5. Set both layers to Screen, 70 %

6. Switch to ImageReady. Hide one of the rain layers and duplicate the current frame. Make the other rain layer visible and hide the old one. Set the frame delay time at 0.1 seconds and Save Optimized.

http://i138.photobucket.com/albums/q...dditch_ani.gif


Hope it was at least a bit useful. :)

Please don't copy this tutorial exactly.

When you have questions, please ask. :)




griffiegrrl September 11th, 2007 9:45 pm

Re: HP Icon Tutorials
 
Hello! This is my first attempt at actually publishing a tutorial of mine, so please bear with me. This should be a very simple yet beautiful technique you can use. :)

Program: Paint Shop Pro 9
Selective Colors / Curves etc.?: Nope.
Translatable to other Programs: As far as I can see, yes.
Skill Level: You need a working knowledge of Layer properties/opacities.

PreviewGo from This: http://img.photobucket.com/albums/v4...rll/tut1_1.jpg -to- This: http://img.photobucket.com/albums/v4...rll/tut1_2.jpg
In 6 simple steps!


Step 1If your base is not already; take your base and saturate it slightly.
http://img.photobucket.com/albums/v4...rll/tut1_3.jpg


Step 2Add a new layer set to Exclusion, 30% Opacity, and floodfill with #016150. {http://img.photobucket.com/albums/v4...rll/tut1_4.jpg}
http://img.photobucket.com/albums/v4...rll/tut1_5.jpg


Step 3Add another layer set to Exclusion, 30% Opacity, but this time fill with #000050. {http://img.photobucket.com/albums/v4...rll/tut1_6.jpg}
http://img.photobucket.com/albums/v4...rll/tut1_7.jpg


Step 4Add another layer, this time set to Overlay, 100% Opacity. Floodfill with #c4b8ae. {http://img.photobucket.com/albums/v4...rll/tut1_8.jpg}
http://img.photobucket.com/albums/v4...rll/tut1_9.jpg
(Note: On some bases this layer had to be reduced in opacity a little due to the base's original brightness. Fiddle around and find the right opacity for you.)


Step 5This time we are adding a Light Texture as a new layer. I've used this one:
http://img.photobucket.com/albums/v4...fortune-16.jpg
(see credit below).

Set this layer to Screen, 70% Opacity (or whatever looks best on your base.).
http://img.photobucket.com/albums/v4...ll/tut1_10.jpg


Step 6All you need to do now is add some text (I've used a tiny text brush I made), and you are done! You could also add borders, etc.
http://img.photobucket.com/albums/v4...rll/tut1_2.jpg

And remember, feel free to experiment! Please do not copy this tutorial exactly using the same base.


Light Texture credit: The Glinted Brush.

Thank you, and I hope this has helped you! :)

If you need to ask me a question, feel free to OWL me.

;) Griffie

Kitunen September 13th, 2007 8:11 pm

Re: HP Icon Tutorials
 
Well, I've been finished with this tutorial for about two weeks, but I haven't gotten around to posting it...

SpecificationsProgram: PSP X and Animation Shop 3
Selective Color/Color Balance: Nope
Translatable: I think so...


The TutorialYes, I was too lazy to save all the little images, so the whole tutorial is in one huge image. :)

http://i68.photobucket.com/albums/i2...ertutorial.png

Tenshi October 24th, 2007 5:27 pm

Re: HP Icon Tutorials
 
Simply colouring tutorial:

Again with PS CS.
Should be translate able
and no level or whatsoever used.



Step 1
Prepare your base, crop and sharpen etc. as you wish.

Duplicate your base 2 times and set both dup layers to Softlight, Opacity 100 % and desaturate the second layer from the bottom.
http://i138.photobucket.com/albums/q..._Hallway_1.png

Step 2
Add a new layer and fill it with #080835, set it to Exclusion, Opacity 100 %

http://i138.photobucket.com/albums/q...Hallway_2a.png ===> http://i138.photobucket.com/albums/q...Hallway_2b.png

Step 3
Another fill layer (#EFD7B6) to Multiply 65%
http://i138.photobucket.com/albums/q...Hallway_3a.png ===> http://i138.photobucket.com/albums/q...Hallway_3b.png

Step 4
Then this (#36360C) greenish layer at Softlight 40%

http://i138.photobucket.com/albums/q...Hallway_4a.png ===> http://i138.photobucket.com/albums/q...Hallway_4b.png

Yes it looks rather awkward now, but it will get better in the next step.

Step 5
Duplicate your base move it on the top and set it to Color Dodge 50%
http://i138.photobucket.com/albums/q..._Hallway_5.png

Step 6
Add a new Softlight layer filled with #ECECA4 at 100%
http://i138.photobucket.com/albums/q...Hallway_6a.png ===> http://i138.photobucket.com/albums/q...Hallway_6b.png


Step 7
Now just add a light blue (#D7E7FA) at Color Burn 100%
http://i138.photobucket.com/albums/q..._Hallway_7.png ===> http://i138.photobucket.com/albums/q...way_result.png


And you are done.

mexicant November 21st, 2007 1:27 am

Re: HP Icon Tutorials
 
*post for you*

Kimagine November 21st, 2007 1:27 am

Re: HP Icon Tutorials
 
Very helpful!! Thank you!!

Tenshi November 21st, 2007 1:28 am

Re: HP Icon Tutorials
 
Winter is there or coming. So I thought a little tutorial of how to create easy snow would be neat.

Again with PS CS.
I don't think it's translateable
and no level or whatsoever used.



Step 1
Finish your icon where you want to let it snow in.

Add a new black (#00000) fill layer on the top.
http://i138.photobucket.com/albums/q...PoA_snow_1.png

Step 2
Go to Filter -> Noise -> Add Noise...
I used the following settings. (you can play around)
Amount: 50%
Distribution: Gaussian
Monochromatic: checked
http://i138.photobucket.com/albums/q...PoA_snow_2.png

Step 3
Go to Filter -> Blur -> Gaussian Blur
I put the Radius at 1,2 pixels (again play around)
http://i138.photobucket.com/albums/q...PoA_snow_3.png

Step 4
Now go to Image -> Adjustments -> Brightness/Contrast
Contrast to +100 and Brightness you need to play around till you get something like this (I have -32)
http://i138.photobucket.com/albums/q...PoA_snow_4.png

Step 5
Now Filter -> Blur -> Motion Blur
I used: Angle 75 and Distance 5 pixels
http://i138.photobucket.com/albums/q...PoA_snow_5.png
Now we have our snow flake layer.

Step 6
Duplicate the snow layer 3 times and go to Edit -> Transform and rotate them all in a different way. Then set all snow layers to Screen.
(I have 180, vertical and horizontal)

Step 7 - the Animation
Switch to Image Ready and hide all snow layer except the first. Duplicate current frame and make the second visible and hide the first. Dup again, third visible, hide second and so on. Set it to 0,2 seconds and save it.

http://i138.photobucket.com/albums/q...now_result.gif


Well you get the basic idea. :D

Rell November 21st, 2007 1:34 am

Re: HP Icon Tutorials
 
That's cook tenshi - i'm going to try it out :D

griffiegrrl November 21st, 2007 12:20 pm

Re: HP Icon Tutorials
 
Here's Mine:

http://img.photobucket.com/albums/v4...rll/Winter.gif

Thanks. :tu:. I knew how to do rain, but for some reason translating that into snow never crossed my mind.

And your tut is translatable, if you know your programs well. Like for me (using PSP9 and Animation Shop 3) I had to translate what some tools were called and such, but everthing was the same until I got to Animating, in which case I had to merge the icon layer with the snow layer each time and paste it into Animation Shop, then go back and unmerge, and change which snow layer was showing and merge again, etc.

We should have an animating week in LIMS.... :whistle:

Kimagine November 24th, 2007 2:20 am

Re: HP Icon Tutorials
 
I LOVE THE SNOW EFFECT!!!! I must try this ASAP. Thanks so much!!! :love:

griffiegrrl December 12th, 2007 10:32 pm

Re: HP Icon Tutorials
 
Program: Paint Shop Pro 9
Selective Colors / Curves etc.?: Nope.
Translatable to other Programs: I think so. :)
Skill Level: You need a working knowledge of Layer properties/opacities.

PreviewLearn to Colorize an image!
Go from this: http://img.photobucket.com/albums/v4...torialend1.jpg to this: http://img.photobucket.com/albums/v4...torialend2.jpg or this: http://img.photobucket.com/albums/v4...torialend3.jpg


The Tutorialhttp://img88.imageshack.us/img88/3456/colortutqp3.png


That's it! Please feel free to OWL me if you have any questions.
:) Griffie

8m57w6 December 14th, 2007 11:59 pm

Re: HP Icon Tutorials
 
So right, I know none of you besides me really use MS Paint (lucky you!), but who knows? You may have a crisis one day and find it is the only thing that works. Also I was bored and felt like doing this. After using it for a while, I've learned several tips and tricks that have come in very handy. The one I'm going to share today is re-coloring part of an image. Because it can be (as many things in Paint are) very tedious, it works best if you only use it on a small area.

So as many of you may or may not know, the ring on the right side of this image was originally green.

http://img161.imageshack.us/img161/5...flepuffgc9.png

But as you can see here, the green really doesn't look so good when this portion is cut away from the rest of the image.

http://img509.imageshack.us/img509/6929/colortutpc5.png

While it may be a bit of a process, re-coloring the ring is really not too difficult at all.

So first, zoom in on the portion you want to change; for us, the ring.

http://img509.imageshack.us/img509/4...lortut2wt3.png

Next, use the Eyedropper tool, and select a color to begin with. I start with the lightest green because it is in the center. After you have selected it, go to >Colors, >Edit Colors, >Define Custom Colors. There you get a rainbow gradient, and a bunch of numbers. The first column of numbers are the ones we want to focus on; the second column is unimportant here. It should read:

Hue: 79
Sat: 240
Lum: 176

We want to keep the Saturation and Luminosity the same, but change the Hue from red to green. To do that we change the number from 79 to 239, and get a color that looks like this: http://img509.imageshack.us/img509/2...lortut3uo8.png Now go back to your image, and use the Fill Bucket to replace the green with the red.

http://img509.imageshack.us/img509/3...lortut4kk7.png

Now repeat that step with the next color; I move to the left, then the right, then up and down. Remember that whatever numbers you get, only change the HUE in the first column. You will end up getting Hue numbers that range around from 70's to 30's, but always replace the 10's place digit with 23, no matter what. For example, both 47 and 77 would become 237. The '23' part is what makes it red.

After a bit of working, we get this:

http://img213.imageshack.us/img213/1...lortut5hd8.png

Which looks funny close up, but from far off, it's actually starting to look like something.

http://img213.imageshack.us/img213/2...lortut6rs0.png

Keep doing this until all the areas you want are re-colored and it looks good to you zoomed out. If done correctly, it should look like this:

http://img338.imageshack.us/img338/1...lortut7nu9.png

And zoomed out:

http://img338.imageshack.us/img338/5...lortut8bf0.png

I hope this helps someone someday, whether they use it to make an actual icon, or are just bored, like I was. :tu:

griffiegrrl December 15th, 2007 12:59 am

Re: HP Icon Tutorials
 
That's neat, 8m. I haven't used paint in so long....But I remember it being my first graphics program until I saved up for my Paint Shop Pro.

Rell December 15th, 2007 11:46 pm

Re: HP Icon Tutorials
 
wow, I didn't know you could do that in paint!

jellibean December 17th, 2007 9:38 am

Re: HP Icon Tutorials
 
Hey,
I was wondering if anyone knows how/knows where I can find a tutorial for animated icons like Tenshi's (the Sylar one)

Thanks =D

Kitunen December 17th, 2007 8:49 pm

Re: HP Icon Tutorials
 
Quote:

Originally Posted by jellibean (Post 4870364)
Hey,
I was wondering if anyone knows how/knows where I can find a tutorial for animated icons like Tenshi's (the Sylar one)

Thanks =D

When I made something like that, I used a tutorial I found on the icontutorial LJ thing...they have a whole section of animation tutorials I think. Just type icontutorial in Google or something and it will come up (I can't remember the exact address). :)

Nadia December 17th, 2007 9:25 pm

Re: HP Icon Tutorials
 
It's http://community.livejournal.com/icon_tutorial :)

Drazer December 18th, 2007 12:29 am

Re: HP Icon Tutorials
 
That snow tutorial is alot simpler than what I did for my sig. Wish I'd seen that first now :)

That page Nadine has linked to is a page I highly recommend you all to look at. It has pretty much everything you could ever need to learn.

ginnypotter19 April 10th, 2008 12:25 am

Re: HP Icon Tutorials
 
Does anyone have a GIMP tutorial?


All times are GMT +1. The time now is 4:08 am.

Powered by: vBulletin, Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.

Original content is Copyright MMII - MMVIII, CoSForums.com. All Rights Reserved.
Other content (posts, images, etc) is Copyright its respective owners.