[ubuntu-web] Gimp And Inkscape

Matthew Nuzum matthew.nuzum at canonical.com
Fri Jul 4 05:27:18 BST 2008


On Thu, Jul 3, 2008 at 11:10 PM, Vitaly Babiy <vbabiy at verizon.net> wrote:
> Hey Guys, I was wondering if any one has any good tutorials or screen
> cast ( preferred. I know about the Meet the Gimp, but it doesn't cover
> much web design) on how to utilize The Gimp and Inkscape in web design.
> I am a Photoshop user and have just not had to the time to learn open
> source alternatives.

In Inkscape you can turn the grid on and off by using the # keyboard
shortcut. When the grid is on your shapes will snap to the grid which
helps avoid this problem:
http://www.bearfruit.org/blog/2007/09/14/fuzzy-lines-and-text-in-web-graphics

Another tip, if you're used to slices in photoshop you can get the
same feature (better actually) by creating a layer in inkscape that is
hidden by default (I call it slices). I set the opacity of this layer
to about 25% or so. Draw rectangles that have no border on this layer
where you want your slices. When you're ready to export a slice,
reveal the layer, click the rectangle you want to export, hide the
layer (the rectangle will remain selected) and then hit the "export
bitmap" option. The thing I like about this over photoshop is you can
have overlapping slices.

Bitmaps exported from inkscape are super high quality 24bit pngs with
alpha transparency and therefore need some optimization. In gimp you
can open an image and then do save-as and change the extension to jpg.
You'll be prompted for optimization settings. Use the preview checkbox
to see the filesize of the optimized image. If you want an 8bit png
then before you save the image change the mode to indexed and use a
palette with 256 or fewer colors.

If you need font hinting you have to use gimp but other than hinting
gimp's font handling is no where near Photoshop's. Inkscape works well
having many of the features from photoshop but there is no hinting.
:-( If the typeography must be awesome you have no choice but to use
photoshop as far as I've found. I don't have access to later versions
of photoshop so I may be wrong, but interchanging between inkscape and
photoshop is tricky. For that matter the same is true between inkscape
and gimp is tricky. Must be a vector/raster thing but I've wished for
a way to interchange without having to flatten the image. (I'd love to
hear of a solution)

Here's an SVG to look at:
http://people.ubuntu.com/~mnuzum/projects/bzr/BZR%20Concept2006-07-26-1.svg

-- 
Matthew Nuzum
newz2000 on freenode



More information about the Ubuntu-website mailing list