Pick one or two images which strike you and drop them into Photoshop or GIMP. A thumbnail is fine in a pinch, but you'll probably want an image a bit bigger than the thumbnail. Don't use photos with a watermark, as the watermark will affect the palette output. Once you have an image with colors you like, say, opened up in Photoshop, go to Filter Pixelate Moziac (in GIMP, just use the Filter Blur Pixelize filter) and use the filter to render the image into huge pixels. The larger the cell size, the fewer colors you have to deal with, but unfortunately, the more muted the colors become.
The last tool that I'd like to mention is an image editor. While you can certainly do plenty of cool enhancements with pure CSS, chances are you'll want to expand on your WordPress design and jQuery enhancements a little more by being able to add some slick visual elements such as cool icons or custom backgrounds. These are best achieved by using a graphic editor such as GIMP, Photoshop, or Fireworks. If you're on a budget and in need of a good image editor, I'd recommend GIMP. It's available for PC, Mac, and Linux. You can get it from http gimp.org . I personally use both, a bitmap image editor like GIMP or Photoshop in conjunction with a solid vector drawing program like Inkscape. I find it is often necessary to use both types of image editors together to create most of my site designs and effects.
If you don't want to use Photoshop, GIMP can again easily handle this task for you. Simply open up your largest icon file and then copy and paste each additional resolution into a New Layer within that file. Then follow GIMP's Save As options to save it as a Windows Icon *.ico file. I've found Dave's article on the Egressive's site as a wonderful reference for putting a multi resolution, transparent favicon together using GIMP
To add an image to a post, first you'll need to have that image on your computer. Before you get ready to upload an image, make sure that your image is optimized for the Web. Huge files will be uploaded slowly and slow down the process of viewing your site. You can re-size and optimize images using software such as GIMP or Photoshop. For the example in this chapter, I have used a photo of butternut squash soup that I have taken from the website where I got the recipe, and I know it's on the desktop of my computer. Once you have a picture on your computer and know where it is, follow these steps to add the photo to your blog post
While you might find this approach a little strange at first, it's by no means set in stone as the only right way to design Simply read through the chapter and, even if you already have a polished Photoshop or GIMP mockup, go ahead and try to set up your XHTML and CSS mockup using the steps laid out in this chapter. You may find it helps your process. Photoshop, GIMP, and image editors have no display limitations. They were made to edit and enhance digital photographs and create amazing visual designs. They can handle anything you lay out into them, be it realistic for CSS or not. They were not designed to help you effectively manage layers upon layers of text that would be best handled with global stylings 8. Visual design Relax and have fun in GIMP, Inkscape, Photoshop, or Illustrator (I often use a combination of a vector editor and bitmap image editor) to create the graphical interface elements that will be applied to this layout over your screenshot. Perk If the client has text...
This technique is very useful if your site is going to be mainly controlled by a client, as they'll probably have to let you know every time they make a new header that needs to be a graphic loaded in via CSS. You'll be able to accommodate them on-the-fly (or even better, teach them how to do it), as opposed to having them wait for you to generate the graphic with Photoshop or Gimp and then implement the CSS.
Using the free open source vector editor Inkscape (http inkscape.org), I made a calendar background icon that can have the day's date up top in red and the three letter month below it. The icon is about 32 pixels square. You can use whichever graphic program you prefer, GIMP, Photoshop, Illustrator, and so on, to create a similar icon, or you can probably find a royalty-free image on the Web.