Lesson 5 | Photoshop CC for Web Design

Before I started on any lessons today, I took a Brainbench test in Web Design Concepts. Fortunately, I earned a certificate in that area, and you can see that on my Brainbench Certifications page.

After finishing the Brainbench test, I moved onto Lesson 5 in Photoshop CC for Web Design. In the previous lesson, I set up my wire frame layout for this website we’re designing for the (fictional) Two Trees Creative company. Now, I’m going to develop the color theme that will be used for the website.

Sometimes you’ll have to develop the color theme from scratch. However, other times the client may already have a color theme they want and will send you an image to use. To crate this color theme, we’ll use Adobe Color CC.

Screen Shot 2017-03-21 at 1.26.20 PM

In the top right corner you’ll see a camera icon and you’ll click on this to “Create from Image.” The client sent their image, so I’ll select that and what you get is a little picker where you can move those dots around to the specific colors that you want to use in the design.

All we do then is click on “Save” in the top left, and we title this color theme “two trees colors” and we now have this in you Library.

To bring this into your project, you have to be signed into your Adobe Creative Cloud account and from there you can go into Adobe Photoshop CC and go to the Window menu, scroll down to Extensions and click on Adobe Color Themes. Now, you should have all you created color themes in Photoshop.

After we’ve set up the color theme for the website, now we want to choose the right fonts for headings, subheadings and body. For this, you’ll also want to be signed into Creative Cloud to use Adobe’s service called Typekit. You’ll go into the Creative Cloud application and click on “Assets” and then “Fonts”. From there, you can click on “Sync Fonts from Typekit”, which will take you to the website to sync different fonts that you may want to use for your site.

If you’re too overwhelmed with the many fonts that are provided, you can use the filter on the right-hand side. Here I just want to use a Serif font for starters, so I’ll check that in the Classification section. That should cut out all the fonts that are not classified as a serif font.

Screen Shot 2017-03-21 at 1.42.45 PM

After choosing, and syncing, the fonts I wanted to use, I’m going to go back into Photoshop to begin setting up my headings, subheadings and body text in the “text_tree” file.

Screen Shot 2017-03-21 at 2.37.03 PM

Right now it’s in a simple Arial font, but I’ll use the Text tool to select all four heading and change the font Effra bold and then I’ll set the font size for each heading separately. For the H1 heading I’ll change the font size to 64 pt, H2 to 48 pt, H3 to 36 pt and H4 I’ll leave at 24 pt.

Next, I’ll change the subheading to Kepler italic at 36 pt font size, and the “Body” text will be Effra regular at 18 pt.

To be able to apply these to my project, I first need to create Paragraph styles for each of these. With my Text tool, I’ll just click on H1 then go to my Paragraph Styles panel and click on “New Paragraph Style.” I’ll name it “h1” then change the color to black then click OK. I’ll use the same process for each of the texts then save the “text_tree” file.

To transfer these from the “text_tree” file to my project, I’ll simply go to my project and open the Paragraph Styles panel. I select “Load Paragraph Styles…” and choose the “text_tree.psd” file, which will load all of the styles from that file to my current document.

Now, all I have to do is apply these styles to all the text elements of the document. I’ll start with the navigation menu by selecting it in the Layers panel. In the Paragraph Syles panel I’ll apply the “body” style. Unfortunately, that did nothing to change it, so I’m going to have to “Clear Override”. After the style has been applied, I’ll align it to the center of the canvas.

I don’t, however, want the text to be that blue shade, so I’ll simply double click on the “body” style in the Paragraph Styles panel and change the color to a black color and move onto applying the other styles.

Moving onto the About Us section I’ll select the text in the Layers panel and apply the “h2” style. Again, I’ll have to clear override for this to show. I’ll also apply the “body” style to the Lorem Ipsum text as well.

Now when finishing up your mockups, you may want to use some images. Never use Google images because many of those photos are copyrighted. If you need some resources for images, here are some royalty free stock photo websites: stock.xchng, iStock, Think Stock, and Pond5. Another website that could come in handy is a tumblr blog called Unsplash. It allows you to have 10 new photos every 10 days.