Members of Adobe Creative Cloud can publish and maintain a personal portfolio thanks to ProSite. The portfolio content syncs with Behance. Every time you publish a new project on your Behance profile, you can decide to automatically add it to your official portfolio website. Your portfolio is always up-to-date, which is awesome. So many designers and photographers share with me the URL of their portfolios and add “oh BTW, it’s not up to date: it’s work from 2010”. The ProSite website lets you create a beautiful and customized portfolio, without coding!
My ProSite URL is: http://www.michaelchaize.com I’ll share with you some tips I’ve used on my ProSite to improve the experience.
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 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. Keep it under 400K.
- 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:
Animated thumbnails on Roll-over
If you 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 (yes… 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.
Web designers can tweak the CSS. 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. 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.
To add my animation on rollover (hover in CSS), I extend the project-image class:
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
You can also display your last tweets. 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: only the two-column and Modular layouts support a Twitter feed.
By default, ProSite doesn’t display the descriptions of your projects. To display the information typed on Behance, open the Design > Styles > Projects panel. Activate the “Project Text & Dividers” from Network.
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.
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.
Any more tips ?