Lesson 7 pt. I | Photoshop CC for Web Design

In Lesson 7 of this course, I learned how to apply the color theme to my mockup for this website. First I went to my Swatches panel and clicked “Replace Swatches…” and chose the color swatches that were already set.

Next I’ll apply the dark brown color to my headings such as About Us, Portfolio, and Contact Us. First I selected the About Us text in the Layers panel, then I clicked on the dark brown color that I wanted to change it to. To apply the color I pressed Option(Alt for PC)+Delete/Backspace.

For the navigation bar, I applied the light green. In order to change the logo’s color I selected it in the Layers panel then clicked on the “fx” icon at the bottom of the panel before choosing “Color Overlay…” From there I changed the color to a dark brown.

Next, I began to make adjustments to the Portfolio section. Since I have so much white space, I chose to add color to the background of this section. I selected the Rectangle tool and clicked and dragged a rectangle across the section. I then selected that layer in the Layers panel and moved it underneath the heading and image placeholders.

I didn’t really like how the dark brown looked over the green, so I used the Text tool to selected all the text and changed it to white. Before finishing with the portfolio section, I selected both the ellipses under the arrows and changed their color to the brownish-orange. I did the same for the rectangle in the “Back to Top” button.

Here is what we have so far:

Screen Shot 2017-03-23 at 1.51.51 PM

Next, I went to make more adjustments to the navigation menu in the header section. I selected the text and changed the font to the light green. After changing the font color, I used the center-alignment on the text. Though this made my text go off center, I selected the entire canvas with Command(Control for PC)+A to align the text back to center.

Before I moved on, I wanted to show a rollover state for the nav menu. For this, I only needed to use one. I grabbed the rectangle tool and clicked and dragged a rectangle over the text that was 65×25 pixels. In the Layers panel I made sure that the text was over the rectangle then changed the color of both to simulate a rollover. I then renamed this layer “hover_color” so my developer would know what to do with this.

The final section I needed to make adjustments on was the Contact Us section. I started with the text fields by changing them all to a lighter grey. I then put input text, or initial text, so that users would know exactly what to do with each text field. Since the first text field was for emails my input text was “Your email address”. I then grouped the box and text together calling it “Email Field.” I did the same for the the each of the other text fields.

I then moved onto work on the “Send” button in the same section starting with using the Text tool and Caps Lock to type out “SEND”. With he font color changed to white and the font size increased slightly.

I wanted to add an arrow to this as well, so I went to the Footer section and selected the “up_arrow” and copied it by pressing Command(Control for PC)+J. I moved the copied arrow to the Contact section. Pressing Command+T I rotated the arrow till it pointed to the right and scaled the the size down to 16 x 10 pixels.

I also wanted to add a circle underneath the arrow, so I selected the ellipses tool and click and dragged a circle out to 25 x 25 pixels. I changed the fill to white and made sure the ellipses was underneath the arrow on the Layers panel before moving it into place.

I then selected the “SEND” text, the “send_arrow” and the ellipse and grouped them together calling it “send_icon.” With these grouped I could select the group and the Rectangle to make sure it was aligned center to each other.

With that aligned, I grouped the send_icon and the rectangle in another group called “send_btn.” before completing this portion of Lesson 7.

Screen Shot 2017-03-23 at 2.49.11 PM

Advertisements