Web Design Tutorials and Tips

In this tutorial I am going to show you the process of making a simple and clean design blog using the latest Photoshop. We are going to use the new Character Styles and Paragraph Styles to help us streamline the process.

Here’s a preview of what our final result should look like.

To follow this tutorial, you will need the following resources:

• Free Font Sansation from Bernd Montag.
• 26 Repeatable Pixel Pattern from PSDfreemium.
• Free Social Media Icons from Daniele Selvitella.
• Hand Cursor Icon from PSDfreemium.
• Stock photo: Harvest 1 from mordoc.
• Stock photo: New York Streets 3 from lonniehb.
• Stock photo: Daisy Age from SteveFE.
• Stock photo: A tree on the horizon from Ydiot.
• Stock photo: Sales figures from wagg66.
• Stock photo: Time is Money! from knox_x.

Preparing the Canvas

Step 1

In this design, we are going to use 960 gs as its framework. Download the template from its main page and inside the zip file, search for the photoshop file. Open the ’12 Column Grid’ file in Photoshop.

Click the eye icon for the 12 Col Grid layer to hide it; we are not going to need it for now.

Step 2

The current canvas size is too small. Click Image > Canvas Size (or Ctrl + Alt + C). Add a bigger size and make sure to set its anchor point to center.

Step 3

Hit Ctrl + R to reveal the ruler. Click View > New Guide to make new guide that will help us design accurately. Select Vertical and at Position: 185 px to make a vertical guide 185 px from the canvas top left corner.

Step 4

Draw another vertical guide at position 150 px, 1095 px and 1130 px.

Below is our final guide inside the canvas.

Preparing Color Theme

Step 5

For this design, we are going to use a nice color combination from Colorlouver. Click on the Preview link to open the color combination as a jpeg file.

Save the color combination and place it inside the Photoshop file. By placing the image directly inside the canvas we can sample its color faster and easier.

Preparing The Background

Step 6

Select Background layer and click lock icon on top of the Layers panel to unlock it. Double click the thumbnail to change its color.

Click the second color, #948371, to select it.

Step 7

Draw a rectangular shape on top of the canvas. This will be the second background.

Step 8

Keep the shape selected. In the Option Bar, open Fill Color box and then click the color wheel icon. When the Color Picker dialog box is opened, click the first color to select it. For its Stroke color select None.

Step 9

Make a new layer and then select the upper canvas using the rectangular marquee tool. Activate the gradient tool and fill it with radial gradient from white to black. Make sure the gradient is centered on top of the canvas.

Change its Blend mode to Screen and reduce its Opacity to 37%.

Step 10

Make a new layer and name it ‘shadow’.

Draw a rectangular selection at the bottom of the secondary background like shown. Click Edit: Fill. Set Use to Black. Click OK to fill the selection with black.

Step 11

Soften it using Gaussian Blur. Click Filter > Blur > Gaussian Blur.

Step 12

Hold Alt and then place the cursor between shadow and upper background layer. Without releasing the Alt key, click to convert the layer to Clipping Mask. By converting it to Clipping Mask, the shadow now goes inside upper background.

Step 13

Bring down shadow Opacity to 50% to make it subtle. Below, you can see the result in 100% magnification.

Step 14

It’s always a good idea to put these layers in one group. To do this, select all layers and then click Ctrl + G.

Header

Step 15

Draw a rectangle on the upper canvas like shown.

Step 16

In the Option Bar, set Stroke color to #af9f8e.

Step 17

For its Fill color, select linear gradient from #d0c4b9 to #a89c91.

Below is the result in 100% view.

Site’s Name

Step 18

Add the site’s name on the left side of the design. Observe the placement as shown below. Double click the text and add Drop Shadow. For its font, use Sansation.

Menu

Step 19

Draw menus on other side of the menu bar. Use font Sansation 14 pt. Again, notice the placements.

Step 20

For the active menu, set its font type to bold.

Step 21

Activate Polygon tool and set Sides to 3. Draw a triangle shape with Fill: #3d3123 and Stroke: None. Add Layer Style > Drop Shadow.

Step 22

Let’s emphasize the active menu by adding a line underneath it. Activate the Line tool and set its weight to 5 px. Select #f76b6a for its Fill, without Stroke.

Put the line right under the active menu and add 1 px space to bottom of the menu bar.

Using Character Styles

Step 23

Let’s save the character setting as a Character Style. This feature is a simplified version of Character Styles in InDesign. To save it, activate the text and then click the ‘New Character Style’ icon.

Double click the new Character Style and use the following setting.

Step 24

Select the other menu and then click the Character Style to apply it. If you find a plus sign next to the Character Style it means that the character has a different setting. To override the settings, click the circular arrow icon.

Step 25

Repeat the previous step to make a new Character Style for the active menu.

Step 26

So, what’s the point of using Character Styles? Character Styles help us centralize the character setting. We can simply edit the Character Style to edit every text using that style. See an example below. If we edit the font type inside Character Style Top Menu – Normal to Corbel, all the normal menu is automatically changed to Corbel.

Step 27

Make a new layer and place it under the menu bar. Ctrl-click the menu bar to make new selection based on its shape. Fill it with black.

Step 28

Remove selection using Ctrl + D. Soften it by adding Gaussian Blur, Filter > Blur > Gaussian Blur.

Slider

Step 29

Draw a rectangular shape with the width of 10 columns (see below).

For its Fill color select #dfd1c2. For its Stroke select #c8baac with size 10 pt. Click the small dropdown arrow next to the line preview and make sure Align Inside is selected.

Step 30

Paste a picture on top of the frame. Convert it to Clipping Mask by hitting Ctrl + Alt + G. The picture will automatically goes inside the slider frame. If needed, you can move and resize the picture without affecting its frame.

Step 31

Draw another rectangular shape behind the slider with same color. Make sure to snap it to the outmost guide. Add Layer Style > Pattern Overlay using pixel pattern from PSDfreemium. Tone down its Opacity to make its subtle.

Step 32

Draw a rectangular shape above the shape with Fill: #b3aca5 and no Stroke. Hit Ctrl + T and then rotate it 45°. Convert layer shape to Clipping Mask.

Step 33

Duplicate the shape and resize it. Change its Fill to a darker color. Convert layer shape to Clipping Mask.

Step 34

Repeat the same step to draw another arrow on the other side.

Step 35

Ctrl-click slide frame to make new selection. Make a new layer and convert it to a Clipping Mask. Fill the selection with black.

Step 36

Deselect (Ctrl + D) then soften it using Gaussian Blur.

You can reduce the shadow Opacity if needed.

Step 37

Draw a rounded rectangle on corner of the slider with Fill #c8baac.

Step 38

Draw a circle inside the shape. Set its Stroke to black with Size 1 pt and remove the Fill.

Step 39

Select the circle path using Path Selection tool. Shift + Alt-drag the path to duplicate it.

Repeat this to draw more circles.

Step 40

Select one of the circle paths. Hit Ctrl + Shift + J to cut it to a new layer.

Step 41

In the Option Bar, remove its Stroke and change its Fill to a radial gradient from #e38989 to #bb5c5c. Add Layer Style > Outer Glow and Drop Shadow.

Step 42

Draw an elliptical selection under the slider. Make a new layer and fill it with black.

Step 43

Deselect (Ctrl + D). Soften it using Gaussian Blur.

Lower Background

Step 44

Draw another rectangular shape for the bottom background. Use the same Fill and Stroke color as the slider shape.

As always, be very cautious with its placement. We want it to cover every guide on the canvas.

Add Layer Style > Pattern Overlay.

Below is the result in 100% magnification.

Step 45

Select its uper area using the Rectangular Marquee tool.

Step 46

Make a new layer, place it behind the shape. Fill the selection with black. Hit Ctrl + T, right click and select Perspective.

Drag its upper corners outward.

Right click again and choose Scale. Drag the upper handle down.

Right click and choose Warp. Drag left and right segment inward.

Soften it using Gaussian Blur.

Tone down the Opacity to 20%.

Step 47

Draw a white rectangule inside the background. This is going to be background for the site’s main content.

Add a space of 10 px to the left, right and upper side of the background. The spacing should be easy because we have made the guide in early steps. Add Layer Style > Outer Glow.

Step 48

Add a new guide, 25 px from the upper side of the shape.

Section Title

Step 49

Add a new Character Style for the page section title and its description.

Add the section title and its description using Type tool. Apply styles we have made earlier. Make sure to add 25 px space from the upper side of its background with the help from guide made earlier.

Step 50

Draw a 5 px line under the site’s description with Fill: #938270 and Stroke: None.

Blog Post

Step 51

Make another Character Style for the post title.

Step 52

Add a post title and apply previous Character Style.

Step 53

Draw a rectangle shape under the title with 4 columns width. Set white for its Fill and #bebebe for its Stroke. Add Layer Style > Stroke.

Step 54

Paste an image on top of the shape. Convert it to Clipping Mask (Ctrl + Alt + G).

Step 55

Draw a rounded rectangle with Fill: #8e8380 and Stroke: None. Convert it to Clipping Mask.

Step 56

Make new Character Styles for the blog metadata.

Step 57

Add metadata text on top of the shape and apply the Character Style we have made earlier.

Step 58

Activate Type tool and click-drag to make a text box. Set its width to 4 columns. Click Type > Paste Lorem Ipsum to fill it with auto-generated Lorem Ipsum from Photoshop.

Step 59

Make a new Paragraph Style for the character content. Click on the new icon on the Paragraph Styles panel.

Double click the Paragraph Style and use this following setting.

Step 60

Apply this style to the post content. You can also experiment with its Indent and Spacing settings.

For web design, deactivate Hyphenation.

Step 61

Draw a rounded rectangle with Fill: #8e8380 and Stroke: None. Add Layer Style > Pattern Overlay. For consistency, use same pattern as in the slider.

Step 62

Add a button label. I suggest you to save it as a character style. This way, we can use it easily for other buttons.

Step 63

The previous button is for normal condition. Let’s duplicate it and change its color to #f76b6a. Also, set its label type to bold.

Step 64

Place the post inside a group and then hit Ctrl + J to duplicate it. Alt-drag to duplicate the group.

Repeat the same step to make more posts. Remember to change the picture and title of each post.

Step 65

Duplicate Read More button and change its label to number. We are going to use it for page navigation. Remember to set one of the button to hover condition.

Step 66: Footer

Let’s start working on the footer. Add a widget title and its description.

Step 67

Add link and draw a 1 px line underneath it. Set Fill: None and Stroke: #8e8380.

Step 68

Click More Options button and select dashed line.

Step 69

Add more links into the widget.

Step 70

Duplicate the widget.

Step 71

We also need to add the hover condition. Set one of the link to bold.

Underneath that active link, add a 5 px line. Set its color to #f76b6a. For consistency, the appearance of this link is similar to the active menu on the menu bar.

Step 72

Add another rectangle at the lower area. Set its Fill to #3d3123.

Footer Information

Step 73

Add footer info using Type tool. Give it a dark Drop Shadow to add contrast to its background.

Social Network

Step 74

Add some social media icons from Daniele Selvitella. Add Layer Style > Outer Glow.

Step 75

Tone down normal icon to 50%. For hover condition, let’s just keep its Opacity at 100%.

Step 76

Grab a free hand cursor icon and place the smallest hand cursor above the active or hover link.

Final Result

This is our final result. You can see that the latest Photoshop version has some interesting features for designing a web layout. Character Styles and Paragraph Styles is a significant improvement for every web designer.

• Demo
• Download Source