Full course at: [ Ссылка ]
Free Exercise Files: [ Ссылка ]
Free Cheat Sheet: [ Ссылка ]
Photoshop CC 2015 Web Design Tutorial - Learn how to use optimize Images for Web Photoshop export for web feature. Things have moved on from Save for web!
Video transcript:
0:00hey youtubers my name is Dan and by the
0:02end of this video you will know how to
0:04export your Photoshop images ready for
0:06your website this particular video is a
0:07free extract from my course called how
0:09to make money building professional
0:11website mock-ups using Photoshop if you
0:13really want to start making money as a
0:14web designer there is a discount code
0:16for my full course in the description
0:17sales for java now let's say no to the
0:20slice tool and yes to export ants now
0:23they really should have given that a
0:24cooler name export as there's a very six
0:26years now in this video we're going to
0:29look at how to get your images out of
0:30photo shops that you can hand them over
0:31to your developers start building the
0:33website now what they're going to want
0:35is some web pretty images okay not just
0:37the big Photoshop file if your developer
0:40does use Photoshop the potentially you
0:42could just hand over this PSD and leave
0:44them to it but often it's the designer's
0:46role to get the images out really for
0:48web there are pretty much two formats
0:50we're going to work with there's going
0:51to be a JPEG and a PNG now essentially
0:54JPEGs are great for photographs and
0:56PNG's are really great for any kind of
0:57linear icons logos text those types of
1:01things it's reasonably easy to know
1:03which one to use because it comes down
1:04to file size versus quality if it looks
1:06great and it's small then you should be
1:09using that format ok so you check both
1:10of them jpg versus PNG see which is the
1:12smallest see what looks the best and
1:14then use that we're using a new feature
1:16and Photoshop CC 2015 if you're using an
1:20early version you're going to have to
1:21use something called the slice tool okay
1:23bad because we're using the newer
1:24version we're going to use this fancy
1:26awesome way called the export ads so to
1:29do it let's look at doing this image
1:30first okay so slicker than my layers
1:32there's there's image sitting on top of
1:34the box it doesn't really matter which
1:36one you export okay whether it's the box
1:37or the image it'll work for both of them
1:39so what we're going to do is right click
1:40it and we're going to go down to this
1:42one that says export Aires when we get
1:44until when we know it's a PNG we can use
1:46a quickening sport but at the moment I
1:48know because it's an image it's going to
1:49be a JPEG so I'm gonna get export airs
1:51okay so it tells me the size and it
1:53tells me that as a PNG this one's going
1:56to be set at 76 kilobytes and that's
1:58pretty big so you've got a relative
2:00scale once you say getting close to 100
2:03that's far too big for an image this
2:05size okay so when you're at 100
2:07kilobytes your way kind of above what it
2:09should be so what we can do is switch it
2:11to jpeg and then you've got this quality
2:13later very really does it go out at a
2:15hundred percent you want to drag it down
2:17until you've got this kind of balance of
2:18it's very small in terms of file sizes
2:21but there's almost no noticeable
2:23degrading of the image so what you do is
2:25you drag it right down to something
2:26silly okay so we're down at fifteen
2:29percent and it's hard to know is it good
2:31as a bad okay what I like to do it just
2:33click up here then click back down and
2:35decide how low can you go now in this
2:38case it can get quite low because the
2:40image itself is quite noisy and it's
2:41black and white we can get away with
2:43quite a lot of low quality but you can
2:45see the size becoming quite low so when
2:47it's up at 100 it's at a reasonably good
2:4930 8 kilobytes but I can get a lot lower
2:52now my rules I kind of hang around in
======================================================
Facebook:[ Ссылка ]
G+: [ Ссылка ]
Twitter: [ Ссылка ]
Pinterest: [ Ссылка ]
Website: [ Ссылка ]
Course Url: [ Ссылка ]
======================================================
Trending topic on youtube
#Adobe #Photoshop #Tutorial
#HowtoDesignaWebsiteinPhotoshop
#PhotoshopTutorial
#CC_2015
#DesignAWebsite
#production_videos
Thanks and Subscribe Channel
