The document provides instructions for creating a featured project section on a website header. It involves: 1) Creating a rectangle container and clipping an image inside it for the featured project. 2) Adjusting the image by scaling and changing the blending mode. 3) Adding a title background and horizontal line above the image. 4) Adding a title and description inside the title area with specified font settings.

1. Creating The “Featured
Project” Section:
4

2. Creating The
“Featured
Project” Section:
Next we will create the featured project section. Create a
new group inside the header group and name it “fp“.
Select the Rectangle Tool (U) and create a rectangle with
the size of 630px by 340px at the distance of 10px from the
top and the left of header container. Give this layer color of
#000000 and name it “fp container“.

4. Open an image in Photoshop to place here as your
featured project. Go to Select > All (Ctrl/Cmd + A), then
Edit > Copy (Ctrl/Cmd + C). Come back to the our web
design.
Create a new layer above the “fp container” layer and
go to Edit > Paste (Ctrl/Cmd + V) to paste in your
featured project image. Rename this layer to “fp image“.
Right-click the “fp image” layer and select Create
Clipping Mask. Now the image is visible only inside the
rectangle (“fp container”). Make adjustments so that
your featured project image is similar to the one shown
below.

6. Go to Edit > Transform > Scale (Ctrl/Cmd + T). From
the Options bar, click in the rotation box and type -4
and press enter twice to adjust the angle.
Stay on the same layer (“fp image”), and select
Luminosity as the blending mode of this layer.

8. Next we are going to create the title and
description bar for the featured project image.
Select the Rectangle Tool (U) and create a
rectangle shape with the size of 630px by 90px
using color #161718.
Change opacity of this layer to 90% and name it
“title bg“. Place this rectangle as shown in the
next Slide.

10. Create another rectangle with the size of 630px
by 1px using color #9c9c9c and name it “title
horizontal line“.
Place this rectangle on the top edge of the
contents of the “title bg” layer.
Add a title and description inside the rectangle we
created in Step 21, using the following settings
for title and description.

11. For The Title:
Font: Arial, color: #ffffff, size: 25pt and anti-
aliasing method option: Sharp
For The Description:
Font: Arial, color: #a4a4a4, size: 12pt and anti-
aliasing method option: None