This article discusses the process of finalizing a website under construction image, adding effects to the text, adjusting image components, and exporting the finished image for clients. Detailed instructions on adding effects such as bevel and emboss, transforming the image, adjusting backgrounds, and adding metadata are provided.
Key Insights
- The article explains how effects like bevel and emboss can be added to the text of a website under construction image to give it a three-dimensional texture and stamp look. The depth, size and softness of the effects can be adjusted according to preference.
- It elaborates on the process of transforming and adjusting image components like background and text position. The transformation helps in drawing attention to specific parts of the image.
- The article also discusses the importance of adding metadata to images, and gives instructions on how to export the final image in different file sizes and formats, ensuring optimal size for website 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 finalizing our image as well as exporting it for our client. To begin, let's add style to our website Under Construction text.
With the layer selected, we'll click the fx icon below to be able to add effects to our text. When we click this, we'll see that we can select multiple different options, or if we choose Blending Options*, we'll see that these options are all available to us on the left-hand side. Let's begin with Bevel and Emboss*.
As we can see, Bevel and Emboss gives us the ability to have a three-dimensional texture and stamp effect on our image. We can adjust multiple different styles, including Outer Bevel*, which makes it look as though this text was stamped through the bar. I like the look of this.
Let's adjust our depth, giving it a little more intensity, and we can also adjust the size. Keep it fairly small—about 6 pixels—and we can adjust how soft it is. I like the harder look to make it appear as if it was really punched through.
In addition, we have many other options to customize this, but I think this looks good for now. Let's uncheck Bevel and Emboss so that our settings are saved, and review some other styles. Additional styles include adding a Stroke to our image and adding an Inner Shadow*.
We can also add an Inner Glow and many other options. For me, I'll stick with Bevel and Emboss and click OK. In addition, I think I’ve angled this a little too much, so with the layer selected, I’ll hit CTRL+T and angle it back a little bit, then hit ENTER.
Next, let's adjust our sky background. We'll click Sky and zoom out a little bit to look at our image. I prefer for the hook and the bar with the text to hang where there's a blue spot in the sky, so the attention is drawn to the bar.
Therefore, with Sky selected, let's hit CTRL+T to transform our image. I'm simply going to drag it down, and ideally there will be mostly blue around the bar. However, we'll also need to stretch it to the side.
I'll simply drag it over to the right and move it down a little more. Drag over to the right. We'll leave it right here.
We have mostly blue around the outside of the bar, but clouds up in the sky, and this will draw our attention to website Under Construction*. Let's hit ENTER, and finally, let's change our hook, bar, and text all to be a little bit higher on the screen. We'll select Text*, Bar*, and Hook Removed*, and hit CTRL+T on our keyboard to transform them.
In addition, let's change the size of these layers just a little bit. We'll drag upward, increasing the size of all the layers, and hit ENTER. Here we have an image that fulfills our client’s needs.
Let's hit CTRL+S to save this work. The last thing we'll do is add some metadata to this image. Go to File > File Info, and here we can customize some of the metadata for the image.
We'll change the title to Under Construction website Background*. Let's also change the description. We'll change our description to Hook over sky holding title*.
And finally, we'll change the copyright status. Let's check Copyrighted and click OK. Finally, let's export our work.
We'll go to File > Export > Export As. Here, we'll have options for how we want to export our image. Currently, our file settings are set to PNG with transparency.
However, because this will be a website background image where the size of the file matters, let's change from PNG to JPEG, since a JPEG will be a smaller file size on the computer. We'll leave the quality at 100%. However, for some website images, we may want to decrease this to save space.
We'll keep our width and height the same at 1920 × 1080, and we'll keep our canvas size the same as well. In addition, let's check Copyright and Contact Info*. We'll keep Convert to sRGB checked and click Export All*.
Let's rename this file Final website Background Image and click Save. We've now successfully exported the image required by our client. Nicely done.
With our image exported, we're now ready to take a screenshot of this image as part of our final grade. In order to take a screenshot, let's first prepare our work. In this case, we'll want to have Artboard 1 expanded so that we can see all of the elements, including our Text*, Bar*, Hook Removed*, and Sky*.
In addition, we'll want to make sure that we have our guide going down the center of our artboard. From here, we can now take our screenshot. On a Windows computer, remember we'll be using the Windows key and Print Screen on the keyboard, and this will save a screenshot to our Pictures folder.
On a Mac, please use Command+Shift+4 on the keyboard and draw a box around the interface. From here, we'll crop the image by going into our Pictures folder and into Screenshots*. We'll then double-click our screenshot and we can edit it by selecting Crop*.
From here, we can drag the corners inward—clicking and dragging to the left—to show our entire interface. Remember to drag from the top, left-hand, and right-hand sides until we've captured the entire interface. Once it's captured—showing the artboard and all four elements within our Layers Panel*—we'll save a copy and upload this image as part of our final project.
With this screenshot uploaded to the portal, there's no need to upload the Photoshop file itself.
Simply upload the screenshot, as you'll be getting a grade from the screenshot alone. In the next video, we'll be working on our Phase 10 Banner*. See you there!