Jump to content


Photo
- - - - -

Modern / Stylish Bar


  • Please log in to reply
8 replies to this topic

#1 Davey

Davey

    P2L Jedi

  • Members
  • PipPipPip
  • 620 posts
  • Location:Perth, Scotland
  • Interests:Creativity, Adrenaline, Etc

Posted 02 October 2006 - 04:03 AM

Stylish, Modern Web Bar

Description:
This tutorial will show you how to make a Stylish and modern looking
bar which can be useful for things like a navigation bar, buttons, etc.

Step1:
Draw a rectangle to the size you would like the bar to be, keeping in
mind what it will be used for. Mine is height: 25px; width: 300px,
which will be used as a minibar for a sig.Choose the colour you want,
mine is green.

Attached File  bar01.gif   143bytes   203 downloads

Step 2:
Hit the layer styles button Attached File  icon01.gif   625bytes   115 downloads and select inner shadow. Choose the
following settings (for distance just set it so it’s about half the height
of your rectangle):

Attached File  settings01.gif   15.71KB   153 downloads

Now we want to add a gradient to give it a little more depth:

Attached File  settings02.gif   13.93KB   189 downloads

Last but not least i like to add a border to give it a finished look. To
do this I usually just do a 1px stroke using a slightly darker shade of
the darker part of our bar (I hope that makes sense). Here is what i
got:

Attached File  bar02.gif   829bytes   198 downloads

And with some additional changes i got this:

Attached File  bar03.gif   2.85KB   385 downloads

I hope this helps somewhere!


#2 Trix06

Trix06

    Young Padawan

  • Members
  • Pip
  • 292 posts
  • Gender:Male
  • Location:NSW Australia
  • Interests:Web Design & Development, Graphic Design, Programming, Networking, Girls, The Beach, Amatuer Radio Communications and more.

Posted 02 October 2006 - 04:24 AM

Nice work I like it! :D

#3 Davey

Davey

    P2L Jedi

  • Members
  • PipPipPip
  • 620 posts
  • Location:Perth, Scotland
  • Interests:Creativity, Adrenaline, Etc

Posted 02 October 2006 - 06:01 AM

thnx m8 :D

#4 Adαm

Adαm

    Young Padawan

  • Members
  • Pip
  • 189 posts
  • Gender:Male
  • Location:United Kingdom

Posted 02 October 2006 - 11:27 AM

Thats very nice ;)

#5 Davey

Davey

    P2L Jedi

  • Members
  • PipPipPip
  • 620 posts
  • Location:Perth, Scotland
  • Interests:Creativity, Adrenaline, Etc

Posted 02 October 2006 - 02:16 PM

thnx mate :D

#6 d2Squared

d2Squared

    P2L Jedi

  • Members
  • PipPipPip
  • 828 posts
  • Gender:Male
  • Location:Israel
  • Interests:Swimmig<br />Web-design<br />Starcraft

Posted 08 October 2006 - 02:40 AM

pretty simple, and nice.

#7 -Roy-

-Roy-

    Young Padawan

  • Members
  • Pip
  • 8 posts
  • Location:Holland

Posted 08 October 2006 - 04:08 AM

Nice tutorial. This is my outcome:
Attached File  colorbar.png   994bytes   152 downloads

#8 PS2 n00b

PS2 n00b

    Young Padawan

  • Members
  • Pip
  • 11 posts
  • Location:A planet called 'earth' specifically Ontario,Canada
  • Interests:Lets see chocolates,HTML,CSS generally web design, family,friends,interior design and much much more.

Posted 23 October 2006 - 03:45 PM

totally stylish! Good Job! :)

#9 beaverpoutine

beaverpoutine

    P2L Paramedic

  • Publishing Betazoids
  • PipPipPipPip
  • 1,101 posts
  • Gender:Male

Posted 23 October 2006 - 07:44 PM

very nice! Thanks!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users