Episode 016 – Slice Web Page Layout
by heathenx
This tutorial illustrates how to slice a web page layout into individual image files in Inkscape v0.45.
Tags: layout, slice, web page
This entry was posted
on Tuesday, April 24th, 2007 at 3:29 am and is filed under Uncategorized.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
June 21st, 2008 at 10:31 am
Kewl. I like the way naming a part automatically gives it a file name. That’s a useful feature. Thanks for the heads-up.
Hm. And I thought I knew this software.
Well done tutorials. Thanks.
October 2nd, 2008 at 2:05 pm
Okay, It seems so simple now, but I’ve _really_ been looking for the perspective feature. Thanks a lot!
February 6th, 2009 at 11:06 pm
Thanks for the useful tutorial.
I have a question about slicing: Is it possible and useful to prepare the images to use on the web page with Inkscape?
I mean, can we prepare a nice transparent background image to use with style.css file? Or, can we prepare another nice image with text embedded into it as a header image to use?
I am also asking whether this is a logical way to prepare web images or not. Because we can play with css codes to give some effect, too.
February 7th, 2009 at 8:59 am
@Ufak
Absolutely. This screencast was just an overview on slicing. You can do a complete website mockup and slice it up as you wish. Full graphics, images, the works. What’s nice is that Inkscape 0.46 let’s you export all slices at once. 0.45 wasn’t able to do that.
By the way, every website that I have ever made/designed has been done in Inkscape, sliced up and the used in my CSS file (including this website).
February 26th, 2009 at 4:48 pm
Hello again heathenx,
This may be out of subject, but I am planning to make a web site to put my portfolio and photos. I will use inkscape to prepare the graphics, backgrounds and buttons, but I did not decide how to make it. I plan to use CSS and HTML, but I think I will need some gallery plugins or something to put my stuff organized. Since I won\’t use WordPress, what do you suggest me to make a simple but useful portfolio site. I mean, would you give a reference to prepare this kind of site, after slicing the images and designed the layout?
P.S. My real name is Ufuk, I know it sounds weird in English
but it means \"the horizon\" in Turkish. Just a useless info 
February 26th, 2009 at 7:33 pm
@Ufuk_k
Well, designing your website in Inkscape is definitely a good start. I have done all of my websites in Inkscape and I wouldn’t think to use anything else. It’s very flexible. Now in version 0.46, you can name all of your slices and export them all at once. Major time saver.
Regarding a gallery, I once used Lightbox, css, and html to lay out a simple picture gallery. I hand coded the html which might seem like a lot of work but it was was I felt comfortable doing. There are lots of html gallery generators which can be cleaned up it you wish to cut some corners. I think writing the css rules take the longest. Seems like a lot of trial and error.
Yes, you have an interesting name. Is it pronounce oof-ook? I have a pretty good sense of humor regarding what it really looks like but I don’t want to be disrespectful.
February 26th, 2009 at 8:56 pm
Thanks for the fast answer. I also think the css codes will take my time. I’ve never used a html editor so I think I will write the codes.
I don’t mind for jokes, I have sense of humour, too 
And yes, it is pronounced like “oo-fook”. Good guess
Thanks again, when I finish it I will show you to know your opinion.
November 19th, 2010 at 8:41 am
Thanx man. This is a good workflow. I’ll add it to my toolbox.
rstrcogburn on #! forums