Join Justin Seeley for an in-depth discussion in this video Adding the finishing touches to your design, part of Photoshop CC for Web Design.
We've come a long way with our web design mockup for Two Trees Creative. And now it's time to review the document to make sure we haven't missed anything and to add any finishing touches that we might see along the way. So, I don't really see a whole lot going on in the mockup that I need to fix. I might change the alignment of the portfolio section just a little bit. So I might grab some of these elements in here. And, everything but the rectangle, which is a portfolio, row one, and row two, and I might shift those up a little bit, just to make it a little bit more centered. That looks nice.
I may actually change the size of the Google map at some point, but I think right now it looks okay. Maybe shrinking that down a tad would be necessary, and then maybe I could even make the fields on the contact form bigger. But otherwise, looks pretty good. The only glaring omission that I see is going to be right up here, this big image. There's no text on it. Remember the client wanted a big welcome message at the top. So, we need to add that in. So, at the end of the day, you're always going to find one thing where you just, oops, I forgot it. And that's what this is going to be.
Here's what I'm going to do. I'm just going to grab my text tool, click right there. If you remember from when we started setting up our styles, our H1 style was Effra Bold 64 point. So go ahead and set your font to Effra Bold 64 points, what we're going to start with. And I'm also going to make sure that my text is set to white. And then I'm just going to type out their slogan, Designing Your World. And because I started in between About Us, it's not actually showing up, so let me move this up, so you can see. There we go. And so I've got Designing Your World. I'm going to select everything on the page with Cmd or Ctrl+A and then move that to the center.
There we go. And then what I'm going to do is, type out the second piece. One pixel at a time. Period. Now for this one, I'm going to use the Subheading style. So let's open up the paragraph styles. Grab Subheading. And we can put that in the center as well, so let's just move that right there. Now, it looks a little small, so what I may do, oop, there's an override on it, so let's try clearing that first and see what it does. Okay, it just changes the color back. So let's double-click Subheading and let's increase the size.
So let's increase that to something like 48. And hit OK. That looks a lot better. Then I can use white as my foreground color, and Opt+Del+Alt+Backspace to change that. And then we'll just center that up. I'll group both of these together. And we'll just call this WelcomeTXT for welcome text. And what I'll do is open up the welcome section, and drop that on top of everything. Collapse it back. And if you want to move it to the center, just select it and then, move it down.
It should snap right about the center point. And so, there you go. That's what this final review is all about. Catching any of your mistakes that you might have made throughout the entire design process. Maybe you omitted the logo, have the wrong logo in there. Maybe you misspelled something. Maybe you have images that are misaligned. Maybe you forgot to add an entire heading. That final review process is always going to be critical. Either with yourself or sending it to someone else, letting them review it. Just make sure that everything is in pristine condition, before you start to export things out, or send the final comp to the client.
- Why use Photoshop for web design?
- Decoding the mysteries behind screen size and resolution
- Giving your website a purpose with a content strategy
- Customizing a web workspace in Photoshop
- Designing responsively
- Creating wireframes on a grid
- Choosing colors and fonts
- Developing a UI kit with Photoshop
- Assembling a page mockup
- Creating image sprites
- Optimizing images
- Integrating with the rest of the Adobe Creative Cloud