How to Create an Article Website Design in Photoshop

On 25 Sep, 2012 By With 2 Comments

Article Writing Business has becoming popular since the SEO days, I’ve seen more and more freelance writing career and writing business more to date. Since this is getting popular, I want to try and design one for myself. Challenging my skill and working far from your comfort zone is what makes this job exciting 😉

Today I’ll share with you How to Create an Article Website Design in Photoshop, it’s pretty simple layout to start with. If you been a loyal visitor for some time, you’ll notice that we only use basic techniques to achieve the layout design that we wanted.

You can download the PSD at the bottom of this tutorial!

Things we need

writers online How to Create an Article Website Design in Photoshop

Let’s start!

1 canvas How to Create an Article Website Design in Photoshop

Open a new canvas and set the width to 1020px and 668px height

2 bg1 How to Create an Article Website Design in Photoshop

Create a new layer (CTRL + SHIFT + N) and use Marquee Tool (M) to select 100px from the top then fill it with ##0785CB

3 gradient settings How to Create an Article Website Design in Photoshop

In Blending Options, select Gradient Overlay and fill in those colors

4 gradient color settings How to Create an Article Website Design in Photoshop

Here is the Gradient Settings

5 canvas pattern How to Create an Article Website Design in Photoshop

Now we will create our own pattern, open a new canvas and set it to 10px transparent

6 pattern How to Create an Article Website Design in Photoshop

Use Pencil Tool (B) and draw a diagonal line using #ffffff as foreground color

7 define pattern How to Create an Article Website Design in Photoshop

After that, select from main menu Edit > Define Pattern and save it

8 pattern design How to Create an Article Website Design in Photoshop

Back on our layout, create a new layer and fill it with any color. On Pattern Overlay, select the one that we just did and set scale to 63% opacity 100%. Set the layer’s opacity to 28%

9 drop shado How to Create an Article Website Design in Photoshop

Set the drop shadow to #000000, distance and size 5px

10 header How to Create an Article Website Design in Photoshop

Here is our header

11 header line How to Create an Article Website Design in Photoshop

Next is to add a line under it, select Single Row Marquee Tool (M) and click just below the line, use #0c79b7.

13 logo How to Create an Article Website Design in Photoshop

Next is the logo, font used was Bitter bold 24pt. The other color was #f5aa33

14 logo line How to Create an Article Website Design in Photoshop

For the line, we selected Marquee Tool (M) and fill it with #0e6393 using brush. Now duplicate the layer while the Marquee Tool is still on, fill it with #FFFFFF, after that press the right arrow key by 1 so it’ll move 1px to the right.

15 logo light How to Create an Article Website Design in Photoshop

Next is to create another layer, use Marquee Tool (M) and fill the shape with #ffffff.

16 logo light mask How to Create an Article Website Design in Photoshop

Position the layer like the image above, now click on the mask layer and use the Gradient Tool (G) and follow the arrow selection.

17 logo complete How to Create an Article Website Design in Photoshop

Our logo is now complete

18 navi bg How to Create an Article Website Design in Photoshop

For the navigation, select Rounded Rectangle Tool (U) and set the radius to 15px. Fill it with #229ADE

19 navi inner shadow How to Create an Article Website Design in Photoshop

Blending Options > Inner shadow set the distance to 2px and size to 1px, blend mode is normal and foreground color is #FFFFFF

20 navi stroke How to Create an Article Website Design in Photoshop

Stroke foreground color is #OD5C89 and size 1px

21 navi gradient How to Create an Article Website Design in Photoshop

Duplicate the layer and fill it with #FFFFFF, use the Marquee Tool to delete the lower part

22 navi current How to Create an Article Website Design in Photoshop

We added some text, font used was Arial Rounded 14pt.

22 navi current How to Create an Article Website Design in Photoshop

Grab Marquee Tool again and create a box shape, fill it with #FFFFFF and change the Opacity to 7%

23 slide How to Create an Article Website Design in Photoshop

Use the girl from the file that we downloaded earlier and put her on the left side. Using Rounded Rectangle Tool (U) set the radius to 5px and draw the shape same as above.

24 pattern dark How to Create an Article Website Design in Photoshop

Like what we did with the pattern before, now we used a dark color #000000. Same step as above

25 dark pattern How to Create an Article Website Design in Photoshop

Duplicate the slide layer, and fill it with pattern. Scale is 65%

26 slide highlight How to Create an Article Website Design in Photoshop

Same thing as we did with the logo, create a new layer and use Marquee Tool. Position the layer and select layer mask on the palette view

27 slide highlight mask How to Create an Article Website Design in Photoshop

Use Gradient Tool (G) and make sure you only leave the right top part of the layer, follow the arrows

28 slide complete How to Create an Article Website Design in Photoshop

Now we added some text, for the title we used League Gothic 52pt. For the highlighted text #f7be3f

29 slide text dropshadow How to Create an Article Website Design in Photoshop

For the title and other text drop shadow, Angle is 90 and distance , size 1px, foreground color is #000000. To use the layer style to other text, just right click > copy layer style and select the other text right click > paste layer style

30 3step How to Create an Article Website Design in Photoshop

For the mid-content, grab Rounded Rectangle Tool (U) and set the radius to 5px same with slide layer above.

31 3step stroke How to Create an Article Website Design in Photoshop

Go to Blending Options > Stroke and set the foreground color to #a2a2a2 size 1px

32 3step gradient colors How to Create an Article Website Design in Photoshop

Create a new layer on the top of the mid-content, this will be our header. Next is do a Gradient color settings, copy the one above

33 3step gradient settings How to Create an Article Website Design in Photoshop

On Gradient Overlay window, check Reverse and Angle 90

34 3step heade line How to Create an Article Website Design in Photoshop

Here is what it looks like, next is Single Row Marquee T00l (M) and fill it with #E8E4E4 on line just below the header

35 3step bg complete How to Create an Article Website Design in Photoshop

Next is to divide it into three columns, we will do a sunken effect for the lines. The dark color is #7b7b7b and the other is #FFFFFF, both of them has 70% Opacity. To do that, you’ll use the Single Row Marquee Tool (M) and fill it using brush

36 3step header title How to Create an Article Website Design in Photoshop

Next is the titles for each column, we used League Gothic font 21pt #3e3d3d

37 3step drop shadow How to Create an Article Website Design in Photoshop

For the titles additional detail we added a drop shadow, set the distance and size to 1px and Blend Modes to Normal, color is #FFFFFF

37 3step complete How to Create an Article Website Design in Photoshop

We also added some icons and text, icons are from the file we download earlier

38 footer line How to Create an Article Website Design in Photoshop

For the footer, we just duplicate the header layer and drag it down. We also added a couple of text at the center, footer line was added using the following colors #0c6495 and #FFFFFF. Same step was taken like the rest of the sunken line

And we are done!

writers online How to Create an Article Website Design in Photoshop

Here is our final product, hope you guys learned a lot and this layout will get you started! If you get stuck on the steps or have several suggestions, feel free to hit the comments!

2 Responses to “How to Create an Article Website Design in Photoshop”