4.3 Live Sharing in Adobe Photoshop
Take comments to the next level with LiveShare PS. This OS X plugin lets you easily share a working Photoshop mock-up with your team and get instant feedback. You can also apply changes instantly for everyone to see.
Note: You will need Photoshop CC 2014 and OS X for this plugin.
1.Introduction4 lessons, 14:32
2.Creating a Mock-Up in Adobe Photoshop5 lessons, 39:54
3.Building the Interactive Prototype With InVision5 lessons, 46:22
4.Sharing and Gathering Design Feedback4 lessons, 26:57
5.Conclusion1 lesson, 01:41
4.3 Live Sharing in Adobe Photoshop
Hi everyone. In this lesson, I'm going to show you one of my favorite features of this InVision App and that is the new live share option straight from Photoshop. This is going to merge live share that you've already previewed in this course, but it's gonna come straight from Photoshop. So I'm gonna show you both sides of it. I'm gonna show you the side from you, the designer, who was sharing your Photoshop with your team and your clients, and then also from the client's perspective of leaving back feedback on this LiveShare experience. So let's dive in. We're gonna start this in Photoshop. So we're gonna head back to Photoshop here, and you can see that I now have a LiveShare Photoshop plugin. This is downloadable straight from your application. The easiest way to get to it is through New Features. And you come down here. You come down to. LiveShare Photoshop. And then there's the ability to Download this LiveShare plugin. Now this is Mac only right now, and it is for the latest version of Photoshop CC, so that is what we're using here. That's how you can find it and download it right into your Photoshop program. So back in Photoshop, you can see that we have our mock-up here, and that we're ready to share this. So when you're ready, if you don't see it right away, it lives in Extensions under Window > LiveShare, and then it'll pop up this application. And you have the option to choose how you wanna share this. And then when you're ready, you just click Start LiveShare, and it's going to connect and then it's going to open up your browser. And it's gonna activate a LiveShare session from InVision as well. So don't worry if you think that you have to do everything from this screen. You're gonna get a little preview of what is quickly possible with your team and this experience, and then it comes up like this. So this is the actual LiveShare screen that you would be able to access from here, all right? But we initiate it in Photoshop because we want that connection. And you'll see why we want that connection in a second. So you have the option now to share this with your team and invite others. So you can copy this URL, send out a quick message, join me for this live session. And then they're gonna join in. So I'm gonna copy this really quick because we wanna get Steve involved. And so if we mimic Steve coming in here in a different browser, then we're gonna have Steve join in on this so we can have some back and forth. Okay, so this is what somebody joining our team is going to see and they have access. Again, they get a little preview. So they can see that I'm here as the presenter and then this is Steve coming in and then he can see my pointer on here. So as things are moving around the screen, as he's logged in, he can see this. We can also group chat back and forth. So this is how this is going to appear on both sides of the screen, from your side and then your client's side as well. So if we go back to my side, meaning the Photoshop side here, this is what's gonna happen. I'm in Photoshop and we just recently had a comment from Steve about how he'd like to see this orange. All right? So what we can do with this LiveShare Photoshop plug in is make these changes. And he can see them live and he can comment right away if he likes that. I cannot tell you how awesome this is to not have to go back and forth through multiple emails and see if he likes something as simple as a color change. We can invite him to a LiveShare situation, where he can login and see this and go, wow. And be able to see this right away, comment if he likes it or not. So let's see what happens when we make this change. So we're in our original Photoshop mockup here. I'm gonna go down to where our form header is. I'm gonna double-click this and he said he wanted to see it in an orange and a teal. So let's pick out a nice orange color. Okay, you can see it's automatically now going to sync across to our LiveShare streaming that's happening within our browsers. All right? So it might take a second depending on the speed of your internet and what you have going on with your computer. But it is going to sync this up. You can see that it's done now. So, if we go back to our LiveShare, this is on my side, we can see it's now changed automatically in our browser to orange. And if we go over to Steve and he comes up, he can now see it's orange as well. So, what we can then do is go back to me and we've changed it to orange. We can go over here to Group Chat and be like, Steve, what do you think of that orange? Okay? I have now made a chat, and let's go back to Steve here. Steve's gonna see that I'm commenting and I asked Steve, what do you think of the orange? And then Steve's gonna go and say Great. It's definitely brighter. How about teal just for reference? All right, cuz he also mentioned that he wanted it to be teal. So Steve's coming back with his comment, okay. And then if we come back to me, I can now say that he wants it to see it in teal, okay? And I can just say, just a sec. Okay, and then I'm gonna go back to Photoshop, right, now let's make this a teal color. So he wants it to be teal, so let's go ahead and pick out a nice teal. If we need to move this out of the way, we can, so we can see what we're doing. Okay, there's a nice teal. Again, we're gonna sync across. So if we go back to our browser and wait just a second, we see that it's starting to sync across with what we have going on here. And you just give it a second. This is why I'm sharing this communication with you, so that you can tell people during the chat, you know, hang on for a second so they know that this change is happening, and they don't think that there's just a delay and you talking. Okay, boom. There we go. Now we have the teal color. So we can then see this teal, let's go back to Steve. All right, so Steve now sees that it's teal. So Steve's gonna write back. He's like, I like it but gray was still the best choice. Thanks for letting me. See the color options. Okay, so he likes it, but gray was still the best choice. Thanks for letting me see the color options. All right, so, now we've quickly shared our screen and gone back and forth, and he's been able to respond back to me and see exactly what's going on here. And be able to give this feedback on the screens. Now one other thing that I want to share with you is the ability to draw on your screen as a whiteboard. So you can select certain elements on here, if you want to, on the screen. You can also click over and you can start a Whiteboard mode, which is going to allow you to interact with this and be able to do things further. If you need to take things off, sketch something out. You can get very interactive here. You can even draw out a text box, if you need to, and type in text that you might need to on your white board. And then you can also click and drag things around if you need to. So it's really ultimately allowing you to interact between the two, and you can go back and forth and do whatever you want on your screen, or if you don't want to do it right on your screen, on your white board. Now the other cool thing here is that you can add people on the fly if you want to. So if Steve had a question specifically, that he needed addressed and you couldn't do it, you can come over here and you can share this link and add more people to the queue here to get involved with this if you need to. You can also come up here and save this to Snap. So if you need to, if you wrote all over this and you wanna be able to save this for later, you can look at this and all of the feedback that you've gotten. You can also email the sketch to yourself so that you can refer to these notes later. And then you can always keep track of the timing of the session and how long everything is taking. And then when you're ready to end it, and all is well and you're ready to move on, you just go ahead and click End, and it's gonna end out that session for both of you with another click. And then this session is going to end, and then it's going to end over here for Steve as well. So now we both have ended this session. So how awesome was this to be able to come in here and instantly share? You haven't changed anything with your screens, but you were able to share exactly what you were doing in Photoshop, with your team, with your clients, immediately. In just a few clicks, we were able to solve his questions of whether or not to go with teal or orange, and he ended up liking the gray in the end. So we can just come back to Photoshop and actually just go back a couple of steps and we're back to our gray. We don't need to make any changes. Coming up, we are gonna look at what happens if we do need to replace our screen, if we've made some changes, some tweaks, and version control in InVision.