|
|
| Author |
Message |
BlaqkFrozste
Gfx Design Expert
Joined: 28 Apr 2007
Posts: 60
Location: Dunedin
|
 Posted: Sun Apr 29, 2007 6:57 pm
 Post subject: Paint.NET Tutorial [II] - Firefox Browser-like buttons-
|
 |
|
Okay, before we start, download the install the Drop Shadow Plug in here : [url]http://users.telenet.be/kris.vandermotten/Paint.NET/Vandermotten.PaintDotNetEffects.zip[/url]
this tutorial will get you started on making your very own Firefox skin, if you don't have Firefox, DOWNLOAD IT NOW! It is a FANTASTIC web browser. then again you might just have a fetish for buttons, that's okay too!
this is what we are creating:
[img]http://img209.imageshack.us/img209/4589/ninthld2.png[/img]
Requirements: Paint.NET ( Application ) Drop Shadow ( Plug in )
Time: Up to 20 minutes
Step One: Start with your canvas empty, 800x600
Step Two: Use the Elipse Select tool and (holding the SHIFT key) drag a circle that has a Bounding Rectangle size of 400 x 400 pixels. [img]http://img204.imageshack.us/img204/1014/firstvk7.png[/img]
Step Three: Now crop this ( Image > Crop to Selection )
Step Four: Set your secondary colour to transparent[img]http://img214.imageshack.us/img214/2804/secondrs5.png[/img]
Step Five: ( Image > Canvas Size ). Make this 125%, also make sure that the "anchor" is in the middle. You should now have a perfectly centered circle on your canvas.
[img]http://img208.imageshack.us/img208/6384/thirdzl0.png[/img]
Step Six: Set your primary colour to Green (or any other colour you want), and your secondary to White
Step Seven: Use the Magic Wand tool to select your white circle and use the Gradient tool, set on Radial, and use the right-mouse button to draw a gradient starting about 1/3 from the bottom of the circle up to the top.
[img]http://img208.imageshack.us/img208/3589/fourthrp7.png[/img]
Step Eight: Duplicate the layer twice (duplicating shown in the first tutorial) , call the top layer "Top" call the middle "Middle"
Step Nine: Start with the 'Top' layer and choose the Move Selection tool (your circle should still be selected) and grab the top of your circle selection and begin dragging down until the height of the elipse is 350px.
[img]http://img205.imageshack.us/img205/4093/fifthrw3.png[/img]
Step Ten (many mini steps included): Press Delete.
Go to the 'Middle' Layer and us the Magic Wand to select the area outside the circle and CTRL+I to invert selection.
Choose the Move Selection tool again and grab the top of the circle and drag down until the height of the elipse is 250px. Delete.
Go back to the 'Top' layer and EFFECTS > BLURS > Median Blur: Radius 10, Percentile 0.
Use the Magic Wand to select the outside area and CTRL+I to invert.
Set your Primary Colour to White and Secondary Colour to Dark Grey.
Fill the crescent White. Press CTRL+D to deselect then EFFECTS > BLURS > Radial Blur: Amount 2.
Go to the 'Middle' layer and EFFECTS > BLURS > Median Blur: Radius 10, Percentile 0.
Use the Magic Wand to select the outside area and CTRL+I to invert.
Choose the Gradient Tool and set it to Linear and draw a gradient (left-click) from the top of the crescent to the bottom.
CRTL+D to de select then EFFECTS > BLURS > Radial Blur: Amount 2.
At this point select the the Background Layer and EFFECTS > BLURS > Radial Blur: Amount 2. [img]http://img208.imageshack.us/img208/2091/sixthyw3.png[/img]
Step Eleven: On the "Top" layer, set the blending to screen, and the Opacity to 100.
Step Twelve: Finishing the button - epeat this on the 'Middle' layer.
Create a new layer and call it 'Control'. Move the 'Control' layer down to above the background and below the 'Middle' layers.
This is where you are going to put the text or image that relates to your button.
I am going to make this a 'Refresh' button and will be using the "Webdings" font - letter 'q'.
Select the Text tool and change the font to 'Webdings'. Increase the font size to 200 (you can do this by typing directly into the font size control).
Click onto your image and type the letter 'q'. This should give you a 'Refresh' symbol. Use the control arrow to position the symbol in the centre of your button.
[img]http://img207.imageshack.us/img207/88/eigthmg6.png[/img]
Step Thirteen: This is where the plug in comes in. EFFECTS > Drop Shadow: Offset-X 0, Offset-y 10, Blur Radius 10.
Flatten the image and EFFECTS > Drop Shadow: same settings again.
Done! Now you make some buttons, and post your finished products! Ciao
BlaqkFrozste
|
|
|
 |
|
|
|
Gareth
Site Admin
Joined: 15 Mar 2006
Posts: 805
Location: North Shore City, Auckland, NZ
|
Posted: Sun Apr 29, 2007 11:38 pm
Post subject:
|
|
|
Woah cool! 
Still prefer your previous tut hehe.
But this is amazingly cool too 
|
|
|
|
BlaqkFrozste
Gfx Design Expert
Joined: 28 Apr 2007
Posts: 60
Location: Dunedin
|
Posted: Wed May 02, 2007 12:18 am
Post subject:
|
|
|
|
Thanks ;D
|
|
|
|
Gareth
Site Admin
Joined: 15 Mar 2006
Posts: 805
Location: North Shore City, Auckland, NZ
|
Posted: Thu May 03, 2007 5:48 pm
Post subject:
|
|
|
|
Jon check this out!
|
|
|
|
sawanbanna
Tortoise
Joined: 18 Jan 2007
Posts: 20
Location: Denver, CO
|
Posted: Wed May 09, 2007 2:11 pm
Post subject:
|
|
|
|
beautiful...sound much easier than PS
|
|
|
|
BlaqkFrozste
Gfx Design Expert
Joined: 28 Apr 2007
Posts: 60
Location: Dunedin
|
Posted: Thu May 10, 2007 8:31 pm
Post subject:
|
|
|
|
aha oh it is my friend, oh it is
|
|
|
|
Gareth
Site Admin
Joined: 15 Mar 2006
Posts: 805
Location: North Shore City, Auckland, NZ
|
Posted: Fri Jul 06, 2007 5:07 pm
Post subject:
|
|
|
Or is it?
All photoshop is actually quite easy too..
|
|
|
|
|
FAQ
Search
Register
Log in
