Create a Login Widget

In the following tutorial you will learn how to create a simple subscribe field using Autodesk Graphic's tools and effects.

Step 1

For this tutorial we'll create a new 600 x 600 pixel document. Choose File > New (⌘N) to bring up the New Document panel. Select the Grid document style, set the document units to pixels, and set the document dimensions to 600 pixels wide by 600 pixels high.

Next, we'll set up the document grid. Switch to the Grid pane in the Properties panel. If the Properties panel is not currently visible, you can click on the orange ruler icon above the Layers pane to show and hide the panel. Change the grid X Spacing and Y Spacing to 1px, set the Subdivisions to 0px, and enable Snap to Grid (⇧⌘').

Step 2

Focus on the Toolbar and you will notice that by default your fill color is set at white while the stroke color is set at black. Simply click on the fill color and replace the existing color code with black (R=0 G=0 B=0) then click on the stroke color and drag the Alpha slider at 0% which will simply make your stroke invisible. Pick the Round Rectangle Tool (Shift + M), focus on the Titlebar and set the Corner Radius at 5px. Move to your canvas and simply create an 8 x 11px shape. The grid and the Snap to Grid feature will ease your work. Replace the existing fill color with a random red and grab the Rectangle Tool (M). Create an 8 x 4px shape and place it exactly as shown in the second image.

Step 3

Using the Move Tool (V), reselect both shapes made so far, focus on the Path Tools section from the Properties pane and click the Subtract button. In the end your resulting shape should look like in the second image.

Step 4

Again, set the fill color at black and pick the Ellipse Tool (O). Create a 4px circle and place it as shown in the first image. Select both shapes made so far, focus on the Path Tools section from the Properties pane and click the Make Compound Path button.

Step 5

Grab the Rounded Rectangle Tool (Shift + M), set the Corner Radius at 2px and create an 8 by 7px shape. Using the same tool, create a 4 x 8px shape and place it as shown in the second image. Make sure that this second rounded rectangle stays selected and simply hit Shift + X to transfer the color properties from the fill to the stroke. Move to the Effects section from the Appearance pane, select the stroke and drag the Width slider at 2pt.

Step 6

Reselect the rounded rectangle with the stroke, focus on the Path Tools section from the Properties pane and click the Outline Stroke button. Select the resulting shape along with the rounded rectangle made in the previous step and click the Union button located in the Path Tools section of the Properties pane.

Step 7

For the following steps you will need a grid every 10px which simply means that you need to return to the Grid section from the Properties pane and enter 10px in both Spacing boxes.
Set the fill color at R=40 G=42 B=44 and pick the Rounded Rectangle Tool (Shift + M). Set the Corner Radius at 5pt then create a 200px rounded square.

Step 8

Make sure that your rounded square stays selected and focus on the Effect section from the Appearance pane (simply click on the blue icon located above the Layers pane if you can't see the Appearance pane). Activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 9

Make sure that your rounded square stays selected, focus on the Effect section from the Appearance pane and add a second Drop Shadow using the plus button located in the bottom, left corner of the pane. Select this new effect, drag it below the existing Drop Shadow then enter the attributes shown in the following image.

Step 10

Make sure that your rounded square stays selected, focus on the Effect section from the Appearance pane and add a third Drop Shadow using that same plus button. Select this new effect, drag it below the existing Drop Shadow then enter the attributes shown in the following image.

Step 11

Make sure that your rounded square stays selected, focus on the Effect section from the Appearance pane and add a fourth Drop Shadow using that same plus button. Select this new effect, drag it below the existing Drop Shadow then enter the attributes shown in the following image.

Step 12

Make sure that your rounded square stays selected, focus on the Effect section from the Appearance pane, activate the existing Stroke and drag it below the Drop Shadow effects. Keep focusing on this stroke, drag the Width slide at 2pt, set the Position and Inside and the Blending Mode at Soft Light then click the color box that stands for your stroke. Simply set the color at white and drag the Alpha slider at 50%.

Step 13

Make sure that your rounded square stays selected, focus on the Effect section from the Appearance pane and add a second Stroke using that same plus button. Drag it below the existing Stroke then enter the attributes shown in the following image.

Step 14

Make sure that your rounded square stays selected, focus on the Effect section from the Appearance pane and add a third Stroke using that same plus button. Drag it below the existing strokes then enter the attributes shown in the following image.

Step 15

Grab the Rounded Rectangle Tool (Shift + M) and make sure that the Corner Radius is still set at 5pt. Create a 140 x 30px shape, set the fill color at R=29 G=32 B=34 and place it as shown in the following image.

Step 16

Reselect the rounded rectangle made in the previous step and make a copy in front (Command + C > Command + Shift + V). Replace the existing fill color with a random blue and grab the Rectangle Tool (M). Create a 30px square and place it exactly as shown in the first image. Select both shapes made in this step, focus on the Path Tools section from the Properties pane and click the Intersect button. Select the resulting shape and focus on the Effects section from the Appearance pane. Lower the Opacity to 10%, change the Blending Mode to Soft Light then select the Fill and replace the existing color with black.

Step 17

Make sure that your rounded rectangle stays selected and focus on the Effect section from the Appearance pane. Activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 18

Make sure that your rounded rectangle stays selected and focus on the Effect section from the Appearance pane. Activate the existing Inner Shadow and enter the attributes shown in the following image.

Step 19

Make sure that your rounded rectangle stays selected and focus on the Effect section from the Appearance pane. Activate the existing Stroke, drag it below the Inner Shadow then enter the attributes shown in the following image.

Step 20

Make sure that your rounded rectangle stays selected, focus on the Effect section from the Appearance pane and add a second Stroke. Drag it below the existing stroke then enter the attributes shown in the following image.

Step 21

Reselect your rounded rectangle along with the black, transparent shape and duplicate them (Command + C > Command > V). Drag these copies down and place them as shown in the second image.

Step 22

For this step you will need a grid every 1px, so return to the Grid section from Properties pane and simply enter 1px in both Spacing boxes.
Focus on the Layers pane, select the two, black icons made in the first steps and simply hit Shift + Command + ] to bring them to front. Select these shapes one by one and place them roughly as shown in the following image. Once you're done, select only the lock icon and focus on the Effects section from the Appearance pane. Simply click on the color box that stands for the existing Fill and drag the Alpha slider at 30%.

Step 23

Make sure that your lock icon is still selected and focus on the Effects section from the Appearance pane. Activate the existing Inner Shadow and enter the attributes shown in the following image.

Step 24

Make sure that your lock icon is still selected and focus on the Effects section from the Appearance pane. Activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 25

Make sure that your lock icon is still selected, right click on it and go to Copy Style. Select the other black icon, right click on it and go to Paste Style.

Step 26

You need to return to a grid every 10px which simply means that you have to focus on the Grid section from the Properties pane and enter 10px in both Spacing boxes. Grab the Rounded Rectangle Tool (Shift + M) and make sure that the Corner Radius is still set at 5pt. Create a 140 x 30px shape, set the fill color at R=254 G=145 B=79 and place it as shown in the following image.

Step 27

Make sure that your orange, rounded rectangle stays selected and focus on the Effect section from the Appearance pane. Activate the existing Inner Shadow and enter the attributes shown in the following image.

Step 28

Make sure that your orange, rounded rectangle stays selected, focus on the Effect section from the Appearance pane and add a second Inner Shadow. Drag it below the similar, existing effect then enter the attributes shown in the following image.

Step 29

Make sure that your orange, rounded rectangle stays selected and focus on the Effect section from the Appearance pane. Activate the existing Stroke, drag it below the Inner Shadow effects then enter the attributes shown in the following image.

Step 30

Make sure that your orange, rounded rectangle stays selected, focus on the Effect section from the Appearance pane and add a second Stroke. Drag it below the existing stroke then enter the attributes shown in the following image.

Step 31

Make sure that your orange, rounded rectangle stays selected and focus on the Effect section from the Appearance pane. Activate the existing Drop Shadow, drag it below the strokes then enter the attributes shown in the following image.

Step 32

For the final step you will need a grid every 1px, so return to the Grid section from the Properties pane and simply enter 1px in both Spacing boxes. Pick the Text Tool (T), simply click on your canvas and add the "Forgot Username or Password?" piece of text. Set the color at R=29 G=32 B=34, make sure that it stays selected and focus on the Text section from the Appearance pane. Select the DIN Alternate Bold font and set the size at 8pt. Return to your canvas and make sure that your piece of text is placed roughly as shown in the following image.

Step 33

Make sure that your piece of text stays selected and focus on the Effect section from the Appearance pane. Activate the existing Inner Shadow and enter the attributes shown in the following image.

Step 34

Make sure that your piece of text stays selected and focus on the Effect section from the Appearance pane. Activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 35

Reselect the Text Tool (T) and add the "LOGIN" piece of text. Set the color at R=40 G=42 B=44, make sure that it stays selected and focus on the Text section of the Appearance pane. Select the DIN Alternate Bold font then set the size at 10pt and the spacing at 4. Return to your canvas and place this new piece of text roughly as shown in the following image.

Step 36

Make sure that your "LOGIN" piece of text stays selected and focus on the Effect section from the Appearance pane. Activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 37

Make sure that your "LOGIN" piece of text stays selected and focus on the Effect section from the Appearance pane. Activate the existing Inner Shadow and enter the attributes shown in the following image.

Finished Design

Congratulations, you've finished the tutorial!

Graphic File:
LoginWidget.idraw