how to create something like harvey balls
This discussion is connected to the gimp-user-list.gnome.org mailing list which is provided by the GIMP developers and not related to gimpusers.com.
This is a read-only list on gimpusers.com so this discussion thread is read-only, too.
how to create something like harvey balls | Bob Meetin | 15 Jun 19:07 |
how to create something like harvey balls | Chris Mohler | 15 Jun 21:35 |
how to create something like harvey balls | Bob Meetin | 16 Jun 16:06 |
how to create something like harvey balls | saulgoode@flashingtwelve.brickfilms.com | 15 Jun 21:35 |
how to create something like harvey balls
Hi,
For a client I am developing a rating system and it will incorporate ratings in 10% increments from 0% to 100%. Is there a smart way in GIMP to fairly precise images. I will probably start at about 30px square and downsize if necessary. I may wish to add some additional increments between 0-10 and 90-100 as eye food.
To see what Harvey Balls look like visit: http://www.ambor.com/public/hb/harveyballs.html
I gave it a try last night using the measure tool to mark up approximate angles then the path tool to actually create the slices. They look fair, will certainly need to be redone befor golive, but it seems like there should be a smarter way to do this.
My first set of images: http://www.dottedi.biz/images/ratings
Thx, Bob
how to create something like harvey balls
On Tue, Jun 15, 2010 at 12:07 PM, Bob Meetin wrote:
I gave it a try last night using the measure tool to mark up approximate angles then the path tool to actually create the slices. They look fair, will certainly need to be redone befor golive, but it seems like there should be a smarter way to do this.
I would use Inkscape to draw them and then export PNG files. In Inkscape, after drawing an ellipse look at the start and end parameters: if you punch in 90 for the end (and leave start at 0), you'll have the 25% ball. See the section on ellipses: http://www.inkscape.org/doc/shapes/tutorial-shapes.html
Another approach would be to use SVG directly on the page (either on the fly or saved from Inkscape) - but that is likely not supported well by older browsers.
Chris
how to create something like harvey balls
Quoting Bob Meetin :
Hi,
For a client I am developing a rating system and it will incorporate ratings in 10% increments from 0% to 100%. Is there a smart way in GIMP to fairly precise images. I will probably start at about 30px square and downsize if necessary. I may wish to add some additional increments between 0-10 and 90-100 as eye food.
Start with a white layer. Add a black line along the bottom of the layer. Fill the left N% of the layer with black. Perform a "Filters->Distorts->Polar Coordinates..." with default settings.
how to create something like harvey balls
I took a look at inkscape and I did review the tutorial-shapes page, but not being familiar with the program, the learning curve is longer than the manual process I went through with GIMP. If there was a tutorial that walked me through step-by-step I could do that. What I did last night in GIMP, which resulted in much better quality images:
1) open a new round layer using Elipse tool
2) fill background with black
3) select shrink - by 2 pixels
4) edit - clear (you end up with a round image with a 2px border and
clear background
5) click/select measure tool
6) in my case I want to divide the circle with each section growing by
36 degrees, so I insert the measure tool at the very center pixel and
move it to an edge/border approximately 36 degrees from the top center
border which shows as 90 degrees. I make a note of that location ( say
30,2 whatever it is )
7) now switch to path tool
8) click once in the images dead center
9) click once at top dead center (in the border)
10) incrementally click along the border until you reach the 36 degree
location you noted
11) double-click on the path tool to open tool options and click on
selection from path
12) fill with background color
13) save this as the first image
I tried simply adding a copy of the image as a 2nd layer and rotating 36 degrees but it seemed to not seat cleanly so I did the following instead:
1) I made a copy of the first image and opened it
2) with the first image open I totally cropped to the pie piece.
3) do Tools --> Transform Tools --> Rotate and rotate the pie section
about 36 degrees
4) copy the section to the new image and move it into place; it becomes
the 20% piece
5) repeat this process for each 10% increment
Sometimes when the section rotates some pixels mess up - fix these up manually.
I'm sure that inkscape is a better tool, but the learning curve of a new application works against me here. I'd also considered imagemagick which I'm much more familiar with as a command-line application, but sorting through the coordinates and all would also take substantial time/effort. If anyone wishes to see a tutorial with diagrams I could probably do that this weekend.
Thx, Bob
Chris Mohler wrote:
On Tue, Jun 15, 2010 at 12:07 PM, Bob Meetin wrote:
I gave it a try last night using the measure tool to mark up approximate angles then the path tool to actually create the slices. They look fair, will certainly need to be redone befor golive, but it seems like there should be a smarter way to do this.
I would use Inkscape to draw them and then export PNG files. In Inkscape, after drawing an ellipse look at the start and end parameters: if you punch in 90 for the end (and leave start at 0), you'll have the 25% ball. See the section on ellipses: http://www.inkscape.org/doc/shapes/tutorial-shapes.html
Another approach would be to use SVG directly on the page (either on the fly or saved from Inkscape) - but that is likely not supported well by older browsers.
Chris