Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Graphic design & creating web graphics from scratch?

how do you do it?



12:47 pm on Jul 16, 2006 (gmt 0)

10+ Year Member

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.


9:55 am on Jul 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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.


1:29 pm on Jul 17, 2006 (gmt 0)

10+ Year Member

Thanks for the reply, it's really helpful.

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

Well, when I read "Cascading Style Sheets: Separation Content from Presentation" I also thought some chapters dwelled too long on semantics and print 'conventions'. I enjoyed them nevertheless, although them being a bit dry did mean I had to read them in small bits.

I've always thought I'd be really bad at drawing... my writing is awful... but who knows if I give it a try it wouldn't be so bad... aside from being a possible asset I've always wanted to give it a try but never had the guts for fear of being disappointed too much.

travelin cat

5:37 pm on Jul 17, 2006 (gmt 0)

WebmasterWorld Administrator travelin_cat is a WebmasterWorld Top Contributor of All Time 10+ Year Member

While I agree with the points made by limbo, I truly believe that reading books on the subject will not help much. You may understand certain parameters that need to be followed but you will never become a good designer reading books.

You need to create things regularly and stand back and look at them and have other people look at them as well.

practice, practice, practice.

Good designers can be made, but it takes a very long time and lots of experimenting. Even people born with incredible talent need to experiment.


6:58 pm on Jul 17, 2006 (gmt 0)

10+ Year Member

I love creating... or I wouldn't be in this web business thing...

it's the 'talent' part I'm worrying about... ;)


8:09 am on Jul 19, 2006 (gmt 0)

10+ Year Member

Other question:

when you're drawing shapes, is the 'pen' tool in Photoshop sufficient or is it better to have a graphics tablet to draw on?


9:12 am on Jul 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

you will never become a good designer reading books

... it's true you need to read more than books - you need to read everything.

Never, stop, looking.

I know a great designer who can't draw in the traditional sense, but has really good ideas, strong research skills and enough technical know how to make her designs look fantastic.

Experience comes in time - and with that skills develop and so does personal style. However the design approach shouldn't really change from job to job IMO. Learn these most important skills early - before you open Photoshop!

when you're drawing shapes, is the 'pen' tool in Photoshop sufficient or is it better to have a graphics tablet to draw on?

The pen tool is worth mastering - you'll get a lot of use out of understanding paths and nodes + it'll translate to programs like Freehand, Illustrator and Fireworks.

I don't have a tablet - but then I don't do a great deal of layered digital artwork or illustration - so it's not a necessity - horses for courses.


8:54 pm on Jul 19, 2006 (gmt 0)

10+ Year Member

when you're drawing shapes, is the 'pen' tool in Photoshop sufficient or is it better to have a graphics tablet to draw on?

If you're doing a lot of freehand drawings, I think a tablet is invaluable. I have one and when I draw something, I use it in Flash (cause I'm too cheap to buy a vector graphics program specifically for drawing). I think a tablet offers a lot in the way of control and accuracy, versus a mouse. But if I were stuck with a mouse and Photoshop, I'd definitely be drawing paths, rather than try and paint right on the image.


2:08 am on Jul 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

There is a magazine called something like "step by step" graphics. Google it. They have gotten a bit advanced in most issue, but you can order the back issues. It answers "how did they do that?"

Talent without desire is useless. No matter what your talent, appreciate your desire to learn.

Have fun, do NOT get frustrated. There is no single answer in design.


2:29 am on Jul 20, 2006 (gmt 0)

10+ Year Member

And just a friendly thought... experiment. With tools, yes. But the key to PhotoShop is FILTERS. Experiment. Play. Get comfortable with them. Best of luck to you. Keep at it.


3:16 am on Jul 20, 2006 (gmt 0)

10+ Year Member

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.

For SEO purposes: the US spelling of the terms colour wheel and colour theory are color wheel and color theory :)


8:53 am on Jul 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

But the key to PhotoShop is FILTERS.

I don't really agree with this sentiment. While filters are good for getting a certain effect they can make a project look cheesy unless handled with exacting subtlety. More often than not I see a liberal peppering of lens flares, wobbly glass filters and coarse textures applied willy nilly. Being able to do something and having a reason to do something...

The key to photoshop, for me, would be the levels commands. Only because I am constantly editing photos taken in light situations not complimentary to the perfect photo. A quick tweak using the levels command and those flat, dark, winter-promo shots come alive with contrast and colour.

Another set of tools worth mastering are the range of selection tools and quick masks mode.


10:35 am on Jul 20, 2006 (gmt 0)

WebmasterWorld Senior Member trillianjedi is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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.



10:58 am on Jul 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Completely agree about experimenting with the tools you have. I used to mess with faxes a lot to get a 'worn digitised look' to some images - an effect that I can't quite get quite right with filters alone.

There is also a huge range of open source plug-ins for Photoshop like brushes. The big ones are particularly good if you are working on both web and print brands.


If you have Illustrator you can use the live trace option to create paths from scanned objects (provided they are not too complex) - might be helpful.

Photoshop can do a similar thing by converting a selection to a path - this can be exported to illustrator or freehand too so that you have vector control of the object.


11:11 am on Jul 20, 2006 (gmt 0)

WebmasterWorld Senior Member trillianjedi is a WebmasterWorld Top Contributor of All Time 10+ Year Member

If you have Illustrator you can use the live trace option to create paths from scanned objects (provided they are not too complex) - might be helpful.

That's interesting - thanks. I'll have a play with that. Partly I guess I prefer the control you get when tracing by hand - you can trace the bits you want and leave other parts out deliberately more easily. Getting slightly abstract images I find easier with that control. More than anything that's probably because I'm at the end-stops of my Illustrator/Photoshop skill set.

Another one I just remembered doing once - print out text on copy paper (the cheap stuff) preferably via an ink jet printer, then put a strip of sellotape sticky side down onto the text roughly (i.e with creases in the tape), rub it to make it really stick, then tear it off gently. Scan the sellotape strip when removed.....



3:51 pm on Jul 20, 2006 (gmt 0)

10+ Year Member

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.

[edited by: JayCee at 4:10 pm (utc) on July 20, 2006]


9:52 pm on Jul 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


This is a great demo for composite photoshop skills.


12:53 am on Jul 21, 2006 (gmt 0)

5+ Year Member

I probably only use 20% of the tools photoshop supplies.

Keep it simple is the key. As long as you can draw squares and fill them you are half way there.

If you use a photograph for a header, invert the colour of the photo or pixelate mosiac it and you will get a good overall colour scheme for the website.

Don't go mental on filters as they often look amateurish e.g. lighting effects

I tend to draw the whole layout in PS first on a blank image 780 x 480 ish for 800 x 600 layout. Add the header, menu and some content and you will get a good idea of how the thing will look.
Then, when you are totally happy, go and build the thing in XHTML 1.0 Trans minimum using the photoshop image as a reference.

Never used a pen tool.


1:06 am on Jul 21, 2006 (gmt 0)

10+ Year Member

I prefer Illustrator to Photoshop for composing graphics. Because Illustrator is specialized on vector graphics, most of the editing is non-destructive: e.g. you can apply a blur effect to a layer, then modify the original graphics in that layer and the blurring is re-applied. You can also change the parameters of an effect at anytime. Illustrator gives you much more freedom. The only thing you can't do is work with individual pixels. But I found that I never needed that feature in Illustrator. Besides, working with pixels is tedious and erratic.


9:23 pm on Jul 21, 2006 (gmt 0)

10+ Year Member

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.


6:19 am on Jul 24, 2006 (gmt 0)

5+ Year Member

Hello everyone I'm in the same boat as the original poster, Im tired of using stock graphics and have been experimenting with creating my own. Thank the creator I was forced to take that art class in H.S and retained some knowledge about spacial effects, shade,texture and color to name a few.Thanks for sharing some wonderful ideas that I plan to try.You can only do so much importing photos into paint and colorizing them.


11:36 am on Jul 24, 2006 (gmt 0)

5+ Year Member

I'm generally pretty creative and have a good eye for design, but I've given up trying to do graphic design tasks. Why? Because a good graphic designer can do those tasks SO much better than I can. Graphic design is a lot more complicated than knowing a little bit about the tools used. Even for a good designer it takes a lot of time for each design, after years of study and exceptional skill.

What I am capable of is knocking off a design. So if I didn't have access to a designer, I'd go looking for something I liked and then I'd tweak the concept and run with that.

But if you can, hire a designer - it will be money well spent. But be very careful - don't just hire someone you know who's a designer (print designers ususally aren't much good at web design and some "web designers" think breaking up a large graphic in photoshop = design). So look at lots of examples of their work and don't hire them unless you want your site to look like others they've done. And then give them plenty of time (and money) to do their work. Graphic design is something where you get what you pay for.


1:17 am on Jul 28, 2006 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Everything that applies to print media has relevance to the web in some form or another. It's still a rectangular medium, there are still important issues to grapple with in reference to color GAMUT and output resolution, especially if your images/designs are required to traverse these media, and the artistic concepts of design all apply. So do not eliminate print media resources simply because it does not specifically apply to the web.

All the tools mentioned here are important ones, but what is **REALLY** important to remember is it's not the tool or the means, it's the idea or design that makes the thing work, not the tools. Recall that Piet Mondrian developed a whole branch of art based on primary colors and geometric shapes; these were his tools. A good artist does not need the latest and greatest to create profound pieces. So do not expect a tool to produce ideas for you, if you don't have any ideas, very little of value will come of it. Which brings me to . . . my pet peeve (sorry oaktown:) :-)

But the key to PhotoShop is FILTERS.

This is not creativity, this is button-clicking. There are far too many sites or images that present no new creative imagery and just allow a filter to do all the work. Personally, I shy away from using filters at all because I feel like I'm cheating. And if I feel like I'm cheating, the design is sure to show it.

Fractals are a perfect example: they are undeniably beautiful patterns, but they are not art, they are not creative, they are the result of mathematics. Art is an expression of the human condition <oops, time to STEP AWAY FROM THE SOAPBOX! :-) >

The last tidbit I'd throw in here is that all of these tools work differently; they paint to the screen differently, they have different applications, and they react differently to the various possible modes of input: tablet, mouse, keyboard. Discover which does what best so you can apply the appropriate tool to the task and learn how to allow them to interact.

For example, Freehand is Macromedia's answer to Illustrator, a vectored art program. I use it over Illustrator because I can afford it. :-) Vectored art can cross between screen and print resolution with very little modification, without having to reconstruct a version for each application. Important to consider if you have a logo design that needs to do precisely that, render at 300 DPI for print and 72 for web. But more importantly, the tools operate differently: there are drawing methods you simply cannot DO in anything but a vectored art program.

One of my favorite drawing methods may surprise some of you: Flash is generally used as an animation program to generate Flash objects. But I LOVE the simple drawing methods in Flash! Lately I have been doing a lot of it, never intending to animating the work, then dropping it's output into another program, such as Photoshop or Freehand.

So bring your ideas to these tools, learn the tools well and what each has to offer your ideas, and let each one do what it does best.


Featured Threads

Hot Threads This Week

Hot Threads This Month