What would be the best App to do this...

Discussion in 'Design and Graphics' started by UtahWJR, Mar 12, 2015.

  1. UtahWJR macrumors member

    Joined:
    Jul 12, 2008
    Location:
    Salt Lake City, Utah
    #1
    Need to make images that are 160 x 128 pixels for a automotive gauge. Sample shown below. You create 100 of them and they are used to display different values. For example if you a a temp range say from 0 to 100 each image would depict 1 degree.

    Looking for suggestions on what tool would be easiest to use for this?

    Thanks.
     

    Attached Files:

  2. cruisin macrumors 6502a

    cruisin

    Joined:
    Apr 1, 2014
    Location:
    Canada
    #2
    Have you considered one image as a background and one needle that you rotate in software? That would be much simpler and smoother. Failing that, just make some needles on a transparent background and swap as needed.

    You would need the needle to be on a separate square layer that is the size of the diameter of the dial so that when you rotate it rotates around the centre. Then use needles as is or combine with background.
    needle2.png
    Then use ImageMagick and this script:
    Code:
    #!/bin/bash
    START=0
    END=90
    
    name=needle			# root of filename
    
    extension=.png	
    
    echo "Rotate by 1 degree increments from" $START "to" $END
    echo
    
    for (( num=$START; num<=$END; num++ ))
    do
    	a=`printf "%03d" $num`
    	convert $name$extension -distort ScaleRotateTranslate $num $name\_$a$extension
    done
     
    echo
    echo "Done!"
     
  3. UtahWJR thread starter macrumors member

    Joined:
    Jul 12, 2008
    Location:
    Salt Lake City, Utah
    #3
    Good suggestion on having the needles be separate images and just rotating them.

    Looks like ImageMagick is just command line driven - what App would you suggest to create the background and needles?

    Bill
     
  4. cruisin macrumors 6502a

    cruisin

    Joined:
    Apr 1, 2014
    Location:
    Canada
    #4
    Any app that you can use to draw and save the result to a 4 channel image (need the alpha channel). I used GIMP and made a png. You might need to play with the script to get the angles you need. Here is a demo needle.
    View attachment needle.zip

    This is the version I used as it has some extra plugins. But the original version will also work. http://gimp.lisanet.de/Website/Download.html
     
  5. UtahWJR thread starter macrumors member

    Joined:
    Jul 12, 2008
    Location:
    Salt Lake City, Utah
    #5
    I've installed GIMP. I'm a complete novice at this so can you suggest some tutorials that would describe what I need to do?

    Thanks.

    Bill
     
  6. cruisin macrumors 6502a

    cruisin

    Joined:
    Apr 1, 2014
    Location:
    Canada
    #6
    Just google for things that confuse you. Your needle is made from simple steps. Just make sure you draw the needle on a separate layer, so that when you export it you can do it on a transparent background.

    Open GIMP and a new image. Make the image square and of sufficient resolution. Since you will be rotating the image, there will be some quality loss (minimal, as the rotations will not be sequential). Make sure you choose a resolution 2x or 3x your final resolution so that you can shrink the images to the target resolution and not loose much quality.

    Always draw in layers. This makes changes much easier (I cannot stress this enough). Immediately make a new layer (right side menu), call it dial. This will be your template for your needle. Draw your dial on this. You can also make a new layer for all the digits if you want. Then make another layer and call it needle. This will be your important layer.

    I draw using the beizer tool (B on keyboard, it is called the paths tool in GIMP). You click and drag for curves or click points o the image to make a shape. Hold ⌘ and click on the first point to close the shape so that you can fill it with a colour/paint. Now click Selection from Path on the left side menu. This creates a mask based on what you just drew, so when you fill with a colour, it will just be inside.

    Choose the bucket tool (shift B) to fill in the colour. The default colour is black so change it if needed by clicking on the black box covering the white box. Then fill in the needle.

    When everything looks ok, hide the non-needle layers (the eye icon) and export to png. This will give you your needle, like in the zip in my last post. Now use the script. You might have to tweak it a bit to fit your project.

    If any of this doesn't make sense, just look for guides to the specific steps, like how to make layers (ex. search: gimp how to add layers).

    Hope this helps.
     
  7. bijutoha macrumors newbie

    bijutoha

    Joined:
    Jan 21, 2014
    Location:
    Dhaka, Bangladesh
    #7
    So there isn't any good plugin for PS!!!? Actually I'm not sure about it... Need one...
     
  8. CrickettGrrrl macrumors 6502a

    CrickettGrrrl

    Joined:
    Feb 10, 2012
    Location:
    B'more or Less
    #8
    Here are some gauge tutorials for Photoshop and Illustrator which can be adapted for other apps like GIMP, Pixelmator, iDraw, Inkscape, Acorn, Affinity Designer & Affinity Photo Beta:

    http://pshero.com/photoshop-tutorials/graphic-design/glowing-orb-with-dial

    http://design.tutsplus.com/tutorials/create-a-simple-speedometer-illustration-in-adobe-illustrator--vector-22180

    http://www.indeeo.com/idraw/tutorials/create-a-clock-illustration

    And there are lots more similar tutorials out there.
     

Share This Page