I got this mail:
Hi Rolf Steinort,
First congratulations for your shows… I just met them.. they are great.
I am Daniel from Brazil.
I would like to ask you one thing.
I am new in webdesign and till now, I have being used to make my layouts, Inkscape. But I talk with some and see that a lot of people use photoshop to make a web layout. So, I am with vector program and a lot of people use a bitmap editor…
Searching … I found that some people use Gimp to make layout too.. and I found some tutorial.. but they are very weak. Could be possible you cover this in some of your shows ?
Just a classic layout would be already enough to me.. I just need some base to start.
Thanks and keep this great work.
Best,
Daniel
I have no idea what to answer. My gut feeling is to stay with vector based programs. For what do you need raster images in web design except for photo manipulation?
Please share your thoughts in the comments!
Stay with Inkscape!
The acronym of GIMP, GNU Image Manipulation Program says it all. GIMP is great for manipulating and editing images, but it is much easier to create layouts with Inkcape. If you really feel the need of using a bitmap image editor, you can always create the main layout in Inkscape, export as PNG and then continue editing it in GIMP.
I’m not quite sure what is meant by “layouts” in this context, but if he also refers to creating a layout through css, then this could be interesting:
http://my.opera.com/area42/blog/cssdev-0-5-sneak
Se also:
http://my.opera.com/area42/blog/cssdev-for-gimp
It is a work in progress, but very nice
Best regards
I think HeathenX has some info about web page design. I’d choose Inkscape over GIMP for web design, but if you’re looking to do web page layout, I’d use something designed for that. Seamonkey Composer, maybe?
Hi all,
Here, there are several tutorials that show how to create web sites with the GIMP.
http://gimp-tutorials.net/taxonomy/term/5
I think you cannot say whether one should use GIMP or Inkscape for layout. Layout in itself does not say anything about the graphical elements used in a layout. If an element needs manipulations on pixel level, you want to use GIMP. If on the other hand, your manipulations are vector like in nature, you should use Inskcape.
Examples: borders will probably be vector drawings. A background may be a photo that needs bitmap manipulation.
Keep in mind that a photo may also be used in vector manipulations in which case you will prefer Inkscape. In such a case GIMP might be cumbersome. See for example episode 64 of screencasters.heathenx.org (made by Richard Querin, credit where credit is due ;-)).
Conclusion: use the appropriate tool for the job and don’t stick to one or the other.
Hope it helps.
For what it is worth i have always used raster image editors for Web design however this is because that is what was commonly available when I started. Perhaps many others are using either raster or vector editors for similar reasons — it is what they are familiar with — rather than more substantial reasons.
Keep in mind that what works best for you now is best for you now but that learning new things is often beneficial in the future. even when you decide not to do something using a newly learned technique it still helps to enrich the way you understand and approach problems.
If you are going to use a raster editor such as GIMP for Web design/layout I would recommend using grids, guides, and layers liberally. These things can help speed up your design process, make it more accurate, (snap to grid & guides) and allow you to quickly toggle between various ideas to see what works best (layers).
Most images used in Webpages may look like vector images. But keep in mind that they are made to be viewed on a raster-based computer screen. So it makes perfect sense to use a raster-based program like GIMP. You also may be needing an accuracy of exactly one pixel, nothing less and nothing more. GIMP will give you just that.
Like DRB said, grid (and grid snap!), guides, layers and so on help a lot.
Also, learn to work with selections, find out about anti-aliasing. Color gradients are fine to make nice shiny effects. The color picker is your friend, and zooming in to like 400% also helps. Also, try using a screen magnifier to help you align your graphics with the rest of your web page. If you really need a graphic file to have transparency (you shouldn’t, because you should -know- the color of your background), use GIF, because older versions of IE have a problem with transparent PNGs. Otherwise, use PNG, because it’s lossless (unless JPEG) and not indexed (like GIF). And of course keep the XCF files…
I’m with Serge Gielkens on this.
But I would also like to point out that most designers do use raster based programs to create website layouts, but at the end of the day it all depends on what type of style your going for.
the reason why designers prefer raster based programs like photoshop/GIMP is because you could really do both styles, the complex looking pixel effects using filters/styles as well as the cleaner vector look with plain solid fills and pen/path tool.
Use Gimp to compress the jpg files, a Gimp jpg file is 40% smaler than a a file created by photoshop.
For sites with much visitors and Traffic this might be important to avoid higher traffic bills.
otherwise you can run Photoshop with wine, but i would suggest you try the old cs2 version because the new Photoshop CS3 does not offer the webeditor to create slices and links.
But i think its better to programm the Layout in CSS and HTML insdea using Photoshop templates, so it is easier to change and modify the content.
Just download “Compozer” this Software can export an Layout directly to HTML
Thanks guys for the advices…
Bests.
I’ve done my complete Layout with GIMP check it out:
http://www.matthiasloibl.com
I’ve made one big picture and when I thought that it was good enough I cut everything to get single pictures…..
I’ve done it with layers and shadows as you can see, really simple things….
Just test it, and do every Tutorial for GIMP to become a better user !
That’s what I’ve done
Good luck
Quote, Opencast:
“Use Gimp to compress the jpg files, a Gimp jpg file is 40% smaler than a a file created by photoshop.”
File size of JPEGs depends on the level of compression and the contents of the image, not by the software used to compress. I do not believe that the differences between GIMP and Photoshop are that big, for the same image with the same level of compression.
You are right there - the algorithm is the same in both programs. Otherwise we would be in deep trouble with JPEG.
Hi.. Just to tell my thoughts… after read a lot about it this subject
As Kalle said.. Gimp is an “Image Manipulation Program” … so.. the main focus of the program.. is image treatment. I already use Inkscape… and for me (maybe for been working with it more time than gimp) is “easier” to work.. and more flexible to make layout. But I still need use Gimp for all the raster image… so for “my style” .. the mix of both will gimme the best result. Maybe with time and more experience, I can discovery a different way.
Bests,
Daniel
Most formats for web graphics are raster formats, the vector formats .svg and .swf both have limitations that mean .jpg and .png tend to be the better choices.
Also, like eBrnd pointed out - the image will end up being rendered in pixels on a pixel-based display anyway, so the fact that you can zoom in on said pixels and push them around really gives you a certain kind of control that you don’t get if you use a program like inkscape.
@Chris
Respectfully, I disagree with you. Both Gimp and Inkscape have their advantages and disadvantages but neither one is any better than the other when it comes to web page layout and design. It all depends on the skills of the user. If you are comfortable using Gimp to mock a website then use it. On the other hand, if you are comfortable with Inkscape then use that.
Just because svg is Inkscape’s native format doesn’t mean that you are supposed to use it for the web. Gimp’s native format is xcf and Photoshop’s native format is ai. Do you get my point?
Also, at the moment Inkscape does not directly output to jpeg but will in the next release if that is important to some.
Cheers
A small correction, heathenx: Illustrator’s native format is .ai, Photoshop’s native format is .psd. I’m sure you knew this, but I thought I’d mention it anyway.
@Torbjorn
Yes indeed. Illustrator is what I meant regarding the .ai format.