Comments on: GIMP for Web Design? http://meetthegimp.org/gimp-for-web-design/ A videopodcast about the free graphics program Gimp Thu, 20 Nov 2008 20:52:13 +0000 http://wordpress.org/?v=abc By: heathenx http://meetthegimp.org/gimp-for-web-design/#comment-6577 heathenx Sun, 13 Jul 2008 14:57:41 +0000 http://meetthegimp.org/?p=238#comment-6577 @Torbjorn Yes indeed. Illustrator is what I meant regarding the .ai format. @Torbjorn

Yes indeed. Illustrator is what I meant regarding the .ai format.

]]> By: Torbjorn http://meetthegimp.org/gimp-for-web-design/#comment-6558 Torbjorn Sat, 12 Jul 2008 21:06:38 +0000 http://meetthegimp.org/?p=238#comment-6558 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. 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.

]]> By: heathenx http://meetthegimp.org/gimp-for-web-design/#comment-6524 heathenx Fri, 11 Jul 2008 23:54:17 +0000 http://meetthegimp.org/?p=238#comment-6524 @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 :) @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 :)

]]> By: Chris http://meetthegimp.org/gimp-for-web-design/#comment-6518 Chris Fri, 11 Jul 2008 20:05:40 +0000 http://meetthegimp.org/?p=238#comment-6518 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. 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.

]]> By: Daniel http://meetthegimp.org/gimp-for-web-design/#comment-6423 Daniel Tue, 08 Jul 2008 01:39:37 +0000 http://meetthegimp.org/?p=238#comment-6423 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 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

]]> By: Rolf http://meetthegimp.org/gimp-for-web-design/#comment-6403 Rolf Mon, 07 Jul 2008 13:13:44 +0000 http://meetthegimp.org/?p=238#comment-6403 You are right there - the algorithm is the same in both programs. Otherwise we would be in deep trouble with JPEG. ;-) You are right there - the algorithm is the same in both programs. Otherwise we would be in deep trouble with JPEG. ;-)

]]> By: Torbjorn http://meetthegimp.org/gimp-for-web-design/#comment-6390 Torbjorn Sun, 06 Jul 2008 23:39:09 +0000 http://meetthegimp.org/?p=238#comment-6390 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. 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.

]]> By: MAthew http://meetthegimp.org/gimp-for-web-design/#comment-6382 MAthew Sun, 06 Jul 2008 19:21:47 +0000 http://meetthegimp.org/?p=238#comment-6382 I've done my complete Layout with GIMP check it out: 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 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

]]> By: Daniel http://meetthegimp.org/gimp-for-web-design/#comment-6375 Daniel Sun, 06 Jul 2008 16:36:45 +0000 http://meetthegimp.org/?p=238#comment-6375 Thanks guys for the advices... Bests. Thanks guys for the advices…

Bests.

]]> By: Opencast http://meetthegimp.org/gimp-for-web-design/#comment-6347 Opencast Sat, 05 Jul 2008 22:04:49 +0000 http://meetthegimp.org/?p=238#comment-6347 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 ;) 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 ;)

]]> By: Gimper http://meetthegimp.org/gimp-for-web-design/#comment-6130 Gimper Fri, 04 Jul 2008 04:09:57 +0000 http://meetthegimp.org/?p=238#comment-6130 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. 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.

]]> By: eBrnd http://meetthegimp.org/gimp-for-web-design/#comment-6083 eBrnd Thu, 03 Jul 2008 19:48:57 +0000 http://meetthegimp.org/?p=238#comment-6083 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... 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…

]]> By: DRB http://meetthegimp.org/gimp-for-web-design/#comment-6078 DRB Thu, 03 Jul 2008 19:17:15 +0000 http://meetthegimp.org/?p=238#comment-6078 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). 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).

]]> By: DRB http://meetthegimp.org/gimp-for-web-design/#comment-6077 DRB Thu, 03 Jul 2008 19:13:28 +0000 http://meetthegimp.org/?p=238#comment-6077 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. 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.

]]> By: Serge Gielkens http://meetthegimp.org/gimp-for-web-design/#comment-6076 Serge Gielkens Thu, 03 Jul 2008 17:48:30 +0000 http://meetthegimp.org/?p=238#comment-6076 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. 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.

]]> By: hombre_invisible http://meetthegimp.org/gimp-for-web-design/#comment-6054 hombre_invisible Thu, 03 Jul 2008 11:30:43 +0000 http://meetthegimp.org/?p=238#comment-6054 Hi all, Here, there are several tutorials that show how to create web sites with the GIMP. http://gimp-tutorials.net/taxonomy/term/5 ;-) Hi all,
Here, there are several tutorials that show how to create web sites with the GIMP.
http://gimp-tutorials.net/taxonomy/term/5
;-)

]]> By: Andrew A. Gill http://meetthegimp.org/gimp-for-web-design/#comment-6038 Andrew A. Gill Thu, 03 Jul 2008 10:11:00 +0000 http://meetthegimp.org/?p=238#comment-6038 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? 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?

]]> By: Alex http://meetthegimp.org/gimp-for-web-design/#comment-6027 Alex Thu, 03 Jul 2008 08:54:41 +0000 http://meetthegimp.org/?p=238#comment-6027 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’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

]]> By: Kalle Persson http://meetthegimp.org/gimp-for-web-design/#comment-6024 Kalle Persson Thu, 03 Jul 2008 08:30:53 +0000 http://meetthegimp.org/?p=238#comment-6024 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. 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.

]]>