Designing a Clean and Elegant Blog Layout with Photoshop

In this guide, I’ll walk you through the steps to create a minimalist and refined blog design utilizing the power of the latest version of Photoshop. You’ll learn how to efficiently use Character Styles and Paragraph Styles to simplify your design process.

Before starting, ensure you have these resources at your disposal:

See demo

Setting Up Your Workspace

Step 1

For our project, we’re utilizing the 960 gs framework. Start by downloading the framework from the official site. Within the zip file you download, look for the Photoshop document named ’12 Column Grid’ and open it with Photoshop.

Loading the 12 Column Grid file

Toggle the visibility of the 12 Col Grid layer off by clicking the eye icon; we won’t be needing it just yet.

Hiding the 12 Column Grid layer
Step 2

Our current canvas size is a bit on the smaller side. To adjust, go to Image > Canvas Size (or press Ctrl + Alt + C) and input a larger dimension, ensuring the anchor point is set to the center.

Expanding the canvas size
Step 3

Activate the ruler by hitting Ctrl + R. Navigate to View > New Guide to introduce a new guide, aiding in precise design. Choose Vertical and set the Position to 185 px for a vertical guide 185 px from the top left corner of the canvas.

Setting up a new guide
Step 4

Add more vertical guides at positions 150 px, 1095 px, and 1130 px.

Drawing another vertical guide
Additional vertical guide
Final vertical guide placement

Below, you can see our canvas with the final guide layout.

Complete guide overview inside the canvas
Final guide setup
Overview of guide setup in canvas

Choosing Your Color Palette

Step 5

We’ll select a beautiful color scheme from Colorlouver for our design. Start by clicking on the Preview link to view the color combination as a jpeg file.

Previewing color combination

After saving the color combination, add it to your Photoshop project. By integrating the image into our canvas, we can quickly and effortlessly sample the colors from it.

Color palette placed in Photoshop

Creating the Background

Step 6

Begin by selecting the Background layer and click the lock icon at the top of the Layers panel to unlock it. Then, double-click the layer thumbnail to change its color.

Unlocking the Background layer

Choose the color #948371 by clicking on it.

Selecting background color #948371
Step 7

On the canvas, draw a rectangular shape. This will serve as the secondary background layer.

Drawing the second background
Step 8

With the shape still selected, head to the Option Bar, click on the Fill Color box, and then select the color wheel icon. In the Color Picker dialog that appears, choose the first color. Set the Stroke color to None.

Choosing fill and stroke colors
Step 9

Create a new layer and select the top portion of the canvas with the rectangular marquee tool. Apply a radial gradient that transitions from white to black using the gradient tool, ensuring it’s centered over the canvas.

Applying radial gradient
Radial gradient applied

Adjust its Blend mode to Screen and lower the Opacity to 37%.

Modifying blend mode and opacity
Step 10

Create a new layer and label it ‘shadow’.

New layer named shadow

At the base of the secondary background, form a rectangular selection as displayed. Go to Edit: Fill and choose Black for Use. Hit OK to fill the area with black.

Filling selection with black
Step 11

Apply a Gaussian Blur to soften the shadow. Navigate to Filter > Blur > Gaussian Blur.

Applying Gaussian Blur
Step 12

Press and hold Alt, then hover the cursor between the ‘shadow’ and the ‘upper background’ layer. Without releasing the Alt key, click to convert the layer to a Clipping Mask. This action makes the shadow integrate seamlessly into the upper background.

Creating a Clipping Mask
Step 13

Adjust the shadow’s Opacity to 50% for a more subtle effect. The image below showcases the effect at 100% zoom.

Adjusting shadow opacity
Step 14

For better organization, it’s advisable to group these layers together. To do this, select all relevant layers and then press Ctrl + G.

Grouping layers

Designing the Header

Step 15

On the upper part of the canvas, draw a rectangle as illustrated below.

Drawing a rectangle for the header
Step 16

Go to the Option Bar and set the Stroke color to #af9f8e.

Setting stroke color for the header
Step 17

Choose a linear gradient for the Fill color, transitioning from #d0c4b9 to #a89c91.

Selecting linear gradient fill color

Here is how it looks at 100% zoom.

Header with linear gradient fill

Adding the Site’s Name

Step 18

Place the site’s name on the left side of your design, as indicated in the image below. To enhance the text, double-click on it to add a Drop Shadow. For the text font, opt for Sansation.

Placing the site's name
Adding drop shadow to the site's name

Designing the Menu

Step 19

Create the menu items on the opposite side of the menu bar, using the Sansation font at 14 pt. Pay close attention to their placement as shown below.

Creating menu items
Step 20

Highlight the active menu item by changing its font to bold.

Highlighting active menu item
Step 21

Use the Polygon tool with the Sides set to 3 to draw a triangle. Apply a Fill color of #3d3123 and set Stroke to None. Enhance it with a Drop Shadow from the Layer Styles menu.

Drawing a triangle for the menu
Applying drop shadow to triangle
Final triangle with drop shadow
Step 22

Accentuate the active menu item further by adding a line beneath it. Use the Line tool with a 5 px weight, choosing #f76b6a for the Fill and no Stroke. Position this line just below the active menu, ensuring a 1 px gap from the menu bar’s bottom.

Adding a line under the active menu
Line placement under the active menu

Implementing Character Styles

Step 23

Now, let’s save our text settings as a Character Style, a feature inspired by InDesign’s Character Styles, but simpler. First, highlight the text then click on the ‘New Character Style’ icon to save it.

Creating a new Character Style

Double-click on the newly created Character Style to adjust its settings as shown below.

Configuring Character Style settings
Step 24

Apply the Character Style to the other menu items by selecting them and clicking on the Character Style. If there’s a plus sign next to the Character Style, it indicates a deviation from the set settings. To standardize the settings, click on the circular arrow icon.

Applying Character Style to menu items
Step 25

Follow the previous steps to create a distinct Character Style for the active menu item.

Creating Character Style for active menu
Step 26

What makes Character Styles so useful? They allow for centralized control over text settings. By editing a single Character Style, we can simultaneously update all text elements linked to that style. For instance, changing the font of the Top Menu – Normal style to Corbel automatically updates all corresponding menu items to Corbel.

Example of Character Style efficiency
Step 27

Create a new layer beneath the menu bar. Use Ctrl-click on the menu bar to generate a new selection shaped like it. Fill this new layer with black.

Creating and filling a new layer
Step 28

Deselect using Ctrl + D. To soften the shadow, apply a Gaussian Blur from Filter > Blur > Gaussian Blur.

Applying Gaussian Blur

Creating the Slider

Step 29

Create a rectangular shape that spans the width of 10 columns as shown in the image below.

Drawing the slider rectangle

Choose #dfd1c2 for the Fill color and #c8baac for the Stroke, setting the stroke size to 10 pt. Ensure Align Inside is selected by clicking the dropdown arrow next to the stroke preview.

Setting fill and stroke for the slider
Step 30

Insert an image on top of the frame and apply a Clipping Mask by pressing Ctrl + Alt + G. This will confine the picture within the slider frame, allowing for adjustments in positioning and size without altering the frame itself.

Inserting and clipping the image inside the slider
Step 31

Behind the slider, draw another rectangular shape with the same color, aligning it to the outermost guide. Apply a Layer Style > Pattern Overlay with a pixel pattern and adjust its Opacity to achieve a subtle effect.

Drawing the background rectangle
Applying pattern overlay
Final subtle pattern effect
Step 32

Above this shape, create a new rectangular shape with Fill: #b3aca5 and no Stroke. Transform it by pressing Ctrl + T and then rotate it by 45°. Apply a Clipping Mask to the layer shape.

Rotating and clipping the new shape
Step 33

Duplicate this shape and resize it. Alter its Fill to a darker shade for contrast. Again, use a Clipping Mask on this layer shape.

Duplicating and darkening the shape
Final adjusted clipped shape
Step 34

Follow the same process to create another arrow on the opposite side of the slider.

Drawing an arrow on the opposite side
Step 35

Ctrl-click the slide frame to generate a new selection. Add a new layer and turn it into a Clipping Mask. Fill this new layer with black.

Filling new layer with black
Step 36

Remove the selection (Ctrl + D) and then apply a Gaussian Blur to soften the layer.

Applying Gaussian Blur

Adjust the shadow’s Opacity as needed to achieve the desired effect.

Adjusting shadow opacity
Step 37

Create a rounded rectangle at the corner of the slider with a Fill color of #c8baac.

Drawing a rounded rectangle
Step 38

Inside this shape, draw a circle. Set its Stroke to black, with a size of 1 pt, and remove the Fill.

Drawing a circle with stroke
Step 39

With the Path Selection tool, select the circle’s path. Use Shift + Alt-drag to duplicate the path.

Duplicating the circle path

Repeat the process to add more circles as desired.

Adding more circles
Step 40

Select a circle path and use Ctrl + Shift + J to move it to its own layer.

Cutting a circle path to a new layer
Step 41

In the Option Bar, eliminate the Stroke and set the Fill to a radial gradient transitioning from #e38989 to #bb5c5c. Enhance the circle with an Outer Glow and Drop Shadow from the Layer Styles menu.

Changing fill to radial gradient
Applying Outer Glow layer style
Applying Drop Shadow layer style
Final look of the styled circle
Step 42

Create an elliptical shape below the slider. Add a new layer and fill this shape with black.

Drawing and filling an elliptical shape
Step 43

Clear the selection (Ctrl + D) and then blur it using Gaussian Blur to create a soft shadow effect.

Applying Gaussian Blur for soft shadow

Creating the Lower Background

Step 44

Construct another rectangular shape for the lower background, employing the same Fill and Stroke colors as used for the slider. This ensures consistency across your design.

Drawing lower background rectangle

Position it meticulously to ensure it spans across all guides on the canvas, providing a seamless look.

Careful placement of the lower background

Enhance this shape with a Pattern Overlay for added texture.

Applying Pattern Overlay layer style

The detailed look of the patterned background can be seen below at full magnification.

Final patterned lower background
Step 45

Using the Rectangular Marquee tool, highlight the upper section of this new background area.

Selecting upper area of lower background
Step 46

Create a new layer and position it behind the previously made shape. Fill this new layer with black. Press Ctrl + T, then right-click and select Perspective to modify the layer’s perspective.

Adding new layer and selecting perspective

Adjust the perspective by dragging the upper corners outward to widen the top of the shape.

Dragging upper corners outward

After setting the perspective, right-click again and choose Scale, then pull the upper edge downwards to resize the shape vertically.

Scaling the shape vertically

Next, select Warp from the context menu and manipulate the left and right segments inward to fine-tune the shape’s curvature.

Warping the shape for desired effect

Apply a Gaussian Blur to soften the shadow created by the shape.

Softening with Gaussian Blur

Finally, adjust the layer’s Opacity to 20% for a more subtle shadow effect.

Reducing opacity for subtlety
Step 47

Create a white rectangle within the background area to serve as the main content’s backdrop. Ensure there’s a 10 px margin on the left, right, and top sides relative to the background, utilizing the guides set in earlier steps for precise spacing. Enhance this rectangle with an Outer Glow from the Layer Styles menu for added depth.

Drawing main content's white background
Applying Outer Glow to white background
Detailed view of Outer Glow effect
Final look of the main content's background
Step 48

Introduce a new guide 25 px above the upper edge of the main content’s background to help delineate space for upcoming design elements.

Adding a new guide for spacing

Adding Section Titles

Step 49

Create a new Character Style specifically for the section titles and their descriptions on the page. This ensures consistency in typography across different sections.

Creating new Character Style for section titles

Using the Type tool, input the section title and its description. Apply the previously created styles for a cohesive look. Position these elements 25 px from the top of their background, aligning them with the guide set in the previous step.

Adding section title and description
Step 50

Below the site’s description, draw a 5 px horizontal line with a Fill color of #938270 and no Stroke. This subtle line acts as a visual separator, enhancing the design’s readability and aesthetic appeal.

Drawing line under section description
Final look of the line under description

Designing the Blog Post Section

Step 51

Create a distinct Character Style for blog post titles to ensure they stand out and maintain consistency across your blog design.

Creating Character Style for post titles
Step 52

Insert a blog post title and apply the newly created Character Style for a polished and uniform look.

Adding blog post title
Step 53

Beneath the title, draw a rectangle to act as the post’s feature image background, making it four columns wide. Use white for the Fill and #bebebe for the Stroke. Enhance it with a Layer Style > Stroke for added definition.

Drawing rectangle for post image
Applying stroke layer style
Step 54

Place an image within this rectangle and apply a Clipping Mask (Ctrl + Alt + G) to ensure it fills the designated area perfectly, enhancing the post’s visual appeal.

Clipping post image within the shape
Step 55

For additional detail, draw a rounded rectangle at the bottom of the image area with a Fill color of #8e8380 and no Stroke, and then convert it to a Clipping Mask for a cohesive look.

Adding a rounded rectangle detail
Step 56

Create new Character Styles tailored for the blog post metadata to ensure readability and visual consistency.

Creating Character Styles for metadata
Step 57

Position the metadata text atop the previously designed shape and implement the freshly established Character Styles for a coherent look across the blog post.

Adding metadata text
Step 58

Use the Type tool to create a text box aligned with the width of 4 columns. Fill the box with placeholder text by selecting Type > Paste Lorem Ipsum, which uses Photoshop’s built-in function to generate dummy text.

Creating text box for content
Filling text box with Lorem Ipsum
Step 59

Create a new Paragraph Style for the blog post content to enhance the readability and aesthetic of the text. Initiate this by selecting the new icon in the Paragraph Styles panel.

Creating new Paragraph Style

Configure the Paragraph Style with the specific settings provided to align with the blog’s design standards.

Configuring Paragraph Style settings
Step 60

Apply the newly created Paragraph Style to the main body of the post content, tweaking Indent and Spacing settings as necessary for optimal layout and readability. For web design purposes, it’s advisable to turn off Hyphenation to maintain clean text flow.

Applying Paragraph Style to content
Deactivating hyphenation
Step 61

Draw a rounded rectangle to serve as an additional decorative element, filling it with #8e8380 and opting for no Stroke. Accentuate this shape with a Pattern Overlay Layer Style, employing the same pattern used in the slider section for visual harmony.

Drawing rounded rectangle for decoration
Applying pattern overlay to rounded rectangle
Step 62

Create a label for a button and save this text styling as a new Character Style for consistency and ease of use across other buttons in the design.

Adding button label
Saving button label as Character Style
Step 63

Duplicate the previously designed button and modify its color to #f76b6a for a hover or active state representation. Additionally, adjust the label’s font to bold to distinguish the button’s state.

Duplicating and styling button for active state
Step 64

Group the blog post elements and duplicate them using Ctrl + J. Then, use Alt-drag to replicate the group for multiple posts, ensuring to update the image and title for each to maintain variety.

Duplicating blog post group
Creating multiple blog posts
Step 65

Replicate the Read More button and adjust its label to a number, intending to use these for page navigation. Ensure to designate one button to represent the hover state for visual feedback.

Preparing buttons for page navigation
Step 66: Footer

Begin crafting the footer by adding widget titles and their descriptions, laying the foundation for this important site section.

Adding widget title and description in footer
Step 67

Add links within the footer and underline each with a 1 px line for clarity and emphasis. Use no Fill and a Stroke color of #8e8380 to match the site’s design aesthetic.

Adding links and underlines in footer
Step 68

Access the More Options button and choose a dashed line style to create a visually distinctive separator for the footer content.

Selecting More Options for dashed line
Choosing dashed line style
Step 69

Enhance the widget by adding additional links, further expanding the footer’s functionality and navigation options.

Adding more links to widget
Step 70

Replicate the widget to utilize the design across different sections of the footer, creating a unified and structured appearance.

Duplicating the widget
Step 71

Indicate a hover state for the links by setting one of the link’s text to bold, mirroring the active menu item’s style from the main navigation bar. Directly below this active link, draw a 5 px line colored #f76b6a, ensuring consistency with the design’s active state indicators.

Setting link to bold for hover state
Adding line under active link
Step 72

At the footer’s lower section, introduce another rectangle with a Fill of #3d3123, adding depth and visual interest to the page’s bottom edge.

Adding rectangle to footer's lower area

Finalizing Footer Information

Step 73

Utilize the Type tool to insert the footer information. Enhance its visibility against the background by applying a dark Drop Shadow, creating necessary contrast for readability.

Adding footer information
Applying drop shadow to footer info

Integrating Social Media

Step 74

Incorporate social media icons provided by Daniele Selvitella to connect your site more closely with your social platforms. Enhance these icons with an Outer Glow from the Layer Styles for added visual appeal.

Adding social media icons
Applying Outer Glow to icons
Step 75

Adjust the opacity of the normal state icons to 50% to distinguish them from their active or hover state, which should remain at 100% opacity for clarity and user interaction feedback.

Adjusting icon opacity for normal and hover states
Step 76

Enhance interactive elements by adding a freehand cursor icon over active or hover links, indicating to users where interaction can occur. This subtle cue contributes to a more intuitive navigation experience.

Adding cursor icon for active link
Detail of cursor icon
Hover state cursor icon
Cursor icon placement
Final look with cursor icon
Final Result

Here is the culmination of our work. The latest version of Photoshop introduces some powerful tools specifically useful for web layout design. The inclusion of Character Styles and Paragraph Styles marks a significant advancement for web designers, streamlining the design process and ensuring consistency across the project.

See demo Download source

Final web layout design in Photoshop