Pimp my ProSite Portfolio

Pimp my ProSite Portfolio

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

 

UseFonts

 

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

typekiteditor

  • Click on “Embed Code” at the top to display the “JavaScript code” pop-up. 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.

typekitdomains

  • 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:

globalfont

 

Animated thumbnails on Roll-over

As I was touring with Rufus and Jason, we discovered a beautiful ProSite with animated covers: http://www.band-originale.com/120526/work

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.

smart2

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.

cover

  • Then you get two tabs: Regular and Rollover. Upload the Animated GIF in the Rollover tab.

Custom CSS

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.

In Chrome, open the developer tools and select an item. Here, I can play with the project-image CSS class.

In Chrome, open the developer tools and select an item. Here, I can play with the project-image CSS class.

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

Additional tips

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 ?

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

1 Comment

  1. Can you create the site in Prosite, and then, instead of publishing and paying for hosting and everything with Prosite, just copy the source code and upload the site to another hosting service?

Trackbacks/Pingbacks

  1. My top tips to create your own Behance ProSite portfolio | Creative blog by Adobe - […] Originally posted on Creative Droplets […]

Submit a Comment

Your email address will not be published. Required fields are marked *