Coding

Web Design Tutorial – Adobe Photoshop & Illustrator – Vectors vs Pixels

  • 00:00:00 Hey good to have you here so now that I
  • 00:00:05 talked you into this video and explained
  • 00:00:07 why I like doing stuff like this and
  • 00:00:10 mixing it up let's have a look at
  • 00:00:13 Photoshop and illustrator and where
  • 00:00:15 would we use one to will buy the other
  • 00:00:17 and how do we use them we'll consider
  • 00:00:19 all these questions in this in the next
  • 00:00:22 videos and in this video we'll start
  • 00:00:23 with what is Photoshop one is
  • 00:00:26 illustrator why do we use one over the
  • 00:00:27 other now to give you a definition right
  • 00:00:30 away illustrator is for working with
  • 00:00:34 vector graphics whereas Photoshop is for
  • 00:00:37 working with restaurant graphics or
  • 00:00:41 pixel graphics that is the definition
  • 00:00:44 what does this mean let's have a look at
  • 00:00:46 this graphic here it's a green box in a
  • 00:00:49 white box not too fancy but good enough
  • 00:00:53 for this example if we create this
  • 00:00:55 graphic in Illustrator we're trading a
  • 00:00:58 vector and this means we're describing
  • 00:01:00 this graphic programmatically well we're
  • 00:01:04 creating it visually in Illustrator but
  • 00:01:07 will be transformed into code basically
  • 00:01:10 it's very basic code describing this
  • 00:01:12 image now how can you describe this
  • 00:01:15 image well let's start with the green
  • 00:01:17 box we have a starting point which is
  • 00:01:20 described by x and y coordinate so we
  • 00:01:24 have two information blocks here we need
  • 00:01:26 x and y and then we got two more
  • 00:01:31 information blocks we need we need to
  • 00:01:34 know how wide is it and how high so the
  • 00:01:38 length of both accesses so to say and
  • 00:01:42 then we got this shape here which you
  • 00:01:46 can then programmatically complete
  • 00:01:48 because what we got all we need to know
  • 00:01:50 we can't create a rectangle from knowing
  • 00:01:53 two sides right that's basic math so the
  • 00:01:57 computer code is therefore able to
  • 00:02:00 complete this graphic and create the
  • 00:02:03 screen box and the white box is
  • 00:02:06 basically created in the same way
  • 00:02:07 therefore this is a very simple way to
  • 00:02:11 describe this graphic and this
  • 00:02:14 brings us several advantages we'll have
  • 00:02:15 a look at later now let's look at the
  • 00:02:18 same graphic in Photoshop if we're
  • 00:02:20 creating it like as let's say a PNG
  • 00:02:23 image our normal image well before we
  • 00:02:26 had four points if you want to say that
  • 00:02:28 the beginning point described by two
  • 00:02:31 points and then two end points of our of
  • 00:02:34 our accesses now in this case we will
  • 00:02:38 have a lot more points let's say this
  • 00:02:40 graphic is 250 times 250 pixels well
  • 00:02:44 then we would have 250 times 250 pixels
  • 00:02:47 of separate individual pixels we have to
  • 00:02:52 prescribe each individual pixel here
  • 00:02:54 we're not using any math to tell you
  • 00:02:56 okay you start here you end here and
  • 00:02:58 make up the rest yourself
  • 00:03:00 no we're describing each individual
  • 00:03:02 pixel now I think it's not very
  • 00:03:05 surprising that therefore normal images
  • 00:03:08 or raster or pixel images are much
  • 00:03:12 bigger than vector graphics because for
  • 00:03:14 vector graphics we basically only got
  • 00:03:17 four things to remember starting point
  • 00:03:19 described by two points and then where
  • 00:03:22 each of our accesses ends now obviously
  • 00:03:25 it depends on the shape but for a
  • 00:03:27 rectangle only four points and this is
  • 00:03:29 against when using a pixel graphic 250
  • 00:03:33 by 250 points and as a side note I'm
  • 00:03:36 using the word points here even though
  • 00:03:38 technically points it's not the same as
  • 00:03:40 pixels but you get my point I guess so
  • 00:03:44 this is a huge difference in there for
  • 00:03:46 the file size is also vastly different
  • 00:03:49 indeed it is four times bigger for this
  • 00:03:53 simple graphic when using a pixel
  • 00:03:55 graphic instead of well vector graphic
  • 00:03:59 it also brings another advantage to use
  • 00:04:02 a vector graphic it's not only smaller
  • 00:04:04 but we can scale it perfectly because if
  • 00:04:07 we scan risk a graphic app which we
  • 00:04:09 created as a vector graphic let's say
  • 00:04:11 this envelope I can here if we increase
  • 00:04:14 the son size as raster image as a image
  • 00:04:18 using pixels only pixels well then you
  • 00:04:22 will see that it will get blurry and it
  • 00:04:24 it's not looking sharp anymore
  • 00:04:27 now it makes sense that it gets this way
  • 00:04:29 because when we're increasing the size
  • 00:04:31 so the amount of pixels in our base
  • 00:04:34 image to a bigger image that doesn't
  • 00:04:38 increase the size of pixels we have
  • 00:04:39 available we still only got our let's
  • 00:04:41 say 50 times 50 pixels which described a
  • 00:04:44 small image if we want to scale it to
  • 00:04:46 100 times 100 all these new pixels have
  • 00:04:50 to be full somehow but we don't provide
  • 00:04:52 the information on how would you fold
  • 00:04:53 them so the computer has to figure out
  • 00:04:55 how to fold it and basically it does
  • 00:04:58 this with linear interpolation and
  • 00:05:00 therefore it looks this crappy that's a
  • 00:05:03 downside a vector graphic on the other
  • 00:05:06 side doesn't have this problem because
  • 00:05:08 we have our starting point our end
  • 00:05:09 points and so on we describe everything
  • 00:05:11 with a few points and therefore we tell
  • 00:05:14 the computer how to fill out the space
  • 00:05:17 between this we provide a blueprint
  • 00:05:20 which is applicable for tens times 10
  • 00:05:23 pixels images as well as 1000 times 1000
  • 00:05:27 pixel images therefore when we scale up
  • 00:05:29 a vector graphic it looks the same as it
  • 00:05:32 looks when it's smaller we can scale it
  • 00:05:34 perfectly so we get file size and
  • 00:05:36 scalability as huge pros on the vector
  • 00:05:39 side why would we use Photoshop at all
  • 00:05:42 well because of pretty much the same
  • 00:05:45 arguments yeah it might not be scalable
  • 00:05:48 and yeah it might be have a bigger size
  • 00:05:50 but why does it have this because each
  • 00:05:53 pixel is described individually is this
  • 00:05:56 a disadvantage result at all times
  • 00:05:57 no because if we have a complex image
  • 00:06:00 like say a photo we take we need to
  • 00:06:02 describe each pixel we can't describe a
  • 00:06:05 photo as a vector or like you can do but
  • 00:06:07 it probably won't look like a photo we
  • 00:06:10 really take so a real image in our real
  • 00:06:14 life does have thousand shades of
  • 00:06:18 different colors and we need to describe
  • 00:06:20 each pixel independent independently to
  • 00:06:22 really depict this image correctly
  • 00:06:25 therefore pixel images allow us to
  • 00:06:28 create very detailed and colorful and so
  • 00:06:31 on images which vector graphic graphics
  • 00:06:35 are enable to do additionally if
  • 00:06:39 Pixlr is described independently we have
  • 00:06:42 a very fine control over it if we would
  • 00:06:45 like to change one point in a Vectra
  • 00:06:48 graphic we can't do that directly we
  • 00:06:52 have to create that point separately in
  • 00:06:55 a raster graphic we have all the points
  • 00:06:59 described in the penalty anyway so we
  • 00:07:01 can easily change individual points so
  • 00:07:04 we get a much finer control over our
  • 00:07:06 picture and our pixels so in that
  • 00:07:09 development I typically use illustrator
  • 00:07:13 to create assets icons fun show stuff
  • 00:07:17 like that that well is well described
  • 00:07:20 with vectors that needs to be scalable
  • 00:07:23 and so on and that all fits this
  • 00:07:25 category perfectly on the other hand I
  • 00:07:28 use Photoshop to create designs of
  • 00:07:31 websites before I actually coat them
  • 00:07:32 with CSS HTML I set this up in Photoshop
  • 00:07:35 because I like to find control I got
  • 00:07:38 there and overall I find it a little bit
  • 00:07:43 nicer to work with when designing a full
  • 00:07:46 website instead of just an icon or
  • 00:07:49 something like this in this series we
  • 00:07:51 have a look at both we will create our
  • 00:07:53 own assets icons and so on we will of
  • 00:07:55 course to learn the basics about
  • 00:07:56 illustrator and Photoshop for web
  • 00:07:58 development
  • 00:07:59 I'm not going to into yeah this is how
  • 00:08:01 you draw this very great picture that is
  • 00:08:04 not what we are doing here but we will
  • 00:08:05 have a look a very detailed look at all
  • 00:08:07 these things that concern about
  • 00:08:09 development and we'll have a lot of
  • 00:08:11 examples see you in the next videos bye