Learn how to build engaging website backgrounds with this step-by-step guide on using Adobe Illustrator to create and import images, design layers, and adjust opacity. These professional techniques can help web designers and developers to create visually appealing and functional backgrounds for their wireframes.
Key Insights
- The article provides a detailed guide on how to import and place images in Adobe Illustrator, making sure to cover the entire artboard with the selected image.
- It gives instructions on how to make a rectangle the same size as the artboard and use it as a mask to reveal only the images below, ensuring that the images do not extend beyond the artboard.
- The tutorial also contains tips on adjusting the opacity of the images to ensure that the text above is easily readable and the background does not distract from the wireframe.
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.
We will begin working on the background of our website wireframe. For our background, let's begin by selecting the background layer.
Next, we will import a couple of images for our background to experiment with. To do this, we will go to File, Place, as we place images within our Illustrator file. Next, we will navigate to our folder and select 'man on mountain.' Holding shift, we will also select 'paint texture' and 'sunset jpeg.'
We will click 'sunset jpeg, ' and with all three selected, we will select Place. Next, we will place our images within our artboard. To do this, we will see the icon for the image we are about to place. We'll click from the top-left intersection and drag all the way to the edge, or beyond the edge, of our artboard, making sure we've covered the entire artboard with our first image.
For the next image, we will do the same thing—drag from the top-left-hand side all the way to the right. In this case, I’ll leave it about here, even though it doesn't stretch all the way. For the third image, we will do the same thing, dragging from the top-left and making sure to expand beyond the artboard or to the intersection, then we’ll release.
We are now ready to begin working with our background. Let's expand the elements within our background layer by clicking the drop-down arrow. We will be working with these three linked files.
Next, let's rename them by double-clicking and titling this one 'man on mountain' and hitting ENTER. We will retitle this 'paint' and hit ENTER, and finally 'sunset' and hit ENTER.
Looking at our artboard, we can see that we have some work to do. The first change that stands out to me is that our icons on the top-right-hand side are both white and transparent. Therefore, we'll select both by clicking the first and holding shift to select the second icon.
We will go to our fill within the toolbar, click, and select none. Our icons are now transparent, revealing the background. Next, we want to create a mask so that only the artboard is shown with our images, and they don't extend beyond that.
To do this, we will make sure we're in our background layer, selecting 'backgrounds.' We will then use the rectangle tool to create a rectangle exactly the size of our artboard. We will start at the top-left corner of our artboard and drag down to the bottom-right corner until we intersect with the bottom-right-hand side of our artboard. We will then release, and we now have a rectangle the same size as our artboard.
Now, we want to make a mask out of this rectangle so that it only reveals the images below. To do this, we will select all three images as well as the rectangle. Therefore, we’ll hold shift and select 'sunset, ' clicking to the right of 'paint' and 'man on mountain.'
With these four selected, I will right-click and select 'Make Clipping Mask.' We can now see that the clipping mask only shows the image below within the rectangle, and we can edit our images from here.
We will hit V on the keyboard for the selection tool. As our next change, we want to hide our guides. While they’ve been helpful for strategizing our website wireframe, they are currently a little distracting as we observe the background. We will right-click and select 'Hide Guides.'
Next, let's begin working with our images. The first image we will work with is the sunset image. Therefore, if we click the drop-down for our clip group, which contains the rectangle, sunset, paint, and man on mountain, let’s hide 'paint' and 'man on mountain.'
We will hide them by clicking the eye icon to the left of each, and we will work directly with the sunset icon, selecting it by clicking to the right of 'sunset.' For this image, it’s currently a little too bright, which hides some of the text above. Therefore, we want to reduce its visibility.
We can do this by going to our control bar and adjusting the opacity. Let’s reduce it all the way down to 20 and hit ENTER.
As we can see, when we click outside, this is a nice change. We still get some of the visual effect of this image, but we can easily read the text above, and it's not too distracting from our wireframe.
Let’s save our work for now using CTRL + S on the keyboard. In the next video, we will continue working on our background with the paint and man on mountain images. See you in the next video!