Knowing Web Graphics Tools - Getting Your Education - Getting a Web Development Job For Dummies (2015)

Getting a Web Development Job For Dummies (2015)

Part III. Getting Your Education

Chapter 14. Knowing Web Graphics Tools

In This Chapter

arrow Discovering key tools for web graphics

arrow Exploring Photoshop and GIMP

arrow Getting to know Illustrator and CorelDRAW

arrow Becoming familiar with InDesign, QuarkXPress, and others

Web development tools are a vital part of any career in the field. It’s far easier to get work done using tools that you already have experience with. Your expertise in making a given tool “sing” can sometimes get you a job. Your skill with a specific tool can even seem more important than the skill you have in the actual discipline that you’re using the tool for!

A major hurdle to getting a web development job is often whether you have experience, and just how much experience, with one or more tools that are the standard in a given workplace.

This can lead to a major “chicken and egg” problem that’s a version of the age-old work-related quandary: You can’t get a job if you don’t have experience, but you can’t get experience if you don’t have a job.

With tools, you can’t get a job using a tool if you don’t yet have experience using that tool, but you can’t get experience using a tool unless you have a job using it.

In this chapter, we start by describing how to get experience using a tool, and then give brief descriptions of some of the major graphics tools used in web development. In Chapter 15, we tackle website development tools and content management systems.

The lists of tools and their descriptions will help you decide how to target your learning efforts.

Getting Experience with Web Dev Tools

Here’s a quandary: You need experience using a tool to get a job, but the main way you get experience using tools is via on-the-job training. Tied to the problem of getting experience using a tool is how to get access to the tool itself. Many web development tools are very expensive, such as up to $1,000 for a major tool like Adobe Photoshop.

We discuss the major ways in which you get experience using tools and how, within each of these different approaches, the issue of getting access to the tool itself is usually handled.

College and university programs

College and university programs are great ways to learn how to use the major tools in a given web development discipline. You can even get for-credit courses in using major tools like Photoshop or InDesign.

It’s kind of wonderful and annoying, all at the same time, to take a course in how to use a tool. It’s wonderful because you can really give the tool some focused time, learning all the tips and tricks. It’s annoying because courses are usually taught to the less experienced and slower-to-learn people in a classroom setting. If you already have some experience with a tool, or are just quick to pick things up, waiting for the class to get around to teaching you something new can feel like watching paint dry.

tip.eps If you’re really not getting much out of a course, you’ll have to move on. But when in doubt, hang in there. The information in a course is valuable, but so is the structure it’s delivered in. You see how professionals communicate information so that other people can absorb it better, and how each new concept depends on previous ones. You can use this approach in working with colleagues. The contacts you make when taking a course are also worthwhile, especially if you’re “head of the class” and can help other people out.

tip.eps Try to spend a good chunk of your time on tool-related courses. Each tool you learn can make a difference in the job world later.

Another great feature of college and university courses concerning software tools is that they normally offer free or very low-cost access to tools that, out in the real world, are quite expensive. Employer policies vary, but most web design professionals like to have personal licenses for the tools they use the most. Colleges and university offerings often include access to key tools not only while you’re in college, but a way to “graduate” to continued low-cost licensing afterward. Check into this carefully.

Many key web design tools are becoming available on a monthly licensing basis. The licenses, although they can add up to a fee that’s expensive over time, allow you to get through periods when you’re between roles — such as after you leave school, but before you start work — without having to consider spending thousands of dollars for new permanent licenses for key tools.

Online courses and self-study

There are now a plethora of online courses available for major software tools, and you can use a book — or online resources that you stitch together — to develop your own miniature curriculum as well. This approach can end up being somewhere between the structure and networking potential of a college or university course (see preceding section) and the more haphazard approach that most of us take to on-the-job training (OJT; see the following section).

The difference between self-study and OJT is that self-study is time that you consciously set aside to delve into the workings of a software tool, without being driven by needing a particular trick or technique for the work immediately in front of you. Being able to spend a few hours in this more exploratory and reflective learning mode every so often, for each of the tools you use, is extremely valuable. It also makes you more productive and increases your feeling of satisfaction with your work.

tip.eps If you know a certain genre of software, you can pick up a different program in the same genre pretty easily through online courses and self-study. For instance, if you know Photoshop, learning the freeware alternative GIMP is not that hard. Quickly learning the key points of one new tool by using your knowledge of an existing tool of the same type is often a good technique to use to get up to speed before a job interview or the first day on a new job, but learning your first program of a given type requires more effort and commitment, such as an in-person course.

Using self-study is also great when you are trying to learn about a tool — that is, exploring whether it’s something you want to add to your personal toolkit. You’ll often want to do this kind of exploration before committing to either purchasing a tool yourself or — perhaps just as big a commitment of your personal resources — getting your corporate IT department to approve it for purchase.

Figure 14-1 shows a list of online learning resources for CalJOBS, an employment website for California. You can start checking out the CalJobs site at


Figure 14-1: CalJOBS gives you a list of online learning resources to help you get a job in California.

The licensing situation for online courses and self-study is often poor. Many tools give you a free month, for instance, of using a tool before you buy it. That’s helpful, but it leaves you rushing to do your experimentation or use it before the month is up. And you might then have a difficult decision to make as to whether to buy the software or give up on it.

Having monthly licenses available, as more and more web design software does, certainly helps. But there’s no ideal solution for getting new tools into your personal toolkit.

On-the-job training

Many of us learn to use key tools by messing around with them in the process of doing our work. This is usually accompanied by occasional questions directed at colleagues, extensive use of the Help system for the software in question, perusing of YouTube videos on the topic, reading of books on the topic, and extensive searches of online bulletin boards used by people experienced with the software.

On-the-job training (OJT) is a great way to learn things, and it’s the default method for a lot of software education. However, because you’re picking things up as you go along, you don’t know what you don’t know. There can be entire approaches to using a tool, or key tips and tricks, that you simply never run into if OJT is all you have.

tip.eps We suggest augmenting OJT with an online course or a book. Either will give you the outsider’s perspective and collected folklore needed to take your use of the tool to the next level.

Because OJT happens in a work environment, the licensing situation is usually pretty good as well. Major tools should be covered by site licenses such that everyone who needs to use a tool has it, and everyone is on the same version.

Figure 14-2 shows a list of on-the-job training and apprenticeship programs for the U.S. Department of Veterans Affairs, widely known as the VA. You can find the list at


Figure 14-2: The VA has a list of on-the-job training and apprenticeship resources.

warning.eps Corporate IT often tries to save money by limiting licenses tightly, not upgrading to a new version of software, and so on. There is also often limited internal support for tools beyond the core office productivity suite. It often comes down to the company saving a few thousand dollars while people who are, as a group, making millions of dollars a year in salary are slowed down or stopped in their work. Coordinate with other web development professionals in your workplace to call attention to inadequate licensing and support policies, and get them fixed — or consider moving to an organization that can make these basic necessities available to you gracefully.

What is often challenging at work is getting the tools that you use at work, especially the latest versions, onto your own personally owned computer that you might prefer to use for some work at your job, as well as for side jobs outside the main workplace. Try to get support for licensing that lets you use all the tools that you can bring to bear, including your own personal computer(s), to do the work that’s in front of you.

Getting to Know Key Tools for Web Graphics

There are scores of popular tools for web design and hundreds of less-popular ones. In fact, the range of tools available is basically endless, as people will write their own tools, tweak open-source programs, create libraries of templates and samples, and take other steps that can make the learning curve for working in a new environment into something more resembling a cliff.

In order to bring some order to the chaos, we’re going to use Adobe’s Creative Suite as the organizing spine for much of this discussion. Adobe has tried to become a one-stop shop for design of all kinds and web design in particular. By using their software catalog as a starting point, we can help give you the insight needed to steer your own way through the maze — and through the maze of jobs at workplaces that favor particular sets of tools.

Photoshop and GIMP

Photoshop is the granddaddy of all web design tools. It’s the leading raster image-editing software program. Er, what does that mean?

Raster means that, to Photoshop, an image is a collection of pixels. Each pixel can be entirely unrelated to all the pixels surrounding it. Photographs are inherently well-suited to manipulation with raster image-editing software.

Suite news from Adobe

Part of the advantage that Adobe has cultivated in building up its Creative Suite of collected design tools is the advantage that Adobe offers software buyers of having a one-stop shop for core tools. As Microsoft did when it created Microsoft Office, Adobe can offer bundle pricing, unified upgrade cycles, unified technical support, and so on. Adobe saves money by sharing a lot of its internal functions, such as marketing, sales, and support, across many tools, yet can charge a premium price for mainstays such as Photoshop.

Adobe has moved to a monthly pricing model for its core applications. This is a great boon for freelancers, both full-time and part-time. It prevents previously agonizing situations, such as working in an older version of Photoshop because you didn’t want to spend the money (and, perhaps, invest the training time) for moving to a new version. With monthly subscriptions, you do have to move to new versions right away — but so does everyone else who’s using the subscription model. You have to invest the time to get trained, but you know you won’t be odd person out. (Nor will you be likely to have to work with other people who are.)

At this writing, individual options include $9.99 per month (with a year’s subscription) for Photoshop; $19.99 for any major Creative Suite application, plus a portfolio website and cloud storage; and $49.99 a month for Photoshop, Illustrator, and other applications, plus the portfolio website and cloud storage. There is also a special, with this last offer on sale for $29.99 per month.

The one-year commitment is a real hassle if you’re between jobs or otherwise expecting to get paid-for access to the apps in the near future. However, the yearly option is still much less of an expense up-front than buying one or more applications as new software.

To illustrate this, imagine a photo of a man with short hair. Then imagine that you wanted to make him look bald. If the man’s hair, for instance, were an object, you could select it and remove it. But it isn’t, and you can’t.

Core Photoshop functionality allows you to edit each and every pixel of the photograph to replace pixels that portray hair with pixels that portray either background or skin. Lots of shortcuts built into Photoshop allow you to more easily select the pixels you want to get rid of and to smooth the existing background, for instance, into the areas where the hair sticking up from the head has been removed. But you’re still working on pixels. Editing images with Photoshop is often slow and exacting work.

Photoshop is a beast. The program itself comes with scores of additional tools. You can buy add-ins and plug-ins and extensions. It really is the core of a suite.

Photoshop is the number-one tool for all kinds of design professionals, including nearly all web designers. Photoshop is an excellent tool for mocking up example pages for a website. (And yes, ironically, in doing this work, you’re using a lot of vector-type tools.)

After the page is actually created in HTML and CSS, you can grab parts of your page mock-ups created in Photoshop and use them as images within the page.

warning.eps Don’t try to do web design work without learning at least the basics of Photoshop. The product’s name is even a verb; when you want to make an image look better, or to make it deceptive, you “Photoshop it.” Take the time and effort to learn how to Photoshop it.

tip.eps Neither of the authors of this book, much to our embarrassment, has ever learned Photoshop past the beginner stage. We are each expert in a number of tools, and competent in others, but — past the very beginning stages — Photoshop has baffled us.

Although other tools can be learned casually, Photoshop is challenging, and most potential heavy users need various kinds of training. If you’re a potential Photoshop user, or already using the tool, set aside time for training and improvement.

warning.eps If you’re interviewing potential candidates for a web design job, drill down on Photoshop experience. If Photoshop is a key tool for a given job you’re hiring for, don’t be afraid to test for competency before hiring someone. And if you’re the candidate, be ready to be challenged on the details of your Photoshop expertise.

There’s also a huge marketplace around Photoshop for training and support.

And, finally, there’s Photoshop Elements. It has a great deal of the functionality of Photoshop, but costs less than $100. It’s a great way to learn, to get through spells where you don’t have a current Photoshop license, and to introduce others to the Photoshop world.

tip.eps Open-source tools are very popular in government agencies, where “free” is a popular price tag, and where there are resources to provide training and support that might otherwise be lacking for free tools.

GIMP is an open-source alternative to Photoshop. It’s free! One great thing to do when you have a gap between jobs is to learn GIMP. Learning GIMP gives you a tool that you may be able to use for freelance jobs rather than buying a Photoshop license, it increases your overall expertise, it helps you get jobs where GIMP is an alternative (Photoshop is still almost always the standard), and it gives you an alternative once you do get a job.

Figure 14-3 shows the training page for GIMP on the state of Nevada’s website:


Figure 14-3: You can get GIMP training resources from the state of Nevada.

GIMP does not directly support Pantone colors. Pantone is a color standard that makes colors reproducible across different media. GIMP also lacks the training and support options of Photoshop. However, it’s a solid enough alternative that its popularity continues to grow.

Building expertise on tools

One way to make a name for yourself and to stand out in your work is to become an acknowledged expert on a tool, or some aspect of a tool. Develop a lot of expertise and then create a blog, write articles, give talks, and respond to inquiries from the trade press. This will contribute greatly to your employability and your salary.

To do this successfully, you have to look for a good opportunity that suits you. For instance, there are already many experts on Photoshop who have written books, led training sessions, and so on.

However, because GIMP is newer and free, there’s more room for people to become acknowledged experts. For instance, you could create a blog focused on GIMP use by students or freelancers.

If you find a tool that you really enjoy, consider taking on an expert’s role of this kind.

Adobe Illustrator and CorelDraw

Illustrator is the most-used tool for vector graphics — that is, graphics where each part of the image is considered an object. The biggest alternative is CorelDraw.

Technically speaking, in raster graphics, the image is, at bottom, a collection of color values for each and every pixel in the image. The image has a specific size and resolution, such as 1280 x 800 for a screenshot of a typical laptop. In vector graphics, the image is, at bottom, a collection of objects such as lines, circles, fill colors, and fill textures. The image can be displayed or printed at any size or resolution, without affecting the underlying image.

The two leading tools for vector-based graphics are Adobe Illustrator and CorelDraw. Illustrator is the leader, more expensive, and more widely used.

Adobe, to its credit, has done a lot of work to keep Illustrator easy to use while adding features. It’s seen as the easier to use of the two tools, and at the same time the more functional, which is not an easy combination to achieve.

Figure 14-4 shows the use of Illustrator as a standard format on the National Parks Service’s website: Note that the editable versions of files are in Illustrator format. (The PDF versions, the other alternative, are not editable.


Figure 14-4: The National Park Service uses Illustrator as a standard format.

CorelDraw is the tool that a lot of people started on because it’s less expensive than Illustrator, and was for a long time considered easier to use as well. CorelDraw has added a feature called lenses to handle opacity and related requirements, which is considered to be difficult to use.

CorelDraw also faces the issue that always bedevils less-used software, which is that most clients and major design houses want files in Adobe Illustrator format. Although CorelDraw can save in Illustrator format, there are always potential problems, such as the user forgetting to save the file in the non-native format or encountering conversion problems with the files.

tip.eps Many web designers use both a raster graphics program (such as Adobe Photoshop or GIMP) and a vector graphics program (such as Adobe Illustrator or CorelDraw). There are real ease of use, support, and updating advantages to using the two Adobe programs together, which of course is Adobe’s intent in building its product lineup the way that it has.

Although it’s useful to know both programs, you can probably get through most of a career using just Adobe Illustrator. If you already use Illustrator, consider investing time and energy to get better at Illustrator and/or Photoshop. If you already use CorelDraw, consider looking for ways to add Illustrator to your toolkit.

Adobe InDesign and Quark Xpress

Page layout for the web is a fraught and highly contentious topic. There are two main reasons for this:

· Web pages are displayed on such a wide range of layout that the promise inherent in trying any kind of complicated page design can be more unhelpful than helpful.

· Browsers are so inconsistent that the displayed results for any kind of sophisticated page design are more likely to promote multiple rounds of debugging than further creativity and substantive improvement.

Adobe’s history in this area is also complicated, and in a way not completely helpful to users. A small company called Aldus had a program that was very popular in the early years of web development called PageMaker. Adobe bought the program, continued upgrading it for several years, and then killed it in favor of InDesign.

Quark Xpress might be the strongest competitor to any of Adobe’s Big Three — Photoshop, Illustrator, and InDesign. InDesign has gradually become a good program, after years of being, well, non-essential. But to many, Quark, as it’s called, is the Photoshop of web page design; powerful, capable, interesting, fun to use, and well-supported by formal and informal training materials.

Figure 14-5 is a page that hosts U.S. government brochures designed in Quark Xpress:


Figure 14-5: The U.S. Federal Agency for Healthcare Research and Quality specifies layouts for brochures in Quark Xpress.

Unlike raster or vector illustration tools — that is, unlike Photoshop or Illustrator — when it comes to page design, you can’t reasonably hope to coast through your career using only the Adobe tools. If web page design is a prominent part of your career, you may well have to learn both InDesign and Quark. And, unlike the situation with the other two categories, neither InDesign nor Quark is particularly affordable, easy to use, or fast-performing.

Unfortunately, you probably just have to develop expertise on one of these programs early in your career, and be ready to add the other one later.

Investigating Additional Adobe Tools and Others

Adobe has a few other category leaders, or at least strong contenders, to be aware of:

· Lightroom: Lightroom is basically a replacement for the Macintosh Finder or Windows Explorer for graphics files, and is well-regarded on both Mac and Windows.

· Premiere Pro: Premiere is the leading video-editing tool. There’s a light version, called Premiere Elements, for under $100, just like with Photoshop.

· AfterEffects: Great for special effects for video, for creating titles and credits, and adding motion graphics.

There are also some key non-Adobe tools that are leaders in their categories that you’ll need to know:

· Avid Pro: The “high-priced spread for sound editing.

· ProTools: The most widely used sound editing package; often taught in schools.

· Blender: A powerful open-source animation tool. Did we mention it’s free?

· Final Cut: Powerful video editing software.

There is a huge range of alternatives, add-ons, and extensions to the tools described in this chapter. However, knowing the tools described here will give you a skeleton of the major categories of web design tools and a starting point for discussion and learning in every category.