![]() ![]() Next, let’s work on a photo gallery at the bottom, focused on showcasing various destinations that this user has been to – this galery will contain images, text, and a few smaller elements. I’ll go with a Demi Bold Avenir Next with the color set to an off-black. I’ll quickly grab the Text tool by pressing T on my keyboard, and then I can single-click to create point text, – and once I’ve accepted I can quickly change the size by pulling on the handle at the bottom, and adjust the properties to the right. Great – with the header and profile picture looking snazzy, let’s add a name. Now, to ensure that it’s perfectly centered in my artboard, I can either move it horizontally until my smart guides tell me that it’s in place, or I can hit the align center button at the top right.īack in Finder, I have this epic image of a bearded man which I’ll drag right onto the circle, and then maybe to separate it from the header, I’ll add a white border on the outside of the shape with the size set somewhere around 6. Now that the header is ready, let’s do the same for the profile picture, this time with an ellipse, making sure to hold down shift key to create a perfect circle. You know what? I think I might want to adjust it a touch.ĭouble-clicking on the shape will let me move and scale the image and clicking outside will reapply the mask. Hopping into Finder, I have an image that I would look great for this header.Īs I drag it into XD and overtop of a shape, it’ll highlight in blue to tell me that it can be placed within in it, and when I let go, it becomes masked. With the rectangle in place, there’s nothing further I need to do to turn it into a mask.Īll shapes, including custom ones created with the Pen tool, can house images. Over to the left, I’m going to grab the rectangle tool and draw one out across the the top of the artboard, and just so I can see it, I’ll change the color to the right. On this screen, we’re going to design a few elements – including a header image, a profile photo, text, and a gallery. Let’s kick this off with an iPhone 6/7/8 Plus artboard. We also have a built-in tutorial that guides you through various workflows that you can check out after this video. When you first launch XD, you can immediately start designing using artboards for common screens, like phones, tablet, and web, or if you’re working on something very specific, you can enter a custom size to the right. I’ll also dive deep into some of the features that will change the way you tackle screen design – including repeat grids, responsive resize, auto-animate, and much more. You’ll learn how to craft your first designs, wire up prototypes, and share your projects with clients and stakeholders. If you’re brand new to the application or simply need a refresher, this series will get you going. Hey, everyone, I’m Howard Pinsky – Senior XD Evangelist at Adobe – and welcome to Adobe XD! ![]()
0 Comments
Leave a Reply. |