2

I'm working on a graphic editor where objects on a screen can be positioned. The common cases are covered: align left, align center, move forward/backward layers, etc.

One way of positioning them that I haven't got an icon for is distribute, which will be three buttons each with an icon, like this:

Three buttons flush with eachother, one labeled "H", one "E", and one "V" (H, E, and V are placeholders for the icons I don't yet have.)

  • One for "Distribute Horizontally", which distributes the selected objects so that their x centers are of equal x distance
  • One for "Distribute Vertically", which distributes the selected objects so that their y centers are of equal y distance
  • One for "Distribute Evenly", which distributes the selected objects so that their (x, y) centers are of equal x and y distance

Below is my initial idea for the first, "Distribute horizontally", where the objects are given equal horizontal distance:

Three rectangles of disparate widths and heights, but equal horizontal distance from eachothers' centers, with indicators proving they have equal horizontal distance to the centers.

But this kind of icon (nevermind this specific icon) doesn't look good at the target size of 16px; you lose the implied behavior and it just becomes three rectangles connected by bars at the top:

The same image as above, but only 16px wide. It is now blurry and the individual components cannot be easily distinguished.

Additionally, I cannot find any icon at all for "Distribute evenly", where the horizontal and vertical centers are distributed simultaneously. Is there a good/established free set of icons that represent these three actions?

Improve this question
6
  • Have you considered a multi-direction arrow?
    – Zach Saucier
    Aug 2, 2016 at 14:48
  • 1
    @ZachSaucier That implies "Move tool" to me.
    – Ky -
    Aug 2, 2016 at 14:48
  • Yep. But one button can't do all of these functions... It could be changing modes but that's different... Additional information as to what it's actually doing is necessary to give a good answer
    – Zach Saucier
    Aug 2, 2016 at 14:49
  • @ZachSaucier It will be 3 buttons :P
    – Ky -
    Aug 2, 2016 at 15:02
  • Then you should have three separate questions...
    – Zach Saucier
    Aug 2, 2016 at 15:13

1 Answer 1

Reset to default
2

Designing an "all-in-one" button like this can be tricky, especially at such a small size.

My first thought was to maybe do something along these lines, for distribute horizontally:

enter image description here

and 16x16:

enter image description here

EDIT: And now I see the comments that you will need three buttons, so I guess you can disregard this. I'm beginning to think this question might be too broad/opinion oriented.

I wouldn't copy them exactly, but as a reference I think Adobe has done pretty well with theirs:

enter image description here

Improve this answer
2
  • I'm not sure why you and @ZachSaucier think this is for an all-in-one... but as I said in the question, this will be three icons, each with their own button. I'll try to add a better illustration.
    – Ky -
    Aug 2, 2016 at 15:20
  • I've edited the question to be more clear.
    – Ky -
    Aug 2, 2016 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.