Members Area Tutorial: How to Create a Floppy Disk Illustration from Scratch in Photoshop

Hi there. In the following tutorial your will learn how to create a floppy disk illustration from scratch in Photoshop. You’ll learn to master a non-destructive workflow as well as Photoshop’s advance drawing tools.

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Open Photoshop and hit Control + N to create a new document. Enter all the data shown in the following image and click OK. Enable the Grid (View > Show > Grid) and the Snap to Grid (View > Snap To > Grid). For starters you need a grid every 10px. Go to Edit > Preferences > Guides, Grid & Slices and focus on the Grid section. Enter 10 in the Gridline Every box and 1 in the Subdivision box. Also, set the grid color at #696969. Once you set all these properties click OK. Don’t get discouraged by all that grid. It will ease your work. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes.

Step 2

Set the foreground color at #4b4b4b. Grab the Rounded Rectangle, set the radius at 5px and create a 340 by 350px vector path.

Step 3

Now you need a grid every 5px. Simply go to Edit > Preferences > Guides, Grid & Slices and enter 5 in the Gridline Every box. Select the shape made in the previous step, focus on the top side and grab the Rectangle Tool. Check the "Subtract from shape area" button from the top bar and draw a 250 by 5px vector path as shown in the first image. Make sure that your vector path is still selected and continue with the Rectangle Tool. Again, check the "Subtract from shape area" button from the top bar and draw a 10px by 10px vector path as shown in the second image. Switcth to the Direct Selection Tool, select the anchor point highlighted in the second image and simply drag it 5x to the left. The Snap to Grid will ease your work. In the end things should look like in the third image.

Step 4

Reselect your vector path, focus on the top, right corner and grab the Rectangle Tool. Check the "Subtract from shape area" button from the top bar and draw a 15 by 15px vector path as shown in the first image. Make sure that your vector path is still selected, switch to the Delete Anchor Point Tool and simply click on the anchor point highlighted in the first image to remove it. In the end things should look like in the second image.

Step 5

Reselect your vector path, focus on the bottom, right corner and grab the Rounded Rectangle Tool. Set the radius at 2px, check the "Subtract from shape area" button from the top bar and draw a 15 by 10px vector path as shown in the following image. Move to the Layers panel, double click on your vector path and name it "Body".

Step 6

Reselect "Body" and duplicate it (Control + J). Select this copy, focus on the top side and grab the Rounded Rectangle Tool. Set the radius at 5px, check the "Intersect shape areas" button and draw a 250 by 125px vector path as shown in the following image. Move to the Layers panel, name this new vector path "Top" then make it black.

That’s the end of the preview!

Join our FanExtra members community to access this full tutorial.
Existing members can login here to access this tutorial.

Want to create your own members area or online store? We recommend Shopify ecommerce software.

About the Author:

I spend most of my time working in Adobe Illustrator and I have my own website that focuses on this program. So far, I published over 150 tutorials on my websites and on other vector-related websites. You can see them all on VForVectors

2 Comments:

Rikki says:

September 6, 2012 at 5:15 am

I’m sorry, but what’s a “floppy disk”?

Reply
Tom says:

September 6, 2012 at 9:48 am

They’re a little out of date, but here’s an explanation: http://en.wikipedia.org/wiki/Floppy_disk. This tutorial would be great for a retro design though!

Reply

PSDFan Extra