Reminding you of the web graphics things that you already know but hadn’t thought about in a while
Photoshop Image - Know and use your tools to your benefit
- Use anti-aliasing settings turned on whenever possible. This will allow the program to blend the edges for you while you’re still creating. This works MUCH better when working with JPG images. It is NOT so useful if yo’re trying to create a transparent GIF file. In that case, you can try creating your image and saving it as a transparent PNG file. Unfortunately these images are usually pretty heavy, but sometimes the size tradeoff is worth it.
- Remember how much space you REALLY have to work with. The more you try to stuff into your graphic, the more space you need to make it clean. Try to keep your graphics simpler if you’re starting to get a messy look to the graphic. Subtle nuances are a good thing, until they overpower the focus of the image itself.
- I’ve found that using the HTML text in pages can often come out much cleaner than doing a graphic with the text embedded in bitmap format – and it’s also much better for SEO. The title of this page is done in HTML rendering, not as part of the background image. It came out much much cleaner that way for me – no jaggies. And really a lot smaller than creating separate graphics for each page. Also examine creating some of your images in Illustrator or another vector based application.
- Try to create the graphics in the size that you think you’re going to need to begin with. That is to say, if you are going to be using a graphic of 400×120, don’t create it at 800×240 and then reduce it later. It will always get “dirty” when you resize it. You can offset that by using something along the lines of the “Unsharp Mask” in Photoshop to tighten up the edges and such, but you will always lose quality.
- Getting the original in exactly the right size usually doesn’t happen. Like when you get original images from one of your clients at some oddball or very large size. Resize the images before you begin bringing them into your file. If you get picture A at 3200×2400, do the resize right off the bat to 800×600, Unsharp mask it, and then copy/paste or import the picture at the right size. You’ll save yourself LOTS of headaches.
- Learn the capabilities and limitations of your tools! That is very important. Many graphics programs are the “jack of all trades” type programs. They do a ton of things, but none of them particularly well. While I could resize my pics via IrfanView, it’s much preferable to do it in Photoshop. Likewise, when browsing for pictures, I would use IrfanView and not the internal Photoshop browser. PS’s browser is not bad, but I prefer to use programs for their best abilities. I tend to use several different programs while working on images, but most frequently, it is Photoshop. Illustrator is useful too, but I’ve never become quite as friendly with Illustrator as I have PS. Just learn your primary tools well and work with them and explore different ways of doing things. There’s ALWAYS more to learn and no single way of doing anything is the final answer.
- Check out other people’s work. Don’t get rutted out in the same way of thinking all the time. Go dig around art sites, graphics sites and other web sites in general. Check out how different looks may be achieved. Check out blending. Like above, remember, there are so many ways of doing anything that there is never a single best way for most things. There is not a single “BEST” graphic design artist out there. Learn something from any and all of them whenever possible.
- Take some time to just experiment – not just when youj’re working on a project. I frequently will spend a few hours every couple of weeks just toying with new filters and new ideas. Sometimes I have seen an image I like and try to duplicate it using my existing knowledge. I frequently find that my existing knowledge DOESN’T always allow me to duplicate an effect. And THAT leads to a new direction that I need to follow to get to the desired destination.
- Keep a log of what you have done. Particularly when it comes to working with a client’s graphics. There is nothing worse than having a way cool set of graphics that you have created several months ago, and then discovering that you need to redo a small chunk. What colors did I use here (before they were blended, highlighted, etc)? What font is that? I know I used these 5 effects to get there, but what order did I do it in? It still doesn’t look right. I tend to keep text files along with my basic web images that trace what I have done for particularly touchy effects. Sometimes the graphics are pretty straightforward, but sometimes they get a little more complex. Just keep a text file that traces what you’ve done so that you can recreate it in the future if needed. Saves you MUCH time.