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 http://www.michaelchaize.com 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:

• Visit Typekit.com and login with your credentials.
• Browse the catalog of fonts and find one you’d like to use. For example, select Futura PT. Click on ‘+ Use fonts’.
• Open the ‘Web’ tab and ‘create a new kit’ (you can name it ‘Behance Prosite’).
• The Typekit editor will show up. On the left, select the weights you need (light, regular, bold…) and monitor the kit size at the bottom of the window. Note: Make sure to keep your kit size under 400k.
• Click on ‘Embed Code’ at the top to display the ‘JavaScript code’ pop-up. Then, copy the Typekit Kit ID (7 letters), you’ll need it later. Close the pop-up.
• Click on ‘Kit Settings’ to enter the domains where you’ll use this Typekit kit. In my case, I’ll use it on *.prosite.com , *.behance.net and *.michaelchaize.com – as I’ve associated a custom domain name with my ProSite portfolio. By default my ProSite URL was http://mchaize.prosite.com.
• Click on ‘Save Settings’ and ‘Publish’. You can now go back to Behance.

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

• In the ‘Settings’ tab, on the left, open the ‘Custom Type Integration (Typekit)’ section.
• You can now paste the Typekit kit ID (7 letters) and click on ‘Save’.
• All the fonts of your Typekit kit are now available in the ProSite admin UI menus. Here’s how it should look:

Tip #2: Add animated thumbnails on roll-over

If you go to http://www.band-originale.com/120526/work 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:

• To create an animated GIF from a short video, create a small video using the Adobe Media Encoder at the dimensions of your final thumbnail (190 x 112 pixels in my case).
• Once you get a .mov file, open it with Photoshop CC (that’s right… Photoshop can manage videos too! :)).
• In Photoshop CC, click on ‘File’ > ‘Save for the web’.
• Select GIF as the format, 256 colors. At the bottom, set the Looping options to ‘Forever’ and click ‘Save’.

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

• Open the ‘Design’ tab and the ‘Styles’ section.
• In the ‘Website Elements’, open the ‘Project Covers’ section and select ‘Change Cover Images’.
• Pick the cover you want to animate.
• Then you get two tabs: ‘Regular’ and ‘Rollover’. Upload the Animated GIF in the Rollover tab.

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: http://www.michaelchaize.com/

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