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: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