The remote server returned an unexpected response: (413) Request Entity Too Large.
In the following steps you will learn how to create a detailed Tic Tac Toe game interface in Adobe Illustrator. For starters you will learn how to create a conical gradient using a simple rectangle, a radial gradient and a mesh. Next, using the Appearance panel, the Film Grain and the Sponge effects, a build-in art brush plus some basic blending and masking techniques you will learn how to create a subtle texture. We’ll continue with basic vector shapes building techniques and some simple Transform effects. Moving on, using more Transform effects along with the 3D Extrude and Bevel effect, the Appearance panel, the Blend Tool and several graphic styles you will learn how to create the 3D X and O’s. Once you’re done with the 3D shapes you will learn how to add multiple fills, stroke and effects for a simple piece of text. Finally, you will learn how to make a second, larger design for bigger screen.
Hit Command + N to create a New document. Enter 640 in the width box and 990 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.
Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). For starters you will need a grid every 10px, so simply go to Edit > Preferences > Guides > Grid, enter 10 in the Gridline every box and 1 in the Subdivisions box. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.
Pick the Rectangle Tool (M) and focus on your Toolbar. Remove the color from the stroke then select the fill and set its color at R=29 G=166 B=224. Move to your Artboard, simply create a 640px square and place it as shown in the following image, the Snap to Grid should ease your work.
Make sure that your blue square is still selected and make a copy in front (Control + C > Control + F). Select this copy and replace the blue with the radial gradient shown in the following image. Make sure that this copy is selected and make a new copy in front. Fill it with white then focus on the Layers panel and make it invisible.
Select the square filled with the radial gradient and go to Object > Expand. Check the Gradient Mesh button from the Expand window and click OK. Move to the Layers panel and you will find a group with a mesh and a clipping path. Delete the clipping path and Ungroup the remaining mesh (Shift + Control + G). Grab the Selection Tool (V), select your mesh and move it a little up and to the left, just so it snaps to the grid.
Disable the Snap to Grid (View > Snap to Grid). Select your mesh , grab the Mesh Tool (U) and add some new mesh points as shown in the following image.
Keep focusing on your mesh and pick the Direct Selection Tool (A). Select the mesh points one by one and set the colors as shown in the following image.
Focus on the Layers panel and turn on the visibility for that white square. Select it along with the mesh, open the fly-out menu of the Transparency panel and go to Make Opacity Mask. In the end things should look like in the second image.
Focus on the Layers panel, select the blue square, bring it to front (Shift + Control + ] ) and focus on the Appearance panel. First replace the blue with a simple black. Make sure that this black fill is selected, lower its Opacity to 5%, change the Blending Mode to Overlay and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.
Return to the Appearance panel and add a second fill for this shape using the Add New Fill button (pointed by the little, blue arrow in the following image). Select this new fill, make sure that the color is set at black, lower its Opacity to 40%, change the Blending Mode to Overlay and go to Effect > Artistic > Sponge. Enter the properties shown in the following image, click OK and get back to the Appearance panel. Add a 2pt stroke, align it to inside and set the color at R=219 G=224 B=227. Keep focusing on the Appearance panel and add a second stroke for this shape using the Add New Stroke button (pointed by the little, green arrow in the following image). Select this new stroke, make it 1pt wide, set the color at R=113 G=123 B=126 and align it to inside. Make sure that this textured shapes is still selected, open the Graphic Styles panel and simply hit the New Graphic Style button. Double-click on this new Graphic Style and simply name it "texture".
Make sure that your textured shape is still selected and make a copy in front. Select this copy and simply hit the D key from your keyboard to replace the existing Appearance attributes with the default ones (white fill and 1pt, black stroke). Next, you’ll need a built-in art brush. Go to the Brushes panel, open the fly-out menu and go to Open Brush Library > Artistic > Artistic_ChalkCharcoalPencil. Take a look inside this new panel and you should find the Charcoal_Varied art brush. Reselect the shape made in this step and focus on the Appearance panel. Select the stroke, add that Charcoal_Vadied brush and set its color at R=50 G=50 B=50. Make sure that the shape made in this step is still selected, move to the Graphic Styles panel, save a new graphic style and name it "mask".
Reselect the shape with the "mask" graphic style along with the textured square, open the fly-out menu of the Transparency panel and go to Make Opacity Mask.
Enable the Snap to Grid (View > Snap to Grid). For this step you will need a grid every 5px, so go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Using the Rectangle Tool (M), create a 160px square, fill it with R=83 G=93 B=96, place it as shown in the following image and go to Effect > Distort & Transform > Transform. Enter the properties shown in the left window (in the following image), click OK and go again to Effect > Distort & Transform > Transform. Enter the properties shown in the right window (in the following image), click OK and go to Object > Expand Appearance. Select the resulting group and hit Shift + Control + G three times.
Select the nine square, add the Charcoal_Vadied brush and set the color at R=50 G=50 B=50. Select these shapes one by one and randomly rotate them as shown in the second image. Once you’re done Group them (Control + G). Select this new group, lower its Opacity to 15% and change the Blending Mode to Color Dodge.
Make sure that the group with the nine squares is still selected and make a copy in front (Control + C > Control + F). Open this new group, select all nine squares and replace the Charcoal_Vadied brush with the Chalk – Scribble brush. Reselect the entire group copy, change the Blending Mode to Soft Light and increase the Opacity to 50%.
Make sure that the group made in the previous step is still selected and make a copy in front. Ungroup this new group, select the resulting nine squares, remove the art brush from the stroke and set the fill color at R=83 G=93 B=96. Move to the Layers panel and name these shapes from "1" to "9" as shown in the following image.
Focus on square "1". Select it, add a 1pt stroke, align it to outside and set the color at R=103 G=113 B=116. Using the Rectangle Tool (M), create a 15 x 160px shape and place it as shown in the second image. Switch to the Direct Selection Tool (A) and focus on the top side of this new rectangle. Select the right anchor point and simply drag it 15px down. Once you’re done fill this shape with the linear gradient shown in the following image. Make sure that this linear gradient is still active, focus on the Swatches panel and click the New Swatch button to save the gradient. Using the Rectangle Tool (M), create a 160 x 15px shape and place it as shown in the fourth image. Switch to the Direct Selection Tool (A) and focus on the left side of this new rectangle. Select the bottom anchor point and simply drag it 15px to the right. Once you’re done fill this shape with the saved gradient.
Reselect your "1" square, make a copy in front and bring it to front. Select this copy, remove the color from the stroke and select the remaining fill. Replace the existing color with the radial gradient shown in the following image, lower its Opacity to 50% and change the Blending Mode to Soft Light. Return to the Appearance panel and add a second fill for this shape. Select it, set the color at black, lower its Opacity to 3%, change the Blending Mode to Overlay and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK. Make sure that the shape made in this step is still selected, move to the Graphic Styles panel, save a new graphic style and name it "shading".
Reselect the "1" square along with the three shapes used to highlight it and Group them (Control + G). Move to the Layers panel, name this new group "frameOne", select it and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image, click OK and go to Object > Transform > Reflect. Check the Vertical box and click the Copy button. This should create a horizontally, flipped group copy. Select it, drag it to the right and place it as shown in the third image. Move to the Layers panel and name this new group "frameThree". Keep focusing on the Layers panel and remove that "3" square.
Reselect the "frameOne" and "frameThree" groups and go to Object > Transform > Reflect. Check the Horizontal box and click the Copy button. Drag the resulting groups down and place them as shown in the third image. Name these new groups "frameSeven" and "frameNine" then move to the Layers panel and remove the "7" and "9" squares.
Focus on square "2". Select it, add a 1pt stroke, align it to outside and set the color at R=103 G=113 B=116. Using the Rectangle Tool (M), create two, 10 x 160px shape and place them as shown in the second image. Switch to the Direct Selection Tool (A) and focus on the top side of the left rectangle. Select the right anchor point and simply drag it 15px down. Move to the right rectangle, focus on the top side, select the left anchor point and drag it 15px down. Once you’re done fill both shapes with your saved gradient. Reselect the Rectangle Tool (M), create a 160 x 15px shape and place it as shown in the fourth image. Switch to the Direct Selection Tool (A) and focus on the bottom side of this new rectangle. Select the left anchor point and drag it 15px to the right then select the right anchor point and drag it 15px to the left. Once you’re done fill this shape with the saved gradient.
Reselect your "2" square, make a copy in front and bring it to front. Select this copy, add the "shading" graphic style and focus on the Appearance panel. Select the bottom fill and adjust the positioning of the existing radial gradient as shown in the following image.
Reselect the "2" square along with the four shapes used to highlight it and Group them (Control + G). Move to the Layers panel, name this new group "frameTwo", select it and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image, click OK and go to Object > Transform > Reflect. Check the Horizontal box and click the Copy button. This should create a vertically, flipped group copy. Select it, drag it down and place it as shown in the third image. Move to the Layers panel and name this new group "frameEight". Don’t forget to remove the "8" square.
Reselect the "frameTwo" and "frameEight" groups and go to Object > Transform > Rotate. Enter a 90 degrees angle and simply click the Copy button. Once you’re done move to the Layers panel. Name the left, new group "frameFour" and the other new group "frameSix" then delete the "4" and "6" squares.
Focus on square "5". Select it, add a 1pt stroke, align it to outside and set the color at R=103 G=113 B=116. Using the Rectangle Tool (M), create two, 10 x 160px shapes and place them as shown in the second image. Switch to the Direct Selection Tool (A) and focus on the right side of the left rectangle. Select the top anchor point and drag it 10px down then select the bottom anchor point and drag it 10px up. Move to the right rectangle and focus on its left side. Select the top anchor point and drag it 10px down then select the bottom anchor point and drag it 10px up. Once you’re done fill both shapes with your saved gradient.
Reselect the Rectangle Tool (M), create two, 160 x 10px shapes and place them as shown in the fourth image. Switch to the Direct Selection Tool (A) and focus on the bottom side of the top rectangle. Select the left anchor point and drag it 10px to the right then select the right anchor point and drag it 10px to the left. Move to the bottom rectangle and focus on its top side. Select the left anchor point and drag it 10px to the right then select the right anchor point and drag it 10px to the left. Once you’re done fill both shapes with your saved gradient.
Reselect your "5" square, make a copy in front and bring it to front. Select this copy, add the "shading" graphic style and focus on the Appearance panel. Select the bottom fill and adjust the positioning of that radial gradient as shown in the following image. Reselect the "5" square along with the shapes used to highlight it and Group them (Control + G). Move to the Layers panel, name this new group "frameFive", select it and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK.
Select all nine frame groups along with the two groups with the nine squares (with art brushes) and Group them (Control + G). Move to the Layers panel and simply name this new group "Frames".
Focus on "frameOne" and pick the Rectangle Tool (M). Create a 25 x 115px shape, fill it with R=39 G=170 B=225 and place it as shown in the first image. Make sure that this blue rectangle is selected and go to Object > Transform > Rotate. Enter a 90 degrees angle and click the Copy button. Select both blue rectangles and click the Unite button from the Pathfinder panel. Select the resulting shape and go to Effect > Stylize > Rounded Corners. Enter a 12.5px radius, click OK and go to Object > Transform > Rotate. Enter a 45 degree angle and click OK. Move this blue shape a little and place it as shown in the fourth image.
Make sure that the blue shape is still selected and go to Effect > Distort & Transform > Transform. Enter the properties shown in the left window (in the following image), click OK and go again to Effect > Distort & Transform > Transform. Enter the properties shown in the right window (in the following image), click OK and go to Effect > 3D > Extrude & Bevel. Enter the properties shown in the following image and click OK. Make sure that you check the Draw Hidden Faces box.
Make sure that your blue shapes is still selected and go to Object > Expand Appearance. Select the resulting groups of shapes and hit Shift + Control + G three times to Ungroup all those groups. Take a look inside your Layers panel and you will find a bunch of blue shapes.
Pick the Selection Tool (V), select the nine, top "X" shapes and Group them (Control + G). Make sure that this new group is selected and replace the blue with R=142 G=150 B=155. Move to the Layers panel and simply make this group invisible.
Pick the Selection Tool (V), select the other nine "X" shapes and Group them (Control + G). Make sure that this new group is selected and replace the blue with R=72 G=80 B=85. Move to the Layers panel, drag this new group below the invisible one then make it invisible.
Focus on the remaining blue shapes. Select one of those shapes and go to Select > Same > Appearance (which will select all blue shapes) then simply hit the Delete key from your keyboard. Focus on the Layers panel, turn on the visibility for the two groups with the "X" shapes then Ungroup them (Shift + Control + G).
Focus on "frameOne". Select the darker "X" shape and make a copy in back (Control + C > Control + B). Make sure that this copy stays selected and focus on the Appearance panel. Remove the color from the fill, add a 2pt stroke and select it. Set the color at black, lower its Opacity to 10% and change the Blending Mode to Soft Light. Keep focusing on the Appearance panel and add a second stroke for this shape. Select it, make sure that the color is set at black, make it 4pt wide, lower its Opacity to 5% and change the Blending Mode to Soft Light. Make sure that the shape made in this step is still selected, move to the Graphic Styles panel, save a new graphic style and name it "back".
Keep focusing on "frameOne". Select the top "X" shape and make a copy in front (Control + C > Control + F). Make sure that this copy stays selected, focus on the Appearance panel and add a second fill. Select it, set the color at white, change its Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -1px Offset, click OK and return to the Appearance panel. Add a third fill and select it. Use the radial gradient shown in the following image then go to Effect > Path > Offset Path. Enter a -1px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and go to Effect > Stylize > Inner Glow. Enter the attributes shown below, click OK and get back to the Appearance panel. Add a 1pt stroke, align it to inside, set the color at R=102 G=110 B=115 and lower its Opacity to 15%.
The white numbers from the Gradient image stand for Location percentage.
Make sure that the top "X" shape is still selected, focus on the Appearance panel, add a e new fill and select it. Use the radial gradient shown in the first image, lower its Opacity to 70% and go to Effect > Path > Offset Path. Enter a -1px Offset and click OK. Return to the Appearance panel and add a new fill for this shape. Use the radial gradient shown in the second image, lower its Opacity to 10%, change the Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -1px Offset and click OK. Return to the Appearance panel and add one final fill and select it. Use the linear gradient shown in the third image, lower its Opacity to 25%, change the Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -2px Offset and click OK. Make sure that the shape edited in this step is still selected, move to the Graphic Styles panel, save a new graphic style and name it "frontGrey".
Remember that the white numbers from the Gradient image stand for Location percentage while the yellow ones stand for Opacity percentage.
Focus on your Toolbar and double click on the Blend Tool (or go to Object > Blend > Blend Options..). Select Specified Steps from the drop down menu, enter 25 in th white box and click OK. Focus on "frameOne", select both original "X" shapes (the ones with only one fill) and hit Alt + Control + B. In the end things should look like in the second image. Move to the Layers panel, select this new blend and add the three Drop Shadow effects shown in the following image. Make sure that the blend is still selected, move to the Graphic Styles panel, save a new graphic style and name it "blendShadow". Return to your Artboard, reselect the blend along with the two "X" shapes used to highlight it and Group them (Control + G). Move to the Layers panel and name this new group "X1".
Next, you need to repeat the techniques used for "X1" for the remaining "X" shapes. Things should go faster now that you have those saved graphic styles. Here are the quick things that you need to do. Focus on "frameTwo", select the darker "X" shape and make a copy in back (Control + C > Control + B). Select this copy and simply add the "back" graphic style. Return to to your Artboard, select the top "X" shape and make a copy in front (Control + C > Control + F). Select this new copy and and add the "frontGrey" graphic style. Get back to the Layers panel, focus on "frameTwo", select both original "X" shapes (the ones with a single fill), hit Alt + Control + B and add the "blendShadow" graphic style for the newly created blend. Select this new blend along with the two copies made in this step and Group them (Control + G). Move to the Layers panel and name this new group "X2". Continue with the remaining "X" shapes and repeat these techniques. Once you’re done select all nine "X" groups and Group them (Control + G). Move to the Layers panel and name this new group "XGrey".
Select the "XGrey" group, make a copy in front (Control + C > Control + F) and focus on the Layers panel. Turn off the visibility for the original "XGrey" group, name the group copy "XYellow" then open it. Select one of the "X" shapes with a fill of R=72 G=80 B=85, go to Select > Same > Appearance and replace the R=72 G=80 B=85 with R=192 G=108 B=13.
Keep focusing on the "XYellow" group. Select one of the "X" shapes with a fill of R=142 G=150 B=155, go to Select > Same > Appearance and replace the R=142 G=150 B=155 with R=249 G=174 B=53.
Keep focusing on the "XYellow" group. Select one of the "X" shapes with the "frontGrey" graphic style and replace the existing Appearance attributes with the ones shown in the following image. Make sure that this yellow shapes is still selected, move to the Graphic Styles panel, save a new graphic style and name it "frontYellow".
Select the remaining eight "X" shapes with the "frontGrey" graphic style and simply replace it with the "frontYellow" graphic style. Once you have finished, turn off the visibility of your "XYellow" group.
Using the Ellipse Tool (L), create a 100px circle and place it as shown in the first image. Fill it with none, but add a 25pt Stroke Weight, align it to inside and set the color at R=29 G=166 B=224.
Make sure that your 100px circle is still selected then add the Transform and the 3D Extrude & Bevel effects .
Make sure that your blue shape is still selected and go to Object > Expand Appearance. Select the resulting groups of shapes and hit Shift + Control + G three times to Ungroup all those groups. Now, focus on the resulting blue shapes and simply repeat the techniques used for the "X" shapes. Remove the unwanted blue shapes then re-color the top and bottom "O" shapes.
Focus on these "O" shapes, apply the same techniques used for the "X" shapes and make sure that your use the saved graphic styles to ease your work. Don’t forget to group, name and organize these shapes. In the and you should have a main group named "OGrey".
Duplicate your "OGrey" group and name the new group "OYellow". Open this new group and make it yellow using the "frontYellow" graphic style and the re-coloring techniques used for the yellow "XYellow" group.
Using the Rectangle Tool (M), create a 550px square, fill it with R=83 G=93 B=96 and place it as shown in the first image. Make sure that this new shape stays selected, focus on the Appearance panel and add two stroke. Select the bottom one, make it 1pt wide, set the color color at R=103 G=113 B=116 and align it to outside. Move to the top stroke, make it 11pt wide, align it to inside and set the color at R=78 G=88 B=91.
Using the Rectangle Tool (M), create two, 15 x 550px shapes and place them as shown in the first image. Switch to the Direct Selection Tool (A) and focus on the right side of the left rectangle. Select the top anchor point and drag it 15px down then select the bottom anchor point and drag it 15px up. Move to the right rectangle and focus on its left side. Select the top anchor point and drag it 15px down then select the bottom anchor point and drag it 15px up. Once you’re done fill both shapes with your saved gradient.
Using the Rectangle Tool (M), create two, 550 x 15px shapes and place them as shown in the first image. Switch to the Direct Selection Tool (A) and focus on the bottom side of the top rectangle. Select the left anchor point and drag it 15px to the right then select the right anchor point and drag it 15px to the left. Move to the bottom rectangle and focus on its top side. Select the left anchor point and drag it 15px to the right then select the right anchor point and drag it 15px to the left. Once you’re done fill both shapes with your saved gradient.
Reselect your 550px square, make a copy in front and bring it to front. Select this copy, add the "shading" graphic style and focus on the Appearance panel. Select the bottom fill and adjust the positioning of the existing radial gradient as shown in the following image. Select this new shape along with the 550px square and the four trapezoidal shapes and Group them (Control + G). Select this new group and name it "frame".
Using the Type Tool (T) add the "PLAY", "SCORE" and "ACHIEVEMENTS" pieces of text as shown in the following image. Use the "American Purpose font" with the size set at 56pt and the color at black.
Select one of your pieces of text, focus on the Appearance panel and simply add a new fill using that same Add New Fill button. Select this new fill and set the color at R=142 G=150 B=155. Add a second fill for this piece of text, set the color at white, change its Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -1px Offset and click OK. Return to the Appearance panel and add a third fill for this shape. Select it, use the left linear gradient shown in the following image, and go to Effect > Path > Offset Path. Enter a -1px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and return to the Appearance panel. Make sure that the top fill is selected and hit the Duplicate Selected Item to add a copy of the selected fill. Select this new fill, replace the existing linear gradient with the right one shown in the following image, lower its Opacity to 75% and change the Blending Mode to Soft Light.
Get back to the Appearance panel, add a new fill, make it black, drag it in the bottom of the Appearance panel, lower its Opacity to 5% and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK. Add a second black fill for this piece of text, drag it in the bottom of the Appearance panel, lower its Opacity to 10% and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and return to the Appearance panel. Add a final, black fill and drag it in the bottom of the Appearance panel. Lower its Opacity to 10% and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and go to Effect > Blur > Gaussian Blur. Enter a 2px radius, click OK and have a final look inside the Appearance panel. Simply add a 1pt stroke, align to inside and set the color at R=102 G=110 B=115. Make sure that this piece of text is still selected, move to the Graphic Styles panel, save a new graphic style and name it "greyText".
Select the other two pieces of text and add the "greyText" graphic style. Select all three piece of text and Group them (Control + G). Move to the Layers panel and name this new group "menu".
Duplicate the group made in the previous step. Move to the Layers panel and name this new group "menuHover". Select the piece of text inside this new group, focus on the Appearance panel and replace the existing attributes with the ones shown in the following image. Make sure that one of these yellow pieces of text is still selected, move to the Graphic Styles panel, save a new graphic style and name it "yellowText".
Using the Type Tool (T), add four new pieces of text and use the same color and Character attributes.
Select these new pieces of text, add the "greyText" graphic style then Group them (Control + G). Move to the Layers panel and name this new group "endScreen".
Duplicate your "endScreen" group. Move to the Layers panel and name this new group "endScreenHover". Select the piece of text inside this new group and simply add the "yellowText" graphic style.
Reselect the four groups with the pieces of text along with the "frame" group and Group them (Control + G). Move to the Layers panel and name this new group "menuAndEndScreen". Now, focus on the Layers panel and make sure that all your groups are visible. Select all the groups, the shapes and the mesh created so far and Group them (Control + G). Move to the Layers panel and name this new group "main".
For this step you will need a grid every 1px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Using the Rectangle Tool (M), create a 2 x1px shape and fill it with R=237 G=28 B=36. Continue with the Rectangle Tool (M), create a 1px square, fill it with black and place it as shown in the second image. Reselect the red rectangle and remove the color from the fill. Select both shapes made in this step and simply drag them inside the Swatches panel to save them as a pattern. Once you have your pattern you can remove those tiny rectangles from your Artboard.
Return to “gridline every 5px “, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Using the Rectangle Tool (M), create a 640 x 15px shape, fill it with the linear gradient shown in the following image and place it above your "main" group as shown in the following image. Add a second fill for this thin rectangle, lower its Opacity to 40%, change the Blending Mode to Soft Light and use that saved pattern. Move to the Layers panel and name this dark rectangle "divider". Duplicate your "divider", select the copy, drag it down and place it below the "main" group as shown in the following image.
Focus on the Layers panel, open your "main" group and duplicate the existing mesh. Select this copy, drag it outside the group (in the top of the Layers panel), open the fly-out menu of the Transparency panel and go to Release Opacity Mask. Delete the resulting white rectangle and select the mesh. Drag it up and place it roughly as shown in the first image. Using the Rectangle Tool (M), create a 640 x 220px shape, fill it with white and place it as shown in the second image. Select this white rectangle along with the new mesh, open the fly-out menu of the Transparency panel and go to Make Opacity Mask. In the end things should look like in the third image.
Using the Rectangle Tool (M), create a new 640 x 220px shape, place it as shown in the first image and simply add the "texture" graphic style. Duplicate this new rectangle, select the copy and add the "mask" graphic style. Reselect both rectangles made in this step, open the fly-out menu of the Transparency panel and go to Make Opacity Mask.
Using the Rectangle Tool (M), create a 105px square, fill it with R=83 G=93 B=96 and place it as shown in the following image. Add a 1pt stroke for this new shape, align it to outside and set the color at R=103 G=113 B=116.
Using the Rectangle Tool (M), create a 15 x 105px shape and place it as shown in the first image. Switch to the Direct Selection Tool (A) and focus on the top side of this new rectangle. Select the right anchor point and simply drag it 10px down. Once you’re done fill this shape with your saved gradient. Make sure that the Rectangle Tool (M) is still active, create a 105 x 10px shape and place it as shown in the third image. Switch to the Direct Selection Tool (A) and focus on the left side of this new rectangle. Select the bottom anchor point and simply drag it 15px to the right. Once you’re done fill this shape with the saved gradient. Reselect your 105px square, make a copy in front and bring it to front. Select this copy, add the "shading" graphic style and focus on the Appearance panel. Select the bottom fill and adjust the positioning of the existing radial gradient as shown in the following image.
Reselect the 105px square along with the three shapes used to highlight it and Group them (Control + G). Move to the Layers panel and name this new group "leftFrame". Select it and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image, click OK and go to Object > Transform > Reflect. Check the Vertical box and click the Copy button. Select the resulting flipped group copy, drag it to the right and place it as shown in the third image. Move to the Layers panel and name this new group "rightFrame".
Focus on "leftFrame" and pick the Rectangle Tool (M). Create a 15 x 65px shape, fill it with R=39 G=170 B=225 and place it as shown in the first image. Make sure that this blue rectangle is selected and go to Object > Transform > Rotate. Enter a 90 degrees angle and click the Copy button. Select both blue rectangles and click the Unite button from the Pathfinder panel. Select the resulting shape and go to Effect > Stylize > Rounded Corners. Enter a 7.5px radius, click OK and go to Object > Transform > Rotate. Enter a 45 degree angle and click OK. Focus on "rightFrame" and pick the Ellipse Tool (L). Create a 60px circle and place it as shown in the fifth image. Fill it with none, but add a 15pt stroke, align it to inside and set the color at R=29 G=166 B=224.
Select both blue shapes and go to Object > Expand Appearance. Select the resulting group of shapes and turn it into a simple compound path (Control + 8 or Object > Compound Path > Make). Make sure that this new compound path is selected and go to Effect > 3D > Extrude & Bevel. Enter the properties shown in the following image and click OK.
Select the blue compound path and go to Object > Expand Appearance. Ungroup (Shift + Control + G) the resulting group of shapes then apply techniques and the graphic styles used for the previous "X" and "O" 3D shapes.
Using the Pen Tool (P), create a 45px, vertical path and place it as shown in the first image. Add a 1pt stroke for this path, set its color at R=113 G=123 B=126 and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and go to Effect > Stylize > Drop Shadow. Enter the attributes shown below and click OK.
Pick the Type Tool (T) and add some pieces of text as shown in the following image. Use R=53 G=63 B=66 for the color then follow the properties shown in the Character panels. Once you’re done select all these piece of text and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK. Select all these pieces of text along with the mesh, the shapes and the groups that make up this top side and Group them (Control + G). Move to the Layers panel and name this new group "scoreBar".
Re-open your "main" group and duplicate the existing mesh. Select this copy, release the existing mask and delete it. Select the remaining mesh, move it outside the group, drag it down and place it roughly as shown in the first image. Using the Rectangle Tool (M), create a 640 x 70px shape, fill it with white and place it as shown in the second image. Select this white rectangle along with the new mesh, open the fly-out menu of the Transparency panel and go to Make Opacity Mask. In the end things should look like in the third image.
Using the Rectangle Tool (M), create a new 640 x 70px shape, place it as shown in the first image and simply add the "texture" graphic style. Duplicate this new rectangle, select the copy and add the "mask" graphic style. Reselect both rectangles made in this step, open the fly-out menu of the Transparency panel and go to Make Opacity Mask.
Using the Rectangle Tool (M), create a 100 x 40px shape, fill it with the linear gradient shown below and place it as shown in the following image. Make sure that this rectangle stays selected and focus on the Appearance panel. Select the existing fill and go to Effect > Stylize > Inner Glow. Enter the properties shown in the following image, click OK and return to the Appearance panel. Add a second fill for this shape, lower its Opacity to 40%, change the Blending Mode to Soft Light and use your saved pattern.
Keep focusing on the Appearance panel, add a 1pt stroke and select it. Set the color at white, align it to outside, change the Blending Mode to Soft Light and lower its Opacity to 50%. Get back to the Appearance panel, select the entire path (simply click on the "Path" text from the top of the Appearance panel) and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK.
Using the Type Tool (T), create the "STOP" piece of text and place it as shown in the first image. Use the "Agency FB" font, set the size set at 15pt, the style at Bold and the tracking at 600. Make sure that this piece of text stays selected and focus on the Appearance panel. Add a new fill, select it and use the linear gradient shown in the following image. Keep focusing on the Appearance panel and add a second fill for this piece of text. Set the color at white, lower its Opacity to 50%, change the Blending Mode to Overlay and go to Effect > Path > Offset Path. Enter a -1px Offset and click OK. Return to the Appearance panel and add a third fill. Select it, add the same linear gradient shown in the following image, hit the Shift + Control + E to add that same -1px Offset effect then go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image, click OK and return to the Appearance panel. Select the entire Type and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK.
Select this piece of text along with the mesh and the shapes that make up this bottom side and Group them (Control + G). Move to the Layers panel and name this new group "stopBar".
Using the Ellipse Tool (L), create a 10px circle, fill it with R=133 G=143 B=146 and place it as shown in the first image. Make sure that this tiny circle stays selected and focus on the Appearance panel. Add a second fill, select it, set the color at R=93 G=103 B=106 and go to Effect > Convert to Shape > Rectangle. Enter the properties shown in the following image, click OK and go to Effect > Distort & Transform > Transform. Enter the data shown below, click OK and return to the Appearance panel. Add a 2pt stroke, set the color at R=93 G=103 B=106 and align it to inside. Get back to the Appearance panel, make sure that the entire path is selected and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK. Move to the Layers panel and name this tiny circle "screw".
Multiply your "screw" shape and spread the copies as shown in the following image, the Snap to Grid should ease your work. Select these copies one by one, focus on the Appearance panel, open the existing Transform effect and randomly change the angle used for the rotation. Once you have finished, select all these "screw" shapes and Group them (Control + G). Move to the Layers panel and name this new group "screws".
Select all the shapes and groups created so far and Group them (Control + G). Move to the Layers panel and name this new group "640×990". This will be the iPhone 4 version.
Next, you need to create the iPhone 5 version. First, for this step you will need a grid every 1px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Pick the Artboard Tool (Shift + O), focus on the right side of the existing Artboard and create a 640 x 1136px Artbaord as shown in the first image. Duplicate the "640×990" group, select the copy, drag it to the right and place it as shown in the second image. Lock the original "640×990" group then focus on the Layers panel and rename the moved group copy "640×1136".
Return to “ridline every 5px “, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Open your "640×1136" group and focus on the "stopBar" group. First, select the mesh and release the existing mask. Select the resulting white rectangle and drag the bottom side 30px down. In the end it should be 100px high. Reselect this white rectangle along with the mesh, open the fly-out menu of the Transparency panel and go to Make Opacity Mask.
Keep focusing on the "stopbar" group, select the masked shape and simply drag the bottom side 30px down. Select the dark rounded rectangle, make it 160px wide and 60px tall and place it as shown in the third image. Select the "STOP" piece of text, increase the font size to 25pt and place it as shown in the final image.
Select the "divider" rectangle, make two copies and place them as shown in the following image.
Select one of the existing meshes, release the mask and delete it. Place the remaining mesh as shown in the first image and pick the Rectangle Tool (M). Create a 640 x 58px shape, fill it with white and place it as shown in the second image. Select this white rectangle along with the new mesh, open the fly-out menu of the Transparency panel and go to Make Opacity Mask.
Using the Rectangle Tool (M), create a new 640 x 58px shape, place it as shown in the first image and simply add the "texture" graphic style. Duplicate this new rectangle, select the copy and add the "mask" graphic style. Reselect both rectangles made in this step, open the fly-out menu of the Transparency panel and go to Make Opacity Mask.
Select the mesh and the masked rectangle that make up this top side and Group them (Control + G). Move to the Layers panel and name this new group "topBar". Duplicate "topBar", select the copy, drag it down and place it as shown in the second image.
Finally, make some new "screws" and place them as shown in the following image.
Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Keep an eye open on Mobiletuts+ to find out how you can create the actual game!
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন