Login  
 
 
Go Back   Chamber of Secrets > Harry Potter > Magical Masterpieces

HP Icon Tutorials



Reply
 
Thread Tools
  #1  
Old August 21st, 2007, 10:34 pm
Tenshi's Avatar
Tenshi  Undisclosed.gif Tenshi is offline
She Who Walks Behind
 
Joined: 3544 days
Posts: 6,296
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
Go from this to this or this

Link to Tutorial Here

+++++++++++

Go from to

Link here

********

Create falling snow like this
Link is here

******

Going from this: to this:

Link to tutorial



Paint Shop Pro 9
Go from This: -to- This:
In 6 simple steps!

Link to Tutorial here

********

Go from this: to this: or this:

Link here


PSP X and Animation Shop 3
Go from this: to this:

Link here


MS Paint
From this to this

Link here



__________________


The End of the Dream.

Last edited by Tenshi; November 4th, 2008 at 12:02 am.
Reply With Quote
Sponsored Links
  #2  
Old August 21st, 2007, 11:44 pm
Tenshi's Avatar
Tenshi  Undisclosed.gif Tenshi is offline
She Who Walks Behind
 
Joined: 3544 days
Posts: 6,296
Re: HP Icon Tutorials

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


How to get from this to this or this

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 %


Step 3
Add this Gradient (by unkown) and set it to Softlight, opacity 100 %


Step 4
Apply this texture (by unkown) at Color Burn, 40 %


Step 5
Add this gradient at Softlight, 50 %.


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

And you are basically done.


Step 7 (optional)
Apply this texture (by girlbohemme@livejournal), set it to Multiply 100 % and flip it Horizontal


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

2. Go to Filter -> Noise -> Add Noise and set it to the following:

(click to enlarge)

3. Then go to Filter -> Blur -> Motion Blur and set it to:



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

Result:


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.




Hope it was at least a bit useful.

Please don't copy this tutorial exactly.

When you have questions, please ask.





__________________


The End of the Dream.

Last edited by Tenshi; August 22nd, 2007 at 12:13 am.
Reply With Quote
  #3  
Old September 11th, 2007, 10:45 pm
griffiegrrl's Avatar
griffiegrrl  Female.gif griffiegrrl is offline
Fourth Year
 
Joined: 3564 days
Location: Terabithia
Age: 23
Posts: 543
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: -to- This:
In 6 simple steps!


Step 1If your base is not already; take your base and saturate it slightly.


Step 2Add a new layer set to Exclusion, 30% Opacity, and floodfill with #016150. {}


Step 3Add another layer set to Exclusion, 30% Opacity, but this time fill with #000050. {}


Step 4Add another layer, this time set to Overlay, 100% Opacity. Floodfill with #c4b8ae. {}

(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:

(see credit below).

Set this layer to Screen, 70% Opacity (or whatever looks best on your base.).


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.


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


__________________

SHIP OF THE MOMENT:
Usako and Mamo-chan

Last edited by griffiegrrl; September 11th, 2007 at 10:57 pm.
Reply With Quote
  #4  
Old September 13th, 2007, 9:11 pm
Kitunen's Avatar
Kitunen  Female.gif Kitunen is offline
Master of Divination
 
Joined: 3279 days
Location: buried in a pile of homework
Age: 22
Posts: 201
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...

What You'll Be Making Go from this: to this:

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



__________________
I have decided that it was time to make a comeback...hey, Michael Jackson's doing it, why not?

Last edited by Kitunen; September 13th, 2007 at 9:13 pm.
Reply With Quote
  #5  
Old October 24th, 2007, 6:27 pm
Tenshi's Avatar
Tenshi  Undisclosed.gif Tenshi is offline
She Who Walks Behind
 
Joined: 3544 days
Posts: 6,296
Re: HP Icon Tutorials

Simply colouring tutorial:

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


Go from to
with fill layers only.

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.


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

===>

Step 3
Another fill layer (#EFD7B6) to Multiply 65%
===>

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

===>

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%


Step 6
Add a new Softlight layer filled with #ECECA4 at 100%
===>


Step 7
Now just add a light blue (#D7E7FA) at Color Burn 100%
===>


And you are done.


__________________


The End of the Dream.
Reply With Quote
  #6  
Old November 21st, 2007, 2:27 am
mexicant's Avatar
mexicant  Female.gif mexicant is offline
Jessica and lanifiel's Lackey
 
Joined: 2899 days
Location: perpetual disillusionment
Age: 29
Posts: 1,974
Re: HP Icon Tutorials

*post for you*


__________________
"if we can hold on, we can fix what is wrong
buy a little time for this head of mine
haven for us..."


Let's play nice, my pets. ~ Why I can't rub things in. ~ Search Engine - You're Doing It Right! ~ Questions? Ask here, but remember: Search Engine!

avatar created by Moriath
Reply With Quote
  #7  
Old November 21st, 2007, 2:27 am
Kimagine's Avatar
Kimagine  Female.gif Kimagine is offline
Sirius' Girl
 
Joined: 3476 days
Location: Make My Coffee Animagus Black
Posts: 2,113
Re: HP Icon Tutorials

Very helpful!! Thank you!!


__________________
That's how we roll.
See my Associated Content Articles Here.
Reply With Quote
  #8  
Old November 21st, 2007, 2:28 am
Tenshi's Avatar
Tenshi  Undisclosed.gif Tenshi is offline
She Who Walks Behind
 
Joined: 3544 days
Posts: 6,296
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.


Create snow like this

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

Add a new black (#00000) fill layer on the top.


Step 2
Go to Filter -> Noise -> Add Noise...
I used the following settings. (you can play around)
Amount: 50%
Distribution: Gaussian
Monochromatic: checked


Step 3
Go to Filter -> Blur -> Gaussian Blur
I put the Radius at 1,2 pixels (again play around)


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)


Step 5
Now Filter -> Blur -> Motion Blur
I used: Angle 75 and Distance 5 pixels

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.




Well you get the basic idea.


__________________


The End of the Dream.
Reply With Quote
  #9  
Old November 21st, 2007, 2:34 am
Rell's Avatar
Rell  Undisclosed.gif Rell is offline
Hogwarts Graduate
 
Joined: 3367 days
Location: intruder window
Posts: 2,919
Re: HP Icon Tutorials

That's cook tenshi - i'm going to try it out


__________________
* * *
Reply With Quote
  #10  
Old November 21st, 2007, 1:20 pm
griffiegrrl's Avatar
griffiegrrl  Female.gif griffiegrrl is offline
Fourth Year
 
Joined: 3564 days
Location: Terabithia
Age: 23
Posts: 543
Re: HP Icon Tutorials

Here's Mine:



Thanks. . 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....


__________________

SHIP OF THE MOMENT:
Usako and Mamo-chan

Last edited by griffiegrrl; November 21st, 2007 at 1:31 pm.
Reply With Quote
  #11  
Old November 24th, 2007, 3:20 am
Kimagine's Avatar
Kimagine  Female.gif Kimagine is offline
Sirius' Girl
 
Joined: 3476 days
Location: Make My Coffee Animagus Black
Posts: 2,113
Re: HP Icon Tutorials

I LOVE THE SNOW EFFECT!!!! I must try this ASAP. Thanks so much!!!


__________________
That's how we roll.
See my Associated Content Articles Here.
Reply With Quote
  #12  
Old December 12th, 2007, 11:32 pm
griffiegrrl's Avatar
griffiegrrl  Female.gif griffiegrrl is offline
Fourth Year
 
Joined: 3564 days
Location: Terabithia
Age: 23
Posts: 543
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: to this: or this:


The Tutorial


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


__________________

SHIP OF THE MOMENT:
Usako and Mamo-chan

Last edited by griffiegrrl; December 13th, 2007 at 6:00 pm.
Reply With Quote
  #13  
Old December 15th, 2007, 12:59 am
8m57w6's Avatar
8m57w6  Female.gif 8m57w6 is offline
Rex's Mummy
 
Joined: 2862 days
Location: Wonderland
Age: 23
Posts: 735
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.



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.



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.



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: Now go back to your image, and use the Fill Bucket to replace the green with the red.



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:



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



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:



And zoomed out:



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


__________________

Meet Ziggy!!!!
(aka Mali)
Reply With Quote
  #14  
Old December 15th, 2007, 1:59 am
griffiegrrl's Avatar
griffiegrrl  Female.gif griffiegrrl is offline
Fourth Year
 
Joined: 3564 days
Location: Terabithia
Age: 23
Posts: 543
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.


__________________

SHIP OF THE MOMENT:
Usako and Mamo-chan
Reply With Quote
  #15  
Old December 16th, 2007, 12:46 am
Rell's Avatar
Rell  Undisclosed.gif Rell is offline
Hogwarts Graduate
 
Joined: 3367 days
Location: intruder window
Posts: 2,919
Re: HP Icon Tutorials

wow, I didn't know you could do that in paint!


__________________
* * *
Reply With Quote
  #16  
Old December 17th, 2007, 10:38 am
jellibean  Female.gif jellibean is offline
First Year
 
Joined: 2933 days
Location: Australia
Posts: 38
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


__________________


"One of them was a Slytherin and he was probably the bravest man I ever knew."


Reply With Quote
  #17  
Old December 17th, 2007, 9:49 pm
Kitunen's Avatar
Kitunen  Female.gif Kitunen is offline
Master of Divination
 
Joined: 3279 days
Location: buried in a pile of homework
Age: 22
Posts: 201
Re: HP Icon Tutorials

Quote:
Originally Posted by jellibean View Post
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).


__________________
I have decided that it was time to make a comeback...hey, Michael Jackson's doing it, why not?
Reply With Quote
  #18  
Old December 17th, 2007, 10:25 pm
Nadia's Avatar
Nadia  Female.gif Nadia is offline
Until the very end
 
Joined: 3246 days
Location: The Castle Beyond Goblin City
Age: 27
Posts: 551
Re: HP Icon Tutorials

It's http://community.livejournal.com/icon_tutorial


__________________


The stories we love best do live in us forever,
so whether you come back by page or by the big screen,
Hogwarts will always be there to welcome you home.

Reply With Quote
  #19  
Old December 18th, 2007, 1:29 am
Drazer  Male.gif Drazer is offline
Second Year
 
Joined: 2704 days
Posts: 72
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.


__________________
The sly ones always win
"Don't criticize what you can't understand"
Reply With Quote
  #20  
Old April 10th, 2008, 1:25 am
ginnypotter19  Female.gif ginnypotter19 is offline
Fourth Year
 
Joined: 3065 days
Location: That little corner of insanity
Age: 21
Posts: 853
Re: HP Icon Tutorials

Does anyone have a GIMP tutorial?


__________________

Please check out my non-Harry Potter story Elmandoroth Chapter Two is finished.

Reply With Quote
Reply
Go Back  Chamber of Secrets > Harry Potter > Magical Masterpieces

Bookmarks

Tags
graphics, icons, tutorial


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


All times are GMT +1. The time now is 6:28 am.


Powered by: vBulletin, Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Original content is Copyright MMII - MMVIII, CoSForums.com. All Rights Reserved.
Other content (posts, images, etc) is Copyright its respective owners.