Building a Portfolio Website for Art – Logo and Navigation Menu

In past posts in this portfolio website tutorial series we have covered creating a slideshow, setting up pages,  and creating a thumbnail gallery, bio and contact page.

In this tutorial, we continue where we left off last time, and focus on the logo and menu in the header section.

These are our past posts if this is your first time here:

1. Creating a Portfolio Website
2. Creating an Art Slideshow
3. Thumbnail Gallery Page
4. Bio and Contact Page

 

For first part of this tutorial, I will be using my name as the logo. But, you can easily include your own unique logo to the top of your portfolio website if you want.

 

Creating a Logo and Navigation Menu for a Portfolio Website

1. Login to your Webydo website. Click “Logo” and note the dimensions at the top. Notice that the container here is 160px width and 50px height. Change the width dimension to 270px.
   
   The word Logo now looks distorted, but don’t worry about that. We will be using this container to add a unique logo of our own.
   
   You can create the logo here in one of two ways – by using an image or text box.
   
   

2. Image Logo

   
   The logo for this website won’t be overly complicated. I will be simply creating a image file, with my name. Of course, if you already have a logo, you can upload your own, and adjust the container size accordingly.
   
   Open up Photoshop, Gimp or some other photo editing software.
   
   Create a new image, and set the dimensions the same size as the container above. Enter text inside the box and position it in the center. I used the Consolas font with a text size of 30pt, and font color #000000 (black), as above.
   
   Make sure the text has a transparent background. Then, name the image, and save it as a PNG file.
   
   
3. Now, return to Webydo and double click the Logo image. Find the image you created, and upload it. Click your new logo, and select the Stroke option in the properties panel. Enter black for the color and “1” for the stroke size.
   
   

4. Text Logo

   
   This is an alternate method for creating the logo without using an image.
   
   Select the logo, right click, and hit Cut. Select the Text box at the top, and click the lock icon, and enter the dimensions 270px width and 50px height. Hit the lock icon again to lock it.
   
   Drag the text box to the top, in the area where the logo once was. Double click the text area, choose Oswald for the font (at the top) and increase the text size to 36. Then, enter your name.
   
   Next, right click on the text box, and choose Repeat on all Pages.
   
   

5. Top Navigation Menu

   
   Next, we shall deal with the top navigation menu. Double click Home so that it appears like the image on the right. In the properties panel to the right, you can change the font to whatever you want. I chose Oswald, and increased the text size to 16. Notice that you only see the change in the other menu items.
   
   Click Rollover state, and select the same font and text size. Then do the same for Active State.
   
   Next, go through the normal and rollover states and make the text black by clicking the little square icon, right beside where you changed the font and text size.
   
   The next step is to click Fill in the properties panel, and select None for the color for the normal and rollover state.
   
   Active state: The active state is important to set, as it shows where we are on a site at any time. Click the active state tab. Under Font, choose white for the font (it maybe already set that way). Then, in the Fill category, choose black for the fill color.
   
   Choose the Stroke category in the properties panel, and select white (#ffffff) for the color and 1 for stroke. In the Rollover State, choose black for the color, and the same stroke size.
   
   (Check Edit states together to save some time for the above steps.)
   
   Check out my finished menu and logo right below. I still see some things which can be changed, but I will leave this for another time.
   
   
   
   The above steps are meant as a demonstration only, and to show how easy it is to change the font, stroke and fill properties in each of the states to create a unique menu of your own.
   
   How to remove the black bar. If you want to remove that thin bar right below the menu, select it first. Then, simply right-click and pick Cut. Notice that I have it removed above.

 

I hope this tutorial has been easy to understand. As I said before, the steps are meant to inspire you to create an original logo and menu of your own. If you need any help, please don’t hesitate to comment below.

You can also find assistance with these steps by going to Help in the top menu of the Webydo website builder, and selecting Video tutorials.