web design software sketch
- hey everyone. welcome back to my channel. today i've got a video for you all about exporting assets for websites. now, i consider themain goal when exporting an asset to go online isfor the file size to be as small as possiblewithout losing quality, because smaller file sizesmean faster loading time, and faster loading time means your users
have a better experience. there are three main filetypes that i end up using when i'm exportingassets to be incorporated into the build of the site. in this video, i'm gonnago through what those are, when you'd use each one,and how to compress them without losing quality. the first file type we're gonna be talking about today is svgs.
svg stands for scalable vector graphics, as far as i'm aware, and itdoes what it says on the tin. it's a vector graphic,so it's made with points, and it's scalable, so you canbring it down really small, or up really large andit'll keep the same quality. if the asset you've created is a vector, it's likely that it'llbe really suitable to use as an svg on the site, forexample, icons and logos. shapes work really well as svgs.
i personally wouldn't usesvgs for more complicated vector illustrations. i like to keep them simple, and with svgs, the more points that your vector has, the larger the file willbe, so that's something to keep in mind as well when you're creating your assets,is to make your vectors as simple as possible. what an svg does is basicallybuild the design in code,
so the file you export istelling your web browser where the points should be and what colors should make up the shape. this also means that you canreally easily change the color of an svg with code withouthaving to re-export a new file, so that's really handy, and these days, svgs are the ideal wayto put simple graphics like this up on a website, so that way, no matter what screenresolution someone's using,
or if they're on thedesktop, or they're mobile, the image is still gonna look sharp. i'm gonna show you an example of exporting an svg using my logo, soi've got it open in sketch, and what i'm gonna do isselect all of the shapes that make up my logo becauseyou can see that each letter is an individual shape right now. then, i'm gonna click union up here. as you can see, it's endedup filling in the circles
on my a's and e's and onthis loopy end bit here, but that's easy to fix. i just select the twopieces, and click difference, and it'll cut it out again. doing this is just good practice, because it makes your svg file smaller, so that's the reason i'm doing it. alright, once i've done that, i'm gonna select that shape layer there
and come down to makeexportable in sketch. i'm gonna change this to svg, and save it in a folder. remember, i said with svgs, you want to get them downas small as possible. this file is only 12 kilobytes right now, so it's pretty small already. it would be fine to go,but i want to show you a really handy svg tool.
it's called svgomg, andbasically what you need to do, is open up your svg file. what this tool does is deletesany bits of unnecessary code in your svg file, andyou can see down here, in this features listwhat it's actually doing, if you care to take a look, but really, all i care about is thislittle bit down here telling me how much ofmy file is compressed. it's got it down to 2.49kilobytes, which is amazing,
and i can also click hereto show the original. that way, i can make sure that,with its changes it's made and the, you know, pass it's done, it hasn't actually affectedthe look of my vector in any way, which ithasn't, so that's great. i'm just gonna let that download, and now i've got a smaller file. the next two file typeswe're gonna talk about, unlike svgs and theirvector scaling abilities,
are bitmaps, and these are pngs and jpegs. now for both of these,you have to make sure that you're exporting yourfile at the right size, because if you export ittoo small and then try to blow it up in code later,it's gonna look fuzzy, and a bit terrible, so that'sone thing to keep in mind, is to make sure that yourexporting your asset at the size that you want it to appear. these days, with our retina screens,
it's common practiceto export a 1x version, which is just the exactdimensions that you want the image to appear at,and also a 2x version, which means, basically, double the size. developer will then use athing called media queries to look for when someone'susing one of those high-resolution screens and serve up that double-size image instead. the image will still appearthe same on the website,
but it'll be much sharperfor people on retina screens. i hope that makes sense,but i'm gonna show you how to export for that anyway. now the main differencebetween jpegs and pngs is that, pngs can have a transparent background. this means that yourexported asset could sit on any color background or even on top of another image, for example,without appearing like it's in a white box.
svgs have a transparentbackground as well, but there are definitely cases where a png is gonna be moresuitable than an svg, like with this laptop on this product page i designed for example. this image had bitmap elements, you know, it's got photographs init, and it'd be a very complicated file if iexported this as an svg, so a png was the right option here.
so, the rule of thumbfor this is anything that you need to have a transparent background, but is too complicated to be a vector, or includes photographic elements. pngs are easy to export,i'll just show you with this same logo that i used last time. so, i select it, and instead of svg, i'm gonna click png. in sketch, you can just clickthis little plus button,
and it'll add a 2x version,or you can use this dropdown to select it if you want, and it's good practice to put @2x at the end of the file name. let's export that. and a really handy tool thati use for compressing pngs is one called imageoptim. i've bumped up the settingsthat it comes, like, preloaded with for this.
i've ticked enable lossy minification, and dropped down the jpeg quality a bit, which just compresses it a bit more. be careful with this, because with jpegs and pngs especially, you cancompress your image too much, and it'll start to, like, break up and look a bit grainy and pixelated. so, trial and error, see what's gonna work best for your assets.
all i have to do to use this is just drag my image files into imageoptim, and it'll compress them,and as you can see, it's taken nearly 70 percent off both of those file sizes, so that's great. the great thing aboutimageoptim is it just re-saves your file overit and replaces it, so that same file that youhad is now just much smaller. another tool i sometimes usefor extra compression of pngs
is this website tinypng.com all you have to do isdrag your files in here and it'll compress, and as you can see, this one's actually compressedthose ones that already went through imageoptimeven more, so that's great. i can probably bump up my settings in imageoptim, that means. the downside of using this site is that you then have to downloadthe images and take them
from your downloads folderand put them in your assets folder, so it'sa bit of an extra step, which is why i prefer imageoptim. that brings us to our lastfile type which is jpegs, and i already talked a bit about them, but when you'd use a jpeg over a png, is if it's a photo that is going, like, in a block anyway, ormaybe if it's something that's going on a whitebackground and you don't
care about it being transparent, that could be a good case to use it. generally, jpegs canget smaller than pngs, because the file doesn'tneed to be thinking about that transparent background, so if your file doesn't needa transparent background, then generally go with a jpeg,because it'll end up smaller. first one i'm gonna show you exporting an image in photoshop.
the first thing thatyou wanna do with jpegs, and with pngs really, but isee this problem more often with jpegs, especially in blog images, is make sure that your image isn't bigger than it needs to be. so, my image right now, ifi go to image size up here, is 2,000 pixels wide, whichis really unnecessary. my blog, i think, isabout 750 pixels wide, is what the picture will endup being when it's displayed,
so i'm just gonna make myimage that wide instead, and 72 pixels per inchis a good resolution, because that is screen resolution. i've got my quick keys down for exporting assets in photoshop. i don't know if this is theway you're supposed to do it, but this is how i do it,i go command+alt+shift+s and opens up this save for web window. so up here, i'm gonna change it to jpeg,
and it gives you a preview of what the file size is gonna be, and what you can do is drag down this quality bar a littlebit, because generally, you can drop it down to maybe even 60, and it'll still be absolutely fine. let's just zoom in a little bit and see. nope, not affecting itmuch, so lets go with, let's go with 50 for this,so already that's brought
my file size down a lot. let's save this out, and howi do a 2x image in photoshop, is i go to image size, andi'll change this to percent, and write 200, so it's gonnamake my file double the size. now, be aware, you can only do this if your photo is in there as asmart object, which mine is, which means that it doesn't lose quality when you bring the file size up and down, otherwise, you should make sure you
start your file at the 2x size. imageoptim is really goodfor compressing jpegs, so let's drop these inhere and see what it does. it's taken an extra 10percent off both of those, so that's good. 100 kilobytes for a 2x, full-width blog image is pretty good. so, those are my tips forexporting assets for web. i hope you found thatuseful, and now maybe,
the sites you design will load faster because your images are nobigger than they need to be. if you did find this video useful, please give it a thumbs up, and if you've got any questions at all, then please feel free to leave them down below in the comments. thank you for watching, and i will see you next week for another design video.
bye.
Tidak ada komentar:
Posting Komentar