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.
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