Lessons

Lesson Info

Optimizing Web Content Using Adobe Photoshop CC

What I want to do is I want to shift gears a little bit and go over to photo shop because she's got a lot going on there's a lot of things that were going to use in their to bill to save and I'm gonna show you a brain knew newest feature I should say it's kind of turning things on on its head let me open up some content here I'm going to open up a photoshopped file this is kind of a simple web design and I threw together but if we're gonna design a photo shop we want to bill to do the same kind of thing what we're gonna do is we're going to slice cut out and save out this is kind of one of the one of the work flows that we use in both programs it's a little bit old school so photoshopped now has a bunch of missing files that's great we just click ok there's also ah missing found work flow in here for type kid and everything else if you have a missing it will say let's fix it whatever and we got we refresh this reset everything okay now if we're gonna work with photo shop what we can do...

to save our content is we can go in and do the same thing. This program actually has a slice tool as well and it's kind of funny but I don't ever use it anymore kind of forget where it was you could see right here under the crop till we have slice and the slight select so slice like literally lets you go in and once you cuts up mount you can click on it and kind of resize it move it you all that kind of thing but the the old school way was just like illustrator was to go to something we want to save and it's not going to be text or something like that it's probably this image right here we're gonna go in and drag across and you see it's going to snap with smart guides cut it out and we would take that slice and go to safer web into the same thing we did an illustrator ok same exact thing that's that's great that's phenomenal some people love slicing because once you do it that slices saved with the file and later on you just click on it save it out click on and save it out I'm going to kind of I'm going to forego that I'm not going toe really go through that I want to show you the newer method which is actually pretty cool first things first I want to put an image out here in okay and I want to show you work flow that we use a lot today when we work in photo shop especially for web design some print design you're going to see right here that if if I want to put something out here like I've got another photo shopped file on a j peg or something the place in here we actually have two new commands to newer commands called place embedded in place length what is going to let us do is just like it sounds if you link it it's going to be basically kind of like in design weaken place another footage shot file in here and if we do that we could go back to the original photo shopped file make a change and updating this file that that will allow us to use you know, one file for a lot of places a lot of different locations place in bed it is just going to take an image and stick it in the footage that file okay? And then we also have a package command this is kind of cool if you ever worked with a lycan in design or program like that and your lincoln the files all over the place and you need to grab all together to give someone else the package will do that for you and I'll go grab everything, copy its ticket folder and give it to someone else a lot of us are using linked files so if we're doing this like I'll do this real quick but I'm going to say I want to place a linked file go grab the image I'll say ok optimized for the web there's the psd I'm gonna grab let's say like this banner now this is a photo shopped file weaken d j peg despite any file format you're going to see that it's actually pretty big in size okay the idea behind this watch I'm gonna click place huge grand scale it a little bit and kind of put it where I wanted I want to go right about here I'll do a little scaling now I know there is like no don't scale it okay um I'm gonna hit return or is basically accepted and say we're done I just placed it in there okay uh and I'm gonna make sure that I select that layer now if you take a look in the layers panel what it does automatically is it creates a smart object so when you play some better their place linked it's generating a sir smart object smart objects are well they're smart because we're doing what's called non destructive editing essentially if we link to this if we go to edit this we need to edit it we're gonna go back to the original huge file into our editing okay it's gonna update here if we said place embedded it would actually take the entire file size all the data stick it in the photo shopped filed if we needed to edit it it would open that up separately, edit it and then come right back here and make that change so it's non destructive that that means we can actually go in and transformed do things it's always going back to the original data thing I love about this too is that when we go to save out of here in just a few minutes here I'm going to show you that it's going to tell us that oh, hey we want to save his j peg or something like that well, we need to actually make sure that it's got enough pixel data enough information in there to be able to save it for us ok and that's what smart objects get us that's the awesome part about it so we're going to original image file toe work only move this over just a little bit get a toe right a little bit there. Ok, now we have this image out there it is linked. If I decide to make a change I could actually come over the layers panel and double click on the icon here you see smart object and it will automatically open up that original psd and I can see all the data and everything inside of it if we make a change obviously it'll automatically update within the photos shot fire which is really, really cool okay, let me close that up so when we work in photo shop a lot of times, we're going to work with with photo shop files. Now the same thing holds true for things like footers and headers. If you're going to do full designs and here are different content, we can take all of this foot or content right here, build it in a separate photoshopped file and place it is a link file in that way, we can put the foot or in a bunch of files if we need to. Okay, that's, this whole smart object workflow that's pretty cool. And what I want to do is I want to bring in some vector content. Ok? So we're gonna bring in the logo up here. Now, this is going to kind of tie in illustrator and photo shop together, and we'll take a look at that if I go to file and I want to take like, an illustrator file or something like that, I could say place length and place an illustrator file if I wanted to do that, we'll get that to the to go here, let me grab a logo all put in vivo. We'll just do that. So this is actually illustrator file I placed length and place it out there quick, ok, get it up where I needed right up right up over here. I could probably zoom into this if I needed to make my scale change my size change if I need to it's still vector data and he returned and we got it great thing about that is that was an illustrator file. Okay, so we could if we wanted to copy that in but placing its just azizi in some cases and I can see right over here that I now have a link to the original started file so we can place that multiple files if you want to. All right now that's kind of important I wanted to place some vector content like that I wanted to show you because when we go to start saving it's going to make a difference and you kind of mentioned that so what I want to show you right now is we're going to take a look at going in and saving for web using kind of a newer feature a new way to do things. If I look under file, we have safe for web, that type of thing you see it right there and actually for that where wass there it is right there we also have something called extract assets and generate image assets. Now this these two things extract assets and generate image assets are forty shops sisi only ok nazi assist six and earlier all right generate image assets that's kind of interesting that this is actually kind of old which is really weird because you know, a lot of this just came into being but generate image assets means if we want to we can take all the content out here layer by layer group by group and have forty shop optimizes save it out for us for the web okay to do that this is so bizarre people always like what are you talking about if I go to the layers panel and look right here at this logo for instance let me zoom in so you can see this if I wanted to I could come to this layer and do something like this if I named layer something like logo dot ping any layer that's named with a dot extension is gonna get saved as that file format so that's it that's pretty much what we need to do I mean it's kind of crazy but that is actually old school we don't need to do that anymore these days if we want to able to save out, we're going to use a interface called extract assets and this is going to save us a lot of time we don't have to slice we don't cut out when you have to hide we have to do things like that so if I go to extract assets and take a look at it you can open up kind of a big dialogue box here is big guy here now here hang on one second I need to go back for a second I need to move the layers panel out just so I could see it going forward okay, so we kind of need to make sure that we can see the layers paying also in a second why any layer out there that is actually either selected or already has a name on it like dot j peg or dot ping is going to put in here you can actually see them if you notice I selected that logo orange showing up in the in the layer stack here and it's saying ok let's extract it our job now is to tell it what to do but if you look at the logo this is actually really cool it cut it out in the shape it's automatically cropping it saying let's punch through all the transparent objects and let's keep it that way now we can do is we can go in and tell us how to save it out so if I zoom in appear so check this out you're going to see it says we have three flavors in here paying eight being twenty four paying thirty two we have gift we have j peg and we also have asked you to you kind of got to be careful with spg and inforty shop as for jean, forty shop is really on lee I don't want to be a blanket statement here but it's really only for vector content created in photo shop okay in this case, I think it's actually going to take that vote doughnut logo and turn it into raster and embedded in the spga it's kind of wacky, but I'm going to say let's say this as ping eight and that's a great thing because it's going to show me a quick preview of it and what we can do going forward is you could say you know what? I need this to be twice the size if we want to, so I'm gonna go in and say let's, make it twice the size you can pick it size if you need to do that even a percentage of that works for you. The other great thing here is that if we're trying to save out in the image we're saving is a ping, for instance right here like a ping eight we could if we wanted to say, hey, you know what let's try this is a j peg or maybe I need a ping that's twice the size or somebody from another department says, hey, you need a give me an image at this exact size with this in the stack here you're going to see if I hover over there's little plus click on the plus I could just rip out a bunch of copies and say you know what let's make this one ping eight two but let's make this one this one's got to be like two hundred pixels wide instead and it's going to it's scaling for me so we have two different images and if I click on each right here you're going to see it kind of happened out there it's going to show you the preview for them pretty cool so it's taking original vector data and doing that but so this this dialog box gives us a great way to be able to just kind of quickly and easily get that done now something else that we can do in here if we're taking a look out here and I decide that maybe there's an image that I want to work with that isn't listed in here and I want to say let's save it out is j p give for ping if I come over here for instance toe banner and the layer stack I didn't have that selected and it's not named as dodge a pinger gift what I can do is I can select it right now if I look down here you can see do you want to add this asset so I could say yeah let's add it so I could grab a whole bunch of different assets and just start to optimize them as we go on here you could if you wanted to if you think ahead which I usually don't you can go to the layers and select all the layers are all the things you want to save out but you can also do it after the fact which is great so for this banner I'm probably going to save it as let's say a j peg for instance, elsie those j peg I could set up compression you don't have nearly as many settings to work with but I don't know like I said before a lot of those things are kind of old school we don't use them that much anymore so but these air this is kind of how we do it we get the images that we want based on layers or if you actually group a bunch of things together you could take an entire group in here and say let's save it is one big image so it's pretty cool so we've got these kind of set up we're looking at them making sure that they look the way they need to look one of the best things I think is if you're dealing with let's save retina and you decide that you want to have an image that looks awesome unlike, you know, an apple retina screen or heidi p I screen anyone also make it look good and small enough unlike a non retina screen okay, when I designed this, I actually designed this for desktop and it's not retina size. You can see it's actually at about thirteen hundred pixels wide. Uh I'm not going to really go into retina too much, but the acid itself, if we design it regular old scale regular old size we can actually have photoshopped generate a two x asset, basically double the pixel whip, if you will and pixel height for the assets going to do that for us is going to generate thes red in an assets for us. So if you design and a smaller size ok, regular old size we could say make the ones that are twice as big essentially and this is the key this is the big, big big feature here, the thing you need to think about if you remember I placed that image and I said, I'm placing a really big image in here that's got a lot of pixel data, right? And then I scaled it down if you place an image that's just the right size ok? And you say make it two x twice the size it's gonna look like garbage because it's trying to do what we would do it just double the pixel density of pixel size of it that's why we want to try when we're placing our continent here is a smart object I want to make sure it's big enough. Okay, it's, his biggest. You're going to use it on red enough, for instance. So that's great that's a good way to do it. We could say make two x versions of everything in here, which is awesome. Um, let me actually take this one back up. Looks a little like garbage. There we go. That's. The other thing you can do is you can create other sizes, too. If you realize you want to have images that three x or three times the size you could do that too or half the size point five x, you can do that too. Pretty cool. When we go to save this click done and get it to extract or extracted. For that matter, what it's going to do is it's going to make a folder for us? Put these in there, and if we said two x or three x or make these larger sizes or smaller sizes, it's currently created another folder in there and put all those double or half size in there. So it's going to make a whole bunch of copies for us. Essentially, you can change the settings. Unlike this file size names, if you want there's, actually a settings button in the lower left corner down there click on that is where you can if you want to what is going to do is it's going to upend this or put the soul celtics at the end? This is pretty typical apple retina celtics and you're going to know that those are the ones for retina essentially ok it's going to name the folder scale that two hundred which I usually change I usually just make the folder act two acts or something like that you can do that too and this is crazy you guys this is something that everyone's gonna want to do but you can see right here auto extract you can make it to where going forward if you save these settings every time you make a change of the photo shopped file it's going automatically suck him out again it's sticking back in that folder is going to keep generating the asset some people don't use this I don't use it that often so I turn it off all right I'm going click ok looks like it's sze gonna do pretty good job here and now what I can do is I can actually just extract so I will do that I'm going to click on extract and it's going to say now this is the key part here that I want to mention using this method some people see this and they're like I don't know it's actually gonna change later names it's going to go in and put the topping j pig, whatever it happens to be ok, some companies, some people don't like this but this is the nature of the beast that's the way it works. So I'm going to click ok? And you know it's gonna say, where do you want to put it? Let me actually just stick that I'll put this on my desktop and it's going to make a folder called that you can change it whatever you want. Let me extract him now it's going to take a second here just kind of do its thing. But once it does once it's all done. You know, show you the folder in your desktop. There it is right there, wherever you put it. There's the originals. Okay, the original sizes and there's the two explosions. So we have the images that we need there's that banner and there's the banner at two x. If you look at both of these, like I said before the original banners, original scaled size cropped everything done to it. And the two exes just double the pixel density that's the idea behind a retina version. Okay, so this original loan was it for sixty eight. The two x is nine. Thirty six, double it that's great it really helps it makes it so much easier to be able to say this in the past we used to have to go in and we'd make multiple versions and sizes and all this kind of stuff it's scale and if you set up the file correctly to begin with meaning put in smart objects make sure that there are a lot bigger in size the biggest you need him, you really know what the worry about scaling that it'll do a pretty good job for you sometimes I find that it kind of fails a bit uncertain objects, certain images but I just I just kind of go do those manually ok, but that doesn't happen that often, which is good, so working with that is pretty great pretty cool we could save out like I said for g j peg if ping and get it to work now the great thing about this is that if you take this file and give it to somebody else, those settings will be saved in there so you'll see it's already done and there were honestly the only reason why they're saved in there look what it did to my letter names you could see it saying j peg but it actually said a percentage as well whatever I said it as if you decide to put multiple versions of an image look what it does your file name we got some people this is why I was saying some people are like what I'm not going to use this but you can say it's the nature of the beast so all right it's actually this is it's kind of cool but this whole thing is working on what's called no dot j s it's kind of like javascript running in the background and working with photo shop to get it done so it needs that toe work but that's all part of it all right so let me say that so saving content out of photo shop there's you know there's a lot of different things that's kind of want to make sure that I'm hitting everything that we've got um there's two methods for optimization okay in both programs illustrator to be honest you're probably going to be using mohr of the safer web to bill to get different file formats out in here I use this extract assets all the time you know sometimes the gold school safer web but most of the time it's extract so now when we save these out every time I do that I used to get really careful about compress make sure it's the right smallest best looking blah blah blah but the thing about doing that is that it's not really gonna work okay? You can't get a small as you can so if we save out of photoshopping illustrator to make it smaller, better good looking still, we're going to turn to some other solution and that's kind of what I want to jump into next let me go up and I've got all these files I'm going to take the ones that we just saved out, ok, these are actually the mill park assets, these other ones coming from illustrator as well and if I take let me take like, this banner right here, okay, because I'm in a little bit you say this is original banner it's forty five k it's a j peg and you could see the sides right there, right now I'm gonna show you how we could make this smaller and still look good. Let me just say that on my desktop so I can grab it really quickly and I was put a copy right there if you want to be able to save out your images and actually make them smaller, there are a lot of services you can use theirs two main ways to get this done, okay, if you're not a developer, you don't like mess mk code you don't work on the command line, okay? And as soon as I say that if people you'll know, ok, if you don't do this, then the second after I want to show you it's not going to be for you these right here, this is going to be for you. These air actually services that you can use right now. Some of them are paid. You see right here. Like jay, pick many. You can try it out if I click on try it. Now, the idea behind this site is they're trying to get you to download something or purchase something. You see, this one is actually an app. I forgot about that that's. Why? I actually used this one instead. Also, it's got a cute panda on it because it's tiny paying it's called it's called tiny ping dot com and what's crazy is this is actually for ping and j peg it's not just for paying, but what we can do is we can go in and say let's, grab images and put him in here so only grab one of these al disco grab the j peg, for instance. Quick, open. You could drop him on there too, and you're going to see it's going to look at it and kind of do some things you can see. It actually saved this six percent on that three kilobytes of size, which is actually pretty big deal. As far as the weather's concerned, yeah, look, the panda it's, kind of like so once you do that, you can just download it now there are other sites out there that will actually let you go in and adjust so you can see that before and after and kind of do a little slider action right there. The thing about this kind of site is if you're working on a client cite some people don't like that you're at uploading the file to this site and in downloading the file so that could be an issue that way. Okay, there's a lot of other sites out there compressed ping is another good one I use this lets you upload images on this one I think is I think this is just ping no it's actually a picture there it is no use this form of j peg but you can see right here we have j peg and paying same same thing all you're doing is you're taking your files, putting it up there and let it go I'm going to try this I'm going to see if it does a better job because you can kind of jump between these and seriously do a good job let's say all right let's drive that one compressing okay, this would only save five percent but whatever you know, I mean, so you try a couple of these you can really compress and the reason why I'm actually just showing this is because forever today, we used to look at our files coming out of there and be like that it's the smallest, best quality. I did a great job and you really didn't because they could go smaller, it can look better. Okay, so just know that going forward, um there's another one that is kind of interesting, and this is I'm starting to get more into what are called what's called command line these days when we work on the web, a lot of us that do this professionally if we're doing something like working in house, that a big design firm or something like that and your job all day is to code stuff, okay, let's, just say that your developer, for instance, a lot of times what we will do is we will be looking at stuff like this all day. We will be looking at command line so, like, I'll go in and say, you know, like let's, go take a look at like my sights folder I'm going to go listed and see what I got, and this is what we stare at. Now using those websites is great and it's a great way for us to be able to put up a bunch images and get it done. But a lot of times we have to work faster. Okay, so using this kind of thing that's called command line what we can do is we can go to and one of my favorites is right here image optimum seelye um we can actually download this to our hard drive and do it on our machine so we do it that way just run a little command we say ok let's install it it's actually it requires some other stuff to get installed but once they get installed you simply run commands. You're like let's compress this folder and it just runs to the whole folder and compresses them all for you and spits it out and it's really pretty amazing and it just this actually if you go through this is a great little chart that shows you I love this one because it shows you all of the different ones out there even like tiny paying and smoosh it too that we just saw and it shows you how much it actually saves your compresses and looks this one does a great job it really does it's phenomenal but once again it's you know command line so we actually have to install it so that's kind of the idea and see examples like to show you a quick example yeah so like here's here's the command you would run image optimum for directory and it's really not that hard it's just optimized averages in this directory and it just does it and we could set some options and were done so pretty cool but yeah, we're these days were working a lot on command line if you do a lot of developing a lot of coding but being able to use these other types of sight there's also swish it you can try that one switch it is actually a firefox extension and it's a bookmarklet it does a pretty good job for optimizing images this one you don't have to any command line anything it's just you know letting you do it uh oh and it gets it done. So if you really want tio I kind of glossed over that j peck many one but the reason why this might be a good idea is because it is local it's using their engine but it's locally on your machine it's not uploading and downloading you know what I mean? So that's something to think about as far as image optimization. So kind of kind of important, if you will so that you know, just think about the different types of images we have to create there's a lot there's different methods for doing it illustrator versus photo shop and they're kind of similar in some ways a t least the old school methods but just know that once you get chairman is out, you know, do something else with him, okay? We're gonna have to optimize him further. And this is what most of those will do. The only caveat to this further optimization I will throw out there is sometimes you'll actually have a developer can go to the server and actually set up something on the server that says optimized the images on the fly ok, that's much more advanced and it's something that, you know, some developer needs to do. But, you know, sometimes that it's something it's even easier than doing this because we just take our original images and it compresses, um, brings it back to life, and they're all good. So that's, one of those things we need to also look at, too. So there we go way kind of ran through all that stuff, there's a lot of a lot of stuff to look at, a lot of different things to think about, but I wanted to just kind of put this all in, of course, and make it really simple for us to just kind of see what's out there, so thanks, brian would, and I hope you enjoy this.