One Canvas Workflow
He’re a raw screencast of me demoing the one-canvas workflow for creating icons with inkscape (and ruby 
. I have such an annoying voice/accent, but you have to cope with it.
I hope to create some more screencasts if people find them interesting. Interestingness is measured in the comment area
- View in a browser (needs flash)
- View Ogg Theora.
- View Quicktime.
- subscribe with Miro.
- subscribe with iTunes.
- Subscribe to RSS.
Blip.tv service is pretty slick.
Update: refresh your feeds, I’ve uploaded a new screencast discussing improvements suggested in the comments. Thanks for the feedback!
July 14th, 2008 at 12:12 am
The Ogg Theora link has expired.
July 14th, 2008 at 12:30 am
very nice. i’m not an icon designer but i love screencasts
July 14th, 2008 at 12:33 am
Nice. I’m currently working with a similar method. Instead of a ruby script I just abuse some hacked svg-slice script. And yes indeed it much faster than keeping track of the different sizes in different files.
July 14th, 2008 at 3:06 am
Yes the screencasts are very informative and interesting please do more
July 14th, 2008 at 3:30 am
Great! I found this very interesting and I hope you continue to make more screencasts.
July 14th, 2008 at 9:38 am
Thanks for sharing ! I like too. Even if i’m not designer.
We want’s (and need) more
July 14th, 2008 at 10:27 am
Nice and eye-opening video. Interestingness is right here. Jimmac, would you please share the script with ones who are programming antitalents?
July 14th, 2008 at 11:08 am
Nefron, sure thing — http://pastebin.ca/1071599.
July 14th, 2008 at 11:20 am
Hi, I’m the stalker in the orange sweater from the LGM
How about using the actual layer names to differentiate between icons? Say all layers that contain a slash have to be in “context/icon-name” format and icons without any slashes are treated like drawing aids. Then you could keep multiple icons in the same SVG file and either have a single layer named “plate” or a set of “plate:context/icon-name” layers.
July 14th, 2008 at 12:30 pm
And here’s an implementation (Python due to portability):
http://pastebin.ca/1071649
July 14th, 2008 at 12:32 pm
Originally I thought about using the object label for the rects to put the context in, but it turned out I would be forgetting to rename them when I created new icons, ending up exporting to the wrong dir. The description field was just one place to edit. Now that I think of it, I should have just place a text object on the canvas. D’OH.
The layers can actually be nested, so it’s probably the best way to go about creating multi-icon sheets.
July 14th, 2008 at 1:06 pm
@jimmac:
Isn’t the layer label enough (at least in my setup these are always visible in the sidebar)? With the script pasted above you can for example keep all the multimedia icons side by side with separate plate layers.
July 14th, 2008 at 1:14 pm
(Sorry for multiposting, somehow deleted part of the response:)
As for the nested layers, the script above only selects the top-level layers so you can use sublayers inside a single icon. You can try it:
- create a layer called ‘action/foo’
- create a sublayer called ‘action/bar’
- create the plate layer ‘plate:action/foo’
- run the script
- observe as there is no ‘*/action/bar.png’
On the other hand maybe I should make it possible to use a sublayer as plate?
July 14th, 2008 at 3:33 pm
[...] Jimmac’s post got me thinking. His script did the job for a single icon. Why not improve upon it to allow multiple icons sharing a single SVG file? Immediately decided to give it a go and after a few iterations the result works as follows: [...]
July 14th, 2008 at 4:46 pm
Heh, I just uploaded a new screencast
July 14th, 2008 at 5:40 pm
@jimmac:
Updated my script to your new format. Please confirm if it works as it could be useful for the bunch of people who don’t have Ruby installed
July 14th, 2008 at 5:47 pm
@Patrys these are designer you’re talking about here. With my asbestos suit on, I would say they are a lot more likely to have ruby installed than python
Sadly pastebin.ca timeouts for now :/
July 14th, 2008 at 5:50 pm
@jimmac: GIMP already requires Python
July 15th, 2008 at 1:28 am
Awesome!
I wonder how many hours I’ve wasted switching directories.
Thanks for clearing this up, could you post the script somewhere?
July 15th, 2008 at 10:43 am
@Hylke Before we get an SVN repo set up for the public domain tango-lib, I’ve set up a git repo. you can clone it with:
git clone git://users.freedesktop.org/~jimmac/tango-lib
July 15th, 2008 at 5:03 pm
Great way to simplify the artist’s workflow. I’m just getting up to speed with icon design and the multiple folder chaos is indeed a big obstacle.
July 16th, 2008 at 8:27 am
FREAKIN ROCK MATE!!!!11one one
that capslock party was for you.
when inkscape handles external css and entities…
the icon building experience is going to kick
July 18th, 2008 at 2:56 am
Here are a couple inkscape extension scripts that make it convenient to show and hide all of the plate layers. They need to be installed in the global extensions dir (something like /prefix/share/inkscape/extensions). Effects>Icon Workflow>Show Plates etc.
http://www.ekips.org/comp/inkscape/inx/icon_workflow-plates_visibility.tar.gz
July 18th, 2008 at 1:53 pm
And here is another inkscape extension that will create icon templates to facilitate this workflow. Effects>Icon Workflow>Create Template…
Columns: wrap the templates into this many columns
Icons: create this many additional icon templates
Offset: add templates after this many existing templates
http://www.ekips.org/comp/inkscape/inx/icon_workflow-template_create.tar.gz
July 18th, 2008 at 5:57 pm
Those are fricken awesome, Aaron. Very appreciated.
July 19th, 2008 at 4:54 pm
[...] script, Tango, workflow Qualche giorno fa il buon Jimmac ha postato sul suo blog uno screencast che spiega il nuovo metodo “one canvas” per disegnare le icone, ideato [...]
July 19th, 2008 at 6:16 pm
Hi, I’m the UI maintainer of lumiera, a new NLE which will replace cinelerra. For this project, we’re going to need to create a very large set of good Tango icons. I’m interested in your script, because I think it could save us quite a lot of time. Is there any way of me getting a look at it? (I’m thinking of translating it into python).
Also I’m hoping to remix some of the icons in the present Tango set for specific commands in lumiera. Sadly I can only find SVGs in the “scalable” folder, and clearly these are designed to render at >48×48 pixels. Is there any way that you know of to get hold of the SVGs for the smaller sizes?
Thanks
Joel
July 19th, 2008 at 8:38 pm
@joel, the script is currenly available in the tango-lib git repo mentioned in the comment above. The current tango-icon-theme only has 48×48 and 32×32 done in SVG, the rest is mostly done as bitmaps (GIMP XCF layered format). If you are patient enough to wait for tango-lib, we plan to redo the bitmaps as vectors too. instruction on how to checkout tango-icon-theme from CVS are on the tango.freedesktop.org website.
July 24th, 2008 at 12:45 am
[...] process, I decided to switch to a One Canvas Workflow. I already experimented with this but after Jimmac proposed his implementation I crabbted the script and some nice helper extentions for inkscape and converted [...]
July 25th, 2008 at 1:07 pm
woow…i want that wallpaper
July 25th, 2008 at 9:20 pm
@6205 Come with openSUSE *hint* *hint*
The color is actually blended based on time of the day if you install desktop-data-openSUSE-extra-gnome.
July 26th, 2008 at 3:00 am
Here I can’t assess the Blip.tv. Can anyone help to upload these screencasts into youtube.?
July 27th, 2008 at 11:01 am
aahhh cool
dik cece 
July 28th, 2008 at 3:25 am
[...] new one canvas workflow is totally [...]
August 16th, 2008 at 5:00 am
[...] – bookmarked by 4 members originally found by thatswhack74 on 2008-07-21 Jakub Steiner: One Canvas Workflow http://jimmac.musichall.cz/log/?p=436 – bookmarked by 1 members originally found by noodpan on [...]
September 7th, 2008 at 2:06 pm
?‘?µ?· ???????±?????? ???€?µ?????µ?»?¸?‡?µ???¸?? ?????¶???? ?????°?·?°?‚??, ?‡?‚?? ???????‚ ?‚?µ???? ?€?°?????€?‹?» ???° ?????µ 100 ???€???†?µ???‚????.
September 9th, 2008 at 10:35 pm
[...] combines the idea of a pixmap theme engine, Jimmac’s “One Canvas Workflow”, SVG markup features and Inkscape export functionality to fully automate the creation of a scalable [...]
September 10th, 2008 at 2:01 pm
[...] canvas”, ideato nell’ambito del Progetto Tango e presentato qualche mese fa da Jimmac con una serie di screencast dimostrativi. In sostanza la novita’ consiste nel fatto che i [...]
September 17th, 2008 at 2:20 pm
???° ?’?°?? ?±?»???? ?·???°???????‹?? ?? ?°???????? ?????‹?»???? ???¸?????». ?ž???°?·?°?»?????? ,?‡?‚?? ???µ ?·?€??
???????€?°???¸?»??????. ???µ???€?? ?????µ ???€?µ???? ?‡?¸?‚?°?‚?? ?±???´?? 
September 25th, 2008 at 12:50 pm
Hi, I tried to implement those scripts posted here.. But unluckely that doesnt work! any other way?
September 26th, 2008 at 1:15 pm
[...] in a toolkit independent fashion. It combines the idea of a pixmap theme engine, Jimmac’s “One Canvas Workflow”, SVG markup features and Inkscape export functionality to fully automate the creation of a scalable [...]
February 9th, 2009 at 6:00 am
More screencasts please.
The image is surprisingly clear in fullscreen mode and you can get so much more information than a paragraph of text.
June 12th, 2009 at 2:48 pm
[...] Jimmac’s One Canvas Workflow with video tutorial [...]