Slashdot Mirror
Best Ways to Learn Graphics Design for the Web?
ConceptDog asks: "I consider myself a fairly good web programmer. In fact, my job evolved from just fixing PC's to being lead designer for most of the new web applications for my company. I'm comfortable with formatting things using CSS, however the one thing that has always escaped me is designing custom graphics for my sites. I'd like to be able to create buttons and interesting backgrounds to punch up my designs and use in other media (Flash for example). I've always had a problem with art. I really can't draw a straight line with a ruler. What are some methods and resources others with more language oriented backgrounds have used to help make the step from just a web programmer to a real web designer?"
Economics: do what you're good at, and trade for the rest.
I think it's rare for one guy to be really good at both graphics and code. Find a graphics guy, and create a partnership. You do the code for his projects, and have him do the design for yours. Or simply pay him. He'll charge a lot less than he would to create the whole site for you (which most of his clients might want), since you're only asking him to do the part he really likes and is really good at.
The best way to learn is by doing.
(Flash for example)
Real web designers use flash?? But seriously, just tinker around with some graphics programs and try and make some buttons or something. If you can teach yourself things (like programming) you should be able to figure out the basics. If not, forget about it, or go [back] to college.
Libertarian Leaning Political Discussion Forum.
Just search for Photoshop and Flash tutorials. The level of detail that tutorial websites go into nowadays is far beyond what many of us dealt with half a decade ago. You should have no problem learning the basics of design, just don't forget to Google.
u tton+tutorial
For example, http://www.google.com/search?q=photoshop+glossy+b
Sigs are for Terrorists.
well if you suck at art you'll probably suck at graphic design. over the years i've become pretty proficient with photoshop and fireworks, but i still contract out for designs simply because i don't have the creativity to come up with new stuff for every website.
"What are some methods and resources others with more language oriented backgrounds have used to help make the step from just a web programmer to a real web designer?"
Clipart package.
Truthfully, go take some art lessons. You will be surprised that it just might help you out. Even just a few weeks of lessons might be enough to train your "eye" so that you can better understand what looks good and how to go about accomplishing that task. I had several classes when I was in 6-10th grade at the University of the Arts in Philadelphia. They had summer programs as well as weekend programs for people interested in learning. Those courses really helped me out a lot when I was younger (I'm graduated from college now and have been working several full time for several years). I do not personally get to do a lot of graphics anymore, but from time to time, I do get the chance. It helps that I also took classes in computer graphics programming in college and know a lot of the theory of what to do (i.e. color spaces to use, proper techniques to scale images and points, etc., all of which have come in handy as I have written programs to do things like re-scale and shift click-maps for images (long story, but basically the application that made the image click maps would always generate the html code so that it was shifted several pixels in both the x and y planes as well as scaled .6 smaller in the x plane, and .63 in the y plane, so I wrote a program to read in the html page and correct all the image map coordinates by appropriate amounts)). So long story short, some local colleges and local art schools will have several classes that they offer which will give you some basic idea of how to start.
As for flash and animation, well, I highly suggest leaving that up to people who have spent several years of their lives taking training in the subject. It can be very difficult to work with. Especially dealing with the different versions of flash in existance and coding/drawing the frame movements. You would be surprised how bad some flash can look and how poorly it will perform if you do not do it correctly (there are always many ways to skin a cat, but in flash only 2 or them will run nicely).
We were all warned a long time ago that MS products sucked, remember the Magic 8 Ball said, "Outlook not so good"
For design help, I used to us "the non-designers design book" by robin williams.
Her books are quite good (amazon has a bunch). The help with design in general.
That and spend some time looking at designs. Why they work/dont.
http://www.oswd.org/
has lots of designs that work or don't
For CSS I find the oreilly head first book the best for putting css and html together.
First, start off by googling for examples of BAD web design. If you can avoid those, you're 15% of the way to your goal.
Second, Look for web design award sites. If you can absorb what they did right, you're 30% of the way there.
Third, ask yourself why there is a difference between losers and winners. If you can figure it out, you're 60% of the way there.
Now, actually get hold of a web graphics program. If you need me to tell you what the names of them are because you can't find it using Google or other search engines, then this advice is really not going to do you any good. Then painstakingly work your way through all the menus and what each option can do. Google for help if you need it. If by the time you have done this you have not acquired all the general knowledge you would get in a 2 year course, you have saved yourself the cost of 2 years worth of school, and can move quickly on to the 'do the stuff you know how and outsource the rest' method.
Fourth, I have explained to you what should be common sense. If this doesn't seem like common sense, you might want to consider a new vocation.
Support NYCountryLawyer RIAA vs People
you can learn color theory, you can figure out what doesn't look -bad-, you can get a basic grasp of what not to do, etc..., but to really be able to make something good you just have to know how to do it without knowing how you did it, so to speak.
i saw the baby, and the baby looked at me
most free training online is...well...free. For like $50 you can get a really decent photoshop book like the one I have for my college class and just run through every lesson and you learn a lot. I already took the Illustrator class at my high school and now I am super awesome with Illustrator. If you're really motivated, you won't wait a week between lessons like most classes so you'd be really good really fast.
Google's Super Secret Search Algorithm: SELECT @search_results FROM internet WHERE @search_results = 'good'
In all honesty I would recommend getting your hands on a program like photoshop and just playing around with it. I taught myself how to "graphic design" by simply playing around with the programs that I use today, learning what does what, learning what combinations of effects work well together, ect. I honestly believe that doing it on your own is the best way because you are not influenced by professors and teachers that in all honesty don't even know what they are doing, otherwise they wouldn't be teaching, they would be doing. You get to learn the things you want, at a pace that is comfortable to you.
The internet has thousands and thousands of tutorials that can help teach and refine your techniques. In your situation you can honestly learn most of what there is to know for free, by simply googe'ing it. So if you truly want to learn how to be a true web developer, invest the time into learning a program like photoshop, after you figure out how to design that masterpiece in your head the next step is just cutting it up into HTML (which I'm sure you can already do).
Well, the short of it is, you need to study at the bare minimum color theory. Much more is required to be a good designer - and honestly, while you may be able to create something moderately attractive, you really need to understand creative communication in art in order to properly convey brands.
I'd honestly recommend that you just contract out for the art side of things. There are numerous artists out there who can design great interfaces, but can't code worth a crap. I like to think of myself as someone who blends both very well, but that's because I spent a large portion of my life studying art, design, and more.
One important rule is that it is more than making something pretty - it is about communicating the ideas of the client and ensuring that the right customers are drawn to it. Of course, in my experience, most clients will refuse to accept that the designer actually knows what they are doing, and they'll ask for some clip-art laden copyright-infringing piece of crap.
"Better to be vulgar than non-existent" -Bev Henson
Excellent link, very professional.
Someone mod this up.
Graphic design is a much different beast than illustration.
Graphic design is the understanding of how colors, shapes, text, empty space, and images all work together in conveying a message (not just the substance of it, but the gist of it, the emotion of it, etc.), and applying that knowledge to the message you have to convey. It's like layout on steroids. And while some graphic designers draw all the parts of their designs, some primarily use clipart, photos, and text without doing any drawing at all.
Road signs use graphic design. The side of a cereal box uses graphic design. The tray liners at McDonalds use graphic design. Graphic design is communicating visually, not just textually.
If you're looking for ways to make buttons, there are lots of books and web sites full of Photoshop tips for doing that. Anyone can make a button. A graphic designer makes a button that is the right color and size to fit into the larger concept so it feels like a part of the whole rather than a random element slapped in.
The best way to learn graphic design, IMO, is to look at things with a critical eye. What makes other designs work for you or not work for you? When something looks amateurish, try to isolate the elements that make you feel that way. When something looks really slick, try to isolate the elements that make you like it. Over time, you'll get a better feel for what makes a design look slick or look sick, and that will be your greatest aid in better design.
- Greg
Start a happiness pandemic
Step 1: Purchase Photoshop Step 2: ???????? Step 3: PROFIT!!
Similes are like metaphors
Step 1: You must know that there is one prerequisite: you have to know good design when you see it. You don't have to be able to create it, not yet. But you must have an eye for telling good design from bad. If you don't have that, you probably can't be helped.
Step 2: If you can tell good design from bad (and have had some third parties confirm this!) then go out and find the very best designs in the genre you are working in. Adapt their ideas to your project and copy like hell. Your first design will either look like a Doppleganger or a Chimera. This is good! It might be illegal (though probably not) but this is practice not perfect.
Step 3: Put your design next to the good examples you found and ask yourself, "Does mine look as good, professional and polished as theirs?" If the answer is yes, pat yourself on the back. You are an instant success as a purely derivative designer. In a few months no one will be able to make any solid causal link back to the people you are ripping off, and you might as well hang up a sign and go into business. In a few years you won't need to rip anyone off anymore, at least not consciously.
Step 4: Your design probably still looks like brussel sprouts on the way back up at this point. Don't panic (yet). Get very detailed an objective about what is different between your design and the exemplars. Don't look at the whole thing, look at specifics. Why do their buttons look better? Maybe they have a background "texture" of faded lines or a graphic of some subtle color behind the links? Maybe they created a subtle 3D effect with about 2 pixels and yours is so 3D it looks like a balloon about to burst. Write down a list of theories, then attempt, painstakingly, to apply them to your design. You will do a lot of painful learning about your graphics program at this point. I recommend Photoshop for mocking up web pages, but many tools will work. If you use Photoshop, learn to appreciate layer effects, text effects, layer groups, and the magic wand tool.
Rinse, lather and repeat. You are done when your design can truly hold its own next to the exemplars. Be willing to start ripping things off entirely if you have to, to make it to this point the first time. Build an entire mockup copy of one exemplar site if you have to. Then at least you will know how to use the program to do something at that level. It will sink in, you will get faster, you'll start combining ideas of your own, and you'll gain confidence. Graphic design books and language will start to make sense to you. It's well worth the effort!
You can always find somebody else to do the graphics, but it doesn't sound like this guy is looking to do cutting edge, avantgarde graphics.
Speaking as both a coder (10 years) and an artist (Art Center grad), I know it's not that hard for a coder to do tasteful graphics. Practice RESTRAINT AND CONSISTENCY. Use 2-3 fonts max per page. Borrow or steal nice layouts and color schemes. Simplicity will usually get you further than overloading your work with elaborate graphics.
It really isn't difficult to do tasteful graphics- just don't go overboard.
Take lessons from this guy.
...is to believe you are capable of being a web designer. Have you been able to tell web design that is "bad" and "good" from your own personal experience? Then you are capable, it has a lot less to do with talent than feel. Without sounding too touchy-feely, you must first make a conscious, rational decision that you can be a "good" web designer simply by knowing the difference for yourself. Given your evolution into web programming, evolving in a different aspect of the field should not be difficult for you.
My friend you do not need to learn any colour theory... Just, whenever you design a website, put some photos of sexy women here and there, and nobody will notice your lack of design skills!
I've dabbled with some amateur photoshopping stuff in the past (not with actual photoshop mind you). I always wanted to get into a job doing that but most places want people who can use stuff like Photoshop, Quark, Maya etc
Now, I haven't checked the prices of Quark and Maya but Photoshop is still over $600. You can build a nice little PC for $600. Maybe it's just my cynical outlook on software prices but you shouldn't need to pay $600 for like one very widely used piece of software. A reasonable price, yes but unless you've got $600 to blow on Photoshop you either don't get it or you pirate it which yea that can work but you shouldn't have too.
I'd love to really learn Photoshop or whatnot but not at the risk of having to pirate it for long periods and nor can I afford to buy it.
Aw Frell this
(I am very biased in this opinion as I initially was an art student (SVA) that transferred to an academic school, so please bear with me)
The mind of an artist is a completely different beast compared to the mind of an academic. If you are looking for technical ability in a fine arts program, there is only one way to get good: practice practice practice(just like learning a musical instrument).
In my third year in art school I've decided to concentrate my studies in graphic design. I've mostly trained in illustration and painting and I was pretty good technical abilitywise, but graphic design was a new dept in my school and it looked more promising in terms of future living lifestyle than the others mentioned. Suffice to say, I was not that good. My professor, not wanting to discourage me too much, told me one thing that I'll never forget.
The professor was trying to have me swimming in good graphic design so I could start to understand why certain things were made they were. I've had very good technical ability, but poor design sense. Eventually, after doing that and being sick to death of it in the process, graphic design became second nature to me.
I understand this mostly pertains to print - as we didn't really use 'thar intarweb' back when I was in school - but I'm pretty sure the principle is exactly the same:
Step 1: Look at a lot of good websites. Look at a lot of artist creations. Look at a lot of commercial sites as well, like microsoft.com (I'm serious) and nytimes.com. Look at sites that won design awards. Look at awesome fancy graphics. Look at blogs (don't look at myspace:-P). Copy them in your favorite art app (not need for html), from absolute scratch. Go back to step 1. Superimpose your image in an image of a webbrowser (or just display the image in a browser if you like) Write about what you like about them. What you don't like about them. Go back to step 1. Grab a pencil and paper, draw out your website. Criticise yourself (this is more difficult than you know especially with subjective material). Remember the process of creation of certain things (nothing wrong with looking up tutorials on the web) and apply it to your own creativity. Go back to step 1. Sorry, there is no shortcut. Go back to step 1.
Remember: good artists copy. Wanna be real good? Copy a lot. Don't steal tho. Just copy for your own benefit. It keeps the brain active and your creativity fresh.
Sorry, there IS no shortcut.
If that is what you are looking for, I suggest you stop reading now as my mental credibility may go out the window(along with my karma) :-P
If you are looking for something beyond that and want to expand your mind to enhance your creative ability (cue the drug jokes), you have to do something completely different. I wish there was a more comprehensive answer to this, but from my limited experience (+10 years in an all arts program in addition to doing the whole starting artist thing) the only way is to *ahem* 'think like an artist.' Now wtf does THAT mean? The closest way I could probably answer that is to (remember, this is all claptrap is there is absolutely NO scientific basis on what I'm about to say) pretend your some kind of idiot savant with an interest with nothing but shapes and forms from a 2D perspective. Pretend your eyes are like a television screen (or maybe more appropriatly,
Counterexamples.
My blog: http://www.seebs.net/log/ --- My iPhone/iPad app: http://www.seebs.net/seebsfrac/
I have not seen the latest editions but I suggest reading the book:
Looking Good in Print by Roger C. Parker
It is predominantly oriented towards publishing but web pages are a similar enough medium.
The only real way to get a 'feel' or an ability for web graphics is to both take some basic photoshop tutorials at sites like http://good-tutorials.com/ http://tutorialdash.com/ http://pixel2life.com/ Then read design blog religiously, blogs like http://youfuckwedont.com/ http://veerle.duoh.com/ http://bartelme.at/ http://resource.reh3.com/ Then visit some design galleries regularly like http://webcreme.com/ http://stylecrunch.com/ http://cssmania.com/ http://www.flickr.com/photos/splat/sets/981332/ is a good flickr pool http://nn.veracon.net/ http://cssremix.com/ And of course the Zen Garden: http://www.csszengarden.com/ And you're all set.
Try to experiment with some software. Try stuff, play with effects, try saving your work under different formats and find out which one offers the best result and the smallest size, try to replicate things you see, read through the code of websites you like and try to find out how the graphics are displayed (tables, CSS, etc), build fake web pages and have people comment on your work ...
There are also lots of tutorials available online (on the web and through BitTorrent or eDonkey). But I honestly believe that what you learn by yourself will not only be remembered longer but will also teach you creative ways to use tools and effects that are not taught elsewhere. Try whatever you like. I mean, you're not going to break anything...
You are more than the sum of what you consume. Desire is not an occupation.
Find stuff you like and copy it. If you like the buttons from Digg, save them to your hard drive and learn how to make a button that looks just like it. It's the same in the real art world. If you are learning to draw or paint people, you start by copying the masters (well, you don't start, but you know what I mean). Once you understand how people who are already good make what they make, you should then be able to start adding your own style into what you create. A good place to start is probably the CSS Zen Garden, just because the graphics and layout are all that changes from page to page. Find a design you like and duplicate it from scratch. Rinse and repeat until you feel that you could make your own. Or, there's also the possibility of making a great deal of money just copying other people's designs. ;) But, that's not my suggestion.
I find that it just isnt worth my time (in the billable per hour sense) to make the shift from developer/programmer to be a GOOD graphic designer/artist HOWEVER it is nice to tinker sometimes. So yes, learn some more graphically oriented apps but if you want to do anything SERIOUS and save A LOT of time, look at sites such as templatemonster and istockphoto (I am NOT affiliated in any way). istock is good but somewhat overpriced these days and templatemonster, while having some GREAT designs, the HTML is often horrendous (esp. from an accessibility standpoint).
Anyone sue similar resources that they would recommend?
I'm a straight up software developer. I often develop server/client technologies and sometimes I'm asked to build web components for access/interactivity. Simple enough, but usually when I present an end product I'm asked to buff it up a little. Make it look smooth and professional, like millions of dollars was invested in to it.
/., its easy to imagine what you want to put together, but building it can be challenging. A friend of my in the industry introduced me to this http://www.pixel2life.com/ where I can find many tutorials and tips/tricks for web/graphic design. Its largely community driven, so it has a large variety of talent and techniques devoted to it.
I'm sure, like many others on
I'd recommend it as a place to start.
If i wanted to hear bullshit, i'd go to church.
yeah, I'm terrible with finding my own typos. I just went through the site earlier this week, when I was rewriting the backend, and found about a dozen typos on the resume page. ...and to think I'm a proofreader for my friend's novels. heh.
Many people are that way. Even some professional writers are better at proofreading others writing than they are at proofreading their own work. When I wrote years ago, I always had someone proofread what I wrote. It's the mind tricks.
FalconShould there be a Law?
I try to get them to understand that one does not need to pay large sums of money for the privilege of sitting in a room with hundreds of other students to have a lecturer read to you out of a book. Just buy the book and read it yourself.
Not everybody can learn just by reading a book, some people need someone there ril so they can ask for assistance and such. I know because I am that way now, where at one tyme I prefered to learn by doing and if I had a problem then read the manual before asking for help. Now I can bang my head against the wall for several hours and never be able to understand something, but I can learn it in a few minutes if I have someone to ask for assistance.
Fact is is different people have different styles of learning and a style that works for one person doesn't work for everyone.
FalconShould there be a Law?
The worst thing about most website design is that people have no idea how to make anything usable. People present way to many options on a single page. Or the opposite problem where you have twenty pages each with two links and a lot of artsy graphic crap. What's the worst though is when you have a PHB that thinks they know best how a site should be designed so you end up with something pretty lame.
Don't learn web design from either programmers or graphic artists because both typically do a shitty job and definately don't learn from PHBs.
The first thing to do is to read everything you shouldn't do. There are lots of books and online resources for this and while some of them will conflict they will at least give you a good idea what things don't work. Realize that not all websites have the same purpose so not all rules will apply to every site and some people just plain have different ideas about what is good and bad. Knowing your audience is very important. Then you should study some basics of art like how to proportion and layout graphics and what colors work well with each other and to learn some styles that might work for you. Figure out which parts you can do well and which you can't. I typically hire someone to do logos and major artwork for me but I do the page elements such as borders, backgrounds, buttons, menu options, etc and I do the HTML and stylesheets that make it all work. Ask the opinion of other people, that aren't all like you, from time to time to get an idea what works and what doesn't. Geeks like things very orderly usually and graphic artists like things with over-the-top flair but most users like something in between. Even simple things like removing the line under links can greatly confuse your average user even if it does look a lot better and if you mark the links in some other way.
At what price learning? At what cost wisdom? The price is a man's peace of mind, and the cost is his life.
I have to say that, between the chief editor and the copy editor, I learned that my spelling and grammar are not nearly as good as I thought they were.
I used to get comments about my spelling, that it was wrong. I'd come back saying it's not wrong but unusual for American English. For instance I spell "time" with a "y", "tyme". Back when I was in high school I liked to go to the library and leaf or read through the Oxford English Dictionary, OED . One day I came across the spelling of time as "tyme". Thereafter I used that spelling. In a writing class, I don't recall if it was composition or American Lit, I used that spelling on an assignment and when I got the paper back my teacher had marked it wrong and took off points. So I practically dragged her to the library and showed her "time" spelled that way. After that she got into the habit of checking the OED to see if it had a word spelled the way I spelled it. I haven't been able to find a dictionary with it spelled that way since, but then again the OED I used had 20something volumn edition, it wasn't just one book.
FalconShould there be a Law?
I started off with flash as my first "anything to do with web".... and that too when I was a kid... Since in India internet was quite a luxury then, i resorted to using the fine examples and tutorial given along with flash. I guess it was flash 5, but im not sure... but the tutorials are very nice there. I tried out flash MX 2004 a few months ago, but it seems they hav removed the tutorials altogether. I suggest somehow acquiring those tuts because they were really good.. giving u a very good grasp of flash minus actionscript. Nyway, happy flash-ing ;)
If just the results of a nicely designed website is what you're looking for, you might want to consider using a CMS like Drupal. This way you can stay in your programming world and do everything by configuring the code and then just choose a nice theme to go along with it. Then, if you still want to work on the design, you can just tweak the theme.
WikiCreole - a common wiki markup language
If you have a grasp of the basic concepts (which should come first), but can't do some nifty stuff like making 3D like drawings by hand without serious difficulty (not everyone has drawing skills), then perhaps having some 3D software would be useful. Of course these are an entirely different beast than PhotoShop or Illustrator. Once learned, you may find that they can be quite valuable for making various graphic elements from scratch. However, this doesn't mean you shouldn't learn GIMP or PhotoShop, as 2D graphics software is quite necessary for doing any postwork manipulation of rendered output.
I'll post some that I know of, since they might be handy:
Wings3D, a fairly straight forward polygon 3D modeler.
Blender, an all around 3D modeler, rendering, and animation program.
Arbaro, a Java based tree generator. (Might be handy. Who knows?)
Makehuman, so you can have 3d people if you need 'em.