Zelaron Gaming Forum  
Stats Arcade Portal Forum FAQ Community Calendar Today's Posts Search
Go Back   Zelaron Gaming Forum > The Zelaron Nexus > Science and Art

 
 
Thread Tools Display Modes

 
Interface Shapes
Reply
Posted 2002-03-29, 03:46 AM
Introduction:
Designing a comlex interface can be very challenging unless you have the right knowledge. Simply slapping a few circles and squares together may not impress your visitors. Learn how to make those complex shapes using a veriety of techniques.


The Gear:

I suggest that you be familiar with "Layer Styles", or for earlier versions of photoshop I beleive they are called "Layer Effects". Then you should familiarize yourself with gradients. These tools will add a new level to your interface designs.

1: - The very first technique


WHILE HOLDING SHIFT


WHILE HOLDING ALT

The first method I used to create my first interfaces was one of the easiest. However it seems to be an unknown, as the begginer to Photoshop hardly ever figures it out. So here it is...

Hold SHIFT while dragging a selection. This will make your selection even. For example while dragging your circle it wll make it perfectly round! While dragging your square it will make it perfectly square! If you would like to add more to a selection, hold SHIFT again. This will add the selection you drag onto an existing selection.

If you want to remove part of a selection hold ALT. This will deselect the section you drag over the exisiting selection.

To duplicate an image hold ALT+CTRL+SHIFT. If you have a perfectly made circle that you wish to use on another part of your image simply hold ALT+CTRL+SHIFT and then drag this to where you want. This will also drag it in a straight line.

Note: Notice in the picture to the left, while holding ALT you will see the Minus arrow and while holding SHIFT you will see the Plus arrow.




2: - The begining of the gradients

To make the shape of a good interface you may want to use gradients.

Start off by grabbing your circlular marquee tool. Then hold SHIFT and drag a circle.

Then get your Rectanglar Marquee tool and make hold SHIFT once again making sure that the lines line up. Look at the picture on the left for reference. You may need to zoom in to make sure you have the lines lined up with the circle.





3: -Fill er up

Next you will need to select a gradient that goes from light to dark. I choose to show you how this works with white and black. But you can do this with any color, just make sure you have it from a light to dark. Click on the picture to the left to see how to make a gradient.


Once you have your gradient selected drag it over the selection like the picture to the left.

INSURE!!!, that you drag it from the top to the bottom.



Then your gradient should look like the one to the left.

Now you need to go to Select>Modify>Contract and modify the selection by about 15 pixels. Then drag your gradient from the bottom to the top. If you dont it will look funny.






4: - Final Gradiental Touches
After completing step 3 you should have something similar to the picture on the left.



Now go to Select>Modify>Contract and contract the selection by around 5 pixels. Then fill the selection with white or hit Delete. You should get something like on the left.
Old
Profile PM WWW Search
Chruser shouldn't have fed itChruser shouldn't have fed itChruser shouldn't have fed itChruser shouldn't have fed itChruser shouldn't have fed it
 
 
Chruser
 



 
Reply
Posted 2002-03-29, 08:14 AM in reply to Chruser's post "Interface Shapes"
Oh, I see. That'll come in handy as I am currently creating a phpBB style.

Still not as cool as truely 3D rendered buttons, however
--WetWired
Old
Profile PM WWW Search
WetWired read his obituary with confusionWetWired read his obituary with confusionWetWired read his obituary with confusionWetWired read his obituary with confusion
 
 
WetWired
 



 
Reply
Posted 2002-03-29, 08:43 AM in reply to Chruser's post "Interface Shapes"
Hey, you should design a vB style instead
"Stephen Wolfram is the creator of Mathematica and is widely regarded as the most important innovator in scientific and technical computing today." - Stephen Wolfram
Old
Profile PM WWW Search
Chruser shouldn't have fed itChruser shouldn't have fed itChruser shouldn't have fed itChruser shouldn't have fed itChruser shouldn't have fed it
 
 
Chruser
 



 
Reply
Posted 2002-03-29, 10:50 AM in reply to Chruser's post "Interface Shapes"
I don't have the necessary information to do that. Besides, I'm probably the only one on this board that would use my style (it's an Independance War 2 style), but on the board I'm designing it for, most of the regulars would use it. Especially since the only other styles that that board has are one started to look like Plastic here (never got around to the pics), and SubSilver, which came with phpBB.

So you see, designing it for phpBB is more rewarding. Maybe when I'm done I'll do it for vB
--WetWired
Old
Profile PM WWW Search
WetWired read his obituary with confusionWetWired read his obituary with confusionWetWired read his obituary with confusionWetWired read his obituary with confusion
 
 
WetWired
 



 
Reply
Posted 2002-04-09, 04:45 PM in reply to Chruser's post "Interface Shapes"
hmm....
fxzone has nice tutorials for webdesign.
Old
Profile PM WWW Search
Balton is neither ape nor machine; has so far settled for the in-betweenBalton is neither ape nor machine; has so far settled for the in-between
 
 
Balton
 



 
Reply
Posted 2002-05-12, 09:48 AM in reply to Chruser's post "Interface Shapes"
Photoshop 3d shapes are all well and good.. until you realize their just a picture, no actual 3d qualities
Old
Profile PM WWW Search
Xenn shows clear signs of ignorance and confidence; the two things needed to succeed in lifeXenn shows clear signs of ignorance and confidence; the two things needed to succeed in life
 
Xenn
 
 

Bookmarks

« Previous Thread | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

Posting Rules [Forum Rules]
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -6. The time now is 04:07 AM.
'Synthesis 2' vBulletin 3.x styles and 'x79' derivative
by WetWired the Unbound and Chruser
Copyright ©2002-2008 zelaron.com
Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
This site is best seen with your eyes open.