How do I make graphics for my website?

Community Forum - Web Building

New here? If you'd like to participate, join us. If you're already a member, log in.

share  subscribe
Back to Web Building

How do I make graphics for my website?

  • rated by 0 users
  • This post has 8 Replies |
  • 0 Followers
  • Where do I start if I want to put graphics on my website?
  • This answer was authored by guest guide Tom Dawson and posted with Gayle Pyfrom's permission.<:LINEBREAK:><:LINEBREAK:>Used properly, graphics can be used to make your web site more interesting, and to help communicate your message to readers more effectively. Web graphics can also have a negative impact on your site. If web graphics are not designed and processed properly, the result can be long download times, distorted colors, and lost or unhappy visitors.<:LINEBREAK:><:LINEBREAK:>A good rule of thumb is to design web graphics for the "lowest common denominator" user. Unlike print designs, the Web gives you very little control over how your work will be viewed. Your reader may be looking at your pages on a brand new PC with a large monitor and a fast Internet connection, or they may be using a five-year-old Macintosh laptop with an 11" screen and a dial-up modem.<:LINEBREAK:><:LINEBREAK:>For your site to look as good as possible, design your web graphics for a user with system requirements similar to this example:<:LINEBREAK:><:LINEBREAK:>56k dial-up Internet connection<:LINEBREAK:>256 colors, 14" display<:LINEBREAK:>800 x 600 screen resolution<:LINEBREAK:>Version 3 - 4 of Netscape Navigator, Netscape Communicator or Microsoft Internet Explorer<:LINEBREAK:><:LINEBREAK:>Color choice is different for the Web than for print. Many computers are set to display 256 colors, so use 256 colors or less. Photos should be saved in an adaptive color palette, and drawings should use the Netscape Web color palette. Image-creation tools like Photoshop and Fireworks can help you to tailor your graphics for the web. Webmonkey's One Day Fireworks Tutorial may be helpful.<:LINEBREAK:><:LINEBREAK:>Finally, make sure you select only graphics that are necessary to achieve the goals of your site. Unnecessary graphics only add to the download time of your site, and detract from your message.
  • On the graphics front... I think Macromedia's Fireworks program is an extremely good program for beginning Web designers. The learning curve is much shorter than that of Photoshop. However, if you are already familiar with Photoshop, it shouldn't be hard to make the transition to using the Photoshop/Image Ready combo. While I haven't gotten a chance to use the latest Photoshop 6.0/Image Ready 3.0 combo, I would imagine it is even better than the 5.5/2.0... As far as preparing photographs for the web, I would have to say that Photoshop is the superior product, but Fireworks is gaining ground (esp. with the lastest version 4.0).
    <:LINEBREAK:>As an aside, cost may be of concern:<:LINEBREAK:>You can get discounts on Photoshop 6/Image Ready 3 from Gifts In Kind. Qualified nonprofits can obtain Dreamweaver 4/Fireworks 4 as a donation from Macromedia (The application is available from TechSoup).
  • Paintshop Pro is another easy to learn program that is fairly affordable, although I don't think they have a gift-in-kind option. I've been using it for about 5 years now. I tried Photoshop a couple times and it was just way too involved for me. I keep going back to Paintshop. The nicest part about Paintshop is that there are a ton of tutorials and user groups full of folks willing to teach you for free or share already created "tools" with you for free. You can download a cripple-ware version of it to demo, so you get to try before you buy. The company that created it is JASC (http://www.jasc.com/), and is just one of several programs they offer depending on how involved you want to get in your graphic design.
  • Regarding color choice, lynda.com has a great chart of "web safe" color splotches, complete with the various values you might use in html or image editing programs (hex, rgb, etc). You can see the splotches organized by hue or value.
  • Because I'm all about free, I use GIFWorks -- http://www.gifworks.com/ -- an on-line tool that works to edit and optimize graphics for the web. The interface is familiar -- the file, edit, etc menu bar of every Windows program in existence -- and, of course, it doesn't have the heavy-duty firepower of the programs mentioned in this thread. But free is a good and convenient thing. If your image making needs basically have to do with cropping and optimizing, give GIFWorks a shot.<:LINEBREAK:>(I found it via Media Builder -- http://www.mediabuilder.com/ -- which is a nice resource of fonts, images, etc. It includes the annoying animated stuff but you can get past that).<:LINEBREAK:>-gorick
  • I agree also that Macromedia Fireworks is great for creating graphics from scratch. If you need someone to do it for you, try www.creativetextures.com. They do great work.
  • Hi, I work for a small nonprofit in NJ, and I'm an "accidental" web designer. I'm also looking for some graphics tips. I've read some great books, and I have Photoshop & all the software tools I need. I've sat down and come up with a plan and visual scheme for this new site (I'm redesigning one), but I don't know where to start! To put the plan in place I don't know whether to use tables or create graphics in Photoshop. I want a consistent color across the top and down the left side, and a graphic in the middle. Any tips??
  • Thanks--that's a great site with tons of resources. I'd recommend it to anyone who's lost in Photoshop like I am!
Page 1 of 1 (9 items)