I feel like the best way of looking at Adobe programs and knowing which one of them to use when, is all about explaining some basic principles. Let’s assume that you know what Adobe is and why it’s a big player on the market and that a colleague or boss has asked you to do something in one of them. Then maybe in 1 year you’ll be the dope that makes brochures in Dreamweaver and websites in InDesign. And that is just absurd.
Because a lot of companies feel the need to buy only one program to do anything, a lot of people are pushed, every day, into using a software tool that wasn’t built for what they are using it for. How stupid is that. Not only are you loosing precious and valuable time, but your oh so needed brains cells. You need to know and realise what program to use for what purpose and decide on that premise if you’re the right payed slave for that job. I’ll firstly split the design process into two main categories: print and web. This piece of information is by far the most important. Am I making something for web or for print?
Because both media have different work methods, it’s important to conclude what you’re working for, because it can’t be both. People who say you can work for both at the same time are lying to you and you should stop listening to them, especially if they are an authority figure. They are mostly the people that don’t use the software themselves and/or have no idea what actually needs to be done. They only care about getting to the result as fast as possible, hopefully spending as little time and money as possible. A good boss realises what to use and when, and how much time and effort is lurking beyond the corner.
Seeing as web and print are miles apart from specs and usability, I’ll list some things you have to think about before being creative.
The Web has: resolutions, PPI, RGB colors and is interactive
But print is: in a certain format, DPI, has CMYK colors and is static
If I’m making something for print I can easily decide what its dimensions will be. Will it be a standard A4 or am I making name cards that are somewhat unique in size? You’ll just have to put in your size in whatever units you want: cm or mm for everyone and inch for the Americans. Whatever the case is, you’ll easily decide on that and you can always change it later. As simple as that.
Looking at it from a screens point of view we notice some problems. Paper is, or rather, can be, the same size everywhere. One A4 means the same for me as it does for you. Screen rarely do. Because of the changing screen sizes, browsers and OS’s, we notice a mixed variations of possible screen dimensions. We’ll notice that the resolution is different everywhere. Well, that sucks, doesn’t it? Because everyone is supposed to see the stuff you make for them. That includes that guy with the old computer or the hipster with his precious MacBook Pro. Jacques the hipster does have a higher resolutions (1920px) than Marc with the older computer (1200px) but they both need to see your webthingie (yes, that’s a word!). If you make it so it fits to a 1400 pixel wide resolution, Marc will suffer because of it. And you want to reach everyone, even Marc. The golden rule here is to primarily optimise for the biggest sufferer. If even he can see it, Jacques will too. This is where the resolution becomes extremely important. Not to mention the rise of mobile hardware, making everything that little bit more challenging.
These units are, for our purpose, the same. They express the quality of the screen, or rather the density of color and detail. The higher this number, the better the image. You want it to be a high as possible. However, how higher the number, the bigger the file size. Normally not a problem when printing stuff, but if we look at it from a web point of view, speed is everything. We can’t ask people to wait for 2 minutes to download a background image they don’t really need now can we?
There are certain numbers that are fixed. Not because we want them but because technology is limited. So are our eyes. Here are some general numbers that you can blindly accept without looking them up.
Printed media, everything from a flyer to brochures, use 300 DPI (at minimum)
Newspapers, because of the paper they are printed on are usually set to 150 DPI
Screens, being inferior to our eyes (well not mine), are set to a number between 72 and 108
Typical Windows driven screens have a max of 72 DPI whilst Mac/Apple screens with Retina displays might go as high as 108 DPI
That means that making an image for web to 300 DPI is not only unnecessary but also stupid. The file size will be significantly bigger than when we would be putting it to 72 DPI, but the quality will be no different. Because a typical screen can only shows us up to 72 DPI.
A screen projects light into our faces and we also add some color to the mix. You can compare it with the colors in daily life. Because of the light source these are additive colors. Mixing all the colors together would give us white and having no color would give us black. Compare if to real life. If you turn the light switch off, you won’t see anything. Turning it on gives you all the colors that are available in your living room, from glowing white to the darkest grey. You can go check if you don’t believe me. This is the web way.
The print way is the exact opposite. If I give you a bucket of pencils and demand you mix all of these colors on one piece of paper, you’ll get a dark color. Whilst the absence of color would give you a white piece of paper. So the color profile is subtractive and the opposite as with screens. But because we develop everything on a screen, we’re getting a distorted image when we print our digitally created material.
It’s important to be prepared for this as the colors available in RGB do not match the same colors that exist in CMYK. I might pick a very shiny red in RGB that doesn’t exists in CMYK, so on the screen it looks perfect, but when I print it, my red seems kinda boring. So when we make a new document we opt for CMYK, so we get a more realistic result on the screen, when we would be pressing that print button.
I don’t think it really needs an explanation but someone at some point asked me why their animation didn’t work when they printed it, so I might as well elaborate on this. When you’re designing for the web, you think differently as you would be designing for print. You can hide things on web, you can scroll. There might be sound or video. There will be links. You might even have to open and close certain thing to reveal and read them. Think differently when you are making something for web than when you make something for print. This is super important as many people just copy paste from one medium to the other. This is (one of) the biggest mistake you can make when designing.
Now that you know what the most important things are that you have to remember let’s take a quick peek at the programs you should choose from. I’ll show it with a simple summation in the hope that it makes sense.
PHOTOSHOP: WEB & PRINT
You’ll be editing a picture that you might use online or in a print document. You want to optimize it for colors or you want to perform a cool “content aware” operation on it. See my .
ILLUSTRATOR: WEB & PRINT
You want to make something that is easily scalable; like a logo or an illustration. Not a picture, flyer or brochure. But rather a graphic bar chart, a detailed logo, some drawing that will be used later for animations or print.
You want to make something for print that consists of multiple pages, like a brochure or flyer. A 300 page magazine or a one page poster both work. You’ll probably import images and logo’s you edited in other Adobe programs and then save everything as a PDF.
ACROBAT: WEB & PRINT
I need to make sure that a pdf is secure of that my forms on it are interactive. I might even want to combine certain pdfs and/or delete certain pages.
I want to make a website whilst using code. But I need the visual result to be close by. This way I can easily see what I’m making without being scared of code.
I’m more of a graphical person and allergic to code, yet I want to make and update my very own website. It needs to have the latest things and possibilities.
I want to make my very own animations for banners, games or websites. Yet I don’t know how to do this in code. But the animations have to work in all browsers and on all devices, including mobile ones.
I don’t know Edge or a colleague made something in Flash that I now have to edit.
A more in detail questionnaire I daily go through you can find here. I’m merely describing a normal workflow I go through every day to figure out what I exactly need to use.
Close this warning and continue at own riskStuff might look weird :s
Your browser is so old, it knew Gandalf before he had a beard.
Your browser is so old, it used to babysit Yoda.
Your browser is so old, it went to an antique store and people started to bid on it.
Your browser is so old, it's birth certificate is in Roman numerals.
Your browser is so old, you're old and you should feel old.
Be thoughtfull of your browser, and update today! It's free, fast and easy