

Ask HN: techniques for basic graphics design (for programmers)? - Tichy

I am at this point again, where non-existent design skills are slowing me down too much. So I wonder what is a good way to get a basic level of proficiency?<p>As an example, I am not even sure how to get started (preferably with free tools). Attach a tablet to GIMP or Inkscape? I just can't imagine how to draw a circle at a specific position and specific radius with a graphics tablet? I know the graphics programs can usually tell you the coordinates and circumference with some tricks (hold certain key combinations), but typing drawCircle(x,y,radius) seems so much easier than digging for such tricks in the manual. And then what if your circle is 10 pixel too far right - it seems so tedious to shift things around in a graphics program. So how do designers typically go about it? My first impulse is always to start learning the scripting languages of those graphics programs... (Couldn't find one for Inkscape, though).<p>Maybe a good approach would be to sketch the design with a pencil, then try to mimic the design with code?<p>What would be a good environment for scripting graphics? Probably targeting SVG would be good...
======
1331
Practice is essential in becoming proficient in design. A technique that I
particularly recommend for beginners is recreating designs that you like, from
scratch. Start with something easy and work up!

The majority of my design "training" was done in a professional environment,
using Illustrator and Photoshop. Such software has hierarchical layers/groups
as well as support for keyboard input, which address your questions about
performing tasks such as drawing circles and modifying designs.

Photoshop (raster-oriented graphics) is quite mature and impressive; there is
unfortunately no OSS that can even approach its creative power, IMHO.
Illustrator (vector-oriented graphics, which seems to be your interest) is
nowhere near as solid as Photoshop... The best OSS alternative (for screen
design, that I know of) is Xara Xtreme, which outdoes Illustrator in a number
of ways. Unfortunately, core features such as layers/groups and keyboard input
are not done well in Xara, and it is a long way away from being able to do
print. Inkscape trails pretty far behind.

If you would like to take a scripting approach, how about trying JavaScript in
a modern browser? In case it is better suited for your needs, you may also
want to check out Asymptote and/or METAPOST.

A bit more advice: Technically-minded people can usually learn software
applications by just playing around with it, but I highly recommend reading
good books on the subject to _really_ learn the software. The many design
tutorials online can also be quite useful.

<http://www.xara.com> <http://www.xaraxtreme.org/>
<http://asymptote.sourceforge.net/>

~~~
Tichy
Thanks for your answer! Any tutorials you could recommend? Last time I really
did use JavaScript in the end... It seems Canvas pictures can not readily be
saved as images, though. I was wondering if a Javascript to SVG bridge would
make sense (create SVG files from canvas drawing methods).

Keyboard input in Photoshop: it's pretty hidden, though? And it seems tedious
(select input fields with mouse etc), not sure, haven't really tried it. But
doing everything in a text editor might actually be more convenient?

~~~
1331
You are welcome!

Here are some sites that aggregate tutorials: * <http://www.noupe.com/> *
<http://www.smashingmagazine.com/> * <http://sixrevisions.com/>

There are some Xara Xtreme tutorials on their main website. The free Linux
version is not near as feature-complete as the Windows version, unfortunately,
but you can still do quite a bit. *
<http://www.xara.com/us/products/xtreme/tutorials-demos/>

I do not know of a way to save vector (SVG) images from browsers either, but
if raster (PNG) exports would suffice, then check out the Firefox Screengrab!
extension, which allows you to easily capture screenshots of whole pages
(regardless of scrolling). BTW, here is a fun JavaScript library: *
<http://raphaeljs.com/>

Keyboard input in Photoshop and Illustrator is something that I consider a
core feature. How much it is needed really depends on the type of
artwork/design that is being done, but every professional user that I have met
makes quite extensive use of the keyboard, particularly when placing guides or
dealing with vector shapes. (Unfortunately, keyboard input is not as core as
it should be... For example, Adobe software does not support keyboard
positioning of Bézier curve handles, meaning that the designer needs to create
reference objects to snap to in order to have consistent curves.)

I find that doing everything in a text editor is great for some projects and
not for others. I use Asymptote (within LaTeX documents) for technical
drawings, and one of my favourite benefits is being able to use revision
control. Postscript itself is Turing complete, BTW! :) For more artistic
works, however, I find that using a GUI suits me better. My philosophy is to
learn many different ways of doing things and use whatever you feel works best
for any particular job... I use Python extensively, and sometimes I even break
out POV-Ray!

