In this tutorial you will learn how to set up a professional online portfolio website. When I say professional I mean a real website, which will be available on the web for all your clients to see, with your own domain (www-address), your own design and your own email-solution.

Part 1. Getting started

If you are a photographer, or a designer of some kind, you have probable been looking for a solution to showcase your work online. You might have tried Flickr or any of the other Portfolio websites out there, but you do not feel that those sites are clean enough. This online portfolio is not going to be like that, this will be your own website.

The website that we will build

In this tutorial I will guide you through the process of setting up a portfolio website with Portfoliobox. We will build the site step, by step, and when we are done you will have a website with an impressive start page:

When your visitor enters your site he or she will see links to your galleries and your pages in a menu in the upper left corner of the screen. We will create 8 gallery pages (ordered into three categories: Architecture, Portraits and Nature) and one info page (called About & contacts) with my CV and my contact details:

The page About & contacts will contain my CV, a contact form and a picture of me. My strategy here is to “impress” my visitor with my galleries and then make it easy for them to contact me after they have read my CV and know a bit more about me.

I will have to types of gallery pages. All my galleries in the Architecture category will have a design where the images are listed like this:

All my other galleries will present the images as thumbnails:

As you might have noticed, all the pages have a set of Social media buttons. With these buttons my visitors can recommend my page on Flickr, Twitter, Facebook, LinkedIn and on other pages.

Finaly it is important to point out that my site will have a personal domain (www.gustavdegerman.com) and I will get my own email (g@gustavdegerman.com). The email will be set up on Google Apps, (which is the market leading email/docs/calender solutions).

 

Alright, lets get started!

As I said, this website will be created with Portfoliobox. Portfoliobox is a CMS/website creating tool built by two guys in Sweden (Europe).

On the Portfoliobox website (www.portfoliobox.net) you can choose between two packages: The free one, and the Pro one. In this tutorial we will choose the Pro package since we want to have our own domain, email, a contact page and more than 50 images.

1. Go to www.portfoliobox.net and 2. Click "Get this" for the Pro package:

Next, you are asked to fill in some information about yourself and the site. You need to provide a temporary www-address (in this case gustavdegerman.portfoliobox.net). This is the address you use when you try out the tool and when your site is in "the construction phase". When you are done and ready to launch, you can simply change your www-address to the premium www-address (in this case www.gustavdegerman.com).

Fill in all the information and click Start Now.

If everything was ok, you will be directed to a "Welcome screen" that says that your site was created. Click on the url of your site to open your website.

Now, the first thing that you will see is a Wizard. The purpose of this wizard is to give your new portfolio website a "kick-start". All the settings you choose here can later be changed from the admin-panel of your website:

Besides setting the color scheme of your site (1), choosing the design for your start page (2) and your galleries (4) you are asked to Upload a Start page picture (3), name your first gallery (5) and upload pictures to your first gallery (6). That might require some planing from your side.

A good recommendation is that you prepare yourself by organizing your pictures into galleries. Sketch up the structure of your site or arrange your pictures into folders on your computer so that you know approximately how you want to build your site.

I have organized my pictures into folders on my computer so that I know what I want to showcase on the site.

Since I did not now what background image to use on the start page I just chose a picture on myself. I called my first gallery "Shapes of Bangkok" (1) and selected the files (only JPG-files work) from that folder on my coputer (2), finaly I clicked finish and waited for the pictures to upload. 

It takes some time for the images to upload so I need to wait for approximately 1 minute, then I am redirected to the Start page of my new website! As I expected it has a big background image with my portait (which I will need to change later), the www-address (1) is gustavdegerman.portfoliobox.net (this was the temorary address I set up), the logo (2) says "Gustav Degerman" which I did choose as site title when I started my pro package and there is a link to my fist gallery (3) "Shapes of Bangkok".

As you can see there is a black box to the left of your screen (4) that says "Your admin". This box is only visable when you are loged in and it gives you quick access to your Admin panel (where you manage your site.)

 

Well, congratulation, your website is now created and available on the web. In the next tutorial I will show you have you create more galleries, and how you change the design on your website!

 

 

By The Portfoliobox Team : 2011-08-21