Join James Williamson for an in-depth discussion in this video Choosing a graphics editor, part of Introduction to Web Design and Development.
- In addition to needing a powerful code editor you'll need good graphics editing tools if creating web graphics is part of your job description. Web graphics have their own specific needs and restrictions that can make creating them with traditional tools a little challenging. I want to give you some of the features that you'll need to look for when creating web graphics. Now first, you're going to need to create both vector and raster graphics. Vector graphics are infinitely scalable, and they remain sharp at any resolution. Raster graphics, on the other hand, are tied to specific resolutions.
Having an editor that can handle both is ideal, but it's actually really not uncommon at all to use separate programs for each type of graphic. Since size is important on the web you'll need an editor that has powerful compression tools that can help you create smaller web graphics. Now obviously, the program should have support for formats like PNG, JPG, GIF and SVGs. However, not all export and optimization tools work the same so make sure you research how efficiently a graphics editor is compressing those web graphics.
Often, you'll need to develop web graphics or prototypes to display multiple states based on things like user interactions. Having a graphics editor that can create and display multiple states for graphics is ideal. Now unlike code editors the graphics editing field is actually a little less crowded. Most designers probably use one or a mixture of popular tools such as Photoshop, Illustrator, Fireworks and CorelDRAW. Adobe's Illustrator, Photoshop and Fireworks all offer very powerful tools for the creation of web graphics, and they're part of Adobe's larger creative cloud.
Now, Illustrator and Photoshop are probably going to be very familiar to most graphic designers, and those guys are really the industry standard for creating vector and raster graphics. Both feature powerful web graphic exporting capabilities. Now unfortunately, Adobe has stopped development on Fireworks, meaning that no new versions will be created, and support will eventually drop which is really too bad. For right now, however, it still remains a viable tool for creating web graphics. Now, the bottom line is if you're already familiar with these tools they're likely to be the tools of choice for you.
Now CorelDRAW, if you've never used it before, it's a graphics suite from Corel Software, and it features both vector and raster editing tools that allow you to create quality web graphics. Now unlike the Adobe Suite, however, CorelDRAW isn't web focused, and it lacks a program with Fireworks' capabilities, and it doesn't feature any type of integration with web design tools like Dreamweaver. While the larger commercial tools remain the industry standard, there's recently been an explosion of alternate tools that are designed to more closely meet the needs of graphics for the web.
Open source tools like Inkscape which you can find here at inkscape.org, and GIMP which you can find at gimp.org have been making steady gains in popularity as alternatives to Illustrator and Photoshop. However, I found that because they're open source tools support can be a little bit shaky, and there aren't as many tutorials and books to help you learn how to use those programs. Now the good news is that both of these are free, so downloading them and checking them out is actually not going to cost you a dime.
Sketch is another tool that's been getting a lot of attention lately. Sketch is a vector editing tool that's been designed specifically for the web and UI design. Now unfortunately it's MAC only, but for those of you on a MAC I recommend trying it out. I'm positive that over the next few years we'll continue to see new tools emerge that are focused on developing graphics for the web. Currently we seem to be at a moment where our work flows and needs as web designers has actually evolved passed the abilities of our current tools.
I don't expect that to last, however, so make sure you pay attention to new tools as they come out so that you can experiment with them, and adopt the ones that make your workflow more efficient.
This course is part of a Learning Path approved by the American Marketing Association.
Gain the skills you need to become an AMA Professional Certified Marketer (PCM) in Digital Marketing by using the industry-leading courses and resources in the Learning Path. Take the AMA certification exam to show that you have what it takes to lead the digital transformation.
- What is web design?
- What is a web designer?
- Learning to code
- Choosing a web host
- Working with a CMS
- Exploring how websites are structured
- Choosing your framework or software
- Designing with standards and accessibility in mind