Create a Virtual Business Card in Adobe InDesign, Photoshop, or Illustrator

1. Welcome!: What'd you do the last time someone asked you for your business card, did you sheepishly grin and swear to yourself that you'd actually print some up and have them with you at the ready for the next time. Someone asks, I've done that too many times to count. But the reality is no one wants to type your website into their phone or dig your business card out from the bottom of their purse. So instead, let's level up the game and make it easier on everyone with a totally sleek, endlessly editable and always at-the-ready virtual business card. I'm going to walk you through the step-by-step process for not one, not two, but three different approaches for building your own fancy schmancy digital calling card. And believe it or not, we'll even create an animated business card that is definitely too cool for school and sure to impress whether you prefer to work in Adobe InDesign, Photoshop or Illustrator. I've got you covered. You'll learn three ways to generate QR codes that you can use to direct people to your website, portfolio, social accounts, and pretty much anywhere else you can think of. My name is Kara Plicanic and I've been InDesign dig for over 20 years now. And I've been teaching for nearly just as long with courses on everything from photography to Photoshop and InDesign to Illustrator. I love exploring new uses for old things. And while QR codes have been around for a long time now, they are definitely experiencing a renaissance. So if you're ready to seize the moment and stop apologizing for not having printed cards on you at all times. Join me in the next video and we'll get started. 2. Before You Start: Building a Virtual Business Card is actually super simple. You just need to gather a few things to get started. First of all, we want to think about where are you going to send people with your QR code? You could send them to your website. You can send them to a specific social media account. You can send them directly to your portfolio. There's a lot of different options. The other thing we're going to want to include is some sort of profile picture or whatever your avatar is that makes it easy for them to recognize you once they follow your link. In my case, I'm going to use the same picture that I use on all my social media accounts so that whoever uses my QR code can instantly recognize that they are in the right place. In this case, I'm going to be linking to my link tree account and I'll just login here. So here you see a preview of what it looks like. And what's great is it's basically a super streamlined, mobile-friendly contact page. So you can steer people toward whatever links you want to send them to, whether those are your store or your portfolio, or your social media accounts. It's really easy to add links here. My awesome wink. And you would click Add, and it will just show up in your list here. So this is the URL I'll be including in my QR code. When it comes to graphics to use on your virtual business card, there's a lot of great sources for free and legal images that you can use. One such site is unsplash.com. And if you come here and search for something like Abstract Background, and you can even put a color. So maybe I'll say Purple. And I'm going to see lots of cool stuff like this. And if I decide I really liked this one and I want to use it, I'll just click right here to download that image. Just know that Unsplash does have some images that are paid upgrades. The rest are free. If you want to explore making an animated virtual business card, one easy way to do that is to come to Adobe Stock site at stock.adobe.com. And over here in the free collection, will choose Free and we'll type animation. Now we're getting a whole mix of a bunch of things including images that aren't going to work for us. So we need to click videos. And let's come down here and choose looping. So things to look at here are, of course, colors and things you might be interested in. You want to avoid something that's gonna be super noxious in give your viewers a headache. So this is cool, but maybe not best for a Virtual Business Card. So I would recommend keeping the animation subtle. The other thing you want to keep in mind is the orientation. So obviously this is meant for widescreen, but we can rotate this to make it vertical without messing up the design. So not all of these are going to work that way. For example, this one with these hearts, if we rotate this, the hearts are gonna be floating sideways. Maybe that's what you want. Maybe not an option. If you find a video like this that you really want to use, and I'll show you how to do it is to crop this in Photoshop so that you can still make it usable. So when you find a file that you want to use, that's all you have to do is come down here and click License. And as long as you are logged in with your Adobe ID, that video is going to be added to your default Creative Cloud library. As well as I've got it downloaded here on my system. Other things to keep in mind are the length. So all of these apparently are looping because we filtered for that. But it may be a really long loop. So this is 15 s, that's gonna be an enormous GIF file. So ultimately when we're done with this, we're going to export it as an animated gifts so it can play right within our photos on our phone. So because we're not trying to post it online or something, we don't have to worry too much about file size, but we still need Photoshop to be able to process it. So if you want to use the clip as is, then look for a very low duration time, like five to 10 s probably at the most. I'll also show you how we can take any of these and create our own shorter loop to save a ton on file size. If you want to follow along and use the exact same files as me, check out the Projects and Resources tab directly below this video for links to these exact files that you can license for free and use to follow along, figure out where you want your QR code to take people, gather up any background images or videos and profile pictures that you want to use and meet me in the next video, and I'll show you how to build a super simple virtual business card, right? In Adobe InDesign 3. Designing in InDesign: So here in InDesign, the first thing we're gonna do is create a new document. I'll choose File New Document. And you can use whatever dimensions you want here. But I'm gonna be working in HD, not full HD, but HD. So I'm going to choose for units pixels, and we'll enter a width of 720 and a height of 12 at. We don't need facing pages, we only need one. I'm going to uncheck the primary text frame, so we don't need that either. And none of this other margins stuff really matters. If it, it is important to you, you can enter whatever you'd like here. But let's go ahead and click Create. Now we're ready to add our background image. So let's do that by choosing File, Place or the keyboard shortcut is Command or Control. D. Navigate to wherever you have saved the image that you want to use for your background. In this case, I have this image here that I downloaded from Unsplash. You will find it linked in the Projects and Resources tab below the video, if you would like to use it as well. So I'll select it. I'm not going to show Import Options. And then let's click Open. Now we can see our cursor is loaded. All we need to do to place this image is position our cursor in the top-left corner. And we're going to click and drag down to the bottom corner. And you can see it doesn't have the same proportions as our document, which is just fine. To adjust it proportionally, I'm gonna hold down the Shift key. Now, I can make it exactly the size of the page. And when we let go, InDesign is going to place that image proportionally to fill the frame and we get this lovely result. Alright, Next we're going to add our profile picture. Now here when we placed this image, we used the File Place command and then drew the frame. But this time, let's draw the frame first. Let's come over here to the toolbar. And this particular tool right here, this is the rectangle frame tool, keyboard shortcut is the letter F for frame. If we click and hold on this, we see that there's also an ellipse frame tool. So if we hover on that and release, then we'll get the ellipse tool. And we can hold down the Shift key while drawing, clicking and dragging to draw an ellipse. And it looks like this. Now to reposition it, we want to use this top tool right here, the selection tool, it's like InDesign, Move tool. The keyboard shortcut is V for move a viva. If we wanted to reposition this so we can take advantage of the smart guide right there. We can do that. Alright, Now we've got our frame and it's selected, we're ready to place our profile pic into it. So let's bring up that file Place command again by pressing Command or Control D. Navigate to wherever it is that you have saved the file you want to use, select it and click Open. Now, if we want to add a stroke to this to really help it contrast with the background a little better. We can come up here in the control panel. Now if you don't see this at the top of your screen, just go to Window control. And here we have our fill color and our stroke color, which are both right now for me anyway, they're set to none. It's okay if yours how to color in there. That's fine. When you drop an image in, it will not matter. But let's change the stroke so that's the bottom one here. If we click on the carrot, we can select paper, which means white. And we probably won't see much of anything because the weight is currently only one point. So to thicken that up a little bit, we're just going to hit the up arrow until we get to maybe 1012, Whatever you like. And we can see that it's centered on the edge of the frame. If we want to bump the strokes so that it's on the outside. We can access our Stroke panel by choosing Window, stroke. And down here we see that we've got it aligned to the center. But we could also choose the inside or I'm going to choose outside. That way it's not covering any of the picture. Next up, let's add some text so we put our name here. Let's grab the Type Tool and click and drag to create a textbox. And I'm just going to type in all caps, my name. And set that to something just like Helvetica, bold. We can change the size up here in our control panel. If you hold Shift, it will increase in increments of ten and save you a little bit of time. Alright, so got this here. I've got the font, I've got the size, I want to change the alignment and the color. So I'm going to select the text. And up here and the control panel when we see the little T that is our indicator that we are about to format that type. Not the box over the frame itself, but the text within it. So let's click that And I want to have the text be white. And up here I can also choose to center, align it horizontally anyway. So this looks pretty good. But in order to really make it even more readable, I'd like to add a black fill behind this and then vertically align the text to the center of the text frame. So how are we gonna do that? Well, for one, I want to get my cursor out of this active textbox by pressing the Escape key. So you can see the frame is still selected, but the cursor is no longer active. Now if we come back to the control panel, we see the T is gone. And if we click the little carrot, we can tell InDesign if we wanted to format the frame or the box itself, or if we want to format the text within it. So we can see that the text when this is active, we can see the text is white. But if we click on the box or the frame, we see it has no fill. So let's go ahead and add a black fill. And now we're talking, now we can really read this here, but it's at the top of the box. And that just looks silly, right? So let's make it better by bringing up our text box options or text frame options by pressing Command or Control B for better. You can also incidentally right-click and choose Text Frame Options. Alright, so here I'm going to drag this out of the way a little bit. Let's turn on preview so we can see what we're doing here under the general settings. Vertical justification, a line. Let's change it to center. And if it doesn't look quite centered, like maybe it's a little bit above center or below. Then you want to come over here to Baseline Options and make sure that the offset is set to something else. So if ascent is not working for you, you can try x-height. You can try cap height. All of these things will basically tell InDesign specifically how you want the letters central, centered, which baseline do you want to center? Alright, so I'm gonna go with cap height and I'll click. Okay. So that is looking pretty good. I'm just going to drag it up here and make sure that it is also centered. Might move this up a smidge. There we go. Alright, so if you're not seeing those guides popping on, those are your smart guides and you can find them by going to View Grids and Guides, and then make sure that you enable smart guides and also snap to guides. Alright, so that is looking good now we just need our QR code, right? So let's generate our QR code by choosing object. Generate QR code could not be simpler here, we can choose what type of object we want the QR code to 0.2. We have a lot of options here. You'll notice one of them is business card, and that enables us to input some data. And this creates like a legit virtual card entry in the recipient's address book. So if you straight up want to create an entry in their address book, then by all means, choose business card and put in your information. In this case, I actually want to send them to a web page where they could subscribe to my newsletter or follow me on social media or e-mail me or any number of other things. So I'm going to choose web hyperlink, and then I'm going to come down here and paste in the URL that I want to link to. Now if we want to change the color of our QR code, we could do that here. But let's keep it classy, keep it sharp. I'm going to leave it set to black and click. Okay, here is our QR code. If we now click and drag to create the square with the graphic in it, you'll see that it's on a transparent background. No problem with the frame selected. Come up to the control panel and set the fill to paper. If you need to edit this QR code later, if you just right-click on it and choose Edit QR code. And it'll pop you back right over to that same dialog. And you can make your changes and click OK. And for anyone who's wondering, the QR code that InDesign generates is vector. So you can place it at any size without having to worry about resolution. It's a nice little bonus. If we want to double-check that everything is aligned, we can Shift-click on all three things. And with our top selection tool here selected, if we look up in the control panel right here, we can click to align horizontal centers, but using our smart guides, we can see that that was already centered. If we wanted to preview this without all of the guide marks and margins and all of that. We can press W for wonderful mode and Command or Control minus to zoom out. That is a classy looking virtual business card. Now, let's save our work by choosing File. Save As we'll navigate to where we wanted to save it. And I'm going to call it virtual business card InDesign. And we'll choose for the format, the current version of InDesign and click Save. Alright, now to export this into something you can actually store in your phone, in your photo files. Will choose File, Export. And for the Format, select JPEG and click Save. Here, we want to make sure we're exporting all the pages, which there's only one. So it doesn't really matter as a page, not a spread. And for quality, let's say high and the resolution 72 is fine. Color space, RGB, perfect. We'll click export, and that's it. Now we have a JPEG that we can load on our phone and show it to anyone when we want to make it easy for them to find us online, view our portfolio, sign up for our newsletter, or just connect on social media. So that's a look at how you do this in InDesign, where you can generate your own QR codes, but what about Photoshop or Illustrator where it's not built-in natively to the app. Join me in the next video and I'll show you how 4. Designing in Photoshop (or Illustrator): Here in Photoshop, we're gonna do a similar design, but when it comes to creating the QR code, we're going to have to look outside Photoshop. So I'll talk more about that in a minute. For now, let's build our document by choosing File New. Let's set the width to 720. The increments, two pixels am the height to 12 at. We want to make sure we're in RGB color. And the rest really isn't terribly important. Let's click Create. So here is our blank canvas. Now we could add in the same image that we did before. But let's try something different for the sake of learning. And let's create a gradient using an adjustment layer. Down at the bottom of the layers panel, we want to click this little icon right here and select gradient from the top section of the list. So not gradient map, but just gradient. Let's select the gradient we want to work with by clicking the carrot right here, you've gotta be careful if you click on the bar itself, you get the gradient editor, which is a totally different things. So click the carrot, the drop-down here. And you'll see a number of preset gradients organized according to Hugh. I'm gonna go choose something from the purples. So I'll twirl that open. And I think I'm just going to select this one right here. And if I click away, I can pop that drop-down closed. Maybe I want to reverse it so that the pink is on top. You can make any other changes here that you want. And then when you're happy with it, click, Okay. Now we're ready to add our profile picture. And while we could do it with the frame tool, it introduces some bugs that I would rather avoid. So we're gonna do it using a clipping group. So let's select our shape tool. So way down here, the keyboard shortcut is the letter U. And if we click and hold on, whichever tools selected here, probably the rectangle tool, click and hold. And then we can mouse down to ellipse tool and release. Now up here, we want to make sure in our control panel that this option is set to shape. It doesn't matter what the fill color is, but just so we don't have to look at it, be red. I'm gonna click and set that to something less wildlife black. We'll leave the stroke blink. So if it's not, you can click here and then choose none to make sure that there's no stroke. And then let's come over and click. And while you drag, hold down the Shift key to constrain what otherwise might be an oval into a perfect circle. So if we're happy with this, we can let go. We see that it fills in here. And if we need to change the size at this point, we can do that by dragging. Depending on your settings, you may or may not need to hold shift to maintain proportion if you resize it, alright, reposition it. You want to switch to the Move tool. And you can drag this around until you see it snap with your smart guides, letting you know you've got it centered horizontally. If you're smart guides aren't showing up, just go to View, Show smart guides, and make sure that that option is enabled. Alright, so we have a circle, but we don't have a profile picture. So let's go get it by choosing File Open. Grab our image. Get it open. Now we're going to select it all by pressing Command or Control a. So we should see marching ants around the whole thing will copy it Command or Control C. And now to switch back to our other document, we want to click over here on this tab. We have two documents open right now. We can switch between them by clicking the tabs. So we're back here in this document and now we can paste Command or Control V. So this image is much too big. That's a good thing. We'll fix it in a minute. But first, let's make it so that this image appears within the shape. The way that we do that is we create what's called a clipping group. So we're going to flip this image to the circle that has the effect of making it look like the image is in the circle. To do that, these two layers have to be side-by-side and layers panel or on top of each other. Then we hover our cursor in the space between them and we hold Alt or option. That's it. And when we see this funny little, I call it a Gonzo cursor. Because doesn't it kinda look like Gonzo from the Muppets, like in profile view. When you see Gonzo, then you know you're in the right spot and you can click to clip this layer down. See the little cursor here, the little icon to the shape And now we can just transform it by bringing up Free Transform and pressing Command or Control T. And we'll drag in from a corner, depending on your settings, you may or may not need to hold Shift in order to maintain proportion. Alright, so we'll position that wherever you're happy with it. And in order to move on, you've got to commit your transformation so you can either press Return or Enter or hit that check mark up there in the top. Now if we want to add an outline to this as well, then we can click on the ellipse shape and down at the bottom of the layers panel click effects and choose Stroke. Here we can use the size to adjust the weight or thickness of the stroke. Next to position. I'm going to have it set outside. And if we wanted to change the color, we can click right here and pick any new color or dial in by number if you know what you want to use, but I'm going to stick with white. So I can either type a value of 255 for each of the red, green, and blue channels. Or I can come down here and hit the letter F, as in Frank, six times. Or I can put my cursor in this giant box here and just drag it all the way to that top-left corner. And that'll, that'll do it. I think we're going to thin this down just a little 14 pixel stroke weight. Okay, so then when we're happy with it, we'll click Okay, now if we want to change this later, all we have to do is come over here and double-click on the effect, the stroke effect that we just added and we can make our changes. So that will live here on the ellipse layer in the Layers panel. Next, let's add some text so we'll press T to get the type tool. And instead of clicking and dragging to draw a box, I'm just gonna put my cursor right here in the center and click. And I'm going to type my name in all caps. And I'm glad I did this mistake. So you can see, here's what's happening. The letters are here, but we're not seeing them because we've clipped the text to the ellipse along with the image. And that means the text is only visible when it's on top of the circle. And in this case, it would never be visible because we've got the picture on top of the texts. So let's go ahead and commit our text. So come up here in the control panel will commit. Now to fix this situation, we just need to drag this above the profile picture and then release it. And then we need to clip it. And we do that the same way that we clipped it in the first place, which was holding down Alt or Option and hovering in-between to get that Gonzo icon and then click. So now we can see this type and I'm going to switch to my move tool by pressing V for move over. So I can position this text which is little bigger than I'd like it. So I could put my cursor in there and change it. Or it could just press Command or Control T and scale it down this way. So I'm going to position that right about there. I'll commit my transformation, pressing return, and let's change the color. So I'll press T for the Type Tool. And up here in the control panel, this is where we change the color of the texts. If we change this, it's not going to affect the text. So with the type tool active and the texts layer active, we can come up here and click, and I'm going to also make this white. Alright, that is looking pretty good now, we're just ready for our QR code. How are we going to do this in Photoshop? Alright, so we have a couple of options. There's no way that's natively built into Photoshop to generate QR codes. But if you launch your creative cloud management application, then you can come over here and choose Stock and marketplace. And from the next level down, you can choose plugins. And over here search all plugins. We can come in here and type QR code and press Enter. And we'll see that we get a number of plugins that are available. Some are free, some are paid that we could add in to our Adobe applications. We can filter for pricing if we want to look at free ones, paid or all. And we can choose which apps we want plug-in to work with. So like right now I've got it set to Illustrator and Photoshop. So any of these would work with either one of those. If we want to find out more about it. For example, this one is free. If we click on it, then we can read about it. We can learn how it works like who made it, what the reviews say, etcetera. And if we like that, then we can go ahead and click Get. And it will automatically download and install itself into Photoshop to figure out how it works and how to use it, you just need to read the developer Documentation here and you would be good to go. But for whatever reason, if we don't want to do that, another option is to use a free web tool, and that's what I'm gonna do. So I'm gonna go to QR stuff.com. And right here on their homepage, you do not even have to create an account or login or anything. Here, I'm going to select a website URL. That's the type of data that I want in my QR code. So I'll select that. I'm going to paste in that same link tree URL. I'll press Return. Now, if I had a paid account, I can change the shape of the QR code itself, as well as the color. I could add a logo, but that is only available to paid subscribers. And I did not even give these people my e-mail address or my name or anything. So I'm just gonna go with classic. And now I'm going to download this as a JPEG or you could do ping. That's it. So I'll click JPEG and boom. So simple, right? So now back here in Photoshop, I'll just open that download. So I'm choosing File Open, grab it here from my downloads, click Open, and here it is. So just like we did before, I'm going to select all with Command or Control, a, command or control C to copy. I'll click back to the tab we've been working in over here and paste with Command or Control V. I'll switch to my move tool by pressing V for move the viva and drag that down into position. And just like that, we have a simple virtual business card made here in Photoshop. So we'd want to save our work. So we would choose File Save As navigate to where we want to save it. And I'm going to call this virtual business card dash Photoshop. And for the format will choose Photoshop and click Save. So that is our working file now. But of course to export this to be able to just easily loaded on our phone or share it. However, we mean to, we want to save this as something like a JPEG. So let's go back to the File menu and choose Save. A Copy. Can have the same name, but this time for format, will choose. Jpeg, will click Save. And here we get to choose the level of compression that goes with our JPEG. So for the highest quality JPEG, you would leave the quality set to 12. If you're concerned about optimizing, for some reason, maybe drag that down to ten. Then you could go ahead and click. Okay, and that's it. So this process that would be the same in Illustrator, of course, using Illustrator tools, you can then generate the QR code using either a plug-in that works in Illustrator or that Free QR stuff website. In the next video, I'm going to show you how to level things up a little bit and create a animated virtual business card right here in Photoshop 5. Animated Design Part 1: If you're looking to up the wow factor of your virtual business card checkout. What you can do right here in Photoshop to create an animated virtual business card. Earlier in the setup video, I talked about how to take advantage of Adobe stocks free collection to find animated videos we can use in the background. So now we're ready to open those. So let's go to file open. And you can see I downloaded a number of them to give you an idea what the options are, I'm going to choose this video right here, and you will find the link to license this free file for yourself in the project and resources tab right below this video. So I'm gonna select this and click Open. And yeah, we just opened a video file in Photoshop. Can you believe it? Here is what it looks like when we open a video file, Photoshop opens the timeline panel. And here we can see we've got this long scrubby thing that allows us to scrub through the video or the animation in this case. This also shows us that this animation is like 25, almost seconds long. That's way too long. So we're gonna deal with that in a minute. The other thing we need to deal with is that this video is horizontal and full HD. And we want to make this as easy as possible for ourselves with a smaller file size. So let's start by rotating this video so we can work with video pretty much the same way we work with images. We can just come right up here to Image. We'll choose Image Rotation. And I'm going to choose 90 degrees counterclockwise. Photoshops going to say, hey, you gotta make this a smart object layer and we say, yeah, yeah, that's right. Okay, click Convert and done. I'm going to zoom out by pressing Command or Control minus a little bit so we can see our document here. Now, we need to resize this. So we have a couple of options. We can come up to image, image size. If we go this route, we want to make sure we're working with pixels. We want to make sure the width and height are linked and that there is a check next to resample. So re-samples should be enabled. Then we would just want to change the width value to 720. That makes the height 12, 80. And we can click Okay. And we would be done. That is totally fine. However, I would like to get rid of so much border space here, so I want to crop in closer basically. So I'm gonna do it a little bit differently. I'm going to undo that by pressing Command or Control Z and all press C for the crop tool. And up here in the control panel, I'm going to choose width, height, and resolution, which enables me to type up here. So I want the width to be 720 pixels. So I'll type px, press tab, and I want the height to be 12. At Px, the resolution, we can just leave blank. And now what I'm gonna do is hold down Alt or Option. And then I can drag inward until I get something a little more like this. Holding Alt or option allows us to drag in towards the center from all the corners at once. So it saves us from having to drag this around and try and center it up after the fact. So I like this layout and I'm gonna go ahead and commit it by clicking the check mark up here in the control panel. Boom. Now our document is 720 by 12 80 and we've cropped in a little bit so we can maximize this area. But we still have this video that is way too long. So join me in the next video and I'm going to show you how to shorten it and make it loop 6. Animated Design Part 2: Alright, so here we are with our document. It's looking pretty good, but as we discussed in the last video, this clip is way too long. So let's chop this down. I'm gonna grab the playhead and drag it to about the eight second mark. Then we're gonna come over here. And if we hover on the end, we get this little scrubber icon and we can actually just click and drag over here to shorten it. And that'll snap right to the playhead. So now we've got 8 s of a video clip. But now the problem is that this is not the same as here, right? If we jump back and forth between this, we see that there are two very different scenes. So when we play this over and over again, it's not going to be a seamless loop. So we can watch, I hit play over here, so we're watching it now. Watch it jumped at the end. You see it jumps, right? I mean, that's acceptable I guess, but come on, we're going for Excellence here. So we are going to hack this so that it actually loops. This is a pretty clever trick. So what we're gonna do is drag our play clip to the center ish. I guess that's probably more like here, right? Drag it to the center ish of our clip. And now that we've got it set to 8 s, that's gonna be about the four second mark, right? So now we're going to cut it by clicking on the little scissors icon right here. We see that we've split it into two pieces. And in the Layers panel, Photoshop actually separates the pieces into separate layers. So let's rename Layer one here. Let's double-click and just type a and press Enter. And this one, Let's double-click and type B and press Enter. So here in our timeline view, we see we have the first half of the clip, so a, and then we have the second half of the clips. So nothing's happened. All we've done so far is we took the 22nd long clip, shortened it to 8 s and cut it in half. That's great. So let's think through this, this part right here, going from clip a to clip B, this is seamless, right? Because we just cut it. So there's no jump here, it's seamless. The jump is happening between this end and this end. So to fix that, we're going to flip-flop these. So I'm gonna grab clip a and I'm just going to drag it to the right and drop it. So now clip a is here and clip B is here. So the seamless part is here to here. The jump is now in the middle. And because it's here in the middle, we can smooth it out with a cross dissolve transition. Isn't that clever? So we're gonna come over here and click on this little button right here to get the transitions. And we're gonna grab crossfade and drag it. Right here. You can see how we're going to apply it across the two ends. And then we'll see our clip will actually shorten a little bit because they are now overlapping. So you can see here's clip a. And if we click over here, unclip be, you can see this middle part. They're overlapped. And now if we hit Play, watch, what happens if we watch here? It just, you can't see it. So it looks infinite even when it's not. Okay. So we'll stop. So that is our little hack for taking a long video that maybe if it's 25 s looping, that's just way too long for this. So we cut it down and we disguised the jump cut. Okay, So this is good. Now let's close our Video Group folder. I'm going to click up here, I'm going to collapse it, so that's just all tucked away. And now all we need to do, we can come right over here. We've already done all this work in a Zoom out a bit. All we need to do here is select these layers. We've got the QR code selected, and I'll just come down here and shift click on the ellipse layer. So we've got all of those selected. And then with the move tool, I'm just going to click on the image and drag. Now when you do this, don't watch the stuff. Watch your cursor. So keep holding your mouse down. The stuff is going to disappear, but hold your mouse down and come up here and hover on top of this tab to switch the focus. And then I'm going to hold Shift and just drop it And it's going to land right in place. Check that action out, okay, now, you may or may not see it here, right? Like if you had if this folder was still active when you dropped this in, you may not see anything. So don't panic. Look over here. Make sure you have the layers that you just dragged in. You may not see them because Photoshop tends to put them beyond the playhead. So like if I drag over here, I'm not seeing anything, but if I keep going, they're going to appear. The timeline here in Photoshop is basically just the layers panel plus time. So things are only visible if they exist under the playhead. Here. The playhead is not picking up on these, but we can fix that by just selecting all of these. So I'm clicking and holding down the Shift key to select them all. Then I'm just going to drag them over here. So they start. When the video starts. Now annoyingly, we can't extend them all at the same time. So we're having to manually drag the ends out. You might have to just move stuff around. So the idea then is that we want all of these layers to start and end at the same time. That's it. So now let's zoom in on this and I think I definitely want to scale this down a little bit. So in the Layers panel with all that stuff still selected, I'll just press Command or Control T. And I'm gonna hold down Alt or Option and just scale it like that. I think that's pretty good. And then I'll commit it. I like that. Alright, should we see it in action? Let's drag this play head to the beginning. And right over here we'll hit Play, wow, hot stuff right. Now you can see my computer is struggling a little bit to render it because my computer's not the best. But as it runs through this, you can see this little blue line forming here. And this lets us know when it's fully rendered. So if you feel, feel it catching a little bit or snagging on some parts. That's why it's just got to finish. Rendering. Can see it's got a little bit of some gaps left here. If my computer can do this, you guys should all be fine. Almost. It's almost perfect. Now, one more little snag. There we go. So now it's playing with full rendered preview. That, oh my gosh, that looks so cool. Alright, so we can stop this. Now, if you don't like these colors, maybe you're like, Oh, pink and purple and whatever. That's not my thing. Well, hey, guess what? You can click on the video group here and you could add another, let's say, gradient or even a hue saturation adjustment layer. And you could drag these hues and adjust this however you want. So like this is still Photoshop right leg. You can do all that cool stuff. In my case, I'm gonna delete that. I'm actually going to grab this gradient that we made over here. And I'm just going to repeat that same process with my move tool, click and drag and drop this in, then we can come up here and play with blend modes. So if we just hover through these, you can see the different ways that the blend modes can make a big difference than the hard part is really just choosing which one you're gonna go with. Let me go with you. Now, of course, we need to make sure that this layer, every new layer in the Layers panel gets its own layer here in the timeline panel. And we wanna make sure that this comes on at the same time as everything else. So I'm going to drag it to start and end at the same time. Now, we get this cool effect. Alright, so that is rad. Let's save this File, Save As we want to save our Photoshop version. So we'll add, let's see, I'll type animated for this version. We want to choose Photoshop and hit Save. This is our working file we can come back to if we need to change something at anytime. Join me in the next video and I'll show you how to export this as an animated GIF 7. Animated Design Part 3: Now that we've got our animated virtual business card designed and saved as a Photoshop document. We are ready to now export this to an animated format that we can see and enjoy right in the photo app on our phones. So we're going to come up to File. We're going to choose Export, Save for Web, Legacy. Now, don't panic when it takes your computer forever to load. The next interface. I'm speeding it up here because nobody wants to just watch my computer spin. But this can take awhile. Which is why it was so important that we keep our clip short and the actual physical size of our Design small. Alright, so here we are in the Save for Web dialog, finally loaded. So it's huge, right in our preview here. So to zoom out and see better, Let's click the Minus button so we can just see what we're working with. And that looks good. But this right now would be saved as a JPEG. And that's not what we went. From this drop-down. We're going to click GIF. Now, I don't know what your default settings are gonna be here, but this is a preset that I've created for myself that uses these settings. So once you've got GIF, we want to make sure we've got the colors set to 256. This is going to be not a tiny file size, right? A GIF animation is where we've got different frames for each piece of the picture. Right here, we are looking at 209 frames. So this adds up to be pretty big. We can see the file size over here that this would be 39 mix. I'm not worried about it because we're just gonna be putting this on our phone, right? 39 megs is just like a handful of photos. It's not a huge thing. But if you were going to try to post this online or something like that, you would really need to optimize this much further. In this case, I'm not going to worry about it. I'm fine with this file size. If you need to dial it down, you can try reducing the colors. You could scale the image to not be so big. You could use a shorter animated loop so that the whole animation as a whole is shorter. That would save you on the frames down here. Those are all different ways that you could optimize this. But these are the settings that I'm going to use. Once you have your settings matching what I have here, you can save them if you want by clicking this little icon. And then you would choose Save Settings. And you can give it a name. I've already got mine saved. So this option is grayed out. Down below. You want to make sure looping options are set to forever. And if you want to preview it, you can hit the Play button right there. That looks pretty awesome. Just keep in mind that gifts are a forever compromise and balancing act between quality and file size. If we really get in here and scrutinize the image, we can see that of course it doesn't look as great as a JPEG. It's only capable of having 256 colors. Things you can try if your photograph isn't coming out so well, is to use something like an icon or Line Art instead. But I'm okay with this. So I'm gonna go ahead and hit Save, change the name if I want and choose Save. And Photoshop is going to generate the file. Just know that depending on your computer, it might choke a little bit on some of these settings. So the more you fiddle around in this Save for Web dialog, the more you're going to have to wait while your computer reprocess is whatever you've asked it to do. If we want to see what this looks like in the animated finished file. Going to pull it up here in Finder and grab this Animated GIF and hit the Spacebar. That's not bad for only 256 colors. Before I forget, Photoshop will leave your timeline panel open for all of eternity once you open a video in it. So let me show you how to close it if you're like me and it makes you a little bunkers, you can click the timeline panel menu right here and just choose Close. So now we have this beautiful virtual business card that might even be animated. Join me in the next video to learn how to share it with the world 8. Output: To get all of our beautiful virtual business cards on to our phone, we have a lot of different options. Obviously, you could email the files to yourself. You could upload them to something like Dropbox. So I'll just copy all of these and paste it in my Dropbox. I can get it to myself that way. If you are on a Mac, you can use AirDrop. And in this case, you need to open finder windows. And I can just grab these three files. And if I wanted to send them to myself, I can drag them right up here and drop them to my phone. You could use Google Drive. There's 1 million different ways. The important thing is that once you get it on your device, they will just live right in your photos app. So here we have the one that we made in InDesign. Here's the one we made in Photoshop with the gradient background, and here is the animated one. And what's cool about the animated GIF is that when you it, in your photos app, it actually plays the animation and it will just loop endlessly. So that's why it's perfect for creating a really cool virtual business card. To share this, all you need to do is show your phone to the other person. In fact, you can actually try it right now if you take out your phone, open your camera, and aim the camera right at the QR code on my phone on the screen right now. And it should take you right to my link tree page. Pretty slick. He 9. Share Your Work: Hey there, well done. I hope you had Fund and making your own fancy virtual business card. I would love to see how it turned out. So take a minute and post your finished projects down below. And it'd be really helpful if you could give this class a rating and a review to help others discover it to. If you're looking for a more creative FUN, be sure to check out my other courses right here on Skillshare. You can find me online at khara plicanic.com. Thanks so much for joining me and I hope to see you in another class real soon.