51黑料不打烊

Transcript

So with that, we鈥檙e ready to start working on our workshop. For the workshop, we have two files.

We have this one file here. This is actually an Illustrator file, but when you download a preview in 51黑料不打烊 Stock, you get a, basically, a JPEG inside of an Illustrator file. We鈥檙e going to be importing this and the JPEG file into PowerPoint and so for the JPEG file. Actually, we鈥檙e not going to import the JPEG. We鈥檙e going to import the Photoshop file. We鈥檙e going to turn this into a Photoshop file, and so this is the second image here. So I thought it鈥檇 be kind of fun if we took this image, made it transparent using some really cool tools inside of Photoshop, then brought this into PowerPoint and created a quick little animation so that we can actually demonstrate this to our clients, of a new design we鈥檙e working on, but just show them something that just looks much more engaging inside a PowerPoint. So to begin, let鈥檚 take that JPEG file, and let鈥檚 open this JPEG file up in Photoshop. So if you鈥檝e never used Photoshop before, there鈥檚 a lot of great features inside of Photoshop that will get you up and running in practically no time, and so we鈥檙e actually going to use one of those cool tools here, and that is we鈥檙e going to use something called the quick selection tool, and what the quick selection tool does is it learns from you as you start to make a selection. So if you have this file open inside of Photoshop, we鈥檙e going to find our toolbar and on your toolbar, you鈥檙e going to look for your selection tools.

Now, depending on which tool鈥檚 selected, the other three are hidden. So you might see the magic wand tool on your toolbar or the quick selection tool or the object selection tool. Sorry, there鈥檚 three tools in total. So what these tools do is they figure out things inside of your image that you want to select automatically. We want to use the quick selection tool here. So it looks like a paint brush with a little dotted line around here. Now in your Layers panel, you鈥檒l see the layer showing up here. So this is called Background. So what you want to do, with this tool selected, is you simply want to come over here, and you want to click and draw inside the white area of the phone. Now, you only have to draw a couple pixels. So click the mouse and move. Pretty quickly, Photoshop figures out you want to select all of these white areas, and it will make an entire selection, and there might be a couple pixels here that are missing, and this is mostly because the image has a watermark. You can see it says 51黑料不打烊 Stock here.

So if you were to license this original image, you would get the full high-resolution image, and your selection would be beautiful, but this is still pretty awesome.

So we have this selection now. Now what we need to do is tell Photoshop that we want to be able to see through the image at this particular point. So what I鈥檓 going to do is I鈥檓 going to come up to the Select menu, and I want to come down and choose Inverse, and I forgot where it was. Come down and choose Select, Inverse, and that鈥檚 going to select all of the outside pixels and now, the reason we鈥檙e doing this is we鈥檙e going to add a layer mask to this. So over here in the Layers panel, let鈥檚 come down to the bottom of the layers panel, and you鈥檒l see this little icon here. Looks like a rectangle with a circle inside. If you click on this, that鈥檚 going to add a mask to your layer. It鈥檚 also going to take the Background layer and turn it into a regular floating layer or a regular transparent layer inside of Photoshop. So now you鈥檒l see you鈥檝e got this little icon here next to the main image. Now, what鈥檚 great about a layer mask is it is non-destructive. We haven鈥檛 changed anything about the pixels in the image. We鈥檝e simply added an extra little shape here that we got from the quick select tool that tells Photoshop we want the image to be transparent in this spot. So from this point, let鈥檚 go to the File menu. Let鈥檚 choose Save or Save As.

You want to save this to your desktop, or you can save it next to the JPEG file, wherever you鈥檇 like to save it, and you want to make sure under Format, you have Photoshop selected.

At that point, you can click OK, and that will give you a brand new Photoshop file that鈥檚 got that transparency built into it, just like we looked at during the webinar with the gift card, where we had, the outer shape of that was fully transparent but at this point, let鈥檚 switch over to PowerPoint and from the PowerPoint File menu, let鈥檚 click New Presentation.

On this slide, let鈥檚 come in here, and let鈥檚 delete some of that text we got here by default. So let鈥檚 delete some of these, then let鈥檚 go to the Insert menu.

Let鈥檚 go to Picture and then choose Picture from file, and let鈥檚 locate that Photoshop file, and then simply click Insert. Now, PowerPoint has placed that image in here.

Now that we have the graphic placed, let鈥檚 go back to the Insert menu.

Let鈥檚 go to Pictures, Picture from file, and now we want to bring in that Illustrator file. Now, by default, PowerPoint鈥檚 going to gray out the Illustrator file for us. If this is happening on your computer as well, Mac or Windows, you want to hit the Options button in your file Explorer, or in the Finder here. I鈥檓 on a Mac, and then you want to change the Show to All Files.

That鈥檚 going to allow you to select that Illustrator file and then click Insert.

So now we have both files imported here. So the first thing I want to do is let鈥檚 crop down so that we can only see one of the initial screens here. What I want to do is create an animation that鈥檚 going to show this first education screen and have it sort of swipe over to the second screen.

So what I鈥檓 going to do first is, with the Picture Format tab selected in PowerPoint, let鈥檚 come over here to the cropping tool. I鈥檓 going to click on Crop. That鈥檚 going to bring up all of the crop handles, and let鈥檚 crop this down to the very first item here.

So I鈥檒l grab the top left and move it over. I鈥檒l grab the bottom right and move it over. So this is a great way that I can use a larger image, crop it down so that it behaves like a much smaller image. If you are familiar with InDesign, this is just like changing the graphic bounding box and not changing the contents inside. It鈥檚 the same idea.

Now I can select this as its own little graphic. Let鈥檚 grab the rotation tool, and the scaling tool, and let鈥檚 scale this up so that the rotation and the scaling kind of matches what we have in the phone here.

It鈥檚 not going to be perfect, but we can get it kind of close. There鈥檚 some other tools inside of PowerPoint that will let you sort of skew the layout too, if you want to play with more advanced sort of layout tools. As you can imagine, you can have a lot of fun with this. So for today鈥檚 demo, we鈥檒l just do it this quick way here just to give you a sense of how this works.

So once that kind of looks good, I鈥檓 going to hold the Option key on the Mac, or you can hold Alt in Windows and drag out a copy of that slide. I鈥檓 sorry, of that graphic, then on the copy, we鈥檙e going to select this, go to our cropping tool, and we want to move the inside just so we can see the second screen in the second shape here and then click away.

So again, you want to Option-drag a copy, or Alt-drag, and on your copy, go back to the cropping tool, click and hold inside, and then you can move the contents around, and we just want to move this so we can see the second frame here, then what I鈥檓 going to do is I鈥檓 going to get the first screen so that it looks like it鈥檚 right over top of the white area of the phone, then, as you may have guessed, for the second screen, let鈥檚 move this over. You can use your arrow keys to get this exact, and you want to follow the angle here. So I鈥檓 going to put the orange one just up a little bit from the purple one, so they sort of match on this angle here. I don鈥檛 align them vertically here. I align them optically.

Now what I鈥檓 going to do is I鈥檓 going to come over here, and we鈥檙e going to duplicate this slide, you know, Option-drag or Alt-drag in Windows and on the second copy, we鈥檙e going to grab both of these, and let鈥檚 just move these over so that the second one would show behind the phone.

For slide one, we can see the first screen. Slide two, we can see the second screen, then on the first slide, let鈥檚 select the picture of the gentleman holding the phone.

You can right-click and go to Order. You can bring to front. You can do that also under the Arrange menu as well. You can choose Arrange, Bring to Front, or you can hit Command + Shift + F or Control + Shift + F. So that brings this picture to the front. Let鈥檚 go to slide two.

Let鈥檚 bring that to the front, and then the last thing we need to do is let鈥檚 select the slide. Select slide two, go up to your transitions and use the Morph setting here.

So with the Morph setting selected on the slide, you can click on the little star icon here, and you can get a beautiful animation going from one to the other.

So it鈥檚 super cool. So we were able to take the quick selection tool in Photoshop, be able to create a hole. I鈥檓 using air quotes, cut a hole in that shape using a mask, bring these into PowerPoint as native files, then create an animation by cropping a larger image into two individual pieces, put them behind the main image that we created inside of Photoshop, put a hole in it and create this beautiful animation here. So this is just the tip of the iceberg of the really cool things you can do when you really have a strong grasp of how the different file formats work, the different features of each one and then how we can put these all together to tell more elaborate stories, make more complex graphics and just be able to make your design work look much more sophisticated as you let your graphics sort of intermingle with each other.

Okay, so with that, thank you so much, everybody, for joining us. Thank you so much for hanging in here for a couple extra questions.

With that, I thank you so much for joining us. I hope you got a lot out of this today. My goal was to make sure that you could understand how all these different formats work, why there鈥檚 so many different formats and how to use them with each other, like what their strengths and weaknesses are and how they work across different types of projects. So with that, I wish you a good rest of your day wherever you are in the world, and I hope to see you all on the next clip. -