Defying Love's Tutorials
Please pick a tutorial:
How to make a button - Photoshop CS3
Reflections in buttons - Photoshop CS3
How to make a button - Photoshop CS3
Reflections in buttons - Photoshop CS3
How to make a link back button!
Program(s) needed: Photoshop CS3 and MS Paint.
Note: I know it's a big tutorial but once you get use to it, you can make buttons in less than 10 minutes!
1) Choose the image you want to work in. It doesn't really matter what kind of image you choose, since you have CS3, you have all the power! Even if you choose the ugly images, Photoshop makes it look better. xD
I will be using this image:
Drag to address bar to view full size!
2) Now it's time to resize for cropping! You can do this by going to Image then Image Size. If you change the width size, the height automatically changes as well! Now take the part you want to crop and open up MS Paint. You can either crop in Photoshop or use MS Paint for it! Why MS Paint? Because it's so much easier!
Quick tip: Neopets images located here usually looks great if you change the width to 150px (height automatically changes) then crop.
3) If you cropped it already, please skip this part! - Once you open up MS Paint, Paste the image then simply click Images then Attributes with the width 88px and height 31px.
This is my result:
4) Then let's go to Edit and Select All (CTRL+A) and then right-click Copy (CTRL+C). Go back to Photoshop, click File then New. The width and height should automatically have changed for you, if not go ahead and do that.
5) Go find some textures for the button. Here's some really good sites: Swimchick(dot)net, Shizoo-design(dot)de, or Nienkju's Resources.
If you like any of the textures in those sites, copy it and then paste in Photoshop. Then click CTRL+T and then resize the texture to fit your button.
On the right side on your screen, there's the "Layer" section where you find the layers of that file. Just below of the tab "Layer", there's a drop down bar that says "Normal". Click that and go through all of the options until you find the one you like! There's times where you might need to make the style more transparent. Next to the drop down bar, there's another one called "Opacity". The lower the percentage is, the more transparent the texture is. Note: More than one texture is definitely fine but you'll need to this all of this again and again for each one! Also, don't change the opacity of the main layer (the one you edited in MS Paint)!
There's also times when you want only a few parts to have the texture and not the other. To do that, simply click the letter "L" in your keyboard then it will change to Lasso Tool. Change the feather to 1-3px, depending on how big the parts you want to remove. 1 being small and 3 being big. Make a circle (doesn't have to be perfect) on the part you want to remove and then click "Delete" in your keyboard OR Edit then Clear You can also select Cut but this will copy the part you removed.
This is my result:
See how different it looks like? *points to what I said in part 1*
6) Now it's almost time to put on borders and such! Click "M" in your keyboard. Make sure the feather on this one is 0px. Make a rectangle on your image (all of it) then go to Edit then Copy Merged - this will also copy the textures you added! Paste in MS Paint!
7) Border time! :D Below, I offer you some premade button borders. So choose one:
Let me be clear about something about these borders:
White part- This is the part where the image will be shown.
Pink- The part where you color it white after putting the border.
Grey- The border part that you color after putting in your image.
Blue- The part you remove in Photoshop later on to make it transparent.
The first border is not transparent so it's less work!
BEFORE USING ANY BORDERS: Click Image then Make sure Draw Opaque is not checked! To do this, just click Draw Opaque! The check is shown right next to the text. If there isn't any check mark on the left side of the text, then it's fine. :D
I will be using the 3rd border and this is what it looks like:
Now remember what I said about the colors above. So make the pink part white!
This is my result:
The grey and transparency part will be in section 8!
8) For the borders, I like to use Photoshop for it because it looks better and faster (if there's a lot you need to change). So copy and paste to a new file in Photoshop. in the bottom, it says "Background Contents" - instead of "White" as default, click the drop down and select "Transparent". Now paste your image.
You see that hand tool? It's located second to the last of the small icons in your left just above the zoom icon. double click it so it automatically zooms in the image till it fits the screen.
Next, find the Gradient Tool. To make it easier to find, click "G" in your keyboard then an icon on the left side is selected! If it's a picture of a paint bucket, right click it and select white and black box which is the Gradient Tool.
Now on the top (where you changed the feather in part 5), double click on the gradient. The Gradient Editor popups! Either choose a premade one on the box or make your own! I do very much making your own!! I will help you more about this in the next section.
9) Here's a quick reference for you:
Drag image to address bar for full size!
Click A then C then click on the color you want from the border on the left side of the button. Now, click B then C then do the same thing but on the right side.
Quick tip: Only choose the dark color. If nothing is light, then just click anything and make the color darker from the color box.
10) Now, click "W" which stand for Magic Wand. A single click will select all of the colors you just clicks. You need to fix the options though. To make it easier for you, just copy the options I have below:
Drag image to address bar for full size!
Click the Gradient Tool again then click anywhere on the left side of the button TO the right side (kind of like stretching). This should color the border with gradient style. :D To de-select the magic wand, click "W" then click anywhere once!
This is my result:
11) Transparent-ing time! If you chose border #1, skip this part. Just click W again to open the Magic wand tool then click the Blue part of the button (they're outside of the border). Click "Delete" in your keyboard.
My result?
12) This is the last part of the tutorial! Yay! :D The text! Click "T" then the Text Tool should be chosen. Choose a good pixel font for your button. Suggested? 04b03, Bangalore, or Skinny. If you do not have any of these fonts, you can download them at Dafont(dot)com. I'm gonna use 04b03. Now type whatever you want. Just a tip: for 04b03, please make sure it's in CAPS so it would look good. Position it wherever you want it to be, no one's stopping you! I'm putting mine in the middle. Anyways, make sure you got the correct font size and the text is not soft. If you want, copy this:
Drag image to address bar for full size!
Not soft? What the heck are you talking about? See that part where it says "None" in a drop down. Yeah, change it to "None" when using a pixel font or it will look ugly!
Now, put a stroke in it! Go to Layer then Layer Style then choose Stroke! Make sure the size of the stroke is only 1px and change the color.
Want the stroke to have gradients? In Fill Type, select Gradient instead of Color in the drop down. Do the same thing in section 9.
Here's my result:
Congrats on your new button! I hope it looks amazing! If this tutorial helped you at all, please be sure to neomail me about it! I would appreciate credit so much if you're opening a button request site. Just a small credit saying you learned how to make buttons by read Defying Love's tutorials. :D
Go Back?
Note: I know it's a big tutorial but once you get use to it, you can make buttons in less than 10 minutes!
1) Choose the image you want to work in. It doesn't really matter what kind of image you choose, since you have CS3, you have all the power! Even if you choose the ugly images, Photoshop makes it look better. xD
I will be using this image:
Drag to address bar to view full size!
2) Now it's time to resize for cropping! You can do this by going to Image then Image Size. If you change the width size, the height automatically changes as well! Now take the part you want to crop and open up MS Paint. You can either crop in Photoshop or use MS Paint for it! Why MS Paint? Because it's so much easier!
Quick tip: Neopets images located here usually looks great if you change the width to 150px (height automatically changes) then crop.
3) If you cropped it already, please skip this part! - Once you open up MS Paint, Paste the image then simply click Images then Attributes with the width 88px and height 31px.
This is my result:
4) Then let's go to Edit and Select All (CTRL+A) and then right-click Copy (CTRL+C). Go back to Photoshop, click File then New. The width and height should automatically have changed for you, if not go ahead and do that.
5) Go find some textures for the button. Here's some really good sites: Swimchick(dot)net, Shizoo-design(dot)de, or Nienkju's Resources.
If you like any of the textures in those sites, copy it and then paste in Photoshop. Then click CTRL+T and then resize the texture to fit your button.
On the right side on your screen, there's the "Layer" section where you find the layers of that file. Just below of the tab "Layer", there's a drop down bar that says "Normal". Click that and go through all of the options until you find the one you like! There's times where you might need to make the style more transparent. Next to the drop down bar, there's another one called "Opacity". The lower the percentage is, the more transparent the texture is. Note: More than one texture is definitely fine but you'll need to this all of this again and again for each one! Also, don't change the opacity of the main layer (the one you edited in MS Paint)!
There's also times when you want only a few parts to have the texture and not the other. To do that, simply click the letter "L" in your keyboard then it will change to Lasso Tool. Change the feather to 1-3px, depending on how big the parts you want to remove. 1 being small and 3 being big. Make a circle (doesn't have to be perfect) on the part you want to remove and then click "Delete" in your keyboard OR Edit then Clear You can also select Cut but this will copy the part you removed.
This is my result:
See how different it looks like? *points to what I said in part 1*
6) Now it's almost time to put on borders and such! Click "M" in your keyboard. Make sure the feather on this one is 0px. Make a rectangle on your image (all of it) then go to Edit then Copy Merged - this will also copy the textures you added! Paste in MS Paint!
7) Border time! :D Below, I offer you some premade button borders. So choose one:
Let me be clear about something about these borders:
White part- This is the part where the image will be shown.
Pink- The part where you color it white after putting the border.
Grey- The border part that you color after putting in your image.
Blue- The part you remove in Photoshop later on to make it transparent.
The first border is not transparent so it's less work!
BEFORE USING ANY BORDERS: Click Image then Make sure Draw Opaque is not checked! To do this, just click Draw Opaque! The check is shown right next to the text. If there isn't any check mark on the left side of the text, then it's fine. :D
I will be using the 3rd border and this is what it looks like:
Now remember what I said about the colors above. So make the pink part white!
This is my result:
The grey and transparency part will be in section 8!
8) For the borders, I like to use Photoshop for it because it looks better and faster (if there's a lot you need to change). So copy and paste to a new file in Photoshop. in the bottom, it says "Background Contents" - instead of "White" as default, click the drop down and select "Transparent". Now paste your image.
You see that hand tool? It's located second to the last of the small icons in your left just above the zoom icon. double click it so it automatically zooms in the image till it fits the screen.
Next, find the Gradient Tool. To make it easier to find, click "G" in your keyboard then an icon on the left side is selected! If it's a picture of a paint bucket, right click it and select white and black box which is the Gradient Tool.
Now on the top (where you changed the feather in part 5), double click on the gradient. The Gradient Editor popups! Either choose a premade one on the box or make your own! I do very much making your own!! I will help you more about this in the next section.
9) Here's a quick reference for you:
Drag image to address bar for full size!
Click A then C then click on the color you want from the border on the left side of the button. Now, click B then C then do the same thing but on the right side.
Quick tip: Only choose the dark color. If nothing is light, then just click anything and make the color darker from the color box.
10) Now, click "W" which stand for Magic Wand. A single click will select all of the colors you just clicks. You need to fix the options though. To make it easier for you, just copy the options I have below:
Drag image to address bar for full size!
Click the Gradient Tool again then click anywhere on the left side of the button TO the right side (kind of like stretching). This should color the border with gradient style. :D To de-select the magic wand, click "W" then click anywhere once!
This is my result:
11) Transparent-ing time! If you chose border #1, skip this part. Just click W again to open the Magic wand tool then click the Blue part of the button (they're outside of the border). Click "Delete" in your keyboard.
My result?
12) This is the last part of the tutorial! Yay! :D The text! Click "T" then the Text Tool should be chosen. Choose a good pixel font for your button. Suggested? 04b03, Bangalore, or Skinny. If you do not have any of these fonts, you can download them at Dafont(dot)com. I'm gonna use 04b03. Now type whatever you want. Just a tip: for 04b03, please make sure it's in CAPS so it would look good. Position it wherever you want it to be, no one's stopping you! I'm putting mine in the middle. Anyways, make sure you got the correct font size and the text is not soft. If you want, copy this:
Drag image to address bar for full size!
Not soft? What the heck are you talking about? See that part where it says "None" in a drop down. Yeah, change it to "None" when using a pixel font or it will look ugly!
Now, put a stroke in it! Go to Layer then Layer Style then choose Stroke! Make sure the size of the stroke is only 1px and change the color.
Want the stroke to have gradients? In Fill Type, select Gradient instead of Color in the drop down. Do the same thing in section 9.
Here's my result:
Congrats on your new button! I hope it looks amazing! If this tutorial helped you at all, please be sure to neomail me about it! I would appreciate credit so much if you're opening a button request site. Just a small credit saying you learned how to make buttons by read Defying Love's tutorials. :D
Go Back?
Reflection Text Effect
1) Put the text a little higher than original. Duplicate the layer. Select the Rectangular Marquee Tool. Right click on the duplicated text and select "Free Transform". Choose "Flip Vertically" now fix it. Rasterize this layer.
This is what it should look like:
Note: Make sure there's a 1px gap between the original and duplicated.
2) Select the Rectangular Marquee Tool again but this time, add 1px of feather. Now, I don't really know how to explain this, sorry if it won't make sense! -.-" Take 1px of the bottom part of the duplicated one and click the "Delete" button twice in your keyboard then change the opacity to 70% This is what it should look like:
If this tutorial helped you at all, please be sure to neomail me! Link back is appreciated if you use this reflection effect on your buttons.
Go Back?
Note: Make sure there's a 1px gap between the original and duplicated.
2) Select the Rectangular Marquee Tool again but this time, add 1px of feather. Now, I don't really know how to explain this, sorry if it won't make sense! -.-" Take 1px of the bottom part of the duplicated one and click the "Delete" button twice in your keyboard then change the opacity to 70% This is what it should look like:
If this tutorial helped you at all, please be sure to neomail me! Link back is appreciated if you use this reflection effect on your buttons.
Go Back?