| We hope you enjoy your visit. Join our community! If you're already a member please log in to your account to access all of our features: |
| Creating an Interface Photoshop Tutorial | |
|---|---|
| Topic Started: Dec 30 2006, 03:07 AM (1,487 Views) | |
| +SparkCom | Dec 30 2006, 03:07 AM Post #1 |
.
|
credits goes to http://www.voidix.com/ This is the fist part to a 4 part tutorial set that shows you how to make a cool interface for your site. The first step is to make a new 800x600 image in Photoshop. Fill your bg with a dark gray. The first thing I did was make a little side bar to the left, maybe to hold small updates, or link buttons. Use the square selection tool to make a rectangular selection of the right side of your page and fill it with a medium gray. Posted Image The next step is to begin to make the navigation bar to the left. To do this, we are going to use some gradients. So, make your bg color a medium gray, and your foreground color and light gray. Get out your gradient tool and make a nice gradient by selecting a nice rectangular shape with your square selection tool, and drag the gradient tool to add the gradient. Make sure that the lightest gray section is located to the left. This gives it that beveled look. Posted Image Now we are going to continue with the side bar. So, using your square selection tool, select a small portion of your side bar I like have below. Posted Image Press ctrl and + to zoom in on your selection. Now we are going to use the gradient tool again. So, as before, take out your gradient tool, selection a d medium and dark gray for your foreground and bg colors and make your gradient. Again, making sure that the lightest potion is to the left. Posted Image No, go to select>modify>contract and contract your selection by a few pixels. Now get out your gradient tool again and make another gradient in your new selection. But, this time making sure that the lightest potion is to the right. Posted Image Zoom out and your should have a side bar that looks similar to mine below. Posted Image Now we are going to use the same method, but this time making it on the top. So use your selection tool to selection a rectangular portion of the top of your page like the picture below. Again use your gradient tool to make a gradient so that the lightest portion is on the top. Posted Image Use the same method as before to add the other bevels on the bottom portion, so that your title bar looks similar to mine. Posted Image Now, if you like you can select your side navigation bar, copy it and past it on the other side like the picture below, or leave it how it is. Its up to you. Posted Image Now you are done with this portion of the tutorial, On to section 2! |
Never argue with idiots
| |
 |
 
|
| coycoy | Dec 30 2006, 03:31 AM Post #2 |
"sparkler"
|
thanx Mr. ambot.... |
______ __________  ____I can see this place dying a sad and lonely death unless you take hold... I can see your IP Address dude! haha!   my Friendster >>>>>>>>>>>So Beautiful<<<<<<<<<<<< | |
|
|
|
| bhythm00 | May 2 2007, 08:25 PM Post #3 |
Member
|
can i DL this photoshop :help: |
 Im a Losser Pazaway Pero Mapag-Mahal
| |
|
|
|
| insane | Jan 8 2008, 04:53 AM Post #4 |
Member
|
that's nice.. thanks to voidix |
| |
|
|
|
| lojace | Jan 22 2008, 01:04 AM Post #5 |
"Rosario Institute-Junior Student" .. ^CavitE^
|
Hi Sir.Insane why don't you share some tricks with us :p |
  .::Certified Badminton Player::.  | |
|
|
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Adobe Photoshops · Next Topic » |
11:55 PM Jul 30
