Photoshop Tips

Interface Overview (April 98) 
Its seems that's what everyone is talking about these days, Why? because they look cool and can add nice interactivity to web pages. I get at least 15 e-mails a day regarding interfaces and how to make them. Most people want me to post tips on them, but you have to remember, Interfaces aren't really tips, they're "projects" and take tons of time, some can take weeks to do. So what I'm going to do is help you make your own, or at least point you in the right direction.
Getting Prepared
If you have Adobe Photoshop and a good chair to sit in, then your pretty much ready to go. Maybe go grab some radios or walkmans and look at them, or glance over at your printer to see how the buttons are on it. You don't realize it but interfaces are all around us, its like how we get around sometimes or control things like in a car , stereo or even your microwave oven has a nifty little control pad.

They can all give you some useful ideas, or  just think one up, but don't go to crazy up there because the way I see it your only limited by how well you know your paint software, so the more you know how the program works then the much easier it will be .This is the best way to prepare your self to make the interface you've always dreamed of.
If you don't know Photoshop well, things can become difficult and get frustrating. You need to know how to get your self out of situations like when your stuck or if you screw up. So if you're not familiar with Photoshop I suggest you sit down with the Manual and read EVERYTHING you can with lots of hands on experience , It will pay off in the long run.
Starting Tips
Try drawing any interface you can think up on paper, then re-draw it in Photoshop. Drawing first is better because if you mess up on paper its easier and faster to take things out that don't look right rather then spending a hour on a part in Photoshop and having to erase the whole thing because it just doesn't fit. Even if you can't draw well and are lazy like me , Do it anyway, you'll see a difference.

Using add-on filters for starters is not the answer and you'll end up limiting your self and wont learn a thing about Photoshop. This is all coming from personal experience.

Start practicing some tutorials on my site to get familiar with lighting and how gradients make things look 3D etc. Because "lighting" is the the key to making things look 3D and pop out, something you must study a little bit. Start zeroing in on objects or "anything" in a room and look for highlights from a light source. If you can master this, then you're set.

Here's a quick overview of my Prototype 9 interface, I could explain it in complete
detail but it will take to long, So here's just my basic order from beginning to end.

All my frame work was done with Channels in Photoshop, I copied my body/drawing on to the computer with the Pen tool in Channels, Then I loaded my channel in RGB mode, Then applied my texture and bevel. Next I started my components (buttons, gadgets, wires, pipes etc.) for the interface. Notice all these were on a back layer behind my frame.

This is a quite old interface I did and was an experiment, If you would like to see the  full size version, Its in my Gallery.

Remember
As with anything, Start at the bottom and work your way up. I've learned that those little tips help out more then anything when you do enough of them, because you almost use the same techniques but in an interface type form.

When I started, there was really no one to give me this information, So that makes me believe that you "can" figure most things out on your own, and I'm going to try to speed
things up a little. Click here to go back to the tips so you can get started!

April 1998

Back

 

Home | Site Map | Search | Tips | Store | Free | Resources | Community | About | Email
Designs By Mark.com. © 1997 - 2000 Mark Monciardini All Rights Reserved.