![]() ![]() Next, add an inner highlight to Inner Shadow by selecting Add New Shadow… from the dropdown. ![]() Move to the Colors tab and rename Glow to InnerGlowColor. Click on the color rectangle, which is now white, and lower the opacity to 128.Ĭhange the offsets and blur radius as shown below, and click outside the popup to close it: Next, click on the dropdown menu next to Color, and click on the white square in the color grid. Now give the button an outer glow by selecting Add New Shadow… from the dropdown for Outer Shadow under the Fill sub-section, like in the screenshot below:Ĭhange the Name of the shadow to OuterGlow this gives it a memorable name just as you did with the colors above. Increase the Width parameter to 2 under the Stroke sub-section, as so: Click on the Stroke dropdown and choose System Colors > Common Colors > BlackColor, to change the stroke color to black, as illustrated below: Switch back to the shape properties in the center section of the left pane. Give this color a name as well, following the same steps as above to rename Stroke Color to ButtonColorLight. Change the Name value on the pop up to ButtonColorDark, as shown below: Select the Colors tab located on the bottom section of the left panel, then double-click Fill Color. It’s a good idea to give your colors descriptive names to keep track of them. ![]() Take a look at the code created, and you should see the references to the two colors you just created, as highlighted in the following image: If the Code pane isn’t open at the bottom of your window, use the View > Code menu option to open it. PaintCode provides you with the ability you to name each color used in a shape so that you can refer to them later in your code. Now, click on the right color stop, click on the color swatch, and modify the RGB values to 112 1 0 as below: Next, click on the color swatch on the lower right of the dialog, and enter 255 0 0 for the RGB values, as shown in the screenshot below:Ĭlick the color swatch again to close the color dialog. The color stops are the circles along the bottom edge of the gradient which indicate the various colors that compose the gradient. Now, click on the bottom left color stop. In the left hand pane, click on the value for Fill, choose Add New Gradient… from the pop up dialog, and name the new gradient ButtonGradient. Next you need to change the Fill value to set the button color. So ensure that the rounded rect on your canvas is selected, and set the following properties: You’ll notice that when you select a shape on your canvas, the panel on the left displays the properties for that shape. Now click the Round Rect button in the top toolbar and drag out a rectangle in your canvas. It’s a toggle button which will switch you between the retina and non-retina versions. If you’d like to view the retina version, click the Retina button next to the Canvas button. Note: By default you are working on the non-retina version. You can download the trial app, or you can get the full app on the Mac App Store. To follow along with this set of PaintCode tutorials, you’re going to need PaintCode. Without further ado, it’s time to get started! Getting Started If you are new to Core Graphics, check out our Core Graphics tutorial series. Also, it is helpful (but not 100% necessary) if you have some basic knowledge of Core Graphics. To get the most of this tutorial, you need some basic knowledge of iOS development. However, any opinions in this article are honest and my own. And finally, since you’re creating your view in code you can do some cool things you couldn’t do if you were pre-generating the graphics – like easily changing the color of various aspects of the control at runtime.įull disclosure: We received some review copies of PaintCode to generate this tutorial. By drawing a view in code, you no longer have to include the images in your binary, reducing your binary size. If you were writing the Core Graphics code manually, it would take you much longer than using PaintCode. PaintCode is a neat app where you can draw user interfaces like in Photoshop – but instead of generating an image, it generates Core Graphics code! ![]()
0 Comments
Leave a Reply. |