Become a fan of Slashdot on Facebook

 



Forgot your password?
typodupeerror
×
Graphics

Best Ways to Learn Graphics Design for the Web? 71

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?"
This discussion has been archived. No new comments can be posted.

Best Ways to Learn Graphics Design for the Web?

Comments Filter:
  • Core competencies. (Score:5, Informative)

    by XanC ( 644172 ) on Saturday January 13, 2007 @12:21AM (#17586446)

    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.

    • Exactly. I've got that arrangement right now actually. I'm decent in photoshop, but not stellar, and she's ok with HTML (well, dreamweaver, ewwww) but can't just sit and code in notepad (actually Smultron, if you're on a Mac, google it. It's OSS).

      So she does the graphics and gives me an idea of the design, then I strip it down to nothing and rebuild it with CSS, HTML and PHP. I throw in a few ideas of my own, tweak the graphics sometimes, but basically I cement a layout and start writing PHP for the nifty b
      • by Yvan256 ( 722131 )
        actually Smultron, if you're on a Mac, google it. It's OSS.
        I don't know if it's OSS (I don't care) but TextWrangler [barebones.com] is pretty good, and it's free.
    • Re: (Score:3, Insightful)

      I think it's rare for one guy to be really good at both graphics and code.

      Well, being a graphics guy AND a code guy, I'd say that you're right for the most part. Most people I know who are good in graphics are terrible at code (they just don't have the mind for it), and people who are good at code generally suck when it comes to design.

      However, to simply learn how to achieve an effect or to take a piece of art and modify it in such a way that it can make a nice site.

      the only real problem is that you wind up
      • by XanC ( 644172 )
        You've got a typo at the end of your front page: "ApplesScript" instead of "AppleScript".
        • wow, thanks.

          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.
          • 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.

            Falcon

            • 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.

              Isn't that what "editors" are for?

              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 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 [oed.com] . One day I came across the spelling of time as "tyme"

    • by gtada ( 191158 ) on Saturday January 13, 2007 @03:07AM (#17587826)
      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.
    • by Nik13 ( 837926 ) on Saturday January 13, 2007 @04:21AM (#17588282) Homepage
      That's the best advice! Others have said "check other good web pages and try to imitate them" or "read some tutorials", but that's coming from people that don't really know what web design encompasses. Web design - like design for any medium - is FAR more than that.

      You'd have to learn about ALL KINDS of artsy stuff, things like using color palettes to your advantage, fairly advanced typography (most people have NO idea how much stuff there is to learn right there), how to make visually appealing stuff in general, how to use white space properly, and so much more.

      Ideally you'd have to take art classes, perhaps specialized web-oriented courses, read a lot of books (many classics) and magazines (like Before & After or countless others), read hundreds of articles on countless web design oriented websites (like alistapart, 456bereastreet, etc)

      And there's MANY other things one should look into, such as usability and accessibility.

      Then you can worry about knowing how to use photoshop and other apps (flash, etc) to make things (and rounded button tutorials or such)

      In short, too much stuff to learn, much like if a designer wanted to become a "real" programmer (gotta learn OOP, various languages, XML, databases, various libs and frameworks, etc). You usually don't want to spend that much time learning something that often seems not so important or not very interesting, and it's not usually worth it (being a *good* programmer is hard enough, and there's already WAY too much stuff to learn). And if you don't learn it in depth, you're just not going to produce very good results (e.g. another bland website that's much like all the others, and nothing like what you see on csszengarden).

      Try designing some site logos and such (even just on paper). You'll see it's not as easy as it seems!

      I stick to what I do best (programming), and let the designer guys take care of the rest (even though I can handle some basic design stuff just fine).
      • What not to do. (Score:3, Insightful)

        by MikeFM ( 12491 )
        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 d
      • by oSand ( 880494 )
        [QUOTE]You'd have to learn about ALL KINDS of artsy stuff, things like using color palettes to your advantage, fairly advanced typography (most people have NO idea how much stuff there is to learn right there), how to make visually appealing stuff in general, how to use white space properly, and so much more.[/QUOTE] It about 4 hours or so, you can learn the basics of typography and color theory- to the point where you can discern a Grotesque from an Egyptian and a triadic from a complementary. From there,
    • Re: (Score:3, Insightful)

      by catwh0re ( 540371 )
      I know this is going to sound a bit unusual, but here goes anyway.

      Coding a website and designing a website occur in two different sides of the brain, one side of your brain is creative, the other is more analytical and methodical. Swapping sides of the brain through the day isn't a good idea for productivity. It's very difficult to be creative after a stint of coding, and it's very difficult to code after sitting and drawing from your imagination. (This is pretty easy to test, many graphic & web desig

      • Re: (Score:3, Insightful)

        by Metasquares ( 555685 )
        An easy strategy to avoid that is to devote some time to design using an application, like Photoshop, which requires no coding. Once the design is finished, put it away for a little while, return when feeling more productive, and code it up.

        Some of my best creative work took place after coding, though, so I'm not quite sure this is true.
  • 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.

    For example, http://www.google.com/search?q=photoshop+glossy+bu tton+tutorial [google.com]
    • Re:Tutorials. (Score:4, Insightful)

      by aywwts4 ( 610966 ) on Saturday January 13, 2007 @02:03AM (#17587366)
      Just throwing him to a wild pack of unfocused tutorials wont help him at all. While he will certainly be able to make embossed buttons and glossy pages, without a firm grasp of art color theory or design his pages wont look much better than a glossy myspace. I really recommend starting with color theory, reading some books about user interfaces, and studying what differentiates a good design from a bad one, and the answer certainly isn't glossy buttons.
  • re (Score:2, Informative)

    by D'Sphitz ( 699604 )
    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.
    • Re:re (Score:5, Interesting)

      by MrWGW ( 964175 ) on Saturday January 13, 2007 @12:49AM (#17586716)
      As a graphics designer (among other things), I vehemently reject the notion that graphics design is some magic art that only a circle of "gifted creatives" can practice. This, I cannot help but believe, is sheer balderdash, created by designers to reinforce the illusion that they are indispensible wizards. Though I was interested in art from day one, and cannot speak from personal experience, I believe that it is possible for anyone to develop the creative skills neccessary to become a good artist or graphics designer, and the fact that the poster has shown an interest is probably the single greatest hurdle. With that said, I would reccommend the following course of action: 1. Go to a bookstore and take a look at the various books they might have on graphics design, perhaps picking up one or two of interest. Visit the galleries on aiga.org. Learn to appreciate graphic design as an art, study the works of the great figures in the discipline (Paul Rand, William Golden, Saul Bass, Massimo Vignelli, et cetera), and get an understanding of the differences in style and the subtleties of different types of graphics. 2. Before deciding whether or not to commit to graphics design, download an open source app and play around with it. Try various typographic treatments, try creating web buttons, and do other practice work. See if it's a process you find enjoyable. Keep experimenting until you start to really like what you see. 3. If you have trouble coming up with design ideas, you might try playing a computer game that requires or stimulates creativity regarding design - building houses in The Sims would probably be the best example of that. If you like what you see in your studies of design, then I would encourage you to pursue it further. If you find typography, color management, and the other aspects of the discipline to be exceedingly dull after studying them for a bit, then you should probably avoid wasting your time (and your clients money) going after it, but don't come to that conclusion until you've played around with it. Remember, though, it's a serious discipline, and you won't achieve good results unless you respect it.
      • Re: (Score:2, Insightful)

        by MrNaz ( 730548 )
        Agreed, and I'd mod you up if I had points. This is true of just about anything. Highly skilled professionals like doctors aside, just about any field can be learned with a degree of proficiency sufficient to be usable as long as the person first realizes that there is nothing mystical or magical about a field they know nothing about. It never ceases to amaze me how people look on simple jobs like unblocking a drain or changing a fuse as though it requires some mystical magical skill that only The Enlighte
        • 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 hel

      • by Aladrin ( 926209 )
        "Remember, though, it's a serious discipline, and you won't achieve good results unless you respect it."

        This is what it all comes down to. Given enough time and effort, he COULD learn to be a good enough web designer to do what he wants. To do it quickly, he'll have to neglect everything else in his life and his programming will go to pot in the mean time. (New techs and ideas need to be researched and experienced constantly for programming.)

        How do I know this? I live it. I am a programmer and I would
  • C&P. (Score:1, Insightful)

    by Anonymous Coward
    "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.
  • by Fallen Kell ( 165468 ) on Saturday January 13, 2007 @12:35AM (#17586590)
    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).
    • by rlanctot ( 310750 ) on Saturday January 13, 2007 @12:44AM (#17586680)
      Good idea, actually. I think places like Drawspace (http://www.drawspace.com/) are very useful.
    • Re: (Score:3, Informative)

      by nizo ( 81281 ) *
      I second the suggestion to take an art class. I recently took my first art class at the local community college, and realized that I am indeed capable of drawing more than stick figures! Since then I have taken a photoshop/illustrator course, and have dabbled with some 3D tools (see my deviant art page in my sig or my profile to see examples of things I have made). Don't let others (or more likely yourself) talk you out of seeing what kind of artistic talent you have. Now not only can I code php, but I am o
    • (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 il

      • Re: (Score:2, Insightful)

        by Magic5Ball ( 188725 )
        Yes, reverse engineer, practice, but importantly since web design isn't just art for art's sake, remember your audience. Even the best tabloid print ad in the world is likely to suffer from usability issues if copied directly into a web page...
  • 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/ [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.

  • by zappepcs ( 820751 ) on Saturday January 13, 2007 @12:43AM (#17586666) Journal
    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.
    • Re: (Score:1, Funny)

      by Anonymous Coward
      Mod -1 Arrogant Twat
    • Re: (Score:2, Insightful)

      by DebateG ( 1001165 )
      I recently finished designing a website to be used heavily by several hundred graduate students each day. I initially thought that looking a websites that won awards would be a good way to brainstorm. I was really wrong. Nearly all award-winning websites are terrible designs. Sure, they looked pretty and used all sorts of fancy Web 2.0 designs, but in terms of usability, they were horrific.

      Websites need to be functional and easy to use before they're pretty. I agree that art classes would really help you tu
  • 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.
  • 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.
  • 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 som

    • Color theory is important no matter what type of web page. Being able to do actual art isn't. Most content based sites don't require buttons that the average person couldn't create if they actually use buttons(see left). A good logo might be nice, but in reality, you will be using their company logo with minor changes.
  • by gbulmash ( 688770 ) * <semi_famous@ya h o o .com> on Saturday January 13, 2007 @01:56AM (#17587326) Homepage Journal
    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
    • That was close intelligent and thoughtful. Visual acuity is not an accident! I wish I had a nickel for everytime I heard that one. There is a big difference between a formally trained graphic designer and a learn as you go. I watched the evolution of a graphic design foundation course over a period of 35 years. Graphic design as a separate discipline started in the fifty's. Note I'm not a graphic designer but was well taught on the fundamentals of what constitutes a good visual design and found that a good
  • Step 1: Purchase Photoshop Step 2: ???????? Step 3: PROFIT!!
  • by Anonymous Coward
    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 eithe
  • Take lessons from this guy. [kde-look.org]
  • ...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 f
  • 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, ye
    • So you want to get a job using Photoshop, but can't afford it? Consider it this way - there are two barriers to overcome here:

      (a) Recruiters who won't refer you on without Photoshop experience.
      (b) The organisation who will sling your ass out the door when they discover you really don't know what you're doing.

      To overcome barrier (a), why not try enrolling in some free/cheap courses in a local technical college/night school/U3A etc? These places often have well-equipped labs where you can at least gain some
    • by julipan ( 935962 )
      There is no longer a necessity to use photoshop or other commercial/proprietary programs. I switched to using only Free Software in my webdesign company almost two years ago, and though I spent some weeks in transition learning the new software, I now work a lot more efficiently. This is partly thanks to CLI applications like ImageMagick [imagemagick.org], but I also find that for most work, the FOSS counterparts of Adobe's applications are much more efficient to use; they are a lot faster, handles larger files, are not clut
    • Buy Photoshop Elements for $99, or (better yet) buy a digital camera and get it free with the camera.

      A few years back, Photoshop Elements was redone to be identical to Photoshop except for a few helpful wizards and some missing features dealing mainly with print design.

      If that's not enough, realize that Adobe has taken pity on you and will sell a version to students relatively inexpensively - you might want to look into that as well.

      Hope that helps.

      D
  • Counterexamples.
  • 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.
  • 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
  • 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 Z
  • 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 of
  • 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.

    I'm sure, like many others on /., 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
  • 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 flas
  • 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.

It is easier to write an incorrect program than understand a correct one.

Working...