![]() Use the alignment tools at the top of the Inspector panel to align the two elements correctly to one another. Give it a Fill color of #6C56B7, and a Border Radius of 40.Īdd a text layer (T), with the text ‘Sign Up’, and use the following settings… Now let’s add our Sign In button, which will appear below the welcome message.ĭraw out a Rectangle (R), 210px in width, and 50px in height. Let’s keep it simple and call it ‘Title: H1’ (Remember to use less vague naming conventions when working on a large project). With the ‘Welcome’ text selected, Choose Create New Text Style from the select menu in the Inspector panel, and give it a label. Let’s convert this title to a Text Style. Insert another Text layer (T), edit the text to ‘Let’s make someone’s day’, and then apply the following settings… Use the Text tool (T), and edit the text to say ‘Welcome!’, then enter the following settings in the Inspector panel… Time to add some text to our Welcome screen, and make use of the San Francisco font you downloaded earlier. Then turn the logo into a Symbol, via the Create Symbol button in the Tool bar. With both the icon folder, and circle shape layer selected, use the Align Horizontally, and Align Vertically tools to align them correctly with one another. The icon is a little large to sit inside the circle, so reduce it’s width to 60px (keeping the padlock on), and then, with the icon shape layers selected (not the folder), change the color to #FFFFFF, with 60% Opacity. With your shape layer selected, hold down Alt to align it correctly on the Artboard, measuring 80px from the top.īack in Iconjar, select the dove icon, and then drag it onto your Artboard. Remove the border, and then give it a Fill color of #FFFFFF with 10% Opacity. A real timesaver.īefore we drag in our dove icon, draw out an Oval (O), and give it a width of 130px (with the padlock on to keep proportions). Now we have our icons within easy reach, and we can just click-drag them from Iconjar, and place them straight into our design. ![]() Then click Add to bring the new icon set into Iconjar. ![]() Make sure you have Iconjar installed, and running? Good stuff!Īnd now we’re going to install the font set you downloaded earlier.įrom Iconjar, click on the plus (+) icon at the top of the application, give your set a name, and then browse to the folder with the icons. What’s a sign of Piece/Peace? A dove of course! The app is called ‘Piece’ (That’s not a typo by the way. Let’s get a logo in place for our fictional app. Quickly jump back to the Fills section, and drop the Opacity of the gradient down to 80%. Then grab the bottom dot, and drag that to the bottom right corner. Then for second color stop, enter 24C6DC into the Hex color field.īack on the Artboard, click on the dot at the top of the gradient line, and drag it to the top left corner. We’ll have it angled from the top left corner, to the bottom right corner.ĭraw a Rectangle (R) to cover the Artboard, and then from the Inspector panel, in the Fills section, choose the Gradient option.Ĭlick on the first color stop in the Gradient Bar, and enter 514A9D for the Hex color value. Let’s get a nice gradient to overlay our image. *Your images may differ from the tutorial. Remember you can easily cycle through the plugin with Shift + Ctrl + R until you find an image you’re happy with.* Now we have a nice background image in place for our first screen. Then, from the Menu bar, navigate to Plugins > Unsplash It Sketch > Unsplash It, or use the shortcut Shift + Cmd + U. Starting with the 1st Artboard, use the following labels…ĭraw out a Rectangle (R) to cover the Artboard (375 x 667px), and remove the Border. In the Layers List, use Cmd + R to rename the first Artboard, and then use the Tab key to quickly jump to the next Artboard name, renaming as you go. Let’s rename those Artboards before we move on. Now we have all of our Artboards at the ready! So, with the Artboard selected, click on the Make Grid icon in the Toolbar, and enter the following settings…Ĭool. So it would make sense to quickly duplicate the Artboard you just placed onto the Canvas. Now we will be designing 10 Artboards in total, and all for the iPhone 6, in portrait orientation. We’ll be putting the Unsplash It plugin to good use, and also the icon set that you will be installing into Iconjar.Ĭreate a new Artboard (A), and choose the iPhone 6 option from the Inspector panel. Let’s concentrate on the welcome screen for our app. Explore 11,000+ Sketch Templates Welcome Screen
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |