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
- Business Woman from istockphoto
- Website icon from iconarchive
- Accept icon from iconarchive
- Invoice icon from iconarchive
- Tick icon from iconarchive
- Bitter from fontsquirrel
- League Gothic from fontsquirrel
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!
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!