Right. This export video is for people that end up having  to work with developers. Not like that's a problem,  but you might be, uh, one step in the kind  of design process when it comes to see a web design  or an app development. So you mock it up in Photoshop, which is perfectly fine,  but you need to get the details over to your developer  so they can build a website from it, code it out. We're gonna need a few different things. We're gonna look at giving them all the code for the colors  and the fonts and the images, how to save for kind  of high res and retina images, plus things like CSS and SVG.

If all that stuff sounds a little bit, uh,  not your thing, still watch this one. You might find, especially when we get to Adobe generate  that you might be like, Ooh, I can use that  for this other thing that I do with this other agency. Maybe sort of intranet type thing. Anyway, stick it out. It'd be good. First thing you can do is say,  I work with my developer Malcolm.

He is an amazing developer. He will do anything. Not to open Photoshop though. I can send him a Photoshop document  and I know he is got a license,  but he, he just doesn't want to have  to learn Photoshop every six months when  he kind of uses it once. You've probably got friends like this. What he loves is he loves when I go to libraries  and he wants to know the color, he wants to know,  I'll send them the JPEGs, okay, the mockups  or the PDFs, whatever he wants.

But he'd also like to know the colors  and what fonts they got used  and hey, we've got these images. Can he download them without having to figure out  how to use Photoshop? So what we can do is we can get our library looking good  and we can go up to here  and instead of using collaborate like we did earlier,  we're gonna this one that says share link. And the perk for this one is that Malcolm  or anybody else doesn't need a creative Cloud license. They need an Adobe login, which is free to get. You don't have to have a paid license, okay?

And what ends up happening is you get to here. Alright? So it's a web based interface  and what I can say is I'm gonna make it public  and I'm gonna share it with just the people  who can share this link. Okay? So I'm gonna email that to Malcolm. I'm gonna add some notes to say Here are the graphics dude  for the X, Y, Z design and we're good.

What ends up happening is, I'm gonna close that down. This is what Malcolm sees, okay? He just gets a link, he logs in with his Adobe id,  which he doesn't need a paid version for,  but he can see everything that's in this library. The cool thing about about it is that if I add stuff  to my library from Photoshop,  now it'll just magically appear in here. And what's really good for this  for say a developer is they can come in here  and say, this I HQ Blue, they can drop this down. Actually they can click on it and it gives them more details  and it gives them kind of web nerdy stuff.

So it's gonna give them the HEXA decimal number  or the RGBA color. There it is there, okay? So they know that that color, that's the web version of it  or the IGB version if they're gonna use it. So this doesn't have to be a web developer,  this might just be your brand guidelines for your company. Okay? Click here to view all the colors  and so people can come in here  and just actually get the colors, download the logos.

Doesn't have to be a web developer. Same here with this text. Okay? They, there's the color for it. Uh, let's jump into it. It's gonna actually tell us there's the font family,  all sorts of lovely, good, useful stuff  For our developer.

Alright? Let's say we need  to give the developer more details, okay? More code, more neediness. Let's say I'm gonna search for all the type in here. Let's find this raw X. Okay?

So I wanna give them a lot more detail in terms of the CSS. Okay? So with this layer selected under layer,  there's this option, it says copy CSS  and nothing really happens except now if I paste in an email  or I just got a text document here, I'm just gonna go  to edit paste kii koha. If you're a web designer like me  and you want to use this stuff, it's really helpful. You can dump this stuff into Dreamweaver to be creating. You even said it's created a class  and it's given it the font size,  which I want the font family, which I want.

The color, the line weight, all sorts of cool stuff. Um, I probably don't want the position height and weight. It gives you too much information probably. I just want a little bit of it. Alright,  and something else a developer can use is something called  an SVG. It's a scalable vector graphic.

So we've been using JPEGs and P gs online forever,  but it's becoming more and more common to anything  that is vector, if you know what that term is. Okay? So if it's Vector, it can be exported as an SVG  and that SVG can be described in code, which is pretty cool. It doesn't have to be an image. Like we understand it as a jpeg. So let's say there's big circle here.

I want to get it to my developer. I want it to be vector. So it scales up and down. I want it to be the right color, I want it  to have all the right radiuses. So with it selected here, I can say, uh,  under layer I can say I'd like you to copy the SVG. And just like the CSS, you can just paste it into an email  or into document and it gives me all the coordinates.

Okay? All the anchor points,  the fill color, there it is there. The RGB, the height  and the width to describe that circle as a vector graphic. Really good for logos. Any sort of icons that need to scale up  and down, especially for apps  or websites that have kind of multiple size resolutions. SVG is new.

New-ish. Not even new, it's just being accepted a whole lot more  through browsers and apps. Alright, I said there was kind of three separate parts. So, uh, we've done clients, we've done colleagues,  and now we've done this one with developers. But this developer one has an extra special thing. I'm gonna separate it out into its own video.

It's called Adobe Generate. Super useful, super helpful,  and not just relevant for developers. I think you can use it for all sorts of things. So we'll separate that on the next video. Let's jump into it now and look at Adobe Generate.