On the Symbols page, we’ll need to give the “Details” Symbol a background. You can always adjust them later to better fit your different widget sizes. You’ll find your newly created “Details” Symbol within the Symbols page, which is where we’re heading next.ĭon’t worry too much about spacing and text sizes. Next, select all three text boxes and click on the Create a Symbol button in the toolbar - you can name the Symbol “Details”. Start by creating three text boxes with the following copy and stacking them up vertically - preferably at an equal distance from each other:ĭon’t worry about the font or Text Style right now - we’ll get to that in a second. To do so, let’s create a Symbol that can hold all of the text boxes we’ll be repurposing later. How to create reusable text layersįor a widget to be useful to our users, we’ll need to add some information to it. Now, just repeat the same process for the other two Artboards. That being said, you might need to readjust the size of the background depending on the Artboard. Our widget is coming to life thanks to the rounded corners and the starry background. If necessary, reposition the background so that you can see the bright star you created last time. Head to the toolbar and click on the + button and insert the starry night background by selecting Symbols > This Document > Background. You’ll see that your rectangle now has rounded corners. Go to the Corners section of the Inspector, select Smooth from the drop-down menu, and set it to 22. A mask is a layer that will clip any contents you insert to fit its shape, so you won’t have to worry about cropping the background. Next, control-click on any of the template rectangles we just created and select Mask. Simply select the Artboard and click on the Symbol icon in the toolbar.įor this exercise, we’ll keep our symbols organized neatly on a separate Symbols page, so make sure that you mark the “Send Symbol to Symbols Page” checkbox before clicking Create. This way, you’ll be able to repurpose the same background for our different widget sizes. First, let’s go back to the starry night background we created last time and turn it into a Symbol. Now that we have a template, we can start building our widget from there. Using Symbols to create adaptable backgrounds Then, select the Layer Style from the dropdown menu under Appearance to apply it to each of the new rectangles. Create rectangles for the remaining Artboards. Last but not least, click the + button under the Appearance section of the Inspector and name your new Layer Style “Template”. This will be the spot where we’ll place buttons later on.įeel free to play around with the shade of blue and the gradient’s dimensions. Slide the gradient point almost all the way to the second point, and give the latter a lighter blue color. Make the first gradient point navy blue and then lower the transparency to zero. Next, click on the + button next to Fills and add a linear gradient. You can always add more colors or gradients by clicking the + button under Fills. Now, uncheck Borders under the Style section of the Inspector and change the Fill to the same navy blue color as your starry night background (we went with #161239). Make sure the rectangle covers the entirety of the Artboard. Start by adding a 169x169px rectangle to the smallest Artboard (you can press R to activate the Rectangle tool). Next, we’re going to create a template layer that we’ll reuse for all of these widget versions. Pro tip: Name the Artboards after their sizes so it’s easy to identify them later.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |