Adobe Portfolio is a platform for creating and hosting photography websites.
It comes as part of an Adobe Creative Cloud subscription and allows you to create slick, professional looking photo websites quickly and easily.
In this walk through I will demonstrate how to:
- Create a new site
- Create a new collection in Adobe Lightroom and it sync with the cloud
- Add a collection to your site
- Create a welcome page
- Create an about page with a contact form
- Link to a photo essay created with Adobe Spark (optional)
- Set a custom URL and publish the site
Step 1: Create a New Site
The first step is to navigate to Adobe Portfolio and to create a new site.
- Using your favourite browser navigate to https://portfolio.adobe.com. This will take you to the Adobe Portfolio homepage.
- If you are already logged in to Adobe click the [Edit Your Sites] button, otherwise login using your Adobe username and password. Either way this will take you to the Adobe Portfolio sites page.
- To create a new site click the [+] button. This will take you to the Adobe Portfolio themes page.
- Select a theme by clicking on it. In this overview I shall be using the Mercedes theme. To continue click the [Use this theme] button in the top right had corner of the page. This will create your new site and take you to the Adobe Portfolio site editor.
When a new site is created it has 2 pages. The first is the Work page which is used to present multiple collections of your images. The second is the Contact page which contains a contact form. I don’t like the term ‘Work’ so I am going to change it to ‘Portfolio’.
- (Optional) On the menu on the lefthand side click the [Pages] link under the heading ‘Essentials’. Click the settings dropdown (the small cog next to the Work page) and select ‘Change Collection Title’. Change this to ‘Portfolio’ and hit the [Enter] key. In the same way change the collection URL to ‘portfolio’.
Step 2: Create a Collection
Now that we have created our new site we can start to add our images to it. The next step is to create a collection in Lightroom and sync it with the cloud.
- Launch Adobe Lightroom and select the ‘Library’ module.
- Create a new collection by clicking the [+] dropdown on the ‘Collections’ panel and selecting ‘Create Collection…’. Give the new collection a name, check the options ‘Set as target collection’ and ‘Sync with Lightroom’ and click the [Create] button.
This will create an empty collection that is automatically sync’d with the cloud.
- To add images to the collection goto the ‘Folders’ panel. Right click on the image that you want to add to the collection and select ‘Add to Target Collection’.
Step 3: Add a Collection Page
Once we have sync’d a collection with the cloud we are ready to start adding images to our site. The next step is add a collection page to our portfolio.
- To add a new page click the [+] button the ‘Portfolio’ page and select ‘Lightroom Album’ on the ‘Add Page’ dialogue. This will display the ‘Import from Lightroom’ page.
- Select the album that you would like to import and click the [Import Selected] button in the bottom righthand corner of the screen. This will add a new page to the site displaying all of the images in the collection.
You can add many collections to your Adobe Portfolio site. Just repeat steps 2 and 3 as often as necessary.
Step 4: Add a Welcome Page
Adobe Portfolio allows us to create slick looking welcome pages that are displayed when someone visits your site. Adding a welcome page gives our site a more ‘professional’ appearance.
- Click the [+] button in the top lefthand corner of the screen and select ‘Welcome Page’ on the ‘Add Page’ dialogue to create a new fullscreen landing page.
- Give the page the title ‘Home’ and check ‘Make this my homepage’. Click the [Create Page] button.
Adobe Portfolio makes it easy to create professional looking welcome pages. The following steps will demonstrate how to create a welcome page consisting of a title, subtitle, ‘Enter’ button and fullscreen hero image.
By default a welcome page has a title, subtitle and a button. We simply need to edit these and add the hero image.
- Change the title and subtitle as required
- To edit the button properties click the [Edit] button (pencil icon) that appears to the lefthand side when you hover the mouse cursor over the button.
- Change the button text to ‘Enter’ and then click the ‘Link To’ dropdown and select ‘Portfolio’.
- To edit the page background properties click the [Edit] button (pencil icon) that appears to the lefthand side when you hover the mouse cursor over it.
- Click the [Upload] button and select an image from your hard drive.
Tip: Do not use too large an image on your welcome page otherwise your site will be slow to load, especially over slower connections. I recommend dimensions of 1,920 pixels wide by 1,080 pixels high, perfect for full HD monitors!
Tip: In order to make the text on the welcome page standout from the background I add a dark overlay. In the ‘Overlay’ section of the ‘Page background’ properties check ‘Include overlay color’, set the color to black and set the opacity to 50%. I then set the color of the title and subtitle to white.
Step 5: Create an About Page
Most photo websites will contain an ‘About’ page that contains key information about the photographer. The following steps show how to create one by editing the ‘Contact’ page that was generated automatically when the site was created.
- On the menu on the lefthand side click the [Pages] link under the heading ‘Essentials’. Click the settings dropdown (the small cog next to the Contact page) and select ‘Edit Page Title’. Change this to ‘About’ and hit the [Enter] key. In the same way edit the page URL so that it is ‘about’.
- Click ‘Contact’ on the navigation menu to navigate to the Contact page.
We are going to create a very simple about page. At the top will be a large image. Below the image will be some bio text and at the foot of the page will be a contact form.
- Add an image by clicking the [+] button that appears when you hover the mouse cursor over the top edge of the contact form. Click ‘Image’ and select an image from your hard drive.
- Add a new text section below the image and write yourself a catchy biography!
- Add another new text section above the contact form, set the text to ‘Contact Me…’ and format the text as a subheader.
Note: The address that emails will be sent to will default to the email address registered to your Adobe account. You can change this in the contact form settings.
Step 6: Add a Photo Essays Page (Optional)
Rather than just presenting my images in collections I also like to create photo essays.
As a landscape photographer it can be difficult to tell compelling stories with a single image. It if often far more effective to bring together multiple images that combine to tell a story about a particular location or area.
Adobe Spark (which also comes as part of a Creative Cloud subscription) allows you to easy create beautiful photo essays. Adobe Spark is out of scope for this tutorial but you can see my photo essay about Lockdown here.
- Click the [+] button in the top lefthand corner of the screen and select ‘Page’ on the ‘Add Page’ dialogue to create a new custom page.
- Give the page the title ‘Photo Essays’ and select ‘Navigation’ from the ‘Destination’ dropdown. Click the [Create Page] button to create the new page.
Tip: When adding a page Adobe Portfolio always places it first in the navigation menu. On the menu on the lefthand side click the [Pages] link under the heading ‘Essentials’. The pages can be reordered by dragging them to a new position. I move the ‘Photo Essays’ page so that it appears directly after the ‘Portfolio’ page.
Adobe Portfolio makes it easy to add various different types of content to a page. Text, images, buttons, even video and audio clips. The next steps will demonstrate how to create a simple layout with text on the left, an image on the right and a button to view the photo essay at the bottom.
- Under the heading ‘Start building your page’ select ‘Text’ to add a new text section. Add a title and description.
- Add an image to the right of the text by clicking the [+] button that appears when you hover the mouse cursor over the righthand edge of the text section. Click ‘Lightroom’, select and image from the ‘Import from Lightroom’ page and click the [Import Selected] button in the bottom righthand corner.
- Add a button below the text and image by clicking the [+] button that appears when you hover the mouse cursor over the bottom edge of the text/image section.
- To edit the button properties click the [Edit] button (pencil icon) that appears to the lefthand side when you hover the mouse cursor over the button section.
- Change the button text and set Link To ‘External URL’ specifying the URL of your photo essay in Adobe Spark.
Step 7: Publish the Site
We are now ready to share our new site with the world. The final step is to set our domain name and to publish our photo website.
- On the menu on the lefthand side click the [Settings] link under the heading ‘Essentials’. Under the [Domain Name] tab change the ‘Site Subdomain’. This sets the URL used to access your site; the format is <subdomain>.myportfolio.com. (I use the subdomain ‘chrissale’ so the address of my site is chrissale.myportfolio.com). Click the apply button. A message will appear in the top righthand corner of the screen to confirm that you have successfully changed the subdomain.
- Click the [Done] button.
- Publish the site by clicking the [Publish Site] button in the bottom lefthand corner of the screen.
There you go. Wasn’t that easy!
We created a brand new photo website from scratch, sync’d it with a collection created in Lightroom, added a professional looking welcome page and set up an about page complete with contact for. We then set the subdomain (used to create our unique URL) and published our site for the world to see!
If you would like to see the site that I created using Adobe Portfolio to showcase my monochrome landscapes you can find it at https://chrissale.myportfolio.com.
Anyone needing help setting up their own photo website using Adobe Portfolio can book me for a 1-2-1 session over Skype.
If you enjoyed this article and found it useful please consider supporting me by buying me a coffee so that I can continue to create more content like this.