Ask HN: techniques for basic graphics design (for programmers)? | Hacker News Reader

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

5 pointsTichy3 comments

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?

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).

Maybe a good approach would be to sketch the design with a pencil, then try to mimic the design with code?

What would be a good environment for scripting graphics? Probably targeting SVG would be good...

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/

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?

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!

Reply on news.ycombinator.com