Using sketch to create color switches

@ Whistling over Charles:sketch is a super fire image processing software on the Mac platform, powerful and lightweight compared to PS. Thanks to Sebastien Gabriel, this tutorial was made by him. Below is the ultimate effect. No more, straight into the subject.

01. Install Sketch

If you have not yet purchased it, you can download a trial version or buy it directly from the App Store. Then install and start sketch.

When you see the cue screen, do not click on any specific template, just click the "OK" button, and then open the new document. You will see the figure below.

02. Create Artboards

The artboard is the work area, and its size can be unlimited, small to the icon, large to arbitrarily large. If you have used illustrator, they are the same.

Press "A" on the keyboard or click the "Insert" button in the upper-left corner to select "Artboard" (Figure 1). As shown, you can see many preset dimensions in the right-hand column. This example does not use these preset dimensions. Simply draw an artboard of any size on the canvas. When you are done, enter X 300 (Figure 2) on the right panel on "size".

On your artboard/left side of the layers panel, double-click the Artboard 1″ tab to rename it. The author names it "colorful switch" because it is a descriptive name (Figure 3).

03. Set Color Background

Now that you've made an artboard, it's time to set the tone for it. You can adjust it later. But the selection of the background color will affect the reflection of the light on your icon and the coloring on the icon.

Tap the "R" key on the keyboard to select a rectangle (Insert>shape>rectangle (R), as shown in Figure 4)

Draw a rectangle on the artboard so that it exactly matches the artboard. The rectangle tool automatically aligns the edges of the artboard (Figure 5). When you're done, you'll find that the right side effect panel (effect panel) automatically completes the gray fill and gray border (Figure 6).

Remove the border color, and then click the Fill Color. Enter "A846FF" in the 16 box (Figure 7). Now you can get the basic color.

Now notice the "+" button in the upper right corner of the fill panel and click on it.

As you can see, add a new fill layer on top of this layer.

If the gradient panel is not selected, select it and draw the gradient from the upper-left corner to the lower-right corner of the artboard (Figure 8).

The two squares in the lower-right corner of the fill type selector are the gradients you choose. Click on it to make it editable.

Make sure that the upper-left corner of your shape is white (#ffffff) and that the lower-right corner is black (#000000). Click Black in the gradient selector to set its transparency to 0. The adjustment of the opacity of the gradient can be entered by the slider in the lower right of the slider or the "A" Letter input box on the right side of the RGB color. Select white and set transparency to 60 (Figure 9).

Set padding to "overlay" (Figure 10)

Then click the Add button again. This time select a third label to get the radial gradient. The adjustment gradually changes from upper left to lower right (Figure 11).

Make sure that the upper-left corner is white and the lower-right corner color is black. To ensure their transparency is 50%. Also set this fill to "overlay". The effect is shown in Figure 12 after completion. A shiny purple gradient of light and deep neon color.

Finally, create the group and put the previously created layer into the group. Select your layer in the left panel, press "CMD" and "G" to put the layer in the group, double-click the group, and name it "Background". Or a more crazy name, like crazy color. The final effect is shown in Figure 13.

04. Apply the embedded IOS7 icon template to create the shape of the icon

Now let's create the icons together.

We will use the embedded iOS icon template, so we can avoid rebuilding the shape with complex rounded corners.

Click "File" > "New from Template" > "IOS App Icon" (Figure 14) to create a new file.

In the panel on the left, click the lock on the right side of icon Shape in "icon-76@2x" (Figure 15). Select this layer and unlock it, copy (cmd+c) and paste it into your original file (Figure 16). You can close the stencil file window without saving.

Select the icon Shape layer you have created (click "cmd" to select multiple layers, as shown in Figure 17).

Use the arrangement tool at the top of the right sidebar to place the icon in the middle of the background. Click the "Align horizontally" button (horizontally centered fourth icon) and the "Align vertically" button (vertically centered, seventh icon), as shown in Figure 18. When finished, figure 19.

Now that we've sorted out the results, we don't have to do it again. Click "Cmd+g" on the icon shape layer to create the group. Drag the group up and rename it to "Icon." Click "CMD + G" again in the group to put the layer in the group. Rename to "Icon Base" (Figure 20).

05. Create the Base shape

Select the Base layer to modify the color to #ffffff. Click the "+" button to add a second flat-color fill (which can be interpreted as monochrome-translator) and set the color to #fac3ff.

Set the flat-color transparency to 10 just now. When finished, figure 21.

Now click "O" on the keyboard to select the Oval-shaped tool. Draw a circle of 124 * 124 in the center of the "Base" layer. You can also set the dimensions of the circle on the right sidebar. Don't forget that the arrangement tool we used before will circle perfectly centered. If you remove the border, you'll get a graphic like Figure 22.

Set the fill style for the "Oval 1" layer to "Linear gradient" (Linear gradient-translator), and adjust the angle diagonally. Sets the upper-left corner color to #e500e7 and the lower-right corner color to #00d7ff. Do not modify transparency and blending modes. (Figure 23)

Name the layer "Super colorful base", and then put it into the "Color base" group. (Figure 24)

Use the elliptical tool to draw the knob. Draw a 58 * 58 circle, and align it with the "Super Colorful base" center.

Adds a vertical linear gradient to the layer. The top color is #ffdbff and the bottom color is #fcf2fc. (Figure 25)

Build the group (CMD+G) for the layer, then name Knob Base "(Figure 26)

As shown in the figure, we have created the base shape and the area of our icon. At the bottom we finished the shape of the iOS7. and the color circle and knob are completed on the top floor. Now the rest of the task is to add some effect to these flat shapes. Intermission, we have beautifully finished half. Let's continue to create miracles in the second half.