If you’ve worked in design or worked around graphic designers, you’ve probably heard of Adobe Photoshop and Illustrator. The tech behemoth, Adobe, has a near-monopoly on this type of design software, making changes and additions each year. This has all culminated into the Creative Cloud suite, which houses all of Adobe’s top-of-the-line programs. While the programs seemingly do a lot of the same things, each program is specialized for the type of design you’re looking to achieve. Often, you will utilize both of these programs, especially when it comes to web design. Just like cookies without milk, you can enjoy one without the other, but together, they make an unbeatable pair.

Adobe Photoshop

Photoshop was launched in 1989, and has become a staple of every designer’s desktop since. It has become the preferred photo-editing tool across industries for everything from digitally popping pimples to faking a Coachella trip. The crux of Photoshop hinges on how it handles files – it rasterizes nearly everything within the document (with the exception of smart objects, but more on that later).

What is a raster file?

Have you ever seen an image that was stretched just a bit too big, causing the image to appear distorted and jagged? This is a raster file. Common raster file types include JPG, PNG, TIFF, GIF, and a variety of others. You’re probably thinking, “I’ve seen plenty of crisp JPGs.” This is because raster images don’t appear jagged if they’re in the correct scale; once things get too big, the file reveals the tiny grid of colored pixels it’s comprised of. This is similar to the way newspaper images are printed using halftones – just think of it as a bunch of tiny squares instead of circles.

Halftone vs. Raster Images
Halftone images (left) are made up of discrete dots instead of continuous tones. Rasterized images (right) are comprised of a grid of individual pixels.

Raster and Screens

All screens are defined by the dimensions of their pixels. Whether it’s the 1080p resolution on your 30 inch desktop or the iPhone X’s 734px x 1334px dimensions, you end up with a crisp 326 DPI. DPI, which stands for “dots per inch,” translates to how many pixels are packed into each inch of a screen or image. This affects the resolution directly and is often the culprit of the jagged edge. For all web applications, the rule of thumb is 72 DPI.

It may seem odd to think of screen size as thousands of tiny squares, each boasting a slightly different color that can create a flowing rainbow or a seamless gradient, but that’s how it works!

This is great for web design, since we can utilize pixels to take exact measurements of elements and containers on-screen within the design software, and transfer it over to the development team, who code out from the Photoshop Document (PSD). It is preferable to work this way because of the seamless hand-off between design and development. Plus, the end result is pixel-perfect!

Workflow

Beyond the convenience of working with raster-based files, Photoshop has a complex variety of filters, transparency settings, and editing tools that Illustrator doesn’t. This type of specific styling can help take your design to the next level, allowing for greater illusion of depth and realism.

Photoshop also operates in tandem with layers. This can be both a blessing and a curse, depending on how organized you are. It is of the utmost importance to always organize your PSD files, since designing websites can get extensive. Sometimes, you can have a thousand layers in just one file. As a result, grouping isn’t always enough; you have to be deliberate in naming the groups you make because one hour and 100 layers later, you won’t be able to find anything! Grouping layers can also be a helpful tool for moving entire sections and creating different iterations that you can flip on and off, or iterate multiple banners that will slide through a rotator.

Adobe Illustrator

Surprisingly, Illustrator launched two years before Photoshop in 1987. It has continued to evolve into one of the most useful tools in a designer’s arsenal. It is primarily used for logo creation, wireframing, and designing large-scale graphics. While this may seem like an odd variety of uses, it only speaks to the versatility of the program. Illustrator is vector-based, making it perfect for obtaining clean lines and slick graphics.

What is a vector file?

As the advent of responsive design has become more and more necessary, we have seen a proportional rise in the use of vectors. These can take form as a variety of file types, but EPS and SVG are the most common. A vector file is defined by coordinates and lines, as opposed to individual pixels. There is a big advantage here – the coordinates maintain the relational properties of the form. This allows these file types to be used at 10px or at 10ft without losing image quality. They are infinitely sizeable and are the best practice for things like icons and logos.

Vector Image
Vector images are made up of definable 2D points that connect to create polygons and other shapes.

Vector and Screens

While vectors are measured internally on an XY axial basis within the file, they can still be sized to whatever dimension you need in pixels. So, they can be easily utilized within your design files however you need them to function. The advantage of vectors is that they can be rasterized easily when you place them into a Photoshop document, whereas raster images placed into Illustrator can only be used as vectors through using the image trace function, but only if they’re good enough quality. So, in instances of responsive design where you have a browser flexing from 300px to 2000px wide, a lot of raster images can’t handle this type of stretching, and you get a blurry image. This, in addition to the small file sizes, is why the web design community is moving towards SVGs where it can.

Workflow

Using Illustrator is similar to playing in a sandbox. We use this term quite a bit around the office; we also refer to the test areas we build for our sites during pre-launch as a sandbox. Essentially, sandboxes are something to play around in and work things out that aren’t visible to the public or on the internet. This is also how we utilize Illustrator. Photoshop has one image field, and you can’t see anything that lands outside that zone. But in Illustrator, your files operate on artboards. This functionality is great because you can use the whole drawing board to build on, not just on the image. When I start designing a site, I use this functionality to do a wireframe, since I can lay out a bunch of pieces off to the side and piece it together like a puzzle.

Web Design Workflow
Illustrator’s artboard functionality makes wireframing easy, since I can lay out a bunch of assets off to the side and piece it together like a puzzle.

This is also a powerful tool for ideating icons as well, since the shape building, alignment, and pathfinder tools lend themselves greatly to vector illustration. You can easily alter, trim, join, and divide the form where you need through key commands to quickly build shapes using just a few clicks. Even better, you can save these out as SVGs. I always keep any additional SVG assets I pull into the design on what I refer to as my “pasteboard document.” This way, they will retain their vector format for developer handoff, and there’s no backtracking if things get accidentally rasterized.

Photoshop, Meet Illustrator

As outlined above, both of these programs are absolute design powerhouses in their own right. What’s even better is when you can get a collaborative flow between the programs and have the functionality to do whatever you want. Is a certain look unattainable in Photoshop? Bring it over to Illustrator and build it there, or vice versa!

After the inception of the Creative Cloud, we got CC Libraries. This is a great organizational tool that creates a seamless back and forth between all Adobe CC programs. You can add assets and graphics to your library and pull them into whatever Adobe program you want. On import, Adobe will populate a smart object that retains the original file size, type, and resolution. This way, you can actually click into each smart object, directly edit it, and it will update across the cloud in any instance it appears.

Now that responsive design necessitates the use of SVGs, this workflow utilizing both programs is the best way to do web design. By using both vector and raster design, you come out with a well thought out, fully-rounded, and responsive design.

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts