How to Create a Retro Website Design in Adobe Illustrator

adminMarch 12, 2023

0 48 9 minutes read

YOU ARE READING: How to Create a Retro Website Design in Adobe Illustrator AT Vccidata_En

Step 2

We’ll start by creating a 1280 x 800 pixel document with 3 artboards, one each for screen, tablet and mobile. I chose to space them horizontally and 400px apart so the other document doesn’t distract us from our work. The more important details concern the units (set to pixels), color mode (set to RGB), and preview mode (set to pixels). All of this may be obvious to you, except for the preview mode.

Because Illustrator is a vector program, any graphic created can be infinitely zoomed while maintaining its accuracy. While it’s particularly beneficial to maintain retina compatibility and remain lossless, it can skew our more refined pixel-pushing tastes that we’ve all come to love. If we set the preview mode to pixels, we can zoom in and see our graphic in pixels. You can switch between pixels and preview with Ctrl + Alt + Y shortcut.

Reading: How to create a retro website design in adobe illustrator

After that’s done, let’s go to Edit > Units > Preferences and set all units to pixels if we haven’t already done so.

Step 3

As you will see, you have 3 artboards in front of you. Open the Artboards panel (Window > Artboards) and adjust the settings for the artboards as desired. In our case, I use the 1280 x 800 px size for the screen artboard and rename it accordingly. For the tablet and mobile artboards, I choose the built-in presets for iPad and iPhone. Also, set the mobile artboard to portrait mode and continue.

Step 5

With the created rectangles, select the one in the “Screen” artboard and go to Object > Path > Split into Grid. This provides a powerful tool for creating grids. I chose 12 columns and a 24px gutter for a total size of 960 (Column width is calculated automatically). This will split the rectangle into 12 grids and we need to group them first to move them as a single object. To create the guides we will duplicate the grid we just created and press Ctrl + 5 or View > Guides > Create Guides to create the guides. Repeat these steps for the tablet and mobile artboards with the settings listed below. A final step for the grid is to set the opacity to 40%.

Step 6

As a baseline, we draw a 1px stroke width down the length of all three artboards and use it the transform effect to create copies at specified intervals. This gives us the benefit of being able to readjust or even extend the baseline simply by readjusting the number of copies or the interval in between. For this baseline grid, we’ll stick to the 6-pixel baseline grid from Teehan+Lax. Set the Opacity to 20%.

Step 7

Et Voila! Our baseline grid is created. All that’s left is to lock the level and we’re good to go. Create a new layer and name it Header. We will organize a different section for each level as the sections appear.

Step 8

For the header we have three elements. The first is the logo, the second is the navigation, and the third is the typographic treatment. The logo is created by drawing a 140 x 168 pixel rectangle with a 15 point start with an outer radius of 48 pixels and an inner radius of 42 pixels. You can create the star manually and adjust the number of points by holding the mouse button and pressing the up and down arrow keys. The inner radius can be adjusted by holding down the Ctrl keys and dragging the mouse. Use “League Gothic” at 48 pixels for the logo text.

Step 9

The navigation is a 795 x 48 pixel rectangle. The ribbon is created by adding an anchor point in the middle of the right edge and retracting the anchor point as shown. The navigation points are created individually with a 16 px “Goudy Bookletter” font. The inactive links get a separate drawing style, which is a lighter color at this point. To evenly distribute the navigation elements, go to the alignment tool. If the Distribute Spacing option isn’t available, click the panel drop-down menu and view options. Align the objects to a key object. In this case, select Home and distribute the spacing by 36 pixels.

Step 10

The typographic treatment consists of two elements with bands. We create the first band by drawing three rectangles. For the two equal-sized rectangles on the back, add anchor points in the middle and drag them back to create a ribbon, like we did earlier for navigation. Select both shapes and use the Pathfinder panel to unite them and create a compound path from them (Ctrl + 8). Then select the rectangle in the center and offset path by 4px.

Step 11

Select the offset path and the ribbons on the back and subtract the paths. Add the resulting shapes to get the desired result. Use “Ostrich Sans” to add a “Hello” at 72px Bold and we’re done with this particular band.

Step 12

The second band is made using the same method created . Create a band.Then duplicate and mirror it with Transform effect.

Step 13

Offset the path and subtract the resulting path from the band behind it. Use “Ostrich Sans” at 40px bold.

Step 14

Now that our ribbons are ready, we’ll proceed to type handling. This is the part where I would hold less hands and more or less hope the visuals are easy enough to follow. The text itself is easy to create without explanation. The strokes vary by 1px, 3px and 6px thickness. The circular strokes are achieved by creating a 0px size dashed line with a 12px spacing and a rounded radius edge. The repeated star effect is created by creating a single star and copying the transform effect every 18 pixels.

Step 15

In the new layer called “About” we create the next section. Lock the previously created section. First we create the headline and its background. We use the same ribbon as in the logo, with the only difference being the size. Create two rectangles with the following settings. Unite them and create a compound path (Ctrl + 8).

Step 16

We will also convert this to an icon so we can reuse it for other sections. Save the shape you just created and save it as a graphic symbol. The headline uses the Chunkfive font at 21 pixels. We will save this as a character style called H2 – Section Heading.

Step 17

For the about section, I went with lots of text and two floating images. Illustrator can simulate such an effect. Start by creating the two paragraphs. The first paragraph is highlighted and saved as a character style (Emphasis), while the paragraph deserves its own character style that can be reused throughout the theme.

Step 18

Create a 304 x 247 pixel rectangle over the text you just created. Go to Object > Text Wrap > Make to create a floating image. We adjust the margin to 24 px by going to the Text Wrapping Options via Object > Text Wrapping > Text Wrapping Options.

Step 19

Repeat these steps for another image and place it as shown.

Step 20

As we did before created icon, we just drag it into this new section (Layer:Portfolio) and type the text and apply character style H2 – Section Heading. Draw a rectangle for the equipment item and create text as shown.

Step 21

Once the portfolio item is created, let’s create an icon from it for reuse. Create a portfolio item graphic symbol, drag two of its instances under it and space them evenly by 64px.

Step 22

Meanwhile we’re just repeating the same things. The block quote is wrapped around using Text Wrap.

Step 23

The horizontal lines are created with Effect > Transform & Distort > Transform at a 30 pixel interval with the appropriate number of copies.

Step 24

Grab Graphic Design Junction’s vector social icons for the social buttons.

Step 25

For the footer, we copy the logo from the header and paste it here. We’re also adding the site menu and copyright notice.

Step 26

Our wire frame should now look like this. You can click on it for a larger preview.

Step 27

And now the fun part. We’ll start working on the appearance, starting with the background. Create a new layer above guides and below each other layer. Draw a rectangle covering the entire artboard using RGB (247, 94, 80). For the textures we create two separate fill layers, both colored RGB (0,0,0). Use Texturizer under Effect > Texture > Texturizer to apply a grain effect and scratch paper with an opacity of 5%, an overlay in blend mode, and an overlay of 10%. Lock this background layer so we don’t accidentally move it (Illustrator will otherwise tax the computer quite a lot due to an accidental movement).

Step 28

Create a new swatch group in the Swatches panel and add colors with the following settings: RGB (247,94,80); RGB (233,200,97); RGB (232,223,156); RGB (145,192,158); RGB (125.119.105). Illustrator has a color guide panel that offers color options such as tints/shades, warm/cool, and vivid/muted.

Step 29

Apply a roughening to the header with a relative size of 0.05% and set the Detail to 100. Set the fill level to RGB (63,60,53). Under this fill create another RGB fill (247, 94, 80) and apply the Transform effect to it (Effect > Distort & Transform > Transform) with the following settings.

Step 30

For the last fill layer, we first create a pattern. Zoom in at 6400% and create a white 4×4 rectangle. Create 1 x 1 px squares across the diagonal. Once you’ve created a bitmap, just fully select it and drag it into the Swatches panel. You can use it now. Create a new fill layer and apply the pattern we just made and set the Opacity to 40% and the Blending Mode to Multiply.Also apply the transform effect at 4 pixels horizontally and 6 pixels vertically. Finally save this as a graphic style in the graphics panel.

Step 31

Use the graphic style you just created and apply it to the navigation and bands in the body text. For the logo, go to Effect > Stylize > Round Corners and set the Radius to 5px. Set a 1 pixel RGB colored stroke (63,60,53) and then apply a transform effect that scales the stroke down to 93% for a total of 3 copies. Next, create the RGB fill layer (237, 211, 129) with a 2px (X and Y offset) drop shadow set to Color Burn mode of 8%.

Step 32

For this effect, set the fill level to RGB (233,200,97). Create a fill layer underneath at RGB (55, 52, 46). Apply a 1px horizontal and vertical transform to this layer and make three copies (which creates a 3D text effect similar to dragging the whole thing after duplicating it in Photoshop). We’re going to use a 2 x 2 px version of the pattern we created earlier. Create and drag this pattern into the Swatches panel and apply it to the new fill layer below. Set it to 50% opacity and transform it horizontally and vertically by 6px. Save this as a graphic style.

Step 33

For the regular dark text, we applied a Roughen effect with a Relative Size of 2% and a Level of Detail of 7. The different strokes are created with the pattern we created the beginning or by roughening with a relative size of 0.1% and a detail value of 100. This is our typographic treatment.

Step 34

For the strokes I used combinations and variations of previously used patterns along with the roughen effect.

Step 35

It’s now easy to reapply styles we created previously. This is better understood visually, which is why I would suggest looking at the pictures. Select the text and you will see the relevant character style appear. This is where our initial effort pays off. Change the selected text and go to the panel options and choose Redefine Character Style. This applies wherever the character style was used in the document.

The final rendering style we’re going to create is the image placeholder. Set the inside stroke to 4 pixels with white color. Apply a 2px drop shadow (X and Y offset) and set the Blending Mode and Opacity to Multiply at 35%

Step 36

Keep working. You must double-click the icon before you can edit it. Apply the character and appearance styles we developed for endless reuse. When you’re happy with the result, press Esc to exit isolation mode and you’ll see the effect propagate to the other portfolio items. (An alternative way would have been to break the link to the icon, edit the style to your heart’s content, and redefine the icon later.)

Step 37

Patience, perseverance, hard Work and repetition gives a clearer picture that becomes concrete.

Conclusion

And here is the bottom line. I hope you found the tutorial helpful and filled with excitement. You can try working on the tablet and mobile versions, adding illustrations and maybe more depth and experimentation with layout and coloring. I also added social media icons in the navigation bar. I’d love to see what you make of it, so share.