Create a design agency portfolio from scratch

In this massive tutorial series we’re going to build a modern webdesign portfolio for a fictional agency from scratch. We’ll design the template in Photoshop CC and then we’ll convert the resulting PSD document into a high-quality HTML5/CSS3 template. No steps will be skipped and every step will be explained in great detail.

The design we’ll be building features an introductory Hero area, a short services area, a filterable portfolio, an about section. It also features the testimonials area, a short blog section that displays the latest 3 blog posts and a contact area.

The Agency template
What we’ll be building

Download PSD Template Download source files View Demo

Design the agency portfolio template in Photoshop

To easily read and access the tutorial, I split the content in two easy to follow lessons.

Create a design agency portfolio in Photoshop – Part 1

In the first part of this series I’ll show you how to set-up the document and how to design The Agency’s Header, Hero area, Services and Portfolio sections ans we’ll also create a call to action banner.
Read article

Create a design agency portfolio in Photoshop – Part 2

In the second installment, we’ll continue where we left off in part 1. We’ll build a modern About Us section, a compact Testimonial area, a section to display our latest 3 Blog posts, the contact section and a clean footer.
Read article

Photoshop to HTML: The Agency portfolio conversion

Photoshop to HTML: The Agency portfolio conversion – Part 1

In the third part of our series, we’ll start converting our PSD template to an awesome HTML5/CSS3 website. We’ll build the Agency’s Header, Hero area, Services, Portfolio section and learn a little bit about LESS pre-processor.
Read article or View demo

Photoshop to HTML: The Agency portfolio conversion – Part 2

In the last part of our series, we’ll finish building our website: CTA section, About us, Testimonials, Blog section, Contact area and Footer. We’ll also create the responsive media queries and our custom JavaScript.
Read article or View demo

Tags: , , , ,

Gabriel Neagu

Gabriel Neagu

I'm a developer from Bucharest, Romania passionate about design and clean code. In my free time I enjoy playing guitar.

Follow Gabriel:

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *