Moving on from where we left off, we’ll create the remaining site sections: CTA section, About us, Testimonials, Blog section, Contact area and Footer. We’ll also create the responsive media queries and our custom JavaScript. 7. CTA Section This section has a nice background from OnextraPixel, a short paragraph and CTA button. Step 1 – […]
Posts with tag: portfolio
Photoshop to HTML: The Agency portfolio conversion – Part 1
In the first part of this series, we learned how to design a modern agency portfolio in Photoshop. Now it’s time to convert the Photoshop design to a working HTML5/CSS3 website. We are also going to use a little bit of javascript to filter the portfolio items and add additional functionality to our site. To […]
Filterable portfolio with Shuffle.JS and Bootstrap 3
In this lesson I’ll show you how to build a basic responsive and filterable portfolio powered by Bootstrap 3 and Shuffle.JS. Shuffle.JS is a free alternative to the popular Isotope plugin. Final Result: Download source files View Demo Resources used Bootstrap 3 Shuffle.JS jQuery throttle / debounce pictures from Lorempixel pictures from Lorempicsum 1. Download […]
Create a design agency portfolio in Photoshop – Part 2
In this lesson we’ll continue where we left off in Part 1. To view the template, click this link. You can also directly download The Agency template. 7. About us section The next step in our design is creating the About us section. This section features 3 accordion style drop-downs and skill-bars used to visually […]
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 and we’ll also create a call to action banner using Adobe Photoshop CC. To keep the design consistent, we’ll use a grid system. The grid contains 12 […]
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 […]