![]() 18.Introductory pricing terms and conditions Again, type some placeholder text for now, and adjust its styling properties. To do this, select the Text tool ( T) and click and drag to define the area for your copy. For the text element that holds the biog, we want to use Area Text. First add a text element using the placeholder 'Person name'. To finish the design, create a white box (360 x 214, x: 8, y: 445) that will include the team member's name and biog. Beautiful, isn't it? Direct-select the text ( cmd+click) and change the contents to read 'Email', ' Twitter' and 'LinkedIn'. First, convert the text to a Repeat Grid ( cmd+R), then hold the option key while expanding your grid horizontally. Let's use the Repeat Grid tool to create two more instances of this text element. Create more instances of the text element Use the Text tool ( T) to create a text element reading 'Placeholder link', centre it, style it up, and place it at x: 169, y: 416. We want to include a pink bar on each page, which will list the team member's contact details (375 x 45, x: 0, y: 400). It is important to lock the image first, because otherwise the SVG will replace the headshot. Then lock the headshot item ( cmd+L) and add another arrow ('back-arrow.svg') to indicate the user can return to the team list. We'll create a darkened effect by changing the image's opacity to 60 per cent and sending it to the back ( shift+cmd+[). Again, we'll start with a placeholder rectangle (375 x 444, x: 0, y: 0, #FFFFFF with no border) and drag a headshot to fill it. Let's jump to Artboard 2 (the detail page). Now we just need to grab all the headshots at once and drag them onto the grid and we're finished with this screen. You can double-click to enter the grid and the group, or cmd+click to direct-select any element within a group or repeated grid. Edit the text fields to each individual's name and job title. While properties (colours, x and y positions, and so on) are global, each item's content can be unique. Place your headshotįrom Finder, drag a headshot into place on the grey square. Drag 'path.svg' from Finder onto the XD canvas to a point off the artboard. To show this box will be a tappable area, we'll include an arrow icon. For now, use placeholder text, and style it up as you wish. To the right of this, we need a white rectangle (260 x 100, x: 108, y: 238, #FFFFFF with no border) on which we'll include the team member's name as a header and job title as a subhead. Draw a grey square where the team member's photo will sit (100 x 100, x: 8, y: 238, #D0D0D0 with no border). Let's start putting together our list of team members. ![]() Mine is Helvetica Bold, 20, #FFFFFF, x: 18, y: 123. Using the text tool ( T), click to create a header for your team page. If you want to change colours using hexadecimal values, click on the colour icon, and when the native colour picker pops up, select the second tab at the top and change the drop-down to 'RGB Sliders'. Hit shift+cmd+[ to send it all the way to the back, or go to Object > Arrange > Send to Back. To turn the border or fill on and off, click on the 'eye' icon on the right. Using the Rectangle tool ( R), draw a pink rectangle (#FF2BC2 with no border) in Artboard 1 and set its dimensions to 375 x 230 using the property inspector panel on the right. Let's focus on Artboard 1 (the team page). To unlock them, you can use the shortcut again or click the 'lock' icon. Hit cmd+L to lock these status bars in both artboards so their properties cannot be modified. Then copy and paste it into Artboard 2, so both artboards have the status bar on the top. From Finder, drag 'iphone-status-bar.svg' to the top of Artboard 1 ( x: 8, y: 5). ![]() I've put together a folder of assets that I'll be using throughout this tutorial. With the Select tool ( V) selected, you can press the spacebar at any time to pan across your design. Change both Artboards' background colours to black using the property inspector on your right. ![]() ![]() Use the Artboard tool ( A) to create a second artboard, then change their titles (by double-clicking on them) to 'iPhone – Team Page' and 'iPhone – Detail Page'. Launch it, take a look at the welcome screen and start a new design with an iPhone artboard template. Start your design by selecting the iPhone artboard from your template optionsįirst, ensure Adobe XD is installed on your computer. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |