[NEED HELP] How to create these "Buttons" in illustrator?

Question

Hey Guys,

hey guys, I'm new to this community and I have the first question right away:

I'm creating watchface content.

I'm trying to figure out how do I create these "buttons" can somebody tell me if this is a single element or is it created from more elements?

First thoughts I had was, creating the Kontur for the gradient as a single element and the black background as well, then group them together, because the pathfinder won't work with that. Everytime I use it the gradient won't work like I want them 🙊

It drives me crazy 🙊

Any help or workaround is appreciated 😊

Thanks in advance

Mario Arizmendi · Accepted Answer

This is a very easy drawing, many ways to do it

Just draw some basic shapes, curves and lines, using the Pathfinder and the Shape Builder tools I did a very close element

As will be very large to describe the process in words, Here you can download the .ai file where you can see how is constructed and painted, use global colors so you can change it to obtain the different versions easy just changing the color values.

Jacob Bugge · Answer

Fre,

As I (mis)understand it, you can proceed as follows, given the large circle (part at the bottom) after locking everything else:

1) Create one path, with a thin white (or red or other bright colour so you can see the (other parts of the) watchface below) stroke and no fill, in the overall shape that includes both the gradient area at the top and the black area with the three white dots below, basically comprising a straight horizontal segment at the top which passes through rounded corners into the pair of straight slanting segments at the sides extending below the large circle and close the path with a straight segment at the bottom, then cut the bottom part off using a copy of the circle on top (you can use the Shape Builder Tool, see below);

2) Copy the path from 1) on top and lock the original, then move the copy vertically down (you may ShiftClickDrag or use the down arrow) until you have the (white line at the) top of the copy path where you wish to have the bottom of the horizontal part of the gradient area;

3) In the Transform palette click the top middle Reference Point, then downscale the copy vertically by multiplying/dividing the H value by the right number (smaller/larger than 1) to get the (white lines forming the) slanting lines cross the black shape where you wish to have the bottom sharp ends of the gradient area;

4) Unlock the original path, select both paths, and use the Shape Builder Tool or Pathfinder>Divide (Ungroup in the latter case), then delete the unwanted bits and apply a simple horizontal gradient as desired to the top path/part, and apply the black to the bottom path/part, and remove the white stroke(s).

https://helpx.adobe.com/illustrator/using/creating-shapes-shape-builder-tool.html

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded