Web Design Chicago,Chicago Web Design Company,Chicago Web Developer,e Commerce Chicago

3 04 2011

Web Design Chicago – Chicago Web Design Company offering cost effective software solutions, Professional website design, Best web designers, application development, product based development, Affordable logo, brochure ,e Commerce Portal Design,e Commerce Chicago,more in bestwebdesignchicago.com

This tutorial illustrates how to slice a web page layout into individual image files in Inkscape v0.45
Video Rating: 4 / 5

Advertisements

Actions

Information

25 responses

3 04 2011
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?

3 04 2011
NorwayHack

@happygamestvfun1 It’s called a free trial… Photoshop is shareware

3 04 2011
happygamestvfun1

@josefxon photoshop is free for 30 days to

3 04 2011
happygamestvfun1

pohotshop durrrrr

3 04 2011
martinamca

nice one, thanks.

3 04 2011
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

3 04 2011
myohmy0320

absolutely true~~

3 04 2011
PowerKeysPub

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

3 04 2011
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.

3 04 2011
smellycatpoop

Thank you very much!

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

Thanks…

3 04 2011
josefxon

inkscape is free, Photoshop costs big bucks.

3 04 2011
Reaper2794

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

3 04 2011
macardbell

thanks!

3 04 2011
DreadKnight666

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

3 04 2011
aaronfay

Well done! I love inkscape more every day 🙂

3 04 2011
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?

3 04 2011
Cyenow

Very useful! Thanks for sharing this tutorial!

3 04 2011
missjava4ever

thnx..that’s great

3 04 2011
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.

3 04 2011
BuckFosil9

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

3 04 2011
vijoos

very nice!

3 04 2011
LabyH5

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

3 04 2011
falipeti

Thank you 🙂 Nice

3 04 2011
Nemesis02

Nice tutorial, helps me a lot.

3 04 2011
felaiuki

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




%d bloggers like this: