Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Remove the Friction. Feel the Love. Workflows That Work for Everyone18:25 with Paul Trani
There will always be different ways of working when it comes to designers and developers. But it’s not about changing what people work with, it’s about working with people. Regardless of what file they give you. In this keynote, you’ll learn how brand new technologies are enabling designers to use the apps they want (like Photoshop) and how developers can get the content they need (graphics, CSS, etc.). Probably the best 20 minutes you’ll spend all day. (Aside from the wise decision to get coffee this morning.)
But it's good to see you here, just kind of filter in. 0:00 Have a seat. 0:03 I wanna take you through a crash course in you know really make, 0:03 at the end of the day making our jobs easier. 0:07 Okay? 0:09 Whether you're a designer or a developer. 0:10 And, I don't know what the split in the room is. 0:11 Designers, could you just hold up your hand? 0:13 Again, you're gonna have to pick one. 0:15 Yes, you're gonna have to pick one. 0:16 It's tough, right? 0:18 Developer hold up your hand as well and again we're split. 0:20 Okay, so I'm gonna try to please everyone. 0:23 It's all about feeling the love. 0:24 And I'll click through. 0:27 We'll see some, apparently I like transitions but there's my Twitter handle. 0:28 So just recorded a video on a presentation I did today. 0:32 And again, I don't know if you guys saw that, 0:36 but it's actually again on display through it again as well. 0:37 So none the less we've got some announcements 0:41 today that I wanna go through. 0:44 And, again, I just, it's all about making life easier for us, okay? 0:46 Cuz right now what do we have going on? 0:50 So, we have sort of our, my way of thinking, which I always think is best. 0:53 It's like no, no, no, you need to do it my way. 0:57 And the other guy kinda his has, his way of thinking, which is great and 0:58 that's why I love conferences cuz you get to mingle with other people 1:01 that can really open up your mind with different ways of doing things. 1:05 But you know, traditionally, everybody has their tools and 1:08 they're pretty happy with them. 1:11 And it's kinda hard to change them overall, you know. 1:13 Whether you're you know, designer or even a front-end designer. 1:16 Okay, so how you do, take somebody who's working say in end design or 1:20 even Photoshop and how can you sorta bring that design to life. 1:24 You know again, designer, developer, or just you with yourself. 1:29 [LAUGH] Like you know, taking what I've designed maybe in Photoshop, 1:32 in the tool that I know well, and you know, making a web version of it, okay? 1:37 So yes, I said Photoshop. 1:42 PSDs, guys. 1:43 Whether you like it or not, 1:45 you might be working with an agency and they have graphic designers. 1:46 You know that comp got approved. 1:49 And it was a PSD and then they hand it to you and what do you do from there. 1:51 And, I wanna show you how you can make your life easier cuz again, 1:55 it's not really about me working with you know, forcing people to work with me. 1:58 It's about me working with them best way possible. 2:03 Cuz you do have graphic designers that again, 2:06 creating things in Photoshop you know, gorgeous assets. 2:09 And then, you have developers or front-end designers that are writing the code. 2:12 And, how can we like make these lines connect? 2:17 And, what are all the different tools that people are using? 2:19 Of course, kind of what, kind of floats to the top is PSD. 2:22 And I think, honestly, us at Adobe, finally wised up and 2:26 we said, you know what? 2:28 People are using Photoshop for screen design, for layouts. 2:29 Where in actually, a very, a smaller percentage are using it for 2:34 photos than actually layouts, whether it's a poster for a screen or a mobile device. 2:37 So and then, on the developer track, we have Brackets, 2:42 which we're launching today. 2:46 So, let's talk about that, okay? 2:48 Brackets 1.0, open source code editor for designers and 2:50 developers launching today many, many years in the making, by the way. 2:54 Who uses Brackets [UNKNOWN]? 2:59 I was talking to Michelle, the organizer, and she's like, yeah I love it. 3:00 So nonetheless, it's cool that I can expose you guys to what it can do. 3:03 Because, it's been like three years in the making, 3:07 44 releases, what's taking, what's taking you guys [LAUGH]? 3:10 Ryan Stewart is the product manager for it as well. 3:14 So, you can give him a hard time and go to the Adobe booth out there but it, 3:17 it, we'd love to take credit for it but it's really the community that's helped 3:22 this product become awesome in my opinion, so. 3:26 Tons of downloads, 3:29 16th most popular app on GitHub I think the most popular one when it 3:32 comes to sort of user interface and code development, and a ton of extensions. 3:37 I don't know why you need 439 extensions [LAUGH] in a, 3:42 in a code editor but they are there for you. 3:46 Like, when is enough, enough? 3:48 But that's what's cool about it. 3:50 It's open source, you can write your own extension for 3:52 your specific work environment, and a ton of themes as well. 3:54 And again, it's launching today. 4:00 So again, the idea is to connect these two dots if we could or these two lines. 4:03 And, oftentimes that means Photoshop. 4:08 And we actually have some new features as far as PSDs are concerned. 4:11 Sort of extracting data out of a PSD file using Photoshop, 4:17 using Creative Cloud, and using Dreamweaver, in fact. 4:23 Actually, I'm just, just gonna jump out there right now. 4:26 [BLANK_AUDIO] 4:29 Guys, this is a Photoshop file that's in Creative Cloud, okay? 4:30 So I went to adobe.com, I just logged in, 4:34 and I can sync this file to Creative Cloud. 4:37 And all I did, guys, is I took a file on my desktop and 4:40 I dragged it into the browser. 4:43 And this is the actual PSD. 4:44 Don't have to worry about a JPEG, any of that nonsense, sending that to the client. 4:46 Here's the JPEG in email format, you know. 4:50 They send me back feedback that I get in email that I might lose or not get. 4:53 You can see right here, for this PSD, not only do I get a rendering of it, but 4:58 I can get all the awesome comments. 5:02 Apparently, I think my own design is awesome, cause those are all my comments. 5:04 But, you can see how the comments are attached to this file. 5:08 But this is the exciting thing when comes to extract. 5:12 Again, I can share this with anyone, so 5:15 I could send them a link whether it's the the client or 5:17 the developer as well, so I could send the developer an email. 5:22 They don't need to be Creative Cloud member, any of that guys. 5:27 This is just totally available for everyone but you'll see that render out 5:29 here and they're able to see the comments and add to it, okay? 5:35 And, another great thing they're able to do is click on this extract tab, okay? 5:38 So right here, oh extract. 5:43 Say, maybe me as a developer, 5:46 I'm not crazy about opening up Photoshop even though they sent me the file. 5:47 I don't wanna like, 5:52 try to decipher it cause Photoshop has been around for a long time. 5:53 I just want to be able to jump in and 5:56 maybe select this particular item right here. 5:59 So this title, you can see I can select it and 6:02 oh, now I can copy the CSS for that particular text. 6:06 All right. And I can jump into say, for instance, 6:12 my code editor of choice. 6:15 There's a couple of different ways to do this. 6:15 I'm just gonna paste it 6:18 [BLANK_AUDIO], 6:19 right here. 6:21 [BLANK_AUDIO]. 6:21 Again, just pasting it in right here. 6:24 That's this code view. 6:26 You can see I pasted that in. 6:26 Pretty straightforward, right? 6:28 So, again being able to extract that data and 6:32 from there I'm actually going to show you extract is also in Dreamweaver. 6:36 So, this is that same PSD where I can start to extract all of the content. 6:42 Now whether it's the CSS, the text, or 6:46 even the images, I can pull it out of this PSD. 6:50 And it's impressive that I have Dreamweaver open and 6:54 I have on one side, I have a browser. 6:56 I'm basically editing in a browser in Dreamweaver on that side. 6:59 And, I have a PSD open on this side, which is hm, kinda blows my mind. 7:02 But again, this is our all-in-one editor. 7:07 So I'm a, that's all I'm gonna talk about concerning Dreamweaver. 7:09 Here's again, my page. 7:15 Everything looks good. 7:17 I can start to you know, download the images, as well. 7:18 Sort of, start clicking on each one of those. 7:20 That's great. 7:24 Okay, picking JPEG if I want to, adjusting the quality, all right? 7:25 All from this PSD without opening up Photoshop, okay? 7:30 See all my images off to the side. 7:34 So I'm pulling all this content out. 7:36 I have a clear representation, exactly what the designer made. 7:38 I have the CSS pulled out of there. 7:42 I have the images pulled out of here. 7:44 Let me also show you, just like my slideshow. 7:47 Even in Photoshop, I have this opened up. 7:52 I've opened it up and I'm thinking okay, 7:54 I need, again pull out all of these images cuz there's like way too many. 7:56 And I can use the oh, I don't even know where, 8:00 oh there it is, it's the slice tool. 8:03 You guys [LAUGH] you remember this? 8:04 That little extract tool, remember this little guy? 8:06 So, yeah, I was like, where is he? 8:10 So, there he is. 8:11 Nonetheless, check this out guys. 8:12 I'm just gonna select multiple layers. 8:14 [BLANK_AUDIO] 8:15 Selecting them, file, extract assets from a PSD. 8:17 I've selected those layers. 8:23 It's like Photoshop says hey, I know what you wanna do. 8:24 You want to export those out? 8:27 Well, we'll export out all of those at whatever sort of file type you want, 8:28 the quality, all that fun stuff from Photoshop. 8:33 Not only that guys, check it out, SVG. 8:37 You could have a vector item in there and you got that SVG. 8:40 Okay, I know I'm throwing a lot at you but I only have, you know, 8:44 five more minutes or so. 8:48 But this is impressive being able to do this, from PhotoShop. 8:49 Kicking out all those assets, even different sizes. 8:53 So, if I have two build for retina display, larger or 8:56 smaller, I will kick out all of those images at that size clicking extract. 9:00 It will kick out all those images to that specific folder and will do its job. 9:04 Okay, so, that's what I'd expect, that's what I get. 9:09 Done and Done, 'kay? 9:12 Cuz again, I wanna work with what other people are working with. 9:14 Which a lot of times is that PSD. 9:18 But let's move on, because, Creative Cloud, exporting all those, 9:20 that content, text positioning, you know, CSS, your images. 9:26 All that fun stuff but we also have Brackets. 9:30 So we have Extract for Brackets available now as well. 9:33 So I'm gonna open up Brackets and I'm gonna show you what it can do. 9:38 Because it can then largely do the exact same thing as extracting that content. 9:40 So, here's brackets. 9:45 I have it open, just a simple HTML page. 9:50 I can jump in and start to edit this content. 9:52 Just an overview of it. 9:55 I want to click this live preview button, just so 9:56 we can see what this page looks like. 9:59 You can see it right here, okay? 10:01 And it's responsive, everything's great. 10:03 Move it over, and I'll just move this over a little bit as well, just so 10:06 we can see this on one screen, so like any change that I made in, excuse me. 10:10 Any change that I make in brackets- 10:17 [BLANK_AUDIO] 10:18 -will change also in the browser. 10:24 So, I can see that change that was made. 10:26 So that's across the board, this live editing feature being able to jump in and 10:28 change that content. 10:32 What about the CSS? 10:34 Well I have the shortcut key command E, I can jump in and for 10:36 that nav link for instance, right here, I can jump in and change the CSS in here. 10:40 So changing that font size is what I'm doing quickly, 10:45 you can see it's reflected over here as well. 10:48 So I can make those changes any way I want just like that. 10:51 I didn't have to worry about navigating to that, who knows where that CSS page is. 10:54 What, what line number, doesn't matter. 11:00 I can always go to it though just by clicking on it. 11:02 And now I'm at that specific that class with those different rules and properties. 11:05 In fact if I wanted to see what this property was all about. 11:11 Well I can see that's kind of a gray but again shortcut key jumping in and this is 11:15 for my nav again coming in here and changing say the nav color if I want to. 11:20 So serving up the correct content 11:26 within the context of you working is the whole idea around Brackets. 11:28 And this is aside from all the customization with extensions and 11:32 themes that I can do as well. 11:37 But let's move on. 11:38 Because again, what happens? 11:41 You might be working on this design. 11:42 And whether this is the first design or the update. 11:44 Say for instance this is the update that the designer did. 11:48 And they send you the PSD, and you're like, okay great. 11:51 The, the design has changed drastically 11:55 from what we had the previous month, right? 11:59 So it's like, okay, what did they do, and how can I change this content? 12:02 And I can still jump in, and you know, change say for instance the background to 12:07 get it the way that I want, but really it's all about extracting that content. 12:10 So right over here, extract for 12:15 brackets, clicking right there it's going to open up Creative Cloud right down here. 12:17 My assets, there's the PSD, opening that up. 12:22 You'll see it render out at the bottom. 12:24 You don't even have to have Photoshop at all, you can see all the contents or 12:27 the PSD right here, and, I can start pulling content out of it, 12:32 so, again if I wanted to take, any, any part of this. 12:37 So, I could be still working on this nav link for instance. 12:42 All right. So, here's my CSS right here. 12:46 That's what I was messing with. 12:49 I thought it was gonna be red, maybe I wanna change it to that specific color. 12:50 It's a matter of jumping in there. 12:54 And you can see it right here. 12:56 And this is what's great, it's like, working within the context of your coding. 12:58 We're not just gonna give you all the CSS and say, here it is. 13:01 I'm the developer, I'm gonna write this, so I'm gonna jump in, and 13:04 as I type in, say for instance, the background color, 13:07 I'm actually gonna get the background color for that specific object. 13:11 See, it pops up, I'm sorry, that's kind of hard to see. 13:14 I don't have to worry about what color that is, 13:17 I can select it since I have that item selected. 13:19 So I can go through and say, I want this CSS. 13:23 I want that. 13:25 I want that. I want that, 13:25 and then it will give me all the code hinting for that. 13:26 So I have full control over it as a developer. 13:29 So selecting that, you will again you'll see it change 13:32 on our page as well and it matches that PSD, okay? 13:37 Didn't have to open the PSD up at all, and I can move on from there. 13:40 All right, even if it again comes with other things cuz what 13:45 did the designer do; they did a border radius, and 13:51 I should really increase the size of this font, but border. 13:55 You do have to at least type the first couple of letters correctly, and 14:01 then you can hit enter. 14:05 It's like I have, I have three three keys to hit but there it is and 14:07 I'm rounding those cutter those corners every so subtly. 14:11 Which you know the designer would recognize and 14:16 say hey you know what you didn't round those two corners to make it fancy. 14:18 Like right there and then right there but I can act easily extract that CSS. 14:21 You can see it right there, and I can see all of my layers, okay, so 14:26 I can access this content off to the side just as easily. 14:30 Let's go beyond that in fact for this text right here, 14:35 I'm noticing there's some text, and 14:38 on this page again I want full control over this CSS and my HTML. 14:43 So I wanna determine when I wanna use this content. 14:48 And, really I just have some place holder text right here. 14:51 My, my hipsters-ipsum, if you will. 14:55 Check it out. 14:57 Hipsters-ipsum. 14:58 It's kinda funny. 14:59 All right, so overall, with that text selected. 15:00 You know, I can jump in and just with a couple keys, Ctrl, 15:05 Spacebar, with that text selected I can say, okay, there's, that's, 15:08 let's get rid of that hipters-ipsum. 15:12 It was funny to read, all that good stuff, and now it's actually on that page. 15:13 So whether it's, you know, some of the HTML or text CSS, what about images? 15:17 Well, let's take a look. 15:24 Because on this page I happen to have this image which is different, right? 15:26 Same process guys. 15:31 Let me increase this font size by jumping in here. 15:32 Image. 15:37 Space. 15:39 Oh yeah, I do want that image. 15:40 Thank you very much. 15:41 [UNKNOWN] the height. 15:42 You know, everything within the context of this code hinting of that file, you know, 15:44 selecting it there. 15:48 Not only that, I can rename it if I want to. 15:49 It's gonna rename it. 15:51 I can change the file's height. 15:52 In this case I actually want it to be JPEG just like that. 15:55 And again, I can just call it a day. 15:58 And there we go. 16:02 And it will be on my page right there. 16:05 So I just pulled that image. 16:08 Excuse me, that yeah, 16:10 that image right out of that PSD, put it on my page and it's done. 16:12 I didn't have to open up an editor at all for 16:17 any, any graphic editor whatsoever, Photoshop or whatever. 16:20 Right? 16:23 And this is free guys, so 16:23 basically we're saying hey, you don't have to use Photoshop. 16:25 I don't know how we're going to make any money with this by the way. 16:27 [LAUGH] Cause we're saying you don't have to use Photoshop. 16:30 We're doing, I don't know, I don't know guys. 16:32 I will be posting my resume online a little later this year. 16:36 But overall you can see how that's done. 16:41 I actually have that, two images in there, but again removing that second one. 16:43 Even when it comes to guys, 16:48 sort of extracting multiple images cuz this PSD is actually pretty darn crazy. 16:50 Let me just increase the size. 16:56 A lot's going on with it, and I can sort of pan around if I wanted to extract say 17:00 for instance those three images. 17:05 I can select them all and I'll get code hinting. 17:07 I won't do it right now. 17:09 Same thing, typing an image. 17:11 It will say, oh you selected this group of images, we'll go ahead and 17:13 export that as one image for you, put it in the folder that you wanna put it in. 17:16 Cuz I could have named a different folder. 17:20 Put it right there and your job is done, all right. 17:22 Even though the designer didn't make those part of one layer. 17:25 So, it doesn't affect the designer's work flow, yet 17:28 it makes my work flow as a developer a lot easier. 17:31 Right? 17:33 Anyhow, that's the power of Extract for Brackets and 17:35 Extract in general, as well as this, again, hitting 1.0 taking three years. 17:40 What's taken us so long? 17:46 I don't know. 17:47 But that's about all I have for you. 17:49 Hold on one second guys. 17:50 Available for you today. 17:52 Being really conscious of your time guys. 17:54 Yeah, so, Brackets 1.0 hitting today. 17:56 And that's all I have for you. 18:02 Look closing slide. 18:03 I nailed guys. 18:05 I'm done. [APPLAUSE] I've got maybe two minutes. 18:05 [SOUND] Hopefully, you guys, it was very fast, a little rushed, but again we're 18:09 out there and we'll be happy to answer any questions for you and again you get this 18:13 today for free, and again we'll be looking for jobs in about six months. 18:17 Thanks guys. 18:20 >> Let's put our hands together for Paul real quick. 18:22
You need to sign up for Treehouse in order to download course files.Sign up