Do 'serious' web designers use InkScape & Gimp?

[vwd]

I've been using InkScape and Gimp for some time now. I use them for graphic design elements for web design projects, and for design layouts & mock-ups.

I hand code each project in HTML5/CSS3/PHP, and have taken to using CSS3 effects (eg. gradients, box-shadows, text-shadows, etc) over images where possible, so have no need for HTML/CSS code generation.

As I'm starting to collaborate more with other agencies, graphic designers and developers, I'm beginning to wonder if I need to bite the bullet and use the 'industry standard' tools - Adobe Illustrator, Fireworks & Photoshop.

So rather than ask which is better, I'd like to ask what you actually use yourselves?

1) InkScape
2) Gimp
3) InkScape + Gimp
4) Adobe Photoshop
5) Adobe Illustrator
6) Adobe Fireworks
7) Adobe Photoshop + Illustrator
8) Adobe Photoshop + Illustrator + Fireworks
9) Adobe Photoshop + Fireworks
10) Adobe Illustrator + Fireworks
11) Adobe InDesign
12) In browser design & development
13) Others

[ralph.m]

Anything that gets the job done is fine. In general, Photoshop seems to be overkill for web design ... though of course it's a great tool.

[vwd]

In general, Photoshop seems to be overkill for web design...

I agree that Photoshop in itself is overkill for web design- but still seems to be the standard tool that everyone is expected to use.

Please do vote. Thank you for your response.

[kohoutek]

I do use Photoshop, Fireworks, and Illustrator for graphics work. 95% of clients insist on having an additional mockup of the homepage in .psd format for future reference, so I do give it to my clients.

However, I think it makes much more sense to give them the cropped parts that I used in .psd or .png or .eps. That way they don't have to use the mockup at all, if they want to modify the bits and pieces, e.g. like gradients, icons or header graphics.

However, I think you can use the Gimp and Inkscape just as well as you can save files in the standard formats, if I remember correctly. I don't like the Gimp, which is the sole reason I don't use it.

As for your question, of course a serious web designer can use the Gimp an Inkscape. Adobe products do not make a professional web designer. These are just tools and the least important traits a web designer needs to possess. Other areas of responsibility are a lot more significant than the tools you use.

[Cmarenburg]

i use drawplusX5 and photoplus X4 (both by Serif) to do my web design. as well as Web Image Studio for most web images i need to do. That being said i do not have a creative bone in my body. But these give me the tools i need.

[Sega]

Anything that gets the job done is fine. In general, Photoshop seems to be overkill for web design ... though of course it's a great tool.

I don't use PS, I do think it's an overkill in web design. I create a wireframe in vector format, then I begin coding straight away. I seam to save at least 10 - 20 hours of the overal time taken to complete a website so I can reduce my costs to the end client.

95% of clients insist on having an additional mockup of the homepage in .psd format for future reference, so I do give it to my clients.

Any updated elements are in the file, but there is no complete design in a picture format. I feel with CSS3 you can pretty much skip the website in picture format. That said I am able to cut costs without reducing the quality of the website. From experience I have not yad anybody ask for a PSD version of their site. PhotoShop has for some reason made it's self a standard in web design.

[ralph.m]

These days, I've decided to insist on starting with content first, then developing a wireframe from that, which I present as a web page. No more PSD, InDesign or whatever. After all, they asked me for a web site, not a Photoshop document. (Graphic designers can do that!)

Only after content and wireframe are approved do I start to discuss/add in styles. The advantage is that the client doesn't get disappointed when the site doesn't look as nice in IE2 as it did in the Photoshop mockup.

[vwd]

I don't use PS, I do think it's an overkill in web design. I create a wireframe in vector format, then I begin coding straight away. I seam to save at least 10 - 20 hours of the overal time taken to complete a website so I can reduce my costs to the end client.

Thats fantastic: a 10-20 hours time saving.

[vwd]

These days, I've decided to insist on starting with content first, then developing a wireframe from that, which I present as a web page. No more PSD, InDesign or whatever. After all, they asked me for a web site, not a Photoshop document. (Graphic designers can do that!)

Only after content and wireframe are approved do I start to discuss/add in styles. The advantage is that the client doesn't get disappointed when the site doesn't look as nice in IE2 as it did in the Photoshop mockup.

So when you do have to get some more advanced graphic design for a project, what do you do? What format file do graphic designers you work with present to you?

[vwd]

i use drawplusX5 and photoplus X4 (both by Serif)

I'd never heard of these before your post - will have a look now. Thanks.

[vwd]

if I remember correctly. I don't like the Gimp, which is the sole reason I don't use it.

Can you remember why you didn't like it?

As for your question, of course a serious web designer can use the Gimp an Inkscape. Adobe products do not make a professional web designer. These are just tools and the least important traits a web designer needs to possess. Other areas of responsibility are a lot more significant than the tools you use.

What you say is very true. It's like me buying a $10000 guitar and expecting that the guitar will make me play like a professional musician!

[kohoutek]

Can you remember why you didn't like it?

vwd, I didn't like it because it felt even less intuitive and inflexible to me than Photoshop and I don't find Photoshop to be particularly intuitive to begin with (something that goes for all Adobe products I've used). I have not tried the latest Gimp version, so perhaps things have changed/improved since I last tried it.

As it is, I can't think of a single graphic design tool that I actually like. They're all either bloated or too meagerly equipped, but they all seem to suffer from bad interface & information architecture.

[RyanReese]

Personally onlu use HTML/CSS in browser to code. I don't see a need for anything else.

[Black Max]

These days, I've decided to insist on starting with content first, then developing a wireframe from that, which I present as a web page. No more PSD, InDesign or whatever. After all, they asked me for a web site, not a Photoshop document. (Graphic designers can do that!)

Only after content and wireframe are approved do I start to discuss/add in styles. The advantage is that the client doesn't get disappointed when the site doesn't look as nice in IE2 as it did in the Photoshop mockup.

Preach it, brother man.

[Sega]

I think in a couple of years time, products like InkScape and Gimp will get a better name for themselves in web design. I have only now started using NotePad++ and it's pretty amazing. Just to illustrate a couple of years ago I would not dream of using something like this, as time progressed Dreamweaver-like solutions now are a thing of the past. A similar process might happed with web design, as we don't actually need a professional photo editing package to design websites. All we basically need are the ability to create shapes, define colours and add trasparencies and gradients whilst having a suitable package containing all the alignment and grid structure's to it.

PS is now become the standard in many ways. There are so many PSD - HTML services out there, and not a single one is AI - HTML or JPEG - HTML, everything is about PhotoShop. Courses go even as far to state PSD - HTML - WordPress. It would be a little hard removing PhotoShop from the equation, but I honestly feel it's not needed in designing a websites.

Like @kohoutek ; mentioned, there are so many other MORE important things that using PhotoShop (e.g. JavaScript, SASS, MooTools, PHP, HTML etc).

Thats fantastic: a 10-20 hours time saving.

Yes, that's true.

A website is not an image, and even when you present an image to a client you cannot make an exact copy into a website. Wireframe web design is more important. Allowing the users to chose their layout and information presented. Once approved you code this layout and add the detail with CSS3. By removing this PS process you save time and your limit confusion as you won't get the "this does not look like the design" comments. Browsers and PS don't work alike. A solid image is not a web page. Clients who are nannied through the PS process expect and believe their website to look like a complete identical to the PS design, which in many ways is impossible.

Not sure if anybody has come accross this same issue, but it certainly seams to be something more apparent with demanding clients.

[Stomme poes]

One thing to be aware of when working with the GIMP is, when you get a PSD, GIMP can open it, but depending on how the PSD was saved, the textures and gradients may be screwed up. This happened to me when I did the unmatched style CSSOff contest: I got marked down a lot of points because I could not tell where the textures all needed to be (my only hope was the crappy jpg they'd posted on their site).

Either you find out how the PSD must be saved when working with others who use Photoshop, or you must have a version of PS yourself (I would hope Elements is good enough) to double-check how it looks. That or always ask for a flattened PNG version for comparison.

New GIMP2.8 coming out has many changes, but the big big changes are coming out in 2.10. One change is now if you are coming from the all-in-one software you can set GIMP up like that too (like GimpShop did) in place of separate boxes for tools etc. Also GhostScript comes now standard in instead of you trying to add it yourself (never worked for me). Gimp has traditionally lagged in CYMK colours and LAB, making it a second-choice for designers who also need to deal with print. LAB either comes in 2.10 or comes later, I forget which. Not here now though.

Inkscape is amazing for being in beta (unless it's finally gotten up to version 1.0 by now?). I think possibly Inkscape will be considered on par with Illustrator (certainly seems loved by those who miss FreeHand) before the GIMP comes up to Photoshop levels.

That said, I'm an el-cheapo Linux user so no way am I going to buy a whole OS (Windows) simply to buy an expensive image editor (PS) simply to do junk like websites (image editing, not mockup creation, I do that mostly on paper first and prototypes and then direct to code, where it's easiest to change and set up for various screen resolutions). Photoshop should still beat the GIMP in things like Print and general advertising images, but for web sites, GIMP does the job easily. You can also write your own damn filters if something is lacking, and you like Python.

[itmitică]

I do all the stuff on my own: design, back-end, front-end, so I don't know if that suggests that I'm not a serious designer...
...but I'm an avid Inkscape fan and I use it in tandem with Paint.net. These two (along with PngOptimizer) are all I ever needed so far.

I have fiddled around in Photoshop and Fireworks, and they have a few features I've missed at first. But those features were only further enhancements to make my life easier. The core features in Inkscape and Paint.net are there, you just have to be smarter to find ways to replicate those extra features.

<hr>

As a personal thought, images, raster or vector, will always have a place in digital media, including web. That considering the clear performance penalties associated with newer CSS3 capabilities, considering that you have to worry about cross browser compatibilities and about fallbacks, and considering that sometimes you have to make your markup to jump through hoops to accommodate imageless designs.

[DoubleDee]

New GIMP2.8 coming out has many changes, but the big big changes are coming out in 2.10. One change is now if you are coming from the all-in-one software you can set GIMP up like that too (like GimpShop did) in place of separate boxes for tools etc. Also GhostScript comes now standard in instead of you trying to add it yourself (never worked for me). Gimp has traditionally lagged in CYMK colours and LAB, making it a second-choice for designers who also need to deal with print. LAB either comes in 2.10 or comes later, I forget which. Not here now though.

Inkscape is amazing for being in beta (unless it's finally gotten up to version 1.0 by now?). I think possibly Inkscape will be considered on par with Illustrator (certainly seems loved by those who miss FreeHand) before the GIMP comes up to Photoshop levels.

That said, I'm an el-cheapo Linux user so no way am I going to buy a whole OS (Windows) simply to buy an expensive image editor (PS) simply to do junk like websites (image editing, not mockup creation, I do that mostly on paper first and prototypes and then direct to code, where it's easiest to change and set up for various screen resolutions). Photoshop should still beat the GIMP in things like Print and general advertising images, but for web sites, GIMP does the job easily. You can also write your own damn filters if something is lacking, and you like Python.

I didn't realize that any of the gurus on here used open-source software?!

The big thing holding me back from "taking the leap" is documentation including training guides.

How did all of you learn to use GIMP and Inkscape? (I have seen virtually no manuals or guides out there either online or offline. And what I have seen is *crappy* to put it politely.)

Stomme, how did you become an expert with GIMP and Inkscape?

1.) Were you able to get up to speed because you already knew Graphic Design and Graphic Design Tools (e.g. Photoshop and Illustrator) and so there wasn't much of a "learning curve"?

2.) Did you find some great, hidden resources that I haven't seen?

3.) Did someone teach you?

4.) Did you spend 25 hours a day trying to learn it?

5.) Or are you just mega smart, and anything less than Quantum Physics is a piece of cake for you?!

I have virtually no experience working with Graphic Design Tools including Photoshop and Illustrator, and so I'm not even sure where to begin?!

Personally I have come to loathe proprietary software, however I'd hate was years of my life trying to learn software but never really getting it down, or worse, learning it and discovering that I should have went the Adobe route...

Any advice for a newbie?

Thanks,


Debbie

[Sega]

1.) Were you able to get up to speed because you already knew Graphic Design and Graphic Design Tools (e.g. Photoshop and Illustrator) and so there wasn't much of a "learning curve"?

Take a look at total training, and practice on tutorials online.

2.) Did you find some great, hidden resources that I haven't seen?

- podcasts are amazing
- online tutorials are sweet
- there are plenty of books
- but most of all try video tutorials for FREE as podcasts

3.) Did someone teach you?

University did that a couple of years back

4.) Did you spend 25 hours a day trying to learn it?

Nope, more like 3 - 5 hours, there are only 24-hours to the day and you have to sleep, eat and chill out sometimes :P

5.) Or are you just mega smart, and anything less than Quantum Physics is a piece of cake for you?!

If you love what you do you percivier to do a better job and keep doing what you love.

I have virtually no experience working with Graphic Design Tools including Photoshop and Illustrator, and so I'm not even sure where to begin?!

Checkout Lynda.com and 3dbuzz.com, they have an amazing tutorials

GOOD LUCK!

[DoubleDee]

Take a look at total training, and practice on tutorials online.

- podcasts are amazing
- online tutorials are sweet
- there are plenty of books
- but most of all try video tutorials for FREE as podcasts

WHERE are there "plenty of books" on GIMP and Inkscape???


Debbie

[TechnoBear]

How did all of you learn to use GIMP and Inkscape? (I have seen virtually no manuals or guides out there either online or offline. And what I have seen is *crappy* to put it politely.)

I found this book extremely useful. I noticed the same publisher also has a new book just out, "GIMP for Absolute Beginners", but I haven't seen a copy so don't know how it compares to the other.

[DoubleDee]

I found this book extremely useful. I noticed the same publisher also has a new book just out, "GIMP for Absolute Beginners", but I haven't seen a copy so don't know how it compares to the other.

Would it be easier to learn Photo Editing and Graphic Design with Adobe products - and supporting books - FIRST, and then go back and try to learn GIMP and Inkscape?

Clearly, the books for Photoshop and Illustrator blow any other books out of the water.

Put another way...

Is the trick to learning GIMP and Inkscape a combination of a.) Understanding Design Concepts, and b.) Knowing how to do generic Design things in any tool, or is it all about those tools themselves?

For instance, if you can pass your written and driving exam - in the U.S. - and you understand basic (tool) concepts like how to use a Steering Wheel, Brakes, Shifter, Turn Signals, and so on, then realistically you can drive nearly any car, right?

Is that true for going between Photoshop and GIMP and Illustrator and Inkscape, or are they so different that it would be like going from MS Access to Oracle or from a tricycle to a Harley?!


Debbie

[TechnoBear]

Would it be easier to learn Photo Editing and Graphic Design with Adobe products - and supporting books - FIRST, and then go back and try to learn GIMP and Inkscape?

I can't see why. I've never used Photoshop or Illustrator (although I did use Macromedia Fireworks some years ago).

Clearly, the books for Photoshop and Illustrator blow any other books out of the water.

Clearly? It's not clear to me.

[itmitică]

I have seen virtually no manuals or guides out there either online or offline. And what I have seen is *crappy* to put it politely.

I beg to differ:

docs: http://inkscape.org/doc/index.php?lang=en
books: http://inkscape.org/books/index.php?lang=en
tutorials: http://inkscapetutorials.wordpress.com/

to list only those on the official page.

I have virtually no experience working with Graphic Design Tools including Photoshop and Illustrator, and so I'm not even sure where to begin?!

To paraphrase, Photoshop is to graphic design what Dreamweaver is to web developing. You need to get down to the basics first. So start with the basics about vectors: paths, nodes, Bézier curves. Learn about layers.

All this knowledge has nothing to do with the fact that the graphic tool of your choosing is proprietary or open source, as it works the same in all.

I suggest you start here: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.php. A pretty good start.

[DoubleDee]

Clearly? It's not clear to me.

No offense, but then you clearly haven't walked into a decent-sized Barnes & Noble and looked in the Graphic Design section.

There are HUNDREDS of decent books on Photoshop and Illustrator, and I think I have only seen 3-4 on GIMP and Inkscape. And those were pretty *lame* as I recall, including that they had virtually no photos or illustrations in the books?!


Debbie