Inkscape Tutorial by heathenx: Slice Web Page Layout

[AnimalCookieMurderer]

ohhhhh I get it know!! Thanks for the upload!!

[AnimalCookieMurderer]

does anyone else notice "pass the dougie to the left" playing in the background. XD love that song!!

[PaulSmith1964]

Thanks for the tutorial.... good use of transparent overlay to grab several underlying Inkscape objects at once.

[PaulSmith1964]

Thanks for the tutorial.... good use of transparent overlay to grab several underlying Inkscape objects at once.

[aadsan]

this is not exactly slicing,

more like using the front object as the cropping tools.

and by the way, you can do it by just selecting the object you want to export.

so why making those boxes?

[happygamestvfun1]

pohotshop durrrrr

[martinamca]

nice one, thanks.

[PowerKeysPub]

Now that I'm starting to use Inkscape, tutorials such as this are very helpful. Thanks for posting.

[smellycatpoop]

Thank you very much!

You are great at creating tutorials, clear & to the point! :)

Thanks...

[Reaper2794]

What is the advantages with this tool against PhotoShop. I believe you can slice in PhotoShop right?

[josefxon]

inkscape is free, Photoshop costs big bucks.

[myohmy0320]

absolutely true~~

[happygamestvfun1]

@josefxon photoshop is free for 30 days to

[NorwayHack]

@happygamestvfun1 It's called a free trial... Photoshop is shareware

[Arwym]

Inkscape is a vector editor. Photoshop is a bitmap/raster editor. Two very different things. Photoshop is not legally free. Inkscape, however, IS legally free.

This Inkscape slicing method is different than Photoshop's. You're only dividing your layout into different images (parts) here, which you can then apply to your design however you prefer. Photoshop slices the image to then generate an HTML table that contains the slices. In few words, a "big, ugly mess"; and a BAD HTML practice.

[SolidSquid1]

the main advantage would be that it's free. Also, photoshop is raster based whereas Inkscape is vector based (like Illustrator), although some people prefer raster over vector for working anyway

[macardbell]

thanks!

[DreadKnight666]

Anyway, thanks for the tutorial, i guess i'll use this rather than gimp or something else... oh well

[aaronfay]

Well done!  I love inkscape more every day :)

[djdub82]

Thanks, HeathenX. I didn't know you could do this in Inkscape. GIMP can do it, but it's more tedious. This process seems so much more intuitive. I can't wait to try it. Do you know how to do the same with more complex layouts with multiple columns?

[Cyenow]

Very useful! Thanks for sharing this tutorial!

[missjava4ever]

thnx..that's great

[BuckFosil9]

Very helpful Tutorial. Thank you! Inkscape seems so easy after you descripe how things work.

[vijoos]

very nice!

[LabyH5]

Uh. Seems like for me it's only exporting the 100% transparent box.. . what the heck am I doing wrong?

[BuckFosil9]

I don't know what you did wrong but I did the tutorial to fast and forgot to set a Fill-Color to the Rectangles on the Layer underneath the Slicelayer. Maybe it helps.

[falipeti]

Thank you :) Nice

[Nemesis02]

Nice tutorial, helps me a lot.

[felaiuki]

nice! i always had problems with the exported names from inkscape (specially the folder location of the file, when editing in different computers).