Author Topic: Making a UI in Ink?  (Read 4090 times)

April 27, 2017, 08:37:04 AM
Read 4090 times

kronos

  • Full Member

  • Offline
  • ****

  • 56
I would like to make UI design link this one.

Could you give me some starting point how to mantain concentric circles and do minor details ?




April 27, 2017, 10:33:51 AM
Reply #1

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
I'm not sure if I understand your question.  But I'll try.

When you say "UI design", I think UI means User Interface.  What kind of UI is it?

Like with so many different tasks, in Inkscape there are often more than one way to do it.  And most of the time, it's a personal choice which way you do it.

If you hold Shift and Ctrl keys while you drag the Ellipse tool  :et:  it makes circles and draws from the center point.  (Ctrl makes it a circle, and Shift makes it draw from the center.)

Using Snapping, you can be sure that the next circle you draw is concentric, because it will start from the center of the first circle.
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Snapping.html

If the circles need to be a specific size, you'll need to draw them first, and then make them the correct size.  If you use Object menu > Transform > Scale, the circles will be scaled from the center.  So that will allow you to keep the circles concentric.  (If you use the Selection tool, and enter the dimensions in X and Y field, the circles will be scaled upwards and to the right, rather than from the center.)

Another way to do it, would be to draw all the circles first and make them the right sizes.  Then you can use either Align and Distribute dialog  :and:  to align them, or you could use snapping.  Although to snap circle centers, you have to give the circles a fill color (temporarily).  I've always found that annoying, but that's how it works.

For A and D dialog, select 2 circles, and click "Align on vertical axis" :ava: and then "Align on horizontal axis" :aha:.  For the next circle, be sure to set "Relative To:" dropdown menu to the proper option, depending on your selection order.

I don't know what kind of "minor details" you're planning to add.  But I wanted to mention the option of locking the circles, so that they don't accidentally get dragged out of alignment.  So you can either use Layers, and lock the appropriate layers, or using Object menu > Object Properties dialog, you can lock individual objects.  Oh, and I think you can do that with the new Objects dialog, and perhaps easier than opening Object Properties.  (Or also, hiding layers might be better than locking, depending on your needs or preference.)

I notice in your illustration, it looks like a polar grid behind one of those things.  Extensions menu > Render > Grids gives you options for several different kinds of grids, inclusing polar.  And did I see a new LPE for grids?  Ahh no, it only makes rectangular grids.

If you need to make tick marks around the circles, like the hours or minutes on a clock, you can use Path Effects > Ruler.  Or of course there are plenty of ways to use simple geometry to draw lines like rays coming out from the center of a circle.

That's about all I can think of, without more info from you.  But just ask if you have more questions  :)

Edit
Just thought of something else.  With the Ellipse tool, you can also draw arcs and what I call wedges, although there's another word for it, that I can't remember.  So you can use that feature to create rays at certain angles.  Notice those tiny circle handles, after you finish drawing a circle or ellipse?  You can drag those, and then you can see what they do.  To set the angle, enter the numbers in the Start and End fields on the control bar.
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

April 27, 2017, 03:37:21 PM
Reply #2

kronos

  • Full Member

  • Offline
  • ****

  • 56
Thank you. I have to try all what you have said.

I'm not sure if I understand your question.  But I'll try.

When you say "UI design", I think UI means User Interface.  What kind of UI is it?

Yes, User Interface. It's sci fi - tech UI.

Quote (selected)
I don't know what kind of "minor details" you're planning to add.
That lines and minor shapes around the circles.



April 27, 2017, 08:01:23 PM
Reply #3

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
It's sci fi - tech UI.

Oh, you mean like a flux capacitor?
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

April 28, 2017, 05:37:10 AM
Reply #4

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
Additional:
For getting concentric circles, you can make one, then duplicate it (Ctrl+D), then use the circle tool again to change its size while holding Shift to resize around the center.

For getting arcs, see http://write.flossmanuals.net/inkscape/ellipse-tool/ (last example in picture at the bottom, remove the fill).

You can add patterns and gradients to a stroke. You can use start and end markers to get something like those little squares at the ends.
You can use the 'Render -> Grids -> Polar Grid' extension to get the circular grids.

The rest can be done with the Bézier tool, mostly. For some things, like those 'bar charts', you may want to move the objects' rotation center to the center of the circle. Use 'duplicate' to get identical objects, which only need to be modified a little. You may want to hold down Ctrl while rotating, to get even distances easily.


April 28, 2017, 10:19:25 AM
Reply #5

kronos

  • Full Member

  • Offline
  • ****

  • 56
flux capacitor
Probybly. Don't know what flux capacitor is exactly :P
Additional:
For getting concentric circles, you can make one, then duplicate it (Ctrl+D), then use the circle tool again to change its size while holding Shift to resize around the center.

For getting arcs, see http://write.flossmanuals.net/inkscape/ellipse-tool/ (last example in picture at the bottom, remove the fill).

You can add patterns and gradients to a stroke. You can use start and end markers to get something like those little squares at the ends.
You can use the 'Render -> Grids -> Polar Grid' extension to get the circular grids.

The rest can be done with the Bézier tool, mostly. For some things, like those 'bar charts', you may want to move the objects' rotation center to the center of the circle. Use 'duplicate' to get identical objects, which only need to be modified a little. You may want to hold down Ctrl while rotating, to get even distances easily.



Ok, thank. I have to learn all this.

July 04, 2017, 04:58:06 AM
Reply #6

kronos

  • Full Member

  • Offline
  • ****

  • 56
I have made this. How do I bend this around one point to get a radial shape ?

 imnk1.JPG
*imnk1.JPG
(258.15 kB . 1520x862)
(viewed 527 times)

July 04, 2017, 06:40:38 AM
Reply #7

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
If you mean the whole thing....Inkscape has no easy way to do it.  Maybe no way at all.  My mind is blank on that, at the moment.

But if you mean just the object that's selected, having that bend around a single point would essentially be a series of circles.  So I think that could be done.

I see you have the Tiled Clones dialog open, in your screenshot.  Are you thinking of using it somehow?  It would be possible to have clones of the whole drawing arranged around in a circle.  But it wouldn't really be bent around a point, so much as arranged around a point.

Do you have in example image of what you hope or expect this will look like in the end.  When I imagine bending it around a point, I can just see.....well it might not be a completely solid black circle, but it would be almost solid.  So maybe an example image would help?

Thinking of it with your original sample images in mind, I can sort of imagine it.  But not enough to suggest how to do it.

Let me make a couple of example to show what I think you're asking.  Then maybe it will help you to explain what you want better.  I'll post again shortly.
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

July 04, 2017, 07:42:10 AM
Reply #8

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
Oh, holy crap!  I take it back!!

Look at this using Pattern Along Path.  I thought there would be no way in the world it would work.  But not too bad, right?

ct1.png
*ct1.png
(131.35 kB . 694x525)
(viewed 374 times)


And this is with a slight tweak, which I'll explain below.

ct2.png
*ct2.png
(39.1 kB . 641x526)
(viewed 381 times)


Steps:

1 - select the entire drawing
2 - Path menu > Object to Path, also ungroup all, if there are any groups
3 - Path menu > Union (this makes it all one path)
4 - Copy the path (not duplicate)
5 - draw the circle and convert it to path
6 - Path menu > Path Effects > Pattern Along Path
7 - click the clone icon (link to path on clipboard) (looks like  :cl: ) (this applies your drawing as the pattern to the circle path, and you can still edit the drawing/pattern and it will be applied live, as you edit!

For the 2nd version above, in the PAP dialog, check Pattern is vertical box.

(I had created a quick, partial trace of your drawing, to show you what I was thinking, so that's where the design I used came from.  But obviously it's not your whole drawing.)

Edit
Note that those screenshots are showing a black stroke with no fill.  If you give it a fill, it makes a much more bold looking effect.  I'm thinking you might make a couple three different designs, and rotate them around, give some black fill, some gray, maybe some blurred like in your original examples.  Just a thought....because I can see where it would be easy to overdo it.
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

July 04, 2017, 10:03:12 AM
Reply #9

kronos

  • Full Member

  • Offline
  • ****

  • 56
That's the thing Brynnn. I have to try it now.