My top tips to create your own Behance ProSite portfolio

Pimp your portfolio with Behance

Here’s something you might not be aware of: Adobe Creative Cloud members have a quick and intuitive way to publish and maintain a personal portfolio that syncs with Behance. Introducing ProSite.

Why does this matter? Well, as a Creative Cloud Evangelist, I get sent many portfolios from designers and photographers, but usually they add ‘oh BTW, that’s not up to date: it’s work from 2010’. Of course, as a creative professional, this isn’t the ideal situation if part of your job is now also being able to PR yourself and showing how you make your ideas happen.

The beauty of ProSite is that it lets you create a beautiful and customised portfolio, without coding! My ProSite URL is and I’m going to share some tips that I’ve used to improve the experience of my own portfolio.

Tip #1: Use Typekit fonts in ProSite

Creative Cloud members have a Typekit portfolio plan included in their subscription. This means that you can use the catalog of 900+ professional web fonts on your Behance ProSite portfolio. In mine, I’m using the classy Futura PT font. Here are the steps to choose a font on Typekit and use it in your ProSite portfolio:

On Behance, open your profile and the ProSite tab. Click on ‘Edit Your ProSite’. It will launch the admin UI of your ProSite portfolio.

Tip #2: Add animated thumbnails on roll-over

If you go to and look at the source code, you’ll notice that the page is loading an animated GIF. That’s so cool and so 1996 at the same time! I love it. Here is how you can reproduce this eye-catching effect:

Now that you have an animated GIF, go back to the ProSite admin UI.

Tip #3: Add custom CSS

If you want to tweak the CSS of your Behance ProSite portfolio, you can do so too! For example, I’ve added a simple ‘Zoom on rollover’ effect on my project covers:

To add some custom CSS properties, open the Design > HTML & CSS panel. To get the names of the selectors that you can use, open your ProSite in Chrome. Then, open your final ProSite (not the draft in your ProSite admin UI) and use the Developer tools to get the CSS class names.

You can use the magnifying lens tool to select an item in your page and look at the code to get the CSS selectors names. Here’s an example:

To add my animation on rollover (hover in CSS), I extend the project-image class:

Bonus: Additional tips

Display your last tweets. If you want the world to know what you’re up to on Twitter, just open the ‘Settings’ tab and connect ProSite to your Twitter account in the ‘Twitter’ section. You can then set the number of tweets you want to display. This feature is not available in all templates though: only the two-column and Modular layouts support a Twitter feed.

Add descriptions to your projects. By default, ProSite doesn’t display the descriptions of your projects. To display the information typed on Behance, open the Design > Styles > Projects panel. Then activate ‘Project Text & Dividers’ from ‘Network’.

Add cover loading effects. The first time you load my portfolio, you’ll see a nice ‘Fade In’ transition for the project covers. There are four different effects available. You can set them in Design > Website Elements > Cover Loading Effects.

Share your work on social media. You can also invite your visitors to share your work on social networks. In the ‘Settings’ panel, open the ‘Social Media Promotion’ section and select Pinterest, Twitter, Facebook and Google+ as a minimum. I also invite you to display the ‘Follow me on Behance’ button to make sure people can keep up with your work there.

Over to you

Have you ever used ProSite? What are your top tips? Feel free to share them with me on Twitter @mchaize or join the conversation at #MakeYourselfHappen.

Originally posted on Creative Droplets