Info Tech-Web Blog

Step 6: Create the Blog’s "Welcome" Text

Now that we are done with the header, we can move onto the main content area of our layout. The next few steps will deal with the main area of our layout. Create a new layer group named "Body" that will contain all the layers (and layer groups) that are associated with the main content area. I hope that, by now, you are seeing a trend where we are creating layer groups for each of the major components of the layout to keep our work organized. This is because someone else (like a front-end developer that will convert the PSD layout to a functional HTML/CSS template) might need to use our work, so it’s imperative when designing web layouts and interfaces that we are as tidy as possible.

We’ll now create a large "welcome" text block that’s popularly seen in many portfolio designs. Get the Horizontal Type Tool (T), set it to the ChunkFive font and choose 24pt as the font size. Write a "welcome" message such as "Welcome to Design Instruct Studio Blog." Place your "welcome" text at the center of the layout and below the header. You can copy the layer style from the logo’s text (right-click on its layer in the Layers Panel, choose Copy Layer Style) and paste it on the "welcome" message text layer (right-click on its layer in the Layers Panel, choose Paste Layer Style).

Step 7: Create the Main Content’s Background

We will create a gray background with rounded corners as the background of our main content area. Set your Foreground Color to gray (#e8e8e8). Use the Rounded Rectangle Tool (U) (Radius at 5px) to draw a big rounded rectangle using the guides we set up earlier.

Step 8: Create the Secondary Navigation Menu

We will now create the web design layout’s secondary menu that will sit at the top of the main content area. The secondary navigation menu serves as a way for users to navigate between different categories of the blog. To start, set your Foreground Color to another gray color (#989eac). Use the Horizontal Type Tool (T) with the ChunkFive font set at 16pt size to write out your blog’s categories (e.g., "News", "Photography", "Articles", etc.).

Set the Foreground Color to a dark gray (#505050) and then use the Rounded Rectangle Tool (U) (Radius set to 5px) to draw a dark gray rounded rectangle behind the active category (shown below).

Double-click on the dark gray rounded rectangle in the Layers Panel to open the Layer Style dialog window. Give the dark gray rounded rectangle a Drop Shadow and an Inner Shadow.

Drop Shadow

Inner Shadow

Now reduce the rounded rectangle layer’s Opacity to 20%. Also, change the active category text’s color to a light gray/off-white color (#f5f5f5).

Let us create a divider that sits below the secondary navigation links to separate the menu from the other sections of the main content area. Create a new layer for the divider. Set the Foreground Color to a gray color (#c0c0c2). Choose the Pencil Tool (B) and set the brush size to 1px. Draw a horizontal