Create a Photo Website with Adobe Portfolio

Do you want to create a professional looking photo website that allows you to share your work with the world? In this step-by-step guide I explain how to do precisely that using Adobe Portfolio.

Adobe Portfolio

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.

  1. Using your favourite browser navigate to https://portfolio.adobe.com. This will take you to the Adobe Portfolio homepage.
  2. 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.
The Adobe Portfolio sites page
The Adobe Portfolio sites page, showing that I have already published 1 site. You are allowed to create up to 5 sites.
  1. To create a new site click the [+] button. This will take you to the Adobe Portfolio themes page.
The Adobe Portfolio themes page
Adobe Portfolio offers 12 different themes which you can change at any time.
  1. 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’.

  1. (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’.
The Adobe Portfolio editor page
When a new site is created it has 2 pages, a Work page and a Contact page. I have renamed the Work page ‘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.

  1. Launch Adobe Lightroom and select the ‘Library’ module.
  2. 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.

  1. 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’.
A collection in Adobe Lightoom
A collection in Adobe Lightroom containing the 12 images from my ‘Lockdown’ series.

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.

  1. 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.
  2. 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.
A collection page in Adobe Portfolio
The collection page in Adobe Portfolio displaying the 12 images that were added to my Lockdown collection in Lightroom.

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.

  1. 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.
  2. 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.

The welcome page mockup
The mockup of the welcome page containing a title, subtitle, enter button and hero image.
  1. Change the title and subtitle as required
  2. 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.
  3. Change the button text to ‘Enter’ and then click the ‘Link To’ dropdown and select ‘Portfolio’.
  4. 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.
  5. 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.

The completed welcome page
The completed welcome page. I used a dark overlay to make the text stand out.

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.

  1. 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’.
  2. 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.

Mockup of the About page
This simple about page contains an image, a bio and a contact form.
  1. 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.
  2. Add a new text section below the image and write yourself a catchy biography!
  3. 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.

The completed About page
The finished ‘About’ page, complete with catchy biography!

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.

  1. 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.
  2. 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.

A mockup of the Photo Essays Page
A mockup of the design for the photo essays page. The design can be repeated as many times as necessary.
  1. Under the heading ‘Start building your page’ select ‘Text’ to add a new text section. Add a title and description.
  2. 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.
  3. 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.
  4. 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.
  5. Change the button text and set Link To ‘External URL’ specifying the URL of your photo essay in Adobe Spark.
The Photo Essays page
The Photo Essays page. Click the button will load the photo essay published using 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.

  1. 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.
  2. Click the [Done] button.
  3. Publish the site by clicking the [Publish Site] button in the bottom lefthand corner of the screen.
The published site
The finished site. Now you can share your work with the world!

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.

Buy Me a Coffee at ko-fi.com

15 thoughts on “Create a Photo Website with Adobe Portfolio”

    1. Hi Ian – unfortunately that is one of the drawbacks of Adobe Portfolio, it doesn’t have any eCommerce capability. For my ‘Monochrome Landscapes’ website I worked around that by linking to some of my images for sale on Fine Art America. My normal site is built on WordPress and I use the free WooCommerce plugin to sell my prints.

  1. Excellent! Thanks very much for this Chris, as well as the webinar. It was great “meeting” you! See you for the next one.

    1. Thank Miguel, it was great to finally meet up after all this time. I have a few ideas for future webinars, I’d be interested to here if you have any topics that you are particularly interested in.

  2. Hello Chris. Really enjoyed the demo tonight, and definately food for thought if I go full down the Adobe route. Most impressed that the technology held up and you timed your activities to perfection. All the best fella.

    1. Thanks Huw – the obvious drawback with Adobe Portfolio is that it doesn’t support eCommerce so you aren’t able to sell prints. This is the main reason that I use WordPress, and then I have 2 separate sites, once for my main website (and this blog) and another for my Shop. I use the WooCommerce plugin, which is completely free and provides all the functionality that you need to sell products online.

  3. Thanks for taking the time to document this Chris. I’ve been using Blogger for fourteen years and have been increasingly frustrated with the lack of development on that platform and my inability to control the size of my images among other things. I am a CC user but not Lightroom (only Photoshop) so while this seems a good option to keep my retired brain busy I’ll have to see how I can get my images there without using Lightroom. Cheers Chris H

    1. Hi Chris – if you are not using Lightroom you can just upload your images separately. When you create a custom page you have the option of adding a photo grid which gives you the option of connecting to a Lightroom collection or uploading the images from your hard drive. Hope that helps.

  4. Thanks for the demonstration last night Chris. Very clear and concise. Thanks also for sharing the ‘instructions’ via this blog. Kind Regards Paul F.

    1. Thanks Paul, I hope the session was useful. If you do decide to create your own photo website using Adobe Portfolio please send me the link, I would love to see your images.

  5. Hi Chris
    Thank you for sending this document through it will be a great help.
    I enjoyed the webinair last night and look forward to joining you and everyone for the next one.
    Thanks again
    Stay safe

    1. Hi Tim, I am so pleased that you enjoyed the webinar. Do you think that you will be creating your own photo website using Adobe Portfolio. If you do I would love to see it.

Leave a Reply

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