Creating an Interface Photoshop Tutorial 2

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 2
Topic Started: Dec 30 2006, 03:12 AM (1,035 Views)
+SparkCom	Dec 30 2006, 03:12 AM Post #1
. Posts: 464 Group: Founder Member #1 Joined: December 27, 2006	from http://www.voidix.com This is the second installment to a series of tutorials showing you how to make a quality interface. Make sure you have done tutorial #1 before doing this one. Ok, you have made it this far. This section will show you how to make the navigation bar, and buttons. The first step is to make a rectangular selection with your square tool and fill it with a dark gray like the picture below. Posted Image While selected, go to edit>stroke Make the settings that that the color is a very dark gray, the border is 1 px and it is bordering on the outside of your selection. Your square should look like this when zoomed in. Posted Image ow, make a new layer and with the same selection, stroke your image with a light gray. Now, in order to give it an inner bevel effect we are going to erase half of the light gray border. Select and delete it so that the light border is on the right, and bottom side of the rectangle, and the darker portion is on the top and left. Your image should look like the one below. Posted Image Now we are going to make the buttons. Zoom in on your selection by pressing ctrl and + select a small rectangle inside your newly made dark rectangle and make a new layer. Use your gradient tool with a light and dark gray to make a gradient so that the lighter portion is on the top. Your should be getting the gradients down pretty good by now. Now using the same stroke method, give it a nice dark border. Posted Image Your button should look like this when zoomed in. Posted Image Now, go to layer drop down menu and select "Duplicate layer" This will duplicate your new button. Keep duplicating and aligning them like the image below, just make as many buttons as you are going to need on your site. Posted Image Your interface should now look like the one below. Posted Image
	Never argue with idiots


coycoy	Jan 19 2007, 11:03 PM Post #2
"sparkler" Posts: 3,645 Group: Moderator Member #8 Joined: December 28, 2006	thanx 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<<<<<<<<<<<<


jcmp818	Jan 20 2007, 01:12 PM Post #3
code.name: JO.CO.MA.PA Posts: 2,813 Group: Off-Topic Moderator Member #212 Joined: January 9, 2007	:good: NICE... I WISH I HAVE PHOTOSHOP.. :cry:
	30% ROCK :: 40% PUNK :: 15% R&B :: 15% EMO "i am that GUY* your parents warned you a-b-o-u-t"* ----------------------------------------------


blackiswack	Jan 20 2007, 10:59 PM Post #4
`stujantengtamad Posts: 2,929 Group: Moderator Member #69 Joined: January 2, 2007	great. ~trisSh :D
	have you ever noticed that the more SPECIAL you treat someone, the more that that someone takes you for granted?. `damn right.


coycoy	Feb 6 2007, 10:02 PM Post #5
"sparkler" Posts: 3,645 Group: Moderator Member #8 Joined: December 28, 2006	thank you so much :D
	____________ ________ 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<<<<<<<<<<<<


CREAM-O	Oct 28 2008, 08:32 PM Post #6
Member Posts: 10 Group: Members Member #24,713 Joined: April 7, 2008	thank you so much..
	PERFECTLY IMPERFECT MARCH 17, 2008


1 user reading this topic (1 Guest and 0 Anonymous)


« Previous Topic · Adobe Photoshops · Next Topic »