Lesson 7 pt. II | Photoshop CC for Web Design

Today, I’m going to finish up designing my mockup for this fictional Tow Trees Creative company.

I’m going to start with the About Us section where I have several placeholders, and I’ll start with the Lorem Ipsum text. The client has sent me the text they want in this section, so I’ll open up the text they want to use, select it all (Command+A) and copy (Command+C). With that copied to the pasteboard, I’ll go back into my project, and with the Text tool selected I click in the Lorem Ipsum text, select all (Command+A), and then paste my text I’m going to use (Command+V).

Now, I have a small heading inside this text, so I’m going to want to style it differently from the rest of the text. I’ll select this text then go to my Paragraph Styles where I’ll apply my h3 heading.

The color of the heading doesn’t really go with the theme of this site, so I’m going to select the heading, go to my Color Swatches panel and select the light brown.

Next, I’m going to go back to the Welcome section where I want to Insert my big image I want to use. First I’m going to select both the “IMG” text and the rectangle that was used as a placeholder and delete both from the Layers panel. Next I’ll go to the File menu and select Place Linked… and select the image I want to use here.

After putting the image in place, I noticed that the bottom of the picture covers up part of my About Us section. To fix that, I’ll use the Marquee tool to click and drag where I want to fit this image, then I’ll click on the Add Layer Mask at the bottom of the Layers panel. This will cut off the image to fit to the border I made with the Marquee tool instead of me resizing or cropping the image.

Now, the color of the image doesn’t exactly fit with the theme so I’m going to change that by first clicking on the “Create new fill or adjustment layer” that is just to the right of Add Layer Mask. In the popup menu here I’ll choose Solid Color and change it to a blue color.

You see it’s covering the entire canvas, which I don’t want so to fix that I’ll need to Option+Click until I see the icon below and that’s going to clip that color to the layer.

Now I’m going to change the blend mode. I first selected “Difference” but that’s not what I’m looking for.

Next, I tried “Exclusion” which fits the theme a little better. I decreased the Opacity of the blend to about 75% giving the image kind of an Instagram type filter.

Next, I’m going to be working in the About Us section where I want to add our “team” pictures to each of the image placeholders. I’ll start by going to the File menu, score the Scripts, then select Load File Stack… so I can load multiple images at a time. I select the profile pictures that I’ll be adding, and it will open into a separate file in Photoshop. All I need to do then is select all the images in the Layers panel and click and drag them over to my project.

Earlier, I separated all the image placeholders into separate rows so that I could keep these images grouped the same. I’ll select the first three images and move them “Row 1” then I move the rest of the images to “Row 2” Starting with the first image, I’ll right click on it in the Layers panel and select “Convert to Smart Object” before moving it into place and press Command+T to scale the image to size. I’ll the same to every image until all are in place then I will delete all the image placeholders from the Layers panel.

Next I’ll move to the Portfolio section. Now, in this example, the client doesn’t like that there are just four images. They want more. To fix this, I’m just going to delete all the image placeholders and add all the thumbnails they sent me by using the exact same method I did for the profile pictures in About Us.

With the first image centered under the left arrow button, I’ll select each image separately in the Layers panel and space them out till I have four thumbnails across the page. I’ll then select those first four images I moved and put them into a group (Command+G) called “row 1.”

I’ll go ahead and group the last four images into “row 2” and then space them out as I did the other images.

As for the left and right arrow buttons, I’m going to select both group sin the Layers panel and copy them (Command+J). I’ll move the original left and right buttons in with row 1, then I’ll rename the copies to “right_btn” and “left_btn” before moving them into the group with row 2.

Next, I’ll select the left and right arrows with row 2 then shift+click on them on the canvas to move them down till their center with the row 2 of pictures. Then I select both rows in the Layers panel and move them up till their centered in the section.

Now to the final image I’ll be adding to the Contact Us section for the Google Maps image. For this, I’m just going to copy and paste the image so I’ll go to the File menu and select Open to open up that image. There, I will use the Marquee tool to select the image and copy (Command+C) then paste it (Command+V) into my project.

I’m not going to scale the image down to fit the placeholder. Instead, in the Layers panel, I’ll Command+Click on the placeholder I’ve named “Google Maps, which will put a Marquee on the map image that is exactly where my placeholder is. I’ll then delete that image placeholder from the Layers panel then click on Add a Layer Mask at the bottom of the Layers panel.

Now, I’ll add the finishing touches and I’ve realized that I forgot to put a “Welcome” sign, so to speak, to my Welcome section.

On the image, I’ll use my Text tool and apply my H1 heading style, which was Effra, bold, 64 pts. Then I’ll type in all caps “Designing Your World” before aligning it to the center of the canvas. Lastly I’ll add another text field, this with the subheading style applied.

I don’t like that the text is too small, so I’ll double-click on the style and changed the font size to 48 pixels and the color to white instead of that blue color, and now I’ve finished with the mockup.