How to Create an Article Website Design in Photoshop

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

Let’s start!

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

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

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

Here is the Gradient Settings

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

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

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

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%

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

Here is our header

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

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

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.

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

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

Our logo is now complete

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

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

Stroke foreground color is #OD5C89 and size 1px

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

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

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

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.

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

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

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

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

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

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

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

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

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

On Gradient Overlay window, check Reverse and Angle 90

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

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

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

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

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

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!

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!

Let’s make something great together!

Let's talk