To give you illustrator software users to detailed analysis to share the design details Rich 404 error page Production tutorials.
First, create a new document and then set the grid
First, CTRL + N creates a new file, select pixels from the Unit drop-down menu, enter 600 in the Width box, 680 in the Height box, click the Advanced button, select RGB from top to bottom, screen (72ppi), and tick the new object to snap to the pixel grid, and then click OK.
Enable the grid (view – Display grid) and Snap to Grid (view – Snap to Grid). Edit > Options > Guide > Grid, enter 5 in the gridline every box and 1 in the Subdivisions box. Don't be intimidated by a full screen grid, learn to use shortcut keys, which will make your job much easier
Open the Information Panel (window – Information) to determine the location of your mouse in real time. Don't forget to select units of measurement as pixels (edit-preferences-unit-general), which can significantly improve your productivity.
Second, the production of the main shape
① Selection Rectangle tool (M). Click the Fill (X), and then select the fill and set its color to r =252 G =186 B = 3, click the stroke at the end of the fill and select None. Then create a rectangle that 275 x 400px. The rectangular snap grid is handy for your operation.
② using the Direct Selection tool, select the yellow rectangle again, and select 10 pixels in the upper control Panel corner
③ Make sure your rounded rectangle remains selected, look at the Appearance Panel (window-appearance), select strokes, and set the color r=232 g=146 b=0. Then click the Stroke text, pop-up menu, set the thickness to 1 pixels, and check the inside button of the alignment stroke.
④ Make sure your rectangle is still selected, pay attention to the appearance panel, and add a second stroke with a new stroke button. Select the new stroke, and then set it to Black (r= 0,g =0 b=0), aligning the alignment strokes from the pop-up stroke panel to the outer side.
Continue to operate in the Stroke panel, click "Opacity", pop-up transparent panel, change blending mode to soft light, reduce opacity to 5%.
⑤ uses the Rectangle tool (M), creates a 275px *80px shape, sets the fill color to black, and takes it as the first picture. Make sure the new shape remains selected, reducing its opacity to 20%, and changing the blending mode to soft light. Switch to the direct selection tool (A), select the first image to highlight the two anchor points, observe the control Panel and enter "10px" in the Corner box. The final display should look like on the second image.
⑥ uses the Rectangle tool (M), creates a 275 *80px shape, sets the fill color to black, and takes it as the first picture. Make sure that the new rectangle remains selected, reducing its opacity to 10%, and changing the blending mode to soft light.
⑦ uses the Rectangle tool (M), creates a 275 X75 pixel shape, sets the fill color to black, and takes it as the first picture. Make sure your new rectangle is selected to reduce its opacity to 5%, changing the blending mode to soft light.
Three, divided into three parts
① Select Edit > Preferences > Guide and Grid, and enter 1 in grid line. Use the Pen tool (P) to create a 273-pixel horizontal path. It looks like this and adds a 1px stroke and then the color is set to R =232 G =146 B = 0.
② Next, you need to make sure that your horizontal path is fully aligned with the pixel grid. Deselect it, effect > Distort and Transform > transform. Drag the slider vertically 0.5px, and then click OK.
Enable pixel preview (View > Pixel preview). Make sure your horizontal path is still selected and select Effects > Styling > Shading. Go to the properties shown in the following figure, and then click OK.
③ Select Edit > Preferences > Guide and Grid, and enter 5 in grid line. Using the Rectangle tool (M), create a 275 *10px rectangle, make sure it does not set the stroke color, and then select the Fill.
Open the Gradient Panel (window > Gradient), and then click the gradient thumbnail's default black to white linear gradient. Keep your rectangle selected, and then watch the gradient panel. Set the angle to 0 degrees, and then select the Black gradient slider and replace it with White (R =255 G =255 B =255). Notice the gradient bar and click it to add a new gradient slider. Select the new slider, set its color to black, focus in the position box (from the gradient panel), and set it to 50%.
④ Copy your Mask path (ctrl-c>ctrl-f) and select Copy to drag it up by 80 pixels. Make sure that your copy remains selected, and note that you select the mask on the transparency panel and replace the existing linear gradient as shown in the following illustration. Keep in mind that the white digits from the gradient image represent the percentage of the position. Your new path should look like the following figure.
⑤ copy your top, mask path (ctrl-c >ctrl-f), select Copy to drag it 75PX up. Make sure your copy remains selected, focus on the mask selected on the Transparency panel, and replace the existing linear gradient as shown in the following illustration. Finally your new path should look like the following figure.
Four, create search field and four buttons
① uses the Rectangle tool (M) to create a 145 x30 pixel shape, setting the fill color to r =232 G =146 B =0 and using it as the image shown below. Make sure that the new rectangle remains selected, concentrates on the appearance panel, selects existing fills and goes to affect > Dimension > Inner glow. Go to the properties shown in the following figure, and then click OK.
② make sure that the rectangle you made in the previous step remains selected. Adds a 1-pixel stroke, sets the color to black, aligns it to the inside, reduces the opacity to 20%, and changes its blending mode to soft light. On the appearance panel, make sure your entire path is selected (simply click on the "path" text block from the top of the façade panel) and go to the effect > Styling > Rounded corners. Enter a 3 pixel radius, click OK and go to effect > Styling > Shading. Go to the properties shown in the following figure, and then click OK.
③ uses the Rectangle tool (M) to create a 65 *30 pixel rectangle, set the fill color to r =253 G =218 B = 47, and use it as the image shown below.
④ Keep the yellow rectangle selected, the Appearance panel adds a second fill using the Add New Fill button (pointing to the blue circle as shown below). Select this new fill, whose color is set in R =252 G =206 B =23 as well as go to effect > distort and Transform > transform. Enter the properties shown in the following figure, click OK, go to effect > Styling > Shading. Please display the properties in the left window (pictured below), click OK, and then effect > Styling > Shading. Please display the properties in the right window, and then click OK.
⑤ Select the yellow rectangle and add a third fill using the same Add new Fill button. Select the new fill, drag it at the bottom of the appearance panel, and add a linear gradient as shown in the following illustration. Keep in mind that the opacity percentage is represented from the yellow Zero of the gradient image. This simply means that you need to select your gradient slider, and then enter the Opacity box "0" from the gradient panel.
Return to the appearance panel to make sure that the fill you added in this step is still selected and go to effect > distort and Transform > transform. Go to the properties shown in the following figure, click OK, and return to the Appearance panel. Select the entire path and affect the > Styling > Rounded corners. Enter the 3 pixel radius, and then click OK.
⑥ uses the rectangular tool (M) to create three 30-pixel squares and use them as the image shown below. Next, you need to copy the properties for the yellow rectangle and paste it into the three squares you made in this step. Just go to the layers panel and focus on the right, and you'll find that each shape comes with a small gray circle. This is called the target icon. Hold down the ALT key from your keyboard and click the target icon in the circle that represents your yellow rectangle and drag it to one of your three squares. Repeat this method for the other two squares. Finally it should look like in the second image.
Five, create three small icons
① Edit > Preferences > Guides and grids, and enter 1 on the grid line. Create a 11-pixel horizontal path with the pen tool (P) to make sure it stays selected. Add a 4-pixel stroke, set the color to r =232 G =146 B = 0, and open the pop-up stroke panel to check the round cap button. Finally your path should look like the following picture.
② Use the Pen tool (P) to create a 8-pixel vertical path, as shown on the first image, and add the same 4PX for horizontal path orange strokes. Make sure that your vertical path is selected, and then the object > Path > Add anchor points. Switch to the direct selection tool (A), select the newly added anchor point by adding it to only 5 pixels to the third image shown on the left.
③ Select two paths in your Orange arrow and go to the object > path > Contour stroke. Select the resulting shape, open the Pathfinder panel, and then click the Cell button.
④ Select the Rectangle tool (M), create a x17px rectangle, and set the fill color to r =232 G =146 B = 0. Using the direct Selection tool (A), select the new rectangle and enter "3px" in the Corner box on the control Panel.
⑤ uses the Pen tool (P) to create two simple paths, such as the first two images in the figure. Select two paths. Make sure there are no fill settings for the color, and then select the stroke, in R =253 G =218 B = 12, and the weight of the color is set to 2px. Choose to do two paths in this step, then click the Outline button from the Pathfinder panel. Make sure the result group path is selected, just press shift to control-G to ungroup it. Deselect all the paths and add the 2px, yellow strokes again, select only the fourth image of the highlighted tiny channel and remove it from the keyboard using the Delete button.
⑥ Select the first highlighted image in the yellow channel and go to the object > path > Contour stroke. Select the resulting shape, and then click the Union button, from the Pathfinder panel. With your orange, rounded rectangles Select this newly created shape, and then click the minus button in front of the Finder panel from the path. Select the orange shape of the result group and simply press Control-8 to turn it into a simple compound path. Using the direct Selection tool (A), select your new compound path and enter "0.5px" in the Corner box on the control Panel.
⑦ Select the Rectangle tool (M), create a 12x11 pixel rectangle, and set the fill color to r =232 G =146 B = 0, and then go to the object > path > Add Anchor point. Using the direct Selection tool (A), select the highlighted anchor point in the second image and drag it up 5px.
⑧ Use the Pen tool (P) to create a simple path to display on the first image, make sure it stays selected and centered on the appearance panel. Remove the color from the fill, and then select the stroke. Set the color to r =232 G =146 B = 0 and then go to object > path > Contour stroke in 3px. Switch to the Rectangle tool (M), create a 2x shape to join 5px, set the fill color to r =232 G =146 B =0 and as shown in the picture placed in the second image. Remove the shape of the three oranges and let your little home icon, then click the Union button from the Pathfinder panel.
⑨ uses the Rectangle tool (M) to create a 2x5px rectangle, like the first image to place. As the orange shape gradually occupies your house icon, select the new rectangle, and then click the minus sign in front of the button from the Pathfinder panel. Using the direct Selection tool (A), select the generated shape and enter "1px" in the Corner box on the control Panel.
⑩ Select three shapes to make your small icons, take them as shown in the image below, and then select Effects > Styling > Shading. Go to the properties shown in the following figure, and then click OK.
① Select the Type tool (T) to open the Character Panel (window > text > Characters). Simply click on your artboard, add "ERROR" a paragraph of text, and set its color in R =172 G =68 B = 0. Using the open sans font, make it bold and then set the size to 14 pixels and the trajectory at 900px. As shown in the figure, make sure that a paragraph of your text is still selected. Deselect the Type tool (T), add "search" and "or" text fragments, place them as shown in the following illustration, and use the text properties displayed in the window.
② ensure that the type tool (T) is still active, and add some related text as shown in the following illustration.
③ the current completed modules, effects > Styling > Shading. Go to the properties shown in the following figure, and then click OK.
④ uses the Type tool (T), adds "404" and sets its color to r =252 G =206 B = 23. Use the same font, make it bold, and set the size to 90px.
⑤ Make sure that your "404" section of text is still selected and add three shadow effects (Effects > Styling > Shading) as shown in the following illustration.
① uses the rectangular tool (M) to create a *25px rectangle with a fill color of R =60 G =36 B =21 as well as an image displayed below.
② Make sure that your brown rectangle remains selected, on the Appearance panel, select the existing fill and use the Copy the selected item button (the blue circle pointing to the following figure) to copy it. Select new Fill, Effect > Convert to Shape > rectangle. Go to the properties shown in the following figure, click OK, and then go to effect > distort and Transform > transform. Go to the properties shown in the following illustration, and then click OK.
③ Choose your brown styling, notice the Appearance panel, make sure the entire path is selected, select Effects > Styling > Shading. Go to the properties shown in the following figure, and then click OK.
④ uses the Type tool (T) to add "go back" text, setting the color to r =172 G =68 B =0 and using it as the image shown below. Also use the Opensans font to set its font to bold and size to 11 pixels. Re-select this yellow text with brown shape and press ctrl-g.
⑥ repeats your little hint (ctrl-c> ctrl-f), selects the copy and displays it in the first image. Look at the yellow part of the text and use "Go home" instead of the existing text. Repeat this step to add a third hint to "contact Us" as shown in the second figure below and increase the width of the brown shape by 75 pixels.
Viii. Adding a background and some subtle shadows
Select the Rectangle tool (M) and then click on your artboard to open the rectangular window. In the Height box, enter 610 in the Width box, 690, and then click the OK button. Make sure that the resulting shape remains selected and sets its color at R =35 G =31 B = 32. Next, you will need to center, so open the Alignment Panel (Window > Alignment). Set alignment to Artboard (open pop-up menu, go to display option, if you can't see the alignment to part, as shown below), make sure your shape is selected and then just click horizontally and vertically to center the button. Your square should cover the entire artboard as shown in the following figure. Finally, just press the SHIFT key – control – to make your rectangle black.
② Select the primary yellow rectangle, and then on the appearance panel, make sure the entire path is selected and add four shadow effects as shown in the following illustration.
Finally, congratulations on completing the page, the following are the results that should be displayed
Well, the above information is small set to you illustrator of this software users bring detailed design details of the rich 404 error pages of the production tutorials to share the full content of the the users see here, small knitting believe that we are now very clear about the production method, So let's go and try to make it yourself now.
