Preserved Topic: this might be weird but (Page 1 of 1)

This is kind or a cross over between Webdesign and Photoshop but....

How do I use Photoshop in creating a Graphical User Interface.....

For those who don't know what that is..... basically a menu with mouse voers and animations that lead into the different sub menu.

What I want to do is have A metalic Bar across the top of the page. With a small button on it. Once this is clicked the bulk of it would fall out and show the bulk of it. The boulk would be like a gear (sprocket) and when another option is selected the gear spins and the submenu drops....

I have been trying to work on it for a few days and haven't gotten anywhere


It is kinda hard to describe and I am working on it as best I can.......

I have made many sorts of things like this.. basically you want to make all the graphics in Adobe Photoshop, on seperate layers preferibly so you can seperate them in the future.. Depending on how you want it to look, you can save all the images you want from your template as .bmp. Then us a program like Flash to import all the graphics in. Then make them move around, you can incorprate rollover and stuff like that. Also you might need to use Adobe Imageready, to get some animations that flash cannot do because of complex Adobe graphics.

thanks i'll try that

I would suggest making the images in Photoshop and send them to ImageReady for the animations and Rollovers. IR will also spew out code, if you wish. (learn the code) This also sounds like it`s going to make a huge file, so keep the 56kers in mind. (learn the code)
Also If you take the time to learn the HTML, and add some javascript rollovers, you`ll be better off. It`s worth it.



[This message has been edited by docilebob (edited 07-05-2003).]

your right.... ty

Are there anyways u suggest of compressing the file size without the loss of 2 much quality

If I may cut in with my opinion, that's not something you can teach. File optimization is really something that you get better at with experience.

*smiles* But it's always possible to tell you how it works.

GIFs are capable of holding up to 256 colors. The best way to optimize a GIF is to drop the amount of colors down. After you do that, you can play with different color palettes, dithering, amount of dithering, lossiness, etc... Perceptual typically has the lowest file size of PS's default palettes, and Diffusion dithering typically the lowest file size of PS's dithering options. I personally don't notice a huge difference switching palettes, but there's almost always a difference when you play with the dithering options. Bring up the "Save for web..." window in PS (6+ only) and play around with it.

JPEGs are easier to compress. You just drop the quality on a slider. Again, bring up the "Save for web..." window and play with it. Use the "2-up" tab so you can directly see and compare the quality and file size difference.

Marf: Flash will do more than you think on "Complex Photoshop Graphics"

If you just want a rotating gear imageready and some simple transforms might be plenty.

Still Flash has an option to convert a bitmap image into vectors and it generally does a half decent job of it. From there you can just do a quick motion tween with 1 rotation, export as an animated gif and possibly do some cleaning in another program if it's needed (likely not if the image is small enough). Flash is nice because you can easily set the number of frames and even make it accelerate into the motion.

Of course Flash itself is much better than the animated GIF in every way if you can just make the whole interface Flash... (with the images created in Photoshop of course)

Still Image Ready and rotations so that 360%X = 0 (as in 360 / your degree leaves no remainder) should work well for that gear animated gif once you get a good initial gear image.

ter: I totally agree.

Perhaps I wasn't clear with my previous post. But yes I would make the whole interface in flash.