Gain a deeper understanding of how to create a website wireframe file and customize your workspace in Adobe Illustrator. This article provides comprehensive step-by-step instructions on starting a new document, saving it correctly, and configuring your workspace to optimize your design process.
Key Insights
- The article guides on creating a new file in Adobe Illustrator, specifically a website wireframe, with a dimension of 1920 by 1080 pixels. This includes saving the file correctly as an Adobe Illustrator (.ai) file.
- The article provides detailed steps on configuring the workspace in Illustrator, including arranging panels and bars, adding a control bar, color panel, and color themes, and adjusting the layout to suit your design process.
- Additional tools are added to the toolbar by selecting the 'Advanced' option, and rulers are added to the workspace for precision. The customized workspace is then saved with a unique name for future use.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
in this video we'll be creating our website wireframe file. So let's begin by creating our new file. To do so we'll go to file, new, and here we'll see that we have our new document window along with different presets.
From here we'll navigate to our web presets as we'll be creating a website wireframe. We'll then select our web large 1920 × 1080 pixels and let's give our file a name, website wireframe. We'll double check that the width and height are 1920 × 1080 and we'll click create.
Next let's save our file, go into file, save as, and we'll be saving this as website wireframe within our folder. We'll make sure that this is an illustrator file as it's a vector file. Other vector files include EPS or PSD, however in this case we'll be saving it as an adobe illustrator file .ai and we'll click save and ok.
Next we'll work on our workspace. Within illustrator's interface we have multiple panels and tools including our menu bar, our file, our toolbar, and other panels. However in order for us to work throughout this course on the different projects we'll want to make sure we're working within the same workspace.
A workspace is an arrangement of all of the panels and bars for our interface. To edit our workspace we'll go to the top right hand side of our interface and we'll select essentials or whichever workspace is currently utilized within your interface. In this case let's select essentials and we'll reset our workspace to the default essential settings clicking the drop down and selecting reset essentials.
We'll see that all of our panels and toolbars go back to the default and we can now make some changes. The first change that we'll want to make is by adding our control bar. To do this we'll go to window and we'll select control.
As we can see we now have our control bar right under our top menu. Next let's add a couple panels to the right hand side of our screen. To do this we'll go to window and this time we'll be selecting color.
As we can see we now have our color panel as well as color guide. While we won't be using color guide for this course we can right click on it and select close. Next let's move our color panel to the right of our properties panel.
To do this we can click on the tab showing color and drag it over to the right hand side until we see the blue box surrounding all of the panels. We'll release and see that we now have properties, layers, libraries, and color. Since we won't be using libraries we'll right click and select close so that we only have these three layers.
Next let's move our layers panel to the bottom. To do this we'll select layers clicking on the layers text and we'll click and drag it all the way to the bottom until we see the blue bar. We'll release and see that we have our properties panel on top, color to the right, and the layers below.
Next let's add one more panel to our right hand side. To do this we'll go to window and from here we'll select color themes. As we can see adobe color themes comes up and let's again click and drag this panel into the right this time releasing when we see the blue box around properties and color so that adds to the right hand side.
If we select properties we can add a little bit more space between our properties panel and our layers panel by clicking on the divider between until we see the two arrows and we'll simply drag it down. Additionally we can also stretch out this right hand side by clicking the separator to the left until we see the two arrows and we'll simply drag that to the left as well. Next let's edit our toolbar.
To do this we'll go to the far left hand side where we have our toolbar. We can then select edit toolbar and we can go to the top right hand side clicking the bullets icon and we'll be selecting advanced. By selecting advanced we'll see that our toolbar now contains additional tools that we'll be using throughout this course.
As one final change we're going to be adding rulers to our workspace. To do this we'll go to view and we'll go to the bottom where we can hover over rulers and select show rulers. As we can see we've now completed our workspace and we're ready to begin.
Let's save our workspace going to the top where we see essentials and we'll click this selecting new workspace. For our title let's type vdci int for intermediate and we'll click ok. With our workspace completed we're now ready to begin working on our file.
Let's hit CTRL S on the keyboard to save our work and in the next video we'll begin adding guides and starting to strategize the layout for our website wireframe. See you there!