Differences between Affinity...

[Matt Kenyon]

Id like to say Im a long time lurker first time poster, but I'm really just a first time poster. Please, let me explain myself before I ask my question.

 

I have recently (past year or so) taken up some web design and development. Really just for friends. They have loved my work so far. Sadly, the program I used in the past is starting to show its limitations and I snagged the Affinity Photo App for th 20% discount And its proven very nice. So here is my question.

 

Whats the difference between Affinity Photo and Affinity Designer? Please use baby comparisons. Ive never used Photoshop and really don't know too much about this stuff. Learning as I go.

 

--Thanks.

 

[CartoonMike]

I'm sure others will chime in with more elaborate descriptions but here's my tl:dr version of the differences betwixt Photo & Designer:

 

Photo uses pixels. Wee squares that are assigned a color. when you make a line or brushstroke, all those itty-bitty pixels (Picture Elements) under the brush gets colored according to how the brush works.

 

Designer uses Vectors. Think about a square, there's the 4 corners and the thickness of the line not to mention the color it has. What vector does is to describe this using coordinates (you can call 'em Nodes) and includes the color and thickness of the line.

 

Here's where it gets interesting... when scaling, both are different. With Photo (pixel-based, also known as Raster) things get enlarged and the new size has more pixels than the previous. The new pixels get assigned colors according to it's neighbor. This results, sometimes if the enlargement is huge, in what's called Pixelation. Basically there's not enough information in the original to smoothly scale to the new size. 

 

Vectors (also known as Bezier Curves, btw) have all the information they need to scale up that 1inch circle to be over 100 yards (I'm exaggerating to prove a point). The curve and rendering (how the app displays the content of the file) of the circle is every bit as sharp for the huge circle as the small one.

 

When reduced, the Pixel/Raster/Affinity Photo image may look good, but it's a one-way ticket to Lossy Town. In order to reduce an 12 inch square picture/photo of a face to an 1 inch square, information (y'know the colors of each of the original pixels in the 12 inch pix) is thrown out. And like opportunity, once it's gone, it's gone for good. 

 

(which is why it's always a good idea to work on copies of photos, paintings, etc -- so you have an "original" to fall back on when things get FUBAR)

 

On the other hand, when scaling down a Vector image in Design, the math that describes the image is still kept, no matter how small. It's math, doncha know. The description of the objects stay the same, only the values of location change.

 

Now when it comes to creating,Pixel-based images can have colors or areas selected and changed. Each pixel has a color assigned to it -- we're considering "transparency" to be a color here, just to be simple. So if you have a face that you want to turn into a martian, you have to select the areas that have skin and then change the color of the pixels in the selection. (How exactly to do this is a book unto itself, suffice to say there's many different ways to do it). And if you want to change the color again, you need to repeat the process. I'm glossing over a whole lot of techniques, but hopefully you're getting the gist.

 

Doing a similar thing in Vector, all you need to do is change the fill of the skin object(s). Done. See, there's 2 aspects to a vector object: Stroke (the outline) and Fill (what's inside the outline). Both can be changed independent of one another. Strokes can also have their width changed. Usually it's in Points (fun fact: there's 72 points to an inch, which is why the original Macintoshes had a screen resolution of 72 pixels per inch).

 

The final thing about the differences between the two apps/drawing "methods (so to speak)" is that rascal, Resolution. Basically it means how many Pixels there are in a given area (sometimes it's inches, millimeters, etc) or how many pixels there are in a document, which is how we get "create a file that 800 pixels wide and 200 tall" being written as 800x200 pixels. Usually print describes pixels in a given measurement unit, while video or web describes how many pixels wide and tall something is. This is crucial to understand, because that beautiful banner you painted that's 800 by 200 pixels wide will either be crap when printed out to fill a sheet of paper or way too small to even see as print is usually around 300 Dots Per Inch -- aka DPI  (in print we can say that Pixels=Dots and be pretty safe) And that banner is now almost 3 inches wide by not quite an inch tall. 

 

Although Vector, like the honey badger, don't give a sh!t, about resolution, it is important when exporting the document or printing the document or exporting slices. You need to know what resolution to export or print it in. 

 

In general, Vector drawings are usually (but not always) somewhat cartoony or highly stylized, or just used for adding embellishments (curvy adornments to photos or whatnot) and for setting type (most modern computers use Truetype and/or OpenType which use vectors to describe the shape of the letters). Raster/Pixel drawings can look like pencil sketches, a high quality photo or that neat poster of that movie you want to see. Comics are now colored using Raster-pixel based apps. 

 

(just to be clear, Not all vector drawings are cartoony/stylized -- I've seen images that I swear were photos, but they were hand crafted in a vector drawing app and used gradients and transparency to pull it off. Again, I'm describing with a huge brush and there will be exceptions...)

 

Last thing, I swear, is what's called Color Depth. This is for pixel-based documents or how vector drawings get exported as raster. 

 

Basic computer thing: Bits are the smallest bit of info that can be stored on a computer. 8 bits equal a Byte, 1024 bytes equal a KiloBite and from there each 1024 "level" equals a higher metric name, 1024 Kilobytes = 1 Megabyte and so on through Gigabyte and TerraByte. For us artists we are confronted with things like "8bit color" "16bit color" and so on. Real simply, if all we're concerned about is just black and white, we're talking 1 bit (where black is a digital Zero and white is a digital One). Sticking with black and white, a 8 Bit Greyscale image has 256 levels of grey (from zero - black to white- 255). There's 8 bit color, which has 256 different colors. Don't be scared by there suddenly being an extra color -- Zero is a number as far as computers are concerned. Originally, since GIFs were used as the prime image format for the Web, that's why the legacy colors for browsers have a palette of 256 different colors. When we start going up the color bit to 16 bit, it contains many more colors (as things progress like  this: 2, 4,8,16,32,64,128,256,512,1024,2048, and so on --Powers of 2). So 16 bit has thousands of colors, 32 bit has millions and so on. However, the more colors a file has, the larger it is. There's ways to remedy that, somewhat. Remember way back when I was describing reducing an image and losing information, that's basically how formats like JPG works, it throws out "unnecessary" information every time it's saved. Which is why you usually don't want to alter JPG files too much, each time you save a bit more info it being lost. Other file formats, like TIFF retain all the information. And, of course, apps native format usually are "Loss-less" and not "lossy" like JPG files.

 

Hope this helps and not confuses. 

[VIPStephan]

In a nutshell: Just as Photoshop, Affinity Photo is not the right tool for web design. Yes, you can design websites in AP (just as in Photoshop) but it’s more work with less ideal results than by using Affinity Designer (or other vector editors). AP – as Photoshop – is primarily a photo retouching tool, not a web designing tool. That’s like using the back of a screwdriver instead of a hammer to drive a nail.

[Matt Kenyon]

Thanks for the insight guys. Really appreciate it. Anymore comments are welcome. Thanks for the quick reply a too.

 

So then, I really should have grabbed Affinity Designer?