Pixel Clouds 

~  Design Journal

How To Design A Clean Image-Focused Company Blog In Photoshop

An extensive web design tutorial in Adobe Photoshop.

Over the past few weeks I have put together an extensive tutorial on designing a clean, image-focused company blog in Adobe Photoshop. A clean design, such as the one we will be designing, casts great focus on the content with as little noise and distractions as possible. This particular site being a blog means readers need to easily be able to direct their complete attention to the content. The design achieves that whilst still providing the necessary elements to provide a complete and seamless user experience.

I’ve gone into as much detail as I can and you will be taken through every single little step to ensure you don’t get lost and can get the best possible result when you give it a go.

The PSD will be available for download at the bottom in case you would like to take a look.

Here is a quick look at what you will be designing. See the full-size preview.

Store

Note: Should you need to see a bigger version of any of the tutorial images, simply click on the image and you will be linked to the full original size.

To begin, all you need to do is download the free font, Raleway here. This is the free typeface we will be using throughout the design.

First, open Photoshop, and create a new PSD with dimensions 1400px x 2000px, with a resolution of 72 PPI.

1

2

Now we will set some guides to make sure our design is perfectly aligned and centered. To do this select ‘View’ follow by ‘New Guide’. First, input 200px and select ‘Vertical’.

4

Also create a guide at 1200px and select ‘Vertical’ once again. You should now have 2 guides on your PSD.

3

Now, into the design! Select the rectangle tool in the left toolbar and draw a rectangle of size 1400px x 70px. Fill this shape with black (#000000) and align it perfectly to the top of your PSD.

5

6

With the rectangle tool still selected, draw another rectangle, this time with dimensions 1400px x 2px. Align it perfectly to the top of your PSD.

7

Double-click this shape layer in the right hand side in Photoshop, and a ‘Layer Style’ window will appear. Select ‘Gradient Overlay’ and set the angle to 0 degrees.

8

Now click on the gradient. Set the left color to #7de6a4 and click ‘OK’.

9

Set the right color to #d7315c and click ‘OK’.

10

You should now see a window similar to this. Click ‘OK’.

11

Next up we need a simple logo. Select the Horizontal Type Tool and click towards the top left corner. In this case we will type ‘STORRE.CO’. I set ‘STORRE’ to the color white (#ffffff) and the remaining letters ‘.CO’ to #8e8e8e. Set the font size to 16 pt.

12

Feel free to use any font for this logotype. I used ‘Raleway Bold’, but fonts such as ‘Gotham’ also work great if you can get your hands on them.

13

Onto the search area. Select the Rectangle Tool and draw a rectangle 120px x 2px in the top right hand corner, leaving around 30px space to the right.

14

Set the rectangle color to #8e8e8e and click ‘OK’.

15

Now we need to add a little search icon to accompany the field. Try this one by Gregor Cresnar. It’s free for commercial use. Download the 16px version as a PNG and copy it into your PSD file.

16

Double-click on the icon layer to bring up the Layer Style window. Click on Color Overlay.

17

Set the color to #a4a4a4 and click ‘OK’.

18

Position the icon in line with the right hand side of the grey rectangle we just drew, and also leave a little space below.

19

The navigation will sit alongside the search area. Select the Horizontal Type Tool and click to the left of the search area you just designed. Spell out a few of the navigation links you would like to include, ensuring you leave about 7-8 spaces in between each one. In this case I have used ‘Home’, ‘News’, ‘Reviews’, ‘Video’, ‘Deals’ and ‘Releases’. Set the text to uppercase and font size 13 pt in ‘Raleway SemiBold’.

20

Highlight ‘Home’ and set the color of this link to white (#ffffff).

21

Highlight the rest of the links and set their color to #adadad.

22

To give the user an even clearer idea of the page they are currently on, we’re also going to add an indicator below the active link. Select the Rectangle Tool and draw a rectangle of size 38px x 2px. Align it horizontally with the active link (‘Home’) and also 1px above the bottom of our main header bar.

23

You should now have something that looks similar to this:

24

That’s the header bar complete. We’ll now move onto the large image slider. Head over to Unsplash and choose yourself an image you would like to use. They are all high quality and free for commercial use.

25

I chose this one.

26

Save the image and open it in Photoshop.

27

Copy or duplicate the image into your PSD file. To copy, select CMD+A (CTRL+A on Windows), then CMD+C (CTRL+C on Windows). To duplicate, right-click the layer and select ‘Duplicate Layer…’.

28

Once you have the image in your PSD, select CMD+T (CTRL+T on Windows) and resize the image to a width of 1400px. Click on the tick at the top when you are done.

29

In some cases the image may also be too high, so we need to crop it. We don’t want the content to be too far down the page. Select the Rectangular Marquee Tool and select the area you would like to keep, maintaining a width of 1400px.

30

Now click the icon in the bottom right corner of Photoshop. It’s the one that looks a little like a camera.

31

Align your resized image as so the top meets the bottom of the header bar.

32

We’re now going to apply some layer styles to the image in order to allow the title text (which we will add in a minute) to have sufficient contrast against different images, regardless of how colorful or bright they are. The first of which will be a Color Overlay. Double click on the layer and select Color Overlay. Set the Blend Mode to ‘Normal’, the Opacity to ‘10%’, and the color to black (#000000).

33

Now select Gradient Overlay, set the Blend Mode to ‘Normal’, the opacity to ‘75%’, then click the Gradient and set the toggles to look something vaguely like this using black and white only:

34

The final layer style is a drop shadow. Set the Blend Mode to ‘Normal’, the Distance to 1px, and the color to black (#000000). Click ‘OK’.

35

Select the Horizontal Type Tool and click around the lower left area of the image. Type an example title; in this case I used ‘Introducing The All New Storre.co Blog’.

36

Set the font to ‘Raleway Light’. We want this title to stand out from all other text so increase the font size to 35 pt, the line height to 48 pt, and the color to white (#ffffff).

37

We’ll also display the category name above the featured title, so select the Horizontal Type Tool again and type a category name above the title. In this case I used ‘// NEW & UPCOMING’. Leave a gap of approximately 35px below the text.

38

Set the font to ‘Raleway SemiBold’, the font size to 13 pt, and the color to #61e290.

39

40

We are now going to draw the circles which will form the controls for the slider. Start by selecting the Ellipse tool and draw a 10px circle. Make sure the bottom of the circle is vertically aligned with the bottom of your large title text.

42

Set the circle color to #797b7d.

43

Duplicate the circle to produce four circles in total. You can do this by selecting the shape and dragging it whilst holding ‘Alt’ on your keyboard.

44

Set the gap between each circle to 10px as so users can easily click the slide they want to navigate to.

45

Duplicate another of the circles and set the color to white (#ffffff).

46

Select the Add Anchor Point tool and add an anchor point to the circle. Move the anchor point to the center of the circle and you should get a pie-chart shape like this. This will serve as a countdown timer for each slide, before it moves on to the next one.

48

We also need a ‘Pause’ button if the user wants to stay on the current slide. Select the Rectangle Tool and draw a shape with dimensions 3px x 10px and color #797b7d. Leave a margin to the right of 10px.

49

Duplicate the rectangle and move the shape to the left, leaving a 2px gap between both rectangles.

50

The last part before the header is completed, is to add a small visual aid to show the user which slide they are currently on. Select the Horizontal Type Tool and click above the four circles. Type ‘2/4’ and align the text to the right, and 10px above the circles.

51

Set the font to ‘Raleway Bold’ and click the Italics icon. Also set the font size to 12 pt and the color to white.

52

You slider controls should now look something like this:

53

That’s the header complete! We’re getting there now. Keep at it!

54

Begin the next section of the design by selecting the Horizontal Type Tool and typing ‘LATEST NEWS’. Set the font to ‘Raleway SemiBold’, the font size to 13pt, and the color to #1d1d20. Position this text inline with the left guide and around 60px from the header section.

55

Select the Rectangle Tool and draw a shape with dimensions 888px x 1px.

56

Align the rectangle to the right, and vertically in the center of the ‘LATEST NEWS’ text.

57

Set the color to #e3e3e5 and click ‘OK’.

58

Next up, we want some categories so the user can filter the blog posts as they desire. Select the Horizontal Type Tool and draw a text box roughly the width of the site design (1000px). Type in some category names, leaving around ten spaces in between each name.

59

Set the font to ‘Raleway SemiBold’, the font size to 13pt, and the color to #1d1d20.

60

To show the user which category they are currently viewing, we’ll add a small rounded rectangle behind the current category. This should be 32px high and wide enough to leave a bit of space either side of the category name.

61

Set the color to #e9e9ea and click ‘OK’.

62

Add a stroke by double-clicking the shape layer and selecting Stroke. Set the size to ‘1px’, the position to ‘Inside’, and the Blend Mode to ‘Normal’. The set the color to #cfcfd4 and click ‘OK’. This will provide the current state with better contrast against the white background.

63

It should now look something like this:

64

65

We are now going to create our first blog post thumbnail. These will be card-shaped to make the best use of available space, and also to enable the design to be easily translated to mobile with minimal, if any, changes to the thumbnail design.

Head over to Unsplash again and copy an image into your PSD. Resize the image to a height of around 410px by pressing CMD+T (CTRL+T on Windows).

66

Next, select the Rounded Rectangle Tool and set the radius to 3px. Draw shape of exact size 307px x 373px.

67

Right-click on this layer and select ‘Rasterize Layer’.

68

Position the shape on top of your image like below. Now, right click the small window inside the layer, to the left of the layer name. From here, click ‘Select Pixels’.

69

We are now going to click the ‘Add Layer Mask’ button again. Remember, it’s the one that looks vaguely like a camera.

70

You should now have a beautiful image like below with rounded corners. Align this to the left, with the edge touching your left guide.

71

Double-click on the image layer and first add a Color Overlay. Set the Opacity to ‘13%’ and color to black (#000000).

72

Also add a Gradient Overlay. Set the Blend Mode to ‘Normal’, Opacity to ‘100%’, and angle to ’90’. Now click on the gradient and set the toggles to look something similar to below. Now click ‘OK’. This will give us some contrast when we come to add the article’s title and introduction paragraph.

73

Select the Horizontal Type Tool and click in the upper right corner of the image. Type a date in the format ’12/1′, and then set the size to 14 pt, the font to ‘Raleway SemiBold’, and the color to white (#ffffff).

74

Now select the Rounded Rectangle Tool, set the radius to 2px, and draw a small shape behind the text. Leave around a 10px margin on each side of the text.

74-5

Double-click the layer and set a Stroke of ‘1px’, with the Position to ‘Outside’, the Blend Mode to ‘Normal’, the Opacity to ‘45%’, and the color to white (#ffffff).

75

Also add a Color Overlay of ‘33%’ in black ‘#000000’, with the Blend Mode set to ‘Normal’, and click ‘OK’. This will give the post date greater contrast against varying background images.

76

Select the Rounded Rectangle Tool again, this time setting the radius to 3px. Draw a rectangle with dimensions 267px x 40px and position it at the bottom of the image, with a 20px margin to the left, right, and bottom.

77

To add some text to our button, select the Horizontal Type Tool and type ‘Continue Reading’, aligning the text to the left. Set the font to ‘Raleway SemiBold’, font size to 13 pt, and color to white (#ffffff).

78

Next up we need a small arrow icon for the button, which we will design ourselves. Zoom in to 3200% on your PSD using CMD+ (CTRL+ on Windows). Select the Rectangle Tool and draw a shape of width 9px and height 2px. Color this shape white (#ffffff).

79

Now select the Custom Shape Tool and choose the triangle.

80

Draw a triangle with dimensions 5px x 8px and align the shape with the right of the rectangle. Color this shape white (#ffffff) also. Now you have your icon, align it to the right hand side of your button, ensuring the margins above, to the right, and below are all equidistant.

81

The last step for this button is to match the color to the colors in the image. In this case I chose #ba931e.

82

Your button should now look something like this. The design of this button provides a bold call-to action for users and clearly directs them to click through to the full article. It also provides a solution that will translate well to mobile and touch screen devices.

83

Now for the post description. This will sit just above the button (around 20px above) and be set in ‘Raleway Regular’ with a font-size of 15 pt and a line height of 24 pt. Set the color to white (#ffffff).

84

Next, select the Rectangle Tool and draw a shape of dimensions 267px x 1px. Leave around an 18px gap between the divider and the description. This will help break up the content and make it easier to process quickly.

85

Set the color to #e6e6e6 with an opacity of 45%.

86

87

And the last element we need is the post title. Select the Horizontal Type Tool and type an example title. Set the font to ‘Raleway SemiBold’ in order to make it stand out from the description. Then, set the font size to 15 pt, and the color to white. Leave around an 18px gap between the title and the divider.

88-5

The final small details we will add to our individual post design is a small inner border inside the image, again to provide slightly more contrast between the thumbnail, the surrounding elements, and the background. To begin, right-click the image layer and select ‘Duplicate Layer’.

90

Double-click the new layer to bring up the Layer Style window, and set the Fill Opacity to ‘0%’.

91

Add a stroke with Size ‘1px’, Position ‘Inside’, Blend Mode ‘Normal’ and Opacity ‘15%’. Now set the color to black ‘#000000’ and click ‘OK’.

92

That’s your individual post design complete! Now all that’s left to do is duplicate it a few times, and add our pagination and footer. Then you’re done!

93

To help align your posts perfectly, set a new vertical guide at 50% by going to ‘View’ then selecting ‘New Guide…’. Now duplicate your post so that you have six in total, and use this new guide to center the middle posts perfectly.

94

We’re also going to add a small divider to break the content up a little. Select the rectangle Tool and draw a shape 1000px x 1px. Leave a 30px margin above and below the divider. Duplicate this divider so there are two, and move this second one to below the bottom row of posts.

95

Set the color for both to #e3e3e5.

96

It should now look like this:

97

Now go through the posts and update the content, images, and button color for each.

98

Just below the posts we’ll add pagination. Start by creating a ‘Previous’ button on the left side. Select the Rounded Rectangle Tool, set the radius to 2px, and draw a shape with dimensions 73px x 32px. Fill the shape with color #f8f8f9.

99

Double-click on the layer and select Stroke. Set the Size to ‘1px’, Position to ‘Inside’, and Blend Mode to ‘Normal’. Also set the color to #cfcfd4.

100

Now select the Horizontal Type Tool and add some text to our button. Set the font to ‘Raleway SemiBold’, the font size to 13 pt, and the color to #1D1D20.

101

Continue to create some more buttons in this style. I added some page numbers to the center, and another button to the right, ‘Next’. For current states, I used #1d1d20 for the background color and white (#ffffff) for the text color.

102

You should end up with something that looks similar to this:

103

Last few steps! Duplicate our divider from a few steps ago, and place it below the pagination. Then select the Horizontal Type Tool and type some copyright text in the lower left corner. Set this text to ‘Raleway Medium’, with the company name in ‘Raleway SemiBold’.

105

The font size should be 13 pt and color #1d1d20.

106

Next, add some icons aligned in the center. I used the logos for Twitter, Facebook, YouTube, and Instagram.

107

Once you have them all aligned perfectly, and roughly the same size, double click on each layer and set the Color Overlay to #d2d2d2 and Opacity ‘100%’. Click ‘OK’.

108

Add some links to the right side of the footer in ‘Raleway SemiBold’, font size 13 pt and color #1d1d20. Leave 7-8 spaces between each link.

109

Hopefully your footer looks similar to this:

110

And there you go. Finished!

111

Tutorial Files

Full-size PNG
Download the PSD

Useful Resources

Unsplash – Free (do whatever you want) high-resolution stock photos.
Iconfinder – Icon search engine.
Font Squirrel – Handpicked free fonts for designers.


- By Ben Bate

comments powered by Disqus