Top of the Web Designer site

Tools commonly referenced in “Designer Wanted” articles often include inDesign, Illustrator, and Photoshop. I’m going to take for granted that the reader already realizes the purpose of inDesign as a print media platform, and more narrowly focus on the use of Illustrator and Photoshop in design.

By definition, Illustrator’s output files are vectors, meaning that they are saved differently than Photoshop’s. When resized, they lose less of their value because they are saved as points and curves, whereas a Photoshop file would lose much of its value as its resolution became bigger as it would become more and more pixellated or “fuzzy”. For more information (and probably a better definition of what vector artwork is), please view this page.

Of course, you can use any range of image editing software that you wish, whether GIMP or your choice of vector program, but as a designer I have found Adobe’s programs more intuitive and thus have continued to use them for years. As such, I will focus on these two programs by name.

I want to edit this great image of my family, and…

Photoshop! Images which involve photographs or other bitmap-type images are best edited in Photoshop. Note the “photo” in Photoshop – originally, Photoshop was not created in order to do digital painting or create web graphics; it was originally for photographers to edit their work digitally.

I want to create web graphics such as a logo.

Logos are often resized several times – bigger for that banner, or made to be itty-bitty for that business card. As such, they are a project for Illustrator. Illustrator allows a large variety of tools for working with fonts and especially shapes – which certainly comes in handy for logo design or making shiny buttons for your contact form!

I want to design the wireframe and mockup for a site before coding it.

Admittedly, there was one point in time in which I used Photoshop in order to create web design mockups. However, as time went by, I began to migrate to Illustrator. I found that I could vector out the graphics for the main site on the side, and then add them to the design as I went. Additionally, I found that Illustrator’s various tools made the process intuitive whereas Photoshop’s added more and more time to the wireframe process. So, I am definitely going to recommend Illustrator for this.

I want to do digital illustration.

Depending upon the type of illustration you do, this question can be for either program. If you wish for it to have a more “web 2.0″ look or a cartoony look, I would recommend Illustrator, whereas if you wish to go for a realistic and painted look, I’m going to suggest either Photoshop or another digital painting program.

This post is a brief overview of the features of both programs, and I purposely chose to not go into great detail. Instead, the point is to clarify where each program should be used by newer designers. For more information on the importance of Illustrator in design, please view this post.

Many newer designers are constantly complaining to me that they don’t understand Illustrator or find it difficult to adapt to. I understand this complaint; there is certainly a learning curve to each of Adobe’s programs, but I think that the quality of a designer’s work will definitely skyrocket once they begin to learn which program works for which project.

Raster-based graphics are not meant to go in the Web, unless of course they are of photograph quality. Likewise, having an inflexible canvas is helpful when designing beyond the “fold” – that is, designing more than just the initial screen of a design. Additionally, I’ve found the flexible canvas of Illustrator to be helpful in designing entire sites. With multiple artboards (CS4 only), I’m able to select one artboard or another and design on them in order to keep every single page of a design in one single file or document.

Meaning, Photoshop certainly has its place in the digital world, but Illustrator, I think, has a much stronger place in website media :)

  • Share/Bookmark

Leave a Reply

CommentLuv Enabled
Top of the Web Designer site