What do you think of my graphics/images for my app

BobTheBuilder

I'm going to create a iphone app, it involves cabinets.
What do you think of my graphics so far, when I add 3d effects on adobe firework it makes it look a bit fuzzy.
This is the one with the 3d ish effects. http://postimage.org/image/lbqot5dgl/661d0c67/
The 2 left ones are slightly different, which one do you think is better?

This is the one without the 3d graphics. http://postimage.org/image/z4zicnghb/ada49232/

0oHamzaho0

Also any tips on how to improve them or any general advice?

BobTheBuilder

Anyways the app is basically where the cabinets open and close and you have to guess where the item has gone.
I'm useless at trying to make the open drawers of the cabinet look realistic. Can someone help me?

xforce

ill just point out the most obvious things. why is there so much glow/blur on the cabinet front shot of the cabinet? also the perspective is going all over the place. i can see you've just eyeballed and guessed where to draw the lines which is understandable but if you want the cabinet to look correct you need to use a horizon line and vanishing points. ive drawn a cabinet based on correct usage of perspective lines.



notice how everything flows more naturally? all the horizontal lines follow the path of the vanishing points and horizon line. heres what my version looks like with the VP and HL.




the vanishing point should be located at both ends of your cabinet. the angle of the cabinet will change dramatically depending on how far away you place the vanishing points. closer together will create sharper angles. further apart will make things appear more level. also if you're wondering what the purpose of the horizon line is its the point at which your eye level sees something from either below or above. if you look at my example you can see that under the horizon line where all the lines of the cabinet all begin to slant downwards. above the horizon line is where all the lines of the cabinet appear to be going upwards.

BobTheBuilder

ill just point out the most obvious things. why is there so much glow/blur on the cabinet front shot of the cabinet? also the perspective is going all over the place. i can see you've just eyeballed and guessed where to draw the lines which is understandable but if you want the cabinet to look correct you need to use a horizon line and vanishing points. ive drawn a cabinet based on correct usage of perspective lines.



notice how everything flows more naturally? all the horizontal lines follow the path of the vanishing points and horizon line. heres what my version looks like with the VP and HL.




the vanishing point should be located at both ends of your cabinet. the angle of the cabinet will change dramatically depending on how far away you place the vanishing points. closer together will create sharper angles. further apart will make things appear more level. also if you're wondering what the purpose of the horizon line is its the point at which your eye level sees something from either below or above. if you look at my example you can see that under the horizon line where all the lines of the cabinet all begin to slant downwards. above the horizon line is where all the lines of the cabinet appear to be going upwards.

Thanks that's awesome, never heard about the vanishing point before does that apply for all images then? Btw what programme do you use to create your images?

Also can you pls show me how to make one that has the drawer open, I cannot get it right it looks way too fake. I have a few images if you would like me to upload.

xforce

If you're trying to create more realistic images, especially backgrounds that require a perspective shot then yes it does apply. But I wouldnt bother with it if you're just making front or side shots. Also wouldn't use it in an isometric game either as the gfx are all meant to be rendered at a consistent width. I use photoshop for all my work. Havn't used fireworks in about 10 years so I'm not sure of what capabilities it has now. I created all those lines manually but there happens to be a vanishing point option in photoshop that can setup a floor grid for you. I find it fiddly though. You'd be better off just learning the correct way to draw perspective images.




I just used the existing vanishing points to figure out where the location of the draw would be once its open. So in the previous case what I did was draw lines from the left VP intersecting and passing over the 4 corners of the "closed drawer". If you do that for all 4 corners you'll have 4 lines passing from the VP to the end of your page. That gives you the the general bounding box of where to draw in the new cabinet. But how open or closed you want it would depend completely on you. Just remember that the closer to the human eye something is the bigger it will appear which is why the drawer in my example is larger than what it was when its closed

LumpApps

May I ad that when the horizontal is higher you get a birds view and when it's lower you get a frog view.
When there is a character in the scene and you wat to have a normal view have the horizon on the height if the characters eyes.
This is something you can test in real life. Stand outside and look at people of about your height. You will notice the horizon is on the same level as their eyes.
I hope this makes sence

BobTheBuilder

I just used the existing vanishing points to figure out where the location of the draw would be once its open. So in the previous case what I did was draw lines from the left VP intersecting and passing over the 4 corners of the "closed drawer". If you do that for all 4 corners you'll have 4 lines passing from the VP to the end of your page. That gives you the the general bounding box of where to draw in the new cabinet. But how open or closed you want it would depend completely on you. Just remember that the closer to the human eye something is the bigger it will appear which is why the drawer in my example is larger than what it was when its closed

Thanks a lot! Also looking forward to your new app being realised, I am deffo going to download it.
How would I create a animation of the drawer opening and closing? Do I just make images of it open a bit more and slightly larger each step?

Hapiapps

Yup

BobTheBuilder

Yup

Sweet thanks, will this 'stop animation type' make it look smooth enough?

LumpApps

That depends on how many steps you use in between open and close.
Also on how fast the drawer opens and closes. The slower it goes the more steps are needed. The faster it goes the less steps are needed.
Like in the real world. When you slam a drawer close, you ever saw it being half way did you? (Don't try this at home... or at school )