One lesson I took from MIX is that software development and graphic design are increasingly interrelated disciplines. Although they are very different skillsets, it's important for developers to have some rudimentary design skills, and vice-versa. There's a lot of useful cross-pollination going on between developers and designers.
You can't reinvent yourself as a designer overnight. And nor should you try to. But developers should understand the essentials of graphics editing, such as the difference between JPG and PNG, or vector graphics as represented in the Canvas tag, SVG, and XAML. Most of all, I believe every software developer should have basic competence in a common graphics editor.
Pick your poison:
No, I won't include Microsoft Paint in this list. And I will add this one warning: although GIMP is both free and powerful, the interface is so excruciatingly difficult to use that by the time you become proficient, you'll be able to handle any graphics editor on the market with ease. I'm a Paint Shop Pro man myself, but there's a broad equivalency between these programs for the type of basic graphic work that most programmers would need. Any of them will do.
Once you've selected a graphics editor, the real challenge is learning how to use it. To get a taste of how complex graphics can be, browse through Ars Technica's Photoshop CS3 review. Fortunately, you'll typically only need to use a fraction of the functionality of these programs. For tips on getting started, browse through this list of graphics software tutorials. Whatever you do, try to wean yourself off crappy graphics tools like Paint. It'll be painful at first, but spend the time to work past the learning curve. Expand your skillset by getting comfortable with a real graphics editor. Get some experience under your belt with the same tools that designers use.
Technically, this has nothing to do with writing code. But competence in a real graphics editor means you'll have a much easier time working with designers because you now share a common toolset. Given enough practice with the tools, you might even be able to copy a good design yourself in a pinch.
Jeff,
I'd recommend checking out Gimpshop, it's GIMP but redone to act like Photoshop.
http://gimpshopdotnet.blogspot.com/
- Mike
Michael Buckbee on May 2, 2007 9:11 PMI have to agree whole heartedly... in fact just today I was talking to a group of developers (at our weekly local Architecture Chat over coffee) about the importance of design skills and in particular the ability to rapidly mockup interfaces.
The days of massive written specifications to agree functionality with IT niave clients are long gone...
Alex James on May 2, 2007 9:21 PM...Jeff Atwood of coding horror has re-iterated a thought that has been running around in my trouble head for a long time... as Jeff puts it "Programming Tip: Learn a graphic editor"...
Alex James on May 2, 2007 9:26 PMI will sound like a programminn\g n00b for a sec:
I installed gimpshop, it looked like GIMP to me, and then after a few days it started crashing and I had to uninstall it. I instaleld GIMP and Paint.NET . The latter has a wonderful interface! Why can't more programs be like that?
Greg Magarshak on May 2, 2007 9:57 PMTotally agree! Regarding the tools... don't forget two of my favorite ones:
* Xara Xtreme (http://www.xara.com/products/xtreme/) -- free on Linux (http://www.xaraxtreme.org/)
* Inkscape -- open source
These two are vector based graphics programs, but Xara works with bitmap graphics as well.
Rich Manalang on May 2, 2007 9:58 PMIs it just me, or is there absolutely no defense of the thesis in the blog post I just read?
Chris Barts on May 2, 2007 10:10 PM"Is it just me, or is there absolutely no defense of the thesis in the blog post I just read?" -- Chris Barts on May 2, 2007 10:10 PM
It's just you.
Allied on May 2, 2007 10:30 PMAlso consider the free vector-based graphic design Creative Docs .NET editor at http://www.creativedocs.net/
Carel Lotz on May 2, 2007 11:14 PMI'd like to add a related tip: Get and grow a graphics library
Whether commercial (I'e' http://www.iconshock.com/professional-icons.php) or accumulated free icons/textures/drawings (I.e. http://www.famfamfam.com/) it can really cut down the amount of time you are stuck in a graphics workshop. I find that once I get started, 4-5 hours goes easily before I have a result I am half satisfied with.
/Casper
Casper Bang on May 2, 2007 11:35 PMI love the simplicity of Paint.NET but unfortunately, this editor is too basic for any advanced use (there is some support for levels but I don't find it too useful). The editor of my choice is Ulead Photoimpact which nicely mixes vector and bitmap graphics editing and rather than layers, it promotes the concept of objects - e.g. text label is an object, rectangle is an object, bitmap image is an object etc. This is the mindset that fits me best. If you like PainShop Pro, you could like PhotoImpact as well.
Borek on May 2, 2007 11:42 PMJeff > you should consider adding Inkscape (free) and Adobe Illustrator (not free at all) to the "poison list", they're both vector-based drawing programs, the learning curve is even higher than for bitmap-based drawing software but the result is potentially much better (especially if you want to output e.g. SVG, and they have no problem rasterizing images).
You also forgot Fireworks CS3, which replaces the former ImageReady in the "lowest" CS3, and is a fairly flexible drawing tool with a slant towards vector-based drawing.
Masklinn on May 2, 2007 11:44 PMIt's good to learn graphics programs to get your feet wet, but I'd say that going the extra mile to learn a little bit about the fundamentals of graphic design will help you much more than just knowing how the marquee tool and gaussian blur work.
The main things to learn are:
Typography: font choices (using real fonts and not the garbage on all the free sites), leading (the space between lines), sizing different blocks of text to show their relationships, using fonts big enough to read (even for old fogies like me), alignment, and weight.
Color: not just what colors go together, but what colors read best against each other. What do colors communicate?
White space: maybe the most important element in design. The copy, interface buttons, or whatever, have to have breathing room. There's a reason that text doesn't go all the way to the edge in books. When blocks of copy and other design elements aren't crammed together the overall design is more successful.
OT: I got some thinking putty and it's awesome!
On the Mac, make sure you learn a *vector* graphics editor. Raster editors like Photoshop are still useful, but this will decline in the future, with Leopard's resolution-independent UI. You want vector graphics so that your art is future-proof: as the resolution goes up, you want your images to become sharper, not blurrier.
I recommend Lineform (http://freeverse.com/lineform/). It's inexpensive—$80—and highly effective.
Peter Hosey on May 2, 2007 11:46 PMInstead of those Paint applications, why not use a 3D modeling tool instead? Poser from e-frontier.com for example. It will allow you to create images of people and objects in different poses and different clothing but most importantly, it makes you think before you create an image. You need to work out the image you want before you start painting it. Basically, it forces you to design first, develop later.
Then, when you created some picture, the next step would be to integrate it with some background image. Combining a picture of your living room with a pose of a model sitting in a chair, for example. And then make it look as if the model is really sitting in one of the chairs in your living room. It's not easy and requires some advanced techniques like the use of transparency and layers.
But one more advantage... You can create a model in Poser and use the model in your application to point at special actions. Makes the interface more interesting too. They just have to be small icons but every image can speak a thousand words or more.
> It's good to learn graphics programs to get your feet wet, but I'd say that going the extra mile to learn a little bit about the fundamentals of graphic design will help you much more.
Gotta crawl before you can walk.
This goes for vector editors as well (Fireworks et al)-- that's why I didn't include them in the list.
Jeff Atwood on May 3, 2007 12:06 AMWhile useful to known one of theses packages it still does not help if you use it to create something like http://www.adobe.com/products/creativesuite/images/cs3.jpg
I keep reading about The Gimp's ultrahard interface. To me it's just a bit strange / different, but not that hard to use.
Oh, and I agree with Nathan Bowers. Do learn the fundamentals of colour, type and composition. At least the basics.
gz on May 3, 2007 12:33 AMLearn to handle photoshop, thats my advice.
I handle few and it is a big help.
>> There's a lot of useful cross-pollination going on between developers and designers.
Esp for web related stuffs
Have you used GIMP lately? It used to have an intolerably bad interface but the latest versions seem much better- I use it in preference to Photoshop now- although I do have a fairly old version of Photoshop I don't find GIMP any harder to use and it is very full-featured.
Ben Moxon on May 3, 2007 1:21 AMHow about Firewire, does that count, i find it usefull along side Photoshop
Owen on May 3, 2007 1:31 AMA basic understanding of image transparency/alpha channels/compositing is also a good thing to have - both from a programming perspective, and from the POV of using tools like Photoshop.
And, re. PNG vs. JPG - for me, it's PNG's transparency support that puts it head and shoulders above other formats. Please don't even *mention* GIF transparency.
- Roddy
Roddy on May 3, 2007 1:31 AMCorel Photopaint ;-)
(just because I'm used to the Corel Suite since version 3 ...)
I do all my own graphics by hand in The Gimp
http://www.ghostsceneinvestigations.com/
The comment about the Gimp is just a plain Trolling Jeff :-P
The truth is that just like with programming, its not the Editor or IDE that makes product but the programmer.
Grab some books from the library on Art, google those tutorials, but above all spend hours learning.
David Ginger on May 3, 2007 1:38 AMCan I also recommend the excellent "Non-Designer's Design Book" by Robin Williams?
It gives a great introduction into the basics of design and typography in a language that the less-artistically inclined of us can understand.
http://www.amazon.com/Non-Designers-Design-Book-Robin-Williams/dp/0321193857/
Graham Stewart on May 3, 2007 2:06 AMUlead Photoimpact ! (version 8 for the matter)
I love it, it's very easy and straight forward to learn. + excellent to use in webdesign
Unlike GIMP, as a programmer myself, I have no idea how the interface works or what they were thinking when making it?!
Fixx on May 3, 2007 2:13 AMPaint Shop Pro 7.
I tried the trials of later versions and IMHO it got too big for it's boots. PSP7 (possibly 8 was okay too, I skipped it) handles everything I've ever needed (occasionally borrowing Ulead Cool 3D, also a great program).
GIMP I can't stand. I can't pick anything specific but the interface just bugs me. Same with Photoshop and later versions of PSP.
Zooba on May 3, 2007 2:55 AMI totally agree with the post. Besides, thinking about layers and filters in a graphic object gives you a good method to organize your work ("think about what you will do, before starting your work" is mandatory when working on images).
I was lucky, because I started as a Graphic Designer, and then switched to Software Development... eventually becoming a bad Software Graphic Developer Designer Specialist :-)
Filini on May 3, 2007 3:44 AM@Chris Barts:
No thesis defense required. Being able to mock up an interface quickly by doing the original placeholder graphics is an indispensible tool for UI coders, and should be intuitively obvious. For example, I'm proposing a new way of managing some UI elements during a product overhaul, and the customer will want samples of the new graphics as a part of evaluating the proposal. Our Graphics Design department is constantly overloaded, and simply wouldn't be able to supply the new sample content in a timely fashion--but I can do that work myself, thanks to 20 years experience with graphics editors. The customer will eventually do their own version of the bitmaps in questions, but providing working samples to their design group increases the chance that the images will be done correctly the first time.
The voice of experience: if you don't provide samples to an off-site shop, you won't get back what you need. Too much is lost in translation if all you do is talk or write about it.
Brook Monroe on May 3, 2007 4:05 AMI totally agree. Developers are not designers, except for a handful of truly rare individuals (the inverse is also true). I'd say don't try and learn how to build beautiful websites if you're a developer - either, you're gifted and you already can, or there is simply too much learning involved. Instead, just try to build websites that don't suck.
Not every site has to be a work of art, just as every ceiling doesn't have to be the Sistine chapel's. If you need to build the Sistine chapel, remember it's a team effort. You can build the structure - and get a specialist to make the ceiling pretty.
I think that what Jeff has described is a good first step - know your tools. Then the really interesting stuff - typography, and graphic design. FWIW, I'm fascinated by it - just a bit ropey about it's execution. Still, I usually mean my objective - don't let it suck.
Andy on May 3, 2007 4:08 AMNot really a general purpose graphics editor as it it specifically for photographs, but Nikon Capture NX is a dream to use. OK, so it's a memory hog and a bit slow, but the ease of editing a picture, adjusting levels, contrast etc is worth it. No more creating layers in PS and then spending time masking them off where you dont want them. Simply add a colour control point, adjust it's size and then adjust what you want with the simple sliders. The only things I think it lacks are a clone brush and better integrated workflow, both of which I can live without for the most part.
Paul on May 3, 2007 4:13 AMThe GIMP / PhotoShop debate is one of those things that comes down to which you used first. Personally, I find PS confusion personified... but I used GIMP first!
Syd on May 3, 2007 4:14 AMWhen you get down to designing, one of the difficult tasks is creating a good looking color scheme. To help with that task there are some excellent websites. http://kuler.adobe.com is what I use most often.
Chambered on May 3, 2007 5:08 AMCouldn't agree more. After 5 years of development I went back to school for a BFA in design in order to cross that barrier more effectively (had never even took an art class before either, haha). Even before that I always encouraged my developers to learn design - if only to gain perspective.
In my opinion, at very least learning design will help the developer respect the designs they are implementing, and in its highest form learning design will lead the developer to new insights and solutions that would have been overlooked. In the end design and development are simply two approaches to solving problems. Being able to combine both allows one to tackle a larger set of problems than having just one or the other.
(Not to mention solving the whole "when all you have is a hammer everything becomes a nail" problem)
Brandon Ferguson on May 3, 2007 5:42 AMHere is a source for background images and the like:
http://www.sxc.hu/home
I've even downloaded very suitable desktop backgrounds from them.
And it's free, my favorite price!
I wouldn't be so quick to write off MS Paint:
http://blog.pduggan.net/PermaLink,guid,6ed3d1de-685a-4a07-a6c4-f5e512ae654c.aspx
Paul Duggan on May 3, 2007 6:03 AMI disagree with the post. Graphics design may be getting more software in it, but a vast majority of software development never has any graphics elements in it - the GUI is only a small part of the system. And for a majority of the GUIs, the design of them is either dictated by guidelines external to the software developer, or handled by a HCI team.
Now, if you are a GUI developer, the thesis makes perfect sense, but not if you're a firmware developer.
Pete on May 3, 2007 6:04 AMMAC's version of GIMP (although you can you GIMP under X11) is SeaShore. It is basically GIMP enginge with a CoaCoa front much like NeoOffice is to Open Office.
My kids prefer TuxPaint though ;)
Glenn on May 3, 2007 6:44 AM@Jeff: While I don't disagree with you in the least, you don't come close to saying *why* SD folks should learn a GD tool. You say they are interrelated, but don't say how. Care to elaborate?
Thanks,
--dang
+1 for Inkscape, it's the best simple and powerful solution out there.
Antoine on May 3, 2007 7:45 AMStrange no one's mentioned this: graphics editors can be FUN even if you're a developer... i've spent hours playing around with my photos on photoshop... (and you can dramatically improve you'r photos) its great way to learn photoshop..
this is of course not th same as UI design... but it goes a long way towards familiarizing you with graphics editing..
hellfeuer on May 3, 2007 7:47 AMOne more for Ulead PhotoImpact. Best Graphics Editor I've ever used.
Tinclon on May 3, 2007 7:58 AM> Gotta crawl before you can walk.
> This goes for vector editors as well (Fireworks et al)-- that's why I didn't include them in the list.
I disagree with this, vector graphics and raster graphics are definitely not the same thing and knowing a raster graphics tool is definitely not necessary to learn a good vector graphics tool.
In fact, starting with vector graphics may be more intuitive and simpler for the math-oriented types as vector graphics are heavily based on Bzier curves
Masklinn on May 3, 2007 8:22 AMI agree.. but would add http://www.xara.com to the list of tools... and I'd add it at the top.
I think that for developers, there is more of a need to learn a VECTOR tool than an image tool.. Xara is the best of both worlds and I swear by it, especially since they launched a linux version at http://www.xaraxtreme.org/
Keith
Keith on May 3, 2007 8:31 AMHow many of the Gimp trollers have really used it for more than five minutes? I started using Fireworks until the team developing Gimp added vector drawing. This feature needs a bit of polishment, but damn, the Gimp is good. Not only good, because of Gimp we have GTK wich is beautiful, and is fucking Open Source. What else do you need? Oh! Yeah! The stupid YMCK versus RGB debate, but I wouldn't even think about buying Photoshop when having the perfect tool just works. It's a shame that The Gimp doesn't get as much publicity, tutorials, patterns, etc.
Anyway, great work to the guys developing The Gimp and thank you very much for all.
F*** you trollers, try learning it before talking bs, or just go pull your pants down on Adobe.
Corel Paint Shop Pro comes with a great user guide (accessible from the help menu or as a PDF file in PSP's program file folder) which beginners can find useful to get started and learn basic editing techniques.
Daniel on May 3, 2007 10:20 AMI completely agree that having some graphic tool knowledge is absolutely essential for a developer (echo chamber?) I fire up Paint.NET several times every day to cut stuff up.
I have a license of Adobe Studio which is great. Unfortunately it's only on one machine at the current time so I use Paint.NET on my other machines. You can argue all you want, but Photoshop is really leaps and bounds above the rest of the other tools out there.
An even bigger problem than the fact that Photoshop is the best is that it's what every designer out there uses. Anytime you get a file back from a graphic designer to work with it's always in .PSD format. I can accomplish almost anything that I need as a programmer in Paint.NET except open PSD files. Why oh why won't someone create an open source application capable of this.
Same thing goes for vector graphics. Sure there may be some tools out there that rival Illustrator - at least for what I need to do, but all the files I ever get from designers are Illustrator files or .EPS files.
Does anyone know of an open source program capable of opening Adobe specific files?
Ryan Smith on May 3, 2007 10:42 AMI learned Adobe Fireworks time ago, but now I wan't to get ride of it, and trying some easy-for-the-non-designer program.
1. It has to have docked tools windows (all programs copy photoshop, but it's a really a PITA to work with)
2. It has to be vector based, but support working with bitmaps.
3. Not from Adobe (Fireworks disable aero in Vista, and Adobe want my $$$ for their glitch)
I'm thinking in MS Expression Design, but not sure.
edddy on May 3, 2007 10:50 AMLike to throw one more program in the mix...CorelDraw Graphics Suite. Great vector and bitmamp editing tools for the money! I'm been using it since Windows 3.1 and it always amazes me how power yet simple it is.
Gabe on May 3, 2007 11:08 AMHere's why this blog is good to read - it's eclectic. I didn't even know the difference between vector and raster graphics (actually, it was in backup tapes somewhere in the noggin, but the tapes were not loading in the current hardware) until this post caused me to look it up.
What kind of loser code monkey am I that I don't such basics? One who is learning.
I cut my teeth on a pirated copy of Photoshop 4, mostly just making really, really bad wallpapers and doing what a lot of first time Photoshop users do... go crazy on the filters. It was always just a hobby but knowing about things like blacklevels, layers, etc. has come in handy more times than I can count.
I like a mix of Photoshop (now a legal copy of CS2 thank you :) and Paint.NET. I use Paint.NET for a lot of quick fixes and Photoshop when I want to do something more involved or know I'll be sharing the PSD with someone.
Be careful though, more than a few times I've created a "placeholder" splashscreen or graphic only to have upper management say that it looks fine and we don't need to invest in a designer. I know how to do a lot with graphics but I'll be first to admit I don't have that art flair that makes the difference between "OK" and "Amazing".
Shawn Oster on May 3, 2007 11:48 AM@Ryan:
"I can accomplish almost anything that I need as a programmer in Paint.NET except open PSD files. Why oh why won't someone create an open source application capable of this"
Not an application, but a library: FreeImage can read PSD files (among many others) <a href="http://freeimage.sourceforge.net">http://freeimage.sourceforge.net</a>
Maybe Paint.NET could incorporate that?
- Roddy
Roddy on May 3, 2007 12:54 PMI just want the .NET code (VB) to be able to take an uploaded .jpg and brighten, contrast, and sharpen as good as Photoshop does. I know it is out there, but it is always bundled with 1,000 other functions.
John A. Davis on May 3, 2007 1:07 PMAs I said, I'm a Paint Shop Pro kind of guy, but occasionally I do need fuller Photoshop compatibility for various things. It is the de-facto standard in a lot of areas.
If you need Photoshop compatibility, I recommend Photoshop Elements 5.0. I just picked up a copy on eBay for under $40 including shipping.
Jeff Atwood on May 3, 2007 1:22 PMThe GIMP interface is really neat once you get used to it. Worth saving 500$ on.
Dylan Brams on May 3, 2007 1:22 PMAnd what about Microsoft Expression Suite? I think for a visual studio developer would be a much better option.
Andr on May 3, 2007 3:03 PM@Roddy
Thanks for the link. Maybe if I find some spare time in the near future I will see I can can write it into the code myself (probably just a pipe dream).
Ryan Smith on May 3, 2007 3:03 PMPeter Hosey: >> Instead of those Paint applications, why not use a 3D modeling tool instead?
Like Jeff said, got learn to crawl first. These tools also require a spacial understanding. That is sometimes hard to comprehend especially for those who don't quite understand the Bayes Theorum.
Start small then work your way up within your comfort level and needs. But yes, learn a graphics tool then learn composition as you are learning more deeper aspects of the tool. Both are equally important, but one does come before another.
John Baughman on May 3, 2007 4:17 PMOne place to challenge yourself is in the Fark.com Photoshop contest. Some people CAN do amazing things in Paint, but most turn out even greater things in Gimp, PS, PaintShop, etc.
So consider using a little more horsepower with a little more practice. It WILL pay off in the long run.
By the way, if anyone wonders, or cares, I prefer Gimp and Photoshop both, but I am WAAAAAY out of practice and have a friend of mine do some of the work for me now... ;)
John Baughman on May 3, 2007 4:24 PMI have a mastery of Photoshop because I've been using it since version 4 for creative type junk.
But my day job is a programmer so do yourselves a favor and learn photoshop since it's industry standard.
Forget about trying to open a .psd document in all the other editors out there...I know some have support for them but many fall short in understanding the .psd file format.
Also, I'm not saying you need to receive assets in .psd format...you can just as easily receive them in .jpg or whatever but getting them in .psd format will allow you to toggle on and off all the layers and states to see how the GUI is supposed to respond. Try doing that with a bunch of .jpgs to see all the states of an application...
Just my 00000010 cents.
-Ralph
Ralph on May 3, 2007 4:57 PMI'm also a Paint Shop Pro fan, but since it got bought by scum the latest version that I upgraded to is spyware with their option to upgrade it to adware, so I got a refund. But PSP9 works for most of what I want to do, so that's fine.
It used to confuse and annoy me that Photoshop didn't have vector graphics (or maybe I'm just unable to find them... did we mention confusing interfaces yet?) but PSP has had vector layers since forever? I assume that's been fixed recently? Likewise the nonsensical 4GB file limits and other "we're 32 bit like it or not" stuff?
Given the choice between two really crap interfaces, one of which costs $500 or more, I chose to spend my time learning how to use GIMP, because that way I'm only spending my time on the problem.
Moz on May 3, 2007 4:59 PMJeff, Image work can actually be a very technical skill perfect for the technically minded developer. I use Apple Aperture and Adobe Photoshop to process digital photos and between the camera, the software and the printer I've had to pick up a lot of technical knowledge and skill just to get a good print of a photograph.
What is harder to teach is the aesthetic perception of what makes good design. What looks right, if you will. Some believe you either have this or don't.
Andrew on May 3, 2007 5:07 PMThe big advantage I've found from spending heaps of time in Photoshop is that I understand compositing graphics better. This means that the combination of visual effects that can be done in things like XAML and Core Graphics make sense to me now.
It gets back to the thought where the best way to improve your development skills it to learn other things for inspiration.
Geoff Wilson on May 3, 2007 5:28 PMWhile on the surface I agree with this idea, I have to ask what basic proficiency is.
As someone with competence in several programs for my hobby, I would have a much different idea of competence (ability to use layers and understand certain 'blend' modes) then a less sophisticated user (learn how to crop Grandma out of the wedding shot by mirroring the good side of the photo).
Rachel on May 3, 2007 7:43 PMAs someone who uses both Photoshop and GIMP regularly, I have to say the interfaces of both programs are abysmal. However, the Photoshop interface designers at least don't appear to be actively trying to prevent me from getting work done.
Whoever on the GIMP team was responsible for the modal dialog when creating a new layer needs to be shot. I would have let him off with a severe beating if "Enter" dismissed the dialog by default.
And what the hell's up with layers having a fixed size and those stupid layer boundaries being displayed by default? I wouldn't even mind this so much if it remembered my damn settings when I turn it off.
Sure GIMP is remarkably powerful for a free OSS effort, but that doesn't mean there's not a special circle of hell saved for its UI designers.
Eam on May 3, 2007 8:00 PM@Daniel Dang Griffith:
Correct me if I'm wrong Jeff, but the reason for this post is to make developers aware of tools that can *potentially* be helpful for their career.
This post correctly reflects the software development approach for web applications. Rapid Web Application Development has had a large uptake in the recent years with IDE's such as Visual Studio 2005 and Eclipse allowing developers to quickly 'wireframe' an application to demo to a client. Armed with graphic design tools the developer can quickly design the look and feel of an application, enabling the client to give critical feedback sooner rather than later.
Obviously if you are a device driver developer or low level software architect this post is slightly irrelevent - however you'll be amazed at how much you can do with graphic design programs these days even if it is not work related. I'll be the first to admit that recoloring my eyes a bright green is fun! :)
@Lisa: Very interesting thought about using 3D models to demonstrate software and UI functionality. I would like to know if anyone else has had any success with this particular approach.
If you are thinking of getting PSP, I would recommend a version between 7 or 10, depending on how much editing of photos you will want to do. After Corel took over it started to get a bit bloated, slow and buggy. But 10 has a very good feature set.
[ICR] on May 3, 2007 11:23 PMAm I the only one missing the point here?
Shouldn't be worried ore about the generic, maintainable nature of our code, rather than the flashy UI et all?
Isn't this Vista, Silverlight and what not, hohalla moving us away from what makes us a good developer? Wont we all end up as paintshop people?
KNOCKS on May 4, 2007 7:14 AMGet one of the stripped copies of Photoshop, like elements or lite or CE. They're cheap, they help you learn photoshop and they have functionality. GIMP is clunky.
Loud Monkey on May 4, 2007 8:53 AMJeff, you are so right. I have found that I often get poorly designed graphics from designers in photoshop format that I have to work real hard to make them work on the web. They look great, but they are not done to work on the web platform. Having basic Photoshoping skills has saved my rear end several times along the way. Plus some clients just are not interested in over the top design anyway and I can quickly get a good layout done for them and keep the margin in my pocket!
Chris Love on May 4, 2007 10:06 AMHey ... I know that screenshot :) My friend Marie took that picture in Seattle and then I edited it. For those who're interested, the original image at 1920x1200, sans-Paint.NET frame, is available here: http://www.deviantart.com/deviation/27687013/ . Makes for a great wallpaper (not that I'm biased ;).
I'm always completely disappointed when I see people working on UI and checking in code for a dialog where everything looks like it was almost randomly placed. Please take 20 minutes and make sure things are lined up and spaced properly! I think that's one thing that HTML and WPF are really helping with: instead of specifying that a control should be at an X,Y position, you can just declare things using a flow layout and certain things take care of themselves much more automatically.
Also, if you like Paint.NET, I hightly recommend checking out two things:
1) The forum! There are tons of passionate users on the Paint.NET forum. New tutorials are posted daily, new plugins probably come out every week, and everyone's pretty willing to help out to answer any questions you might have.
2) CodeLab. For developers, this is a slick plugin that Tom Jackson wrote. Basically what it does is pop up a text editor within Paint.NET and let you write the Render() method of an Effect. And, when you pause typing it will recompile and then re-render the effect. This is super cool for rapid prototyping, development, and experimenting with the effects system and with computer graphics in general. And refer to (1) for help using and mastering it! CodeLab is available on the forum here: http://paintdotnet.12.forumer.com/viewtopic.php?t=1096
-Rick Brewster (the Paint.NET guy / author)
Rick Brewster on May 4, 2007 11:17 AMGIMP has no PANTONE color support, so it's useless to me.
foobar on May 4, 2007 2:26 PMHere's two recent examples of the kinds of things you can do with basic graphics editor chops:
http://www.unfocusedbrain.com/projects/match_color/
http://mezzoblue.com/archives/2007/05/03/simulacrum/
I find walkthroughs like this very instructive.
Jeff Atwood on May 4, 2007 4:42 PMYou should not call this a 'programming tip', but rather a 'web site development' tip. If someone is programming websites all day, sure, this makes sense. If someone is writing desktop apps, this applies about 10% (rough estimate). If someone is programming at the command line, network level, business logic, database code. This makes zero sense and it only serves to distract them.
This is a website specific problem. And in reality, someone could go their entire career making ajaxified websites (or even web applications, which are quite different than websites) and never know a lick of CSS/Design/Typography/Photoshop. The truth is that designers are very cheap. That is the sad truth. Just write the app and have someone put a skin on it. Sure, you might have to pay for it, but you could also make more money just picking up more work and handing more design work off to someone.
It is a nice skill to have, but not critical. And don't say it is related to programming in general, because it is not. it is specifically related to website building (for the most part).
Chris on May 5, 2007 9:33 AMChris, I have to disagree with you. First I'd never say that learning something is a "distraction". Even if you only ever use something 2% of the time it's always nice to know a little bit about it.
Second I've been a developer for quite awhile, everything from command-line only, backend, desktop, web-based and everything in between and in almost every project knowing a bit about Photoshop has helped. Whether it was just knowing how to convert between strange formats, how to take a screen-shot and crop it for the help document, re-touching the splash screen for a desktop app, creating a quick and dirty header for our issue tracker, etc.
So no, it's not a tool you'll use everyday, or even every month, maybe not even every year but it's always come in handy for me. In fact during one interview they asked if I knew how to use an image-editing package because they couldn't afford to pull their designers off of "real work" to do things like tweak a splashscreen or recolor an icon.
You're right, maybe he shouldn't have said "Programming Tip", perhaps "Developer Tip" would have been better. I usually think of a programmer as someone that does just that, you hand them a spec and they churn out code. He also wasn't saying that you should learn a graphics editor instead of having a real designer, as nothing can replace a good designer, but it's nice to know you can make some tweaks without having to pay someone for the small things. It's like the fact that you should know how to change your oil, change a flat, rotate your tires, etc. Sure, others may usually do it but you should know how to do those very basic things.
Shawn Oster on May 6, 2007 4:55 PMIMO, Photoshop is a lot like C++; it makes difficult tasks doable and easy tasks mind-bogglingly complicated. For instance, fixing a photo in Photoshop makes the product's name sound like an oxymoron compared to Paint Shop Pro or even Paint.Net.
Unfortunately, Photoshop is indispensable for web graphics. I’m sure that something like 90% of results one can get with Photoshop are obtainable using allegedly inferior tools, but it will come at the expense of a lot of time and effort. Adobe has a near monopoly for a good reason.
To paraphrase a wiser soul whose name I can’t recall at the moment: to be a software developer is becoming a matter of learning less information about more subjects, to the point where one knows nothing about everything. I think this is especially true when it comes to graphics, especially considering that a lot of the stakeholders I had the dubious pleasure of working with (especially higher-ups on the corporate ladder) don’t care much about functionality or content as long as it looks pretty :S
I've just started playing with Photoshop Elements (after using paint shop pro for a while). I've noticed that there are quite a few video podcasts out their that show you have to do stuff with Photoshop. Check iTunes and you'll find several.
hi how are you?
Jeff,
Just perusing your archives and found this. I agree fully with you about GIMP, but thought you might want to know about this: http://www.gimpshop.com.
It's a different version of GIMP redesigned to look more like Photoshop. It seems to fairly accurately recreate the look & feel of Adobe's little cash cow, while maintaining the cost of GIMP.
Jeff on March 3, 2008 11:25 AMWhat, no good word for scissors, gluestick, pen and markers?
Seriously, if you're doing UI usability prototypes, it's worth at least thinking about doing it on paper and making them look "sketchy". Doing that conveys the message that what you're doing is an initial effort, negotiable, flexible, and open to change.
Doing a polished looking graphic mock-up may have the result Shawn Oster mentioned above - "more than a few times I've created a "placeholder" splashscreen or graphic only to have upper management say that it looks fine and we don't need to invest in a designer."
Why? Because it visually conveys the message "it's nearly finished!" even if you haven't written a line of code yet.
Same problem in spades for UI mock-ups: if your first try looks like polished finished code, it's more likely you'll get told to implement the very first thing you showed, even if all you wanted was feedback. If you want feedback, always do at least two different versions, and make them look "rough" visually. (I'm working on paper sketches of four alternative configuration approaches for the next rev of the UI I'm working on at the moment.)
Clifton on March 3, 2008 11:52 AM| Content (c) 2009 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved. |