Graphic design & creating web graphics from scratch? - WebmasterForums.NET

Prussia · 07-23-2006, 03:12 PM

I'm someone quite good with html and css, dabbling in server side scripting (ASP and PHP), beginner at SQL-stuff, and beginner/intermediate level for Photoshop.
I can do things like retouching photos and adding styles, receiving some graphics to work with and adapting them for use on our websites, However, I'd like to be able to create graphics 'from the ground up'. But I never really could understand how (digital) graphic artists do that... do you use a digital pen & tablet for drawing and then importing that to a program like Photoshop? Do you draw directly in Photoshop?
Do you work from a model or do you draw from your 'imagination'?
Any advice of what I should look into? Drawing class? Photoshop tutorials? Other things?
Some general theory about graphic design?
For example, for my CSS I got the book 'The Zen of CSS', which contained lots of interesting discussion in chapter 2 about 'design'... things I never thought about before that are nonetheless important in a design.
I don't need to be a prize-winning digital artist, just to be able to create nice graphics for websites, by starting 'from scratch'.
I'm a bit clueless as to where to start, so any tips or advice are welcome.

Prussia · 07-23-2006, 03:12 PM

There are loads of really good books about design theory - this might be one place to start. Everyone's methods will differ - a design with applied research & learning WILL make the end product better than one that doesn't - even if the route getting there is very different. I think that designers have a responsibility to learn about design history & theory. This gives them the best tool they can have - understanding. design is not so much if you can do something but more about why.
A designer with a standpoint, views and opinions based solely personal taste is, to me, extremely self centered and is sadly, the basis for many designers work. At one point I definitely fell into this category. But now I understand that you have to sit yourself down for every project with no preconceived ideas and allow the client do the educating.
Being open to your clients needs is paramount - failing to recognise what they want based on a preconceived notion will always produce a bad design, egos get dented and reputations suffer.
Once I'd taken a real interest in design theory and opened my eyes to the graphic world around me my perspective shifted. I no longer based my designs on pretty trends - I based them on research and client empathy.
As I grow older I see how important this is - no amount of skill in photoshop or illustrator is as valuable as being able to understand and answer a brief. Being able to understand why (good) designers do what they do made me a better designer - and made me realise that once you start, you will never stop learning.
So I guess what I am trying so say is that if you are interested in how design works then start reading. The theory behind it (particularly graphic design) will give you a solid grounding in web page design too, and will make opening a blank photoshop file a lot less daunting

A few reading recommendations:
Grid Systems in Graphic design
Less Is More: The New Simplicity in Graphic design
A Smile in the Mind: Witty Thinking in Graphic design
Stop Stealing Sheep & find out how type works
The Elements of Typographic Style
Although these might seem very print orientated I think they all make better reading than books about webdesign - there are more historical references/values to print while the web is still so young.

Prussia · 07-23-2006, 03:13 PM

Basic colour theory is a good place to start, especially for someone already proficient in HTML and CSS. It was a revelation to me to learn how and why colours work together. It's a lot easier and faster than tweaking and re-tweaking a design until things "look right", and it gave me a lot more confidence in my designs. It's very simple: choose a colour and then grab a colour wheel to determine its corresponding colours.
Some basic colour schemes:

Complimentary Scheme - uses direct opposites on the colour wheel.Analogous Scheme - uses any three consecutive hues or any of their tints and shades (lighter/darker) on the colour wheel.
Clash Scheme - combines a colour with the hue to the right or left of it's compliment (opposite) on the colour wheel.
Monochromatic Scheme - uses one hue in combination with any or all of it's tints and shades.
Split Complimentary Scheme - consists or a hue and two hues on either side of it's compliment.

There are more, but you get the idea. It's like a formula for choosing colours that work every time.
Some books I've found essential on the subject are:
"Color Harmony 2 - A guide to creative color combinations" by Bride M. Whelan. Helpful for choosing colours based on the mood you want to convey (trust, warmth, elegance etc.).
"The designer's Guide to Color Combinations - 500+ historic and modern color formulas in CMYK" by Leslie Cabarga. Great for choosing combinations based on historical periods (deco, '50s, '60s, trendy, modern, rave etc.).
Also very helpful is a Photoshop filter called ColorTheory by Digital Anarchy.
As far as design tools go, most computer-created graphic art is done with vector graphics (line-art) software like Illustrator and Freehand or, if you're designing purely for the web, Fireworks and Flash. These are like the pen tool from Photoshop but much more powerful. Download some trials and tutorials and see how you go without a tablet.
Then grab the books limbo mentioned and you'll be well set.

Prussia · 07-23-2006, 03:13 PM

If you just want to get stuck right in there, I found the following technique immensely useful when I first got into designing graphics, logos and buttons etc. I recommend you give it a go. Photograph it, mess with it and scan it
You'd be surprised what you can do using real world objects and turning them into virtual abstracts. One image I required recently was a hand on a mouse. Armed with digital camera I took a pic of my own hand on a mouse. Port that into Photoshop and increase brightness and contrast to a point where it's faint but you can still see the outline.
Then print it out, and trace the outline with a black pen.
Scan the printed and traced outline into Illustrator and convert it into a vector using whatever smoothing elements you need to give you a professional image.
Same effect can be had by tracing real world objects on a pen tablet of course, but sometimes the colours/shading in a photo scan can actually fluke you some interesting imagery which you end up not tracing or vectorising.
Because I'm not a natural artist (meaning I can't actually draw very well) I find using real world objects in this way, then tracing and scanning them, coupled to a good grounding knowledge of the software applications needed, gets me an extremely professional looking end result for line drawings, basic logos/imagery and buttons. Mostly now I just do this because I enjoy it. 80% of my artwork is now outsourced. I can do just as good a job but it takes me longer and discipline requires that I'm more cost effective spending my time doing what I'm better at. That's a whole other subject though.
Here's another one that turned out great when I did it - try scanning a 3D object on a flatbed scanner leaving the lid up (off) when it scans.
Import to Photoshop and then "invert" it.
A little creativity goes a long way in making up for a lack of artistic pen and paper technique.

Prussia · 07-23-2006, 03:14 PM

As usual, a lot depends on what you want to accomplish. 2D or 3D? Line art (vector graphics) for logos, illustration or such or 'photo-real' work (bitmap graphics). Bit of a dilema here, as i wrote an e-book that answers all your questions in depth, but don't want to "promote" it here. You could Google organic "3D art skills" to locate my free chapter on lighting, free 3D based tutorials, a few free 3D models, etc.
There are many online digital art forums where people share info and post to the galleries - the largest and oldest being 'Renderosity'.
Making (or buying or downloading freebies) 3D models and posing them in a 3D scene, then using a 'camera' in that scene to render photo-real 2D images is becoming a popular art form. The leading products are 'Poser' for human and animal figures and 'Vue 5 Infinite' for scene staging, lighting, vegetation, water, terrain, atmosphere, etc., etc. You can literally 'create worlds'.
In this type of work, Photoshop is used more for creating textures to apply to your models, grayscale bitmaps to act as height controls for terrains or control ecosystem areas, post-processing of images and such. But Photoshop (or equal) is an indespensible part of the digital artists toolkit.
Also, digital cameras are used to gather real-world textures. Here again Photoshop is the tool of choice.
Yes, many digital artists use digital tablets - they don't cost much and are more accurate and feel a lot better than a mouse for drawing. Dual monitors are also popular - one for your program and another for the resulting image. Strangely, stereo viewing has not caught on, although it's now inexpensive and very helpful in viewing complex 3D 'meshes' in 3D modeling.
Most digital artists get their visual ideas from imagination or from other artists, art history, written fiction, movies, dreams, etc. They usually do web research of subject matter and gather reference photos, then make paper and pencil 'concept' sketches, then make (or acquire) 3D models (if their images are model-based) and go from there.
A critical skill for any artist is learning to observe the visual world around them. Most people have forgotten how to look deeply and keenly (as they probably did as children) and merely glance at everything.
All the visual pollution, advertising, media, etc. has taught us to filter out much of what we perceive visually, so some conscious work is usually needed to get back to keen observation.
By practicing such 'seeing', one can learn a great deal about light, lighting, form, texture and so forth, from their daily surroundings. Doing photography is also a help in this.

Prussia · 07-23-2006, 03:15 PM

I'll strongly second that reccomendation for illustrator. Not only can you "save for web" from illustrator in exactly the same way as Photoshop, but you can be 100% certain that no matter what size you decide to publish your vector image at, it will be the cleanest and sharpest it ever can be. No messy interpolation blur. Lest us not forget Illustrator's all-too-recent interaction with Flash - exporting graphics in swf format for later Flash importation has cut my work time in half. As for style - well, it's more than just the tools you use. You do have to look, choose and learn what's out there, but I can assure you that, no matter how much you read about it, your first hands-on experimentation will seem as trial and error until you find a palette of styles/tools that are "yours". You'll learn to do drop shadows, then you'll pass a period overusing them - each new technique learned will 'fade into' the last, and eventually you will have quite a few to choose from. This takes time.
The best approach to learning anything is to have a goal first - for a real project or job. Decide what you want to do, how you would like it to look (I'm a pen and paper guy for this), then go about learning how to do it. You will feel more comfortable much faster with your new knowledge once you see the end result working in front of you.
And yes there is the education part - you have to learn at once the language of how images "talk" to people (what people recognise in them) and use that language to create a message, for your client, that talks to the audience he wants in the way he wants. This of course calls for a panopoly of styles, so as said earlier, having just one "look" will in the end just work against you.
I've rambled long enough - hope I added something helpful.