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.