Episode 016

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: , ,

8 Responses to “Episode 016”

  1. BobSongs Says:

    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.

  2. geronimo Says:

    Okay, It seems so simple now, but I’ve _really_ been looking for the perspective feature. Thanks a lot!

  3. Ufuk Says:

    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.

  4. heathenx Says:

    @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). :)

  5. Ufuk_k Says:

    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 :D but it means \"the horizon\" in Turkish. Just a useless info :)

  6. heathenx Says:

    @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. :P

  7. Ufuk Says:

    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.
    And yes, it is pronounced like “oo-fook”. Good guess :) I don’t mind for jokes, I have sense of humour, too ;)
    Thanks again, when I finish it I will show you to know your opinion.

  8. rstrcogburn Says:

    Thanx man. This is a good workflow. I’ll add it to my toolbox.

    rstrcogburn on #! forums

Leave a Reply