This article discusses the process of creating marketing materials for a fictional client that includes a 'website under construction' splash page image with a crane hook holding a bar. It details the various steps entailed in this graphic design task such as setting up a new file, importing and editing images, setting guides, and removing unnecessary parts.
Key Insights
- The article provides a step-by-step guide on creating a splash page for a website under construction. This includes creating a new file with a specific resolution suitable for web use, importing and manipulating a crane hook image, and setting up guides to ensure proper alignment of elements.
- The process also involves working on the image background. The task includes importing a sky image, adjusting its properties like vibrance, saturation, exposure, and contrast, and positioning it behind the main subject (crane hook).
- Another crucial part of the process is the careful removal of unnecessary parts of the image. This requires the usage of selection tools or eraser tools within the software, ensuring precise editing and retention of the desired image elements.
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.
Throughout this lesson, we will be using many of the skills we've already gone over, as well as new skills, to create three different marketing materials for our fictional client. They need a splash page to display with the image of a crane hook holding a bar that says website Under Construction*.
We've been tasked with creating this image. The first thing we want to do is create a new file, and because we're creating this file for a website, we'll navigate over to our Web templates. In addition, Web large images are typically 1920 × 1080, and as we'll see, the resolution is only 72—as opposed to many of our print images, which have a higher resolution of 300.
Going back to Web, we'll select 1920 × 1080. This lower resolution is because images with higher resolution often take up more space. Therefore, for a website-specific image, we want it to take up a smaller amount of space so that the website can load faster. Next, we'll rename our file Under Construction website Background and click Create.
The first thing we want to do is save our work, so we'll go to File > Save As, and name it Under Construction website Background as a Photoshop file. We'll click Save and OK. For this image, our goal will be to have a hook drop down in the middle, holding a bar that says Under Construction*.
In addition, we'll probably want some sort of sky in the background—so let's get started. As you'll remember, we've already removed a hook from its background, so let's import that image into this Photoshop file. We'll go to File > Open and open our Crane Hook Removed Photoshop file, then click Open.
Next, as you may remember, we can simply click Hook Removed and drag it over into our Under Construction website Background Photoshop file and release. We'll see that this image is way too large for this artboard, so we'll hit CTRL+T to transform it, then zoom out using CTRL+MINUS (–) on the keyboard. We'll simply drag it to an appropriate size, move it toward the middle of our image, and hit ENTER.
Next, let's set up guides for our artboard so that we can have this hook directly in the middle. We'll click Artboard 1*, and because we know that this artboard has a width of 1920, if we divide that by 2 we have 960. Therefore, let's drag a guide and, holding Shift, move it to 960.
Next, let's move our hook to be centered right on that line. We'll highlight Hook Removed*, hit CTRL+T to transform it, and then move it over until the line turns pink. In addition, let's grow our hook just a little bit by stretching it downward and hitting ENTER to solidify these changes.
Let's hit CTRL+S on the keyboard to save our work, and next, let's import a sky for the background behind the hook. As we know, we also have a sky image, so we'll go to File > Open, open our sky.arw file, and click Open. As we know, this is a RAW image file specified by *.arw*, and we can make a couple of adjustments.
Let's start with the default settings and white balance set to "As Shot." The first thing we'll want to change is the white balance for this image. I want it to be a little more blue and maybe a touch more green.
In addition, we can go to our White Balance options and go through different presets to see what Photoshop would choose. Daylight gives us a nice blue, but Cloudy actually feels like the most accurate representation of this image.
So let's move on. For our settings, we can click Auto and see what Photoshop would suggest. However, this doesn’t look quite right, so we’ll go back to Default and make the adjustments manually.
First, let's increase our Exposure slightly. We'll decrease the Contrast, since it's merely a background and we want the focus to be more on the hook. For Highlights, we can increase them a little bit.
Shadows—I'll decrease slightly. Whites—a little bit up. Blacks—we'll reduce slightly. We'll leave Clarity and Dehaze alone.
For our Vibrance and Saturation, I'm going to bring the Vibrance down just a little bit, because again, this is behind our hook and bar, and we don’t want to attract too much attention here. By lowering the vibrance, we can draw more attention to the hook itself and the Under Construction sign. We'll click Open Image and it will open in Photoshop.
Next, let's unlock the background layer and drag it into Under Construction website Background*. When we drop it here, we’ll see it is very zoomed in—that’s because it’s a very large image. If we zoom out and hit CTRL+T, we’ll see the image is significantly larger than our artboard. Let’s drag it inward to reduce the size a bit.
It doesn’t have to perfectly align with the artboard, as we’ll be adjusting it throughout. Next, let’s move it behind Hook Removed*. Finally, let’s rename Layer 2 and title it Sky*, then hit ENTER.
In addition, we no longer need Layer 1*, which was previously our background image. We’ll delete it and click Yes. The next thing we’re going to do is remove the bar from Hook Removed*.
We’ll highlight Hook Removed*, and if we zoom in, we can do this a couple of different ways. The first is by using our Selection Tools—we can simply select the bar and hit DELETE. We’ll continue deleting parts of the bar, and as you’ll notice, we aren’t deleting parts of the sky behind it, because we have the Hook Removed layer selected.
Let’s zoom in a little closer. Another way we can remove this bar is by using the Eraser Tool found in the Tools Bar. Let’s hit CTRL+D to deselect the area and examine what we’re working with.
With the Eraser Tool, we can modify the size—move it down to about 36—and simply start erasing parts of the bar. I’m going to work around the outer edges of the bar for now. Let’s zoom in a little closer to work more precisely. I’ll reduce the size a bit as well.
I’ll slowly work my way through erasing part of this bar. I’ll remove a little bit of the bottom. A good method is to click multiple times so that, if you erase too much, you can hit CTRL+Z on the keyboard to undo those changes. I think we’ve erased a good portion of the image. Let’s zoom out and hit CTRL+S on the keyboard to save.
In the next video, we’ll be adding a bar and text. See you there!