|
 Author | Topic: New Lesson : Making Menu Buttons Rollover (Read 631 times) |
::Ellen::
Administrator
member is offline
![[avatar]](http://i7.tinypic.com/2djdhdi.jpg)
Ellen, Time Rider
![[yim]](http://s4.images.proboards.com/yim.gif) ![[msn]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potter%20design/icon/msn1.gif)
![[homepage]](http://s4.images.proboards.com/buttons/www_sm.gif)
Joined: Nov 2005
Gender: Female 
Posts: 1,677
Location: in my dreams!
Karma: 7 |  | New Lesson : Making Menu Buttons Rollover
« Thread Started on Dec 8, 2006, 8:55pm » | |
Welcome to the new Graphic and design Lesson.
today weare going to learn how we can make simple menu buttons for our forum.
at first you should know the size of the gradient of your menu. for example here we imagine our menu Grads is orange and is 700.35 px
like this:
![[image]](http://i13.tinypic.com/40bkxkx.jpg)
now we like to make our menu buttoms rollover and completely match with this gradient.
|
[MpB:http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/sandstone.jpg]![[image]](http://i9.tinypic.com/4g9cfad.jpg) |
|
Sam PanaStone
Order Of Phoenix
![[image]](http://i8.tinypic.com/24ffnlc.png)
member is offline
![[avatar]](http://icons.iconator.com/661/ICONATOR_ac99a0a6478a8c6c0b5f423762d66bac.gif)
rahh. <3
Joined: Nov 2006
Gender: Female
Posts: 101
Location: lostt.
Karma: 7 | | Re: New Lesson : Making Menu Buttons Rollover
« Reply #1 on Dec 9, 2006, 2:15am » | |
*Raises hand* I do not understand you completely. *puts hand down*
|
![[image]](http://i36.tinypic.com/jaukj5.png) |
|
::Ellen::
Administrator
member is offline
Ellen, Time Rider
Joined: Nov 2005
Gender: Female
Posts: 1,677
Location: in my dreams!
Karma: 7 | | Re: New Lesson : Making Menu Buttons Rollover
« Reply #2 on Dec 9, 2006, 7:09pm » | |
I mean we are going to make menu buttons, match with the menu gradient. this image which Ive posted here is a sample menu gradinet.
we like to have our menu butons, rollover (like here) and also completely set and match with Menu background or Gradient. in this lesson we are going to do that. any questions?[/color]
|
[MpB:http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/sandstone.jpg] |
|
David
Death Eaters
![[image]](http://i8.tinypic.com/24ffkw6.png)
member is offline
![[avatar]](http://i14.tinypic.com/49k7rzs.jpg)
Joined: Dec 2006
Gender: Male 
Posts: 49
Location: united kingdom
Karma: 6 | | Re: New Lesson : Making Menu Buttons Rollover
« Reply #3 on Dec 11, 2006, 1:21am » | |
Good, lets continue 
|
[MpB:http://i25.tinypic.com/2va1nco.jpg]![[image]](http://i17.tinypic.com/47s79sl.jpg)
I have made this one  |
|
Sam PanaStone
Order Of Phoenix
member is offline
rahh. <3
Joined: Nov 2006
Gender: Female
Posts: 101
Location: lostt.
Karma: 7 | | Re: New Lesson : Making Menu Buttons Rollover
« Reply #4 on Dec 16, 2006, 6:22pm » | |
Alrighty. Continue
|
|
|
::Ellen::
Administrator
member is offline
Ellen, Time Rider
Joined: Nov 2005
Gender: Female
Posts: 1,677
Location: in my dreams!
Karma: 7 | | Re: New Lesson : Making Menu Buttons Rollover
« Reply #5 on Dec 17, 2006, 11:52pm » | |
Okay
as I told you , we have that menu Grad and like to make menu buttons with rollover style , completely match with our menu grad.
first we need to open our menu grad in photoshop, then go to layer, there choose Duplicate LAyer and now we will have two images of our menu grad.
now we need to choose copy of background layer in our layer pallete, then go to menu, Image and from there Adjustements and there choose Hue and Saturation, and choose these set up for our copied grad :
Click to see
Now its time to use Text tool from photoshop toolbar and add the text , menu buttons names on the grad :
Home Help Search Members Calendar Admin Profile Logout Login Register
attention, you should wite menu button's names like me to have all of them.. here I have used Zekton font which you can find in dafont
and you can use desired color for your menu text like this image:
Click to see
now its time to make a copy layer from this text layer. then again go to menu, and from there go to Layer, and there choose Duplicate layer. now you will have two tex layers. now you need to change cpied text layer font color match with background copied layer. like this image :
Click to see
until now, if you have any questions ask me
[/b]
|
[MpB:http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/sandstone.jpg] |
|
~*~Mistic*Potter~*~
Assistant Admin
![[image]](http://i7.tinypic.com/24fgt9c.png)
Order of the Phoenix Head
member is offline
![[avatar]](http://i3.photobucket.com/albums/y94/purplestars24/pottersplace/avatar3.jpg)
At My Site's Come and see.
Joined: Feb 2006
Gender: Female
Posts: 207
Location: At Potter's Place
Karma: 0 | | Re: New Lesson : Making Menu Buttons Rollover
« Reply #6 on Jul 9, 2008, 11:25am » | |
OK im soooo lost i dont understand what we or you are doing in here 
The pictures are gone 
|
![[image]](http://i4.tinypic.com/10g0a5e.gif)
![[image]](http://i4.tinypic.com/10g0akm.gif)
|
|
|
![[Home]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/home_off.jpg)
![[Help]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/help_off.jpg)
![[Search]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/search_off.jpg)
![[Calendar]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/calendar_off.jpg)
![[Login]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/login_off.jpg)
![[Register]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/register_off.jpg)
![[Search This Thread]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/all%20buttons/SEARCH.jpg)
![[Send Topic To Friend]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/all%20buttons/SEND-TOPIC-TO-A-FRIEND.jpg)
![[Print]](http://i23.photobucket.com/albums/b378/magicalhogwartsschool/potterpotter/menu/all%20buttons/PRINT.jpg)
Logged