•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Graphics and Multimedia section within the Web Development category of DaniWeb, a massive community of 429,998 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,522 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Graphics and Multimedia advertiser: Programming Forums
| View Poll Results: What do you think? | |||
| It was way to detailed |    | 0 | 0% |
| Too hard |    | 0 | 0% |
| Just Right |    | 1 | 100.00% |
| Voters: 1. You may not vote on this poll | |||
Views: 883 | Replies: 7
 |
•
•
Join Date: Jun 2007
Posts: 181
Reputation: 
Rep Power: 2
Solved Threads: 13
Junior Poster
Photoshop Lesson 1 - Simple, nice looking button
Difficulty: 2/10 - Meaning you should have some Photoshop Experience
After this lesson, you will be able to create, a simple, good looking button in no time.
1.) Create a canvas of 359x33. (CTRL+N or Apple+N)
2.) Create a new layer (this will be for our base colour - Name it accordingly)
3.) Fill the newly created layer with a nice colour (can always change it later) for this lesson I'm going to use #024f90.
--- Phew. that was the fun part, now we going to start getting a little more professional and start applying gradients ---
NB: New to photoshop? Look at attached images if you get last at any point.
4.) Select you marquee tool (M) and use it to select the top half of your canvas.
[Image - 1a.jpg]
5.) Create a new layer, fill it with white. Ensure you havent lost your selection.
6.) Set the layers opacity to 15%.
[Image - 1b.jpg]
7.) Create another new layer
8.) Select the gradient tool (G)
9.) Double click on the gradient editor.
[Image - 1c.jpg]
10.) Create a new gradient that is white with one opacity stop that is centered and transparent.
[Image - 1d.jpg]
11.) Apply your new gradient to the layer you just created. Drag the tool, from the bottom of your canvas to the top.
12.) If you follwed the steps correctly you should end up with something like this.
[Image - 2a.jpg]
--- Thats it ---
Now, you don't have to stop there! Play with the opacity of your layer with the gradient. Apply a colour over-lay to the base colour. It doesn't end here, photoshop is all about experimenting. So go for it.
Difficulty: 2/10 - Meaning you should have some Photoshop Experience
After this lesson, you will be able to create, a simple, good looking button in no time.
1.) Create a canvas of 359x33. (CTRL+N or Apple+N)
2.) Create a new layer (this will be for our base colour - Name it accordingly)
3.) Fill the newly created layer with a nice colour (can always change it later) for this lesson I'm going to use #024f90.
--- Phew. that was the fun part, now we going to start getting a little more professional and start applying gradients ---
NB: New to photoshop? Look at attached images if you get last at any point.
4.) Select you marquee tool (M) and use it to select the top half of your canvas.
[Image - 1a.jpg]
5.) Create a new layer, fill it with white. Ensure you havent lost your selection.
6.) Set the layers opacity to 15%.
[Image - 1b.jpg]
7.) Create another new layer
8.) Select the gradient tool (G)
9.) Double click on the gradient editor.
[Image - 1c.jpg]
10.) Create a new gradient that is white with one opacity stop that is centered and transparent.
[Image - 1d.jpg]
11.) Apply your new gradient to the layer you just created. Drag the tool, from the bottom of your canvas to the top.
12.) If you follwed the steps correctly you should end up with something like this.
[Image - 2a.jpg]
--- Thats it ---
Now, you don't have to stop there! Play with the opacity of your layer with the gradient. Apply a colour over-lay to the base colour. It doesn't end here, photoshop is all about experimenting. So go for it.
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
•
•
Join Date: Mar 2006
Location: Japan
Posts: 139
Reputation:
Rep Power: 3
Solved Threads: 16
Junior Poster
Step 9, you can just single click on it.
Who was the first person to look at a cow and say, "I think I'll squeeze these dangly things here, and drink whatever comes out!"
•
•
Join Date: Jun 2007
Posts: 181
Reputation:
Rep Power: 2
Solved Threads: 13
Junior Poster
Your 100% Correct. Guess I'm just old school and used to double clicking.
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
•
•
Join Date: May 2008
Location: Hyderabad, India
Posts: 261
Reputation:
Rep Power: 0
Solved Threads: 30
Posting Whiz in Training
good tutorial
Thanx,
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
•
•
Join Date: Jun 2007
Posts: 181
Reputation:
Rep Power: 2
Solved Threads: 13
Junior Poster
Thanks sreein
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
•
•
Join Date: Mar 2006
Location: Japan
Posts: 139
Reputation:
Rep Power: 3
Solved Threads: 16
Junior Poster
There are a few things I would change about your tutorial.
In step 10, you need to elaborate more for new users. Even with an attached picture, users might not know how to put in a new opacity stop or color stop for that matter.
In step 11, you said to apply the gradient, but you never previously had users deselect the marquee you created so rather than make a gradient on the whole button, it only makes it in the top half of your button. I would also make a mention (for informational purposes) that holding shift while dragging the gradient can lock a vertical, horizontal, or 45 degree angle.
I would say you have a good start, but it does still need more work.
In step 10, you need to elaborate more for new users. Even with an attached picture, users might not know how to put in a new opacity stop or color stop for that matter.
In step 11, you said to apply the gradient, but you never previously had users deselect the marquee you created so rather than make a gradient on the whole button, it only makes it in the top half of your button. I would also make a mention (for informational purposes) that holding shift while dragging the gradient can lock a vertical, horizontal, or 45 degree angle.
I would say you have a good start, but it does still need more work.
Who was the first person to look at a cow and say, "I think I'll squeeze these dangly things here, and drink whatever comes out!"
•
•
Join Date: Jun 2007
Posts: 181
Reputation:
Rep Power: 2
Solved Threads: 13
Junior Poster
I did mention "Difficulty: 2/10 - Meaning you should have some Photoshop Experience"
Because I didn't want to get into too much detail. But I like your style, want to join up and do the next one with me? PM with your IM details if you game.
Because I didn't want to get into too much detail. But I like your style, want to join up and do the next one with me? PM with your IM details if you game.
Last edited by macneato : Jun 27th, 2008 at 3:42 am.
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
•
•
Join Date: Mar 2006
Location: Japan
Posts: 139
Reputation:
Rep Power: 3
Solved Threads: 16
Junior Poster
I would be more than happy to look over what you make and provide suggestions, but between working full time and running a business on the side, my time is somewhat limited.
Who was the first person to look at a cow and say, "I think I'll squeeze these dangly things here, and drink whatever comes out!"
|
•
•
•
•
•
•
•
•
DaniWeb Graphics and Multimedia Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Previous Thread: Need Urgent Help on a 3d max box modeling
- Next Thread: Photo shop
