d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Graphic Design > Anyone Experienced In U I Design?
Prev12345Next
Add Reply New Topic New Poll
Member
Posts: 4,082
Joined: Jan 17 2014
Gold: Locked
Apr 6 2015 02:46am
Quote (RyanRuler @ Apr 5 2015 03:11pm)
Thanks!
Theres no outer glow on anything though.
And yeah i could probably make it better if i do by hand"


looked like an outer glow on the icons at the bottom, maybe i'm just a retard xD
Member
Posts: 4,678
Joined: Jul 7 2007
Gold: 9,529.00
Apr 6 2015 05:36am
Quote (RyanRuler @ Apr 4 2015 09:23pm)
Here's something I came up with in photoshop alone in roughly 30 minutes.
Just wanna know if you guys think i'm heading on the right path;
(The text is just labeling, didn't spend any time on the text at all)

http://i1373.photobucket.com/albums/ag367/RyanYeah1/Holy%20GUI%20Example_zps4v3apvtx.png


So, I can't figure out what this is supposed to be for. a few things,

1. Make an outline or wireframe version of a UI first to make sure it will suit your needs and makes visual and logical sense.
2. First draft try to be minimalistic. Effects should only be to accent a desired feel/characteristic/style, witch I currently can't tell what you are going for with this one.
3. Things like drop shadow and bevel/emboss should really be avoided until you fully understand lighting and how to properly adjust them to get to most benefit, and only when it truly enhances the desired outcome, as mentioned above.
4. The squiggles you are using need refinement, the curvature is inconsistent and generally off, I'm again not entirely sure of their purpose towards the overall theme, as again I can't tell what the theme is supposed to be.
5. Simplicity is best in most things. Their are of course exceptions to the rule but when starting out it is much more important to get your flow and interactions correct while having it be visually clear and appealing.

Alright, full honesty time after giving some guidelines, it's pretty horrible. I wouldn't get discouraged though as this is clearly one of your first attempts. You fell for the beginner traps, mainly effect abuse. Almost everyone does this when they first start so it's completely understandable, I honestly can't think of one user on this board or designer in general, including myself, that didn't have some sort of effect abuse when they first started. The squiggles definitely should be avoided. I get that you probably used them as a way to frame the elements but it only detracts from the entirety due to poor execution. I'm guessing you did them by hand as they are pretty rough, but it's even harder to tell with the bevel/emboss. Again, keep it simple. The torn edge paper thing you were going for in the center piece, this is just more fluff that shouldn't be there unless it fit's the desired theme and does not detract from it, which currently it is just an obnoxious distraction amongst the the rest. This is again from lack of a clearly established style and poor execution.

I would say just start back at the basic wireframe and start with a defined goal and purpose. I don't know what either of those are for this as the only information I have is the design and it is not clear from looking at it. Before you start throwing effects at it, practice with them. Find a good example of the effect you are going for and try to break it down into how they might have achieved it. Practice on a separate document to get a feel for what steps and blending is needed for the desired appearance. Once you know the tricks and main uses for the blending filters you will have an easier time applying them. Mainly though, and I can't stress this enough, keep it simple.

If at any point you think I was too harsh, you are going to want to get behind a fortified wall because I am fairly gentle in comparison to most here lol.
Member
Posts: 3,797
Joined: Jun 27 2011
Gold: 5,006.00
Apr 6 2015 09:27am
Quote (Tetu_880 @ Apr 6 2015 06:36am)
So, I can't figure out what this is supposed to be for. a few things,

1. Make an outline or wireframe version of a UI first to make sure it will suit your needs and makes visual and logical sense.
2. First draft try to be minimalistic. Effects should only be to accent a desired feel/characteristic/style, witch I currently can't tell what you are going for with this one.
3. Things like drop shadow and bevel/emboss should really be avoided until you fully understand lighting and how to properly adjust them to get to most benefit, and only when it truly enhances the desired outcome, as mentioned above.
4. The squiggles you are using need refinement, the curvature is inconsistent and generally off, I'm again not entirely sure of their purpose towards the overall theme, as again I can't tell what the theme is supposed to be.
5. Simplicity is best in most things. Their are of course exceptions to the rule but when starting out it is much more important to get your flow and interactions correct while having it be visually clear and appealing.

Alright, full honesty time after giving some guidelines, it's pretty horrible. I wouldn't get discouraged though as this is clearly one of your first attempts. You fell for the beginner traps, mainly effect abuse. Almost everyone does this when they first start so it's completely understandable, I honestly can't think of one user on this board or designer in general, including myself, that didn't have some sort of effect abuse when they first started. The squiggles definitely should be avoided. I get that you probably used them as a way to frame the elements but it only detracts from the entirety due to poor execution. I'm guessing you did them by hand as they are pretty rough, but it's even harder to tell with the bevel/emboss. Again, keep it simple. The torn edge paper thing you were going for in the center piece, this is just more fluff that shouldn't be there unless it fit's the desired theme and does not detract from it, which currently it is just an obnoxious distraction amongst the the rest. This is again from lack of a clearly established style and poor execution.

I would say just start back at the basic wireframe and start with a defined goal and purpose. I don't know what either of those are for this as the only information I have is the design and it is not clear from looking at it. Before you start throwing effects at it, practice with them. Find a good example of the effect you are going for and try to break it down into how they might have achieved it. Practice on a separate document to get a feel for what steps and blending is needed for the desired appearance. Once you know the tricks and main uses for the blending filters you will have an easier time applying them. Mainly though, and I can't stress this enough, keep it simple.

If at any point you think I was too harsh, you are going to want to get behind a fortified wall because I am fairly gentle in comparison to most here lol.


Well give me an example of what you think looks good and i'll start off by trying to recreate it. i think that could be a good start.
Member
Posts: 4,678
Joined: Jul 7 2007
Gold: 9,529.00
Apr 6 2015 11:06am
Quote (RyanRuler @ Apr 6 2015 10:27am)
Well give me an example of what you think looks good and i'll start off by trying to recreate it. i think that could be a good start.


I think you missed the main point I was getting at of not focusing on effects when you first start.

Also, it's not about what I like, it's about what you or whoever you are doing this for likes. For any effect you want to achieve I guarantee there are at least a dozen tutorials out there. It's just a matter of finding one where the result actually looks good and of high quality. When following tutorials, the main goal which a lot of newcomers don't realize, is to understand why each step is important and what look it achieves, not just doing everything exactly as described to make it match the tutorials outcome and not understand why those steps were necessary. If you want to know if an effect looks good just look at a real world example of what you are trying to achieve. Does what I made look anything like it? If not, what is different about it? How do I achieve those details? These are things you should figure out for yourself so you truly understand how to apply them.
Member
Posts: 3,797
Joined: Jun 27 2011
Gold: 5,006.00
Apr 6 2015 11:44am
Yeah but see the whole focus is the effects.
The style i'm going for is RPG styled GUI.
I've seen some simple ones that do look very very nice. And i see all of your points, i'm rushing into this when i should start off small.
But i'm not even sure the proper way to create this, I personally can't find any good tutorials.
Member
Posts: 3,797
Joined: Jun 27 2011
Gold: 5,006.00
Apr 6 2015 04:22pm
Tried a different style, kept it a little more simple, effects are a lot more subtle.. what do you think?



(Edit a minute later)
Looking at it I see i should delete the little designs on top of the buttons.

This post was edited by RyanRuler on Apr 6 2015 04:24pm
Member
Posts: 3,797
Joined: Jun 27 2011
Gold: 5,006.00
Apr 6 2015 05:07pm
v1.01;

Member
Posts: 4,082
Joined: Jan 17 2014
Gold: Locked
Apr 7 2015 06:29am
A little iffy how you went from the other one to this one in such a short amount of time, the improvements are real..

if you did make it, good job.
Member
Posts: 3,797
Joined: Jun 27 2011
Gold: 5,006.00
Apr 7 2015 06:35am
Quote (MajinVegeta @ Apr 7 2015 07:29am)
A little iffy how you went from the other one to this one in such a short amount of time, the improvements are real..

if you did make it, good job.


Lol yeah i can provide a .psd
Its just kinda how i learn, i looked at somethin. Used is a guideline and made it my own.
Member
Posts: 4,678
Joined: Jul 7 2007
Gold: 9,529.00
Apr 7 2015 09:36am
It's certainly an improvement but it has a lot of the same downfalls. Too many effects that add nothing, and poor execution of lighting. There is some serious drop shadow abuse here for no reason that I can tell. The squiggles, again I would simply not include them until they are very sharp, all of their curvature is relative and actually smooth, and they can actually lend to the piece and not detract. I'm guessing you are going for leather texture everywhere? The main one is pretty off but this is a problem due to your lighting.

The top border suggests a top white light source that isn't very strong. The quest label suggests a yellow and very strong but small light source from the top left. The main background would suggest a light blue light source that is radial and quite weak, but the leather would suggest that somehow the indents are linear while the rest of the leather is a curved surface? Then the brown leather buttons go back to having a slight left top weak white light. This makes it all seem very slapped together. I'm guessing this is either because you copy/pasted patterns from google with established light and didn't follow that established light, or you used multiple different tutorials that suggested different lighting angles and gradients.

Again, this is why I tried to stress that copying a tutorial verbatim is not he goal, you want to understand what each step/filter/blending achieves so you can better understand how to apply them together. Don;t get me wrong, this is a substantial improvement form the original one even if the only thing you have picked up is using more subtle blending filters, but you still need to better understand how lighting affects your designs and the incredible impact it has in making multiple pieces look like they actually belong.

Keep practicing, it takes time.
Go Back To Graphic Design Topic List
Prev12345Next
Add Reply New Topic New Poll