Designing a Clean B & W Photography Website
What We Are Set To Do
In this tutorial you’ll learn how to build a photography website either to showcase your portfolio or build a gallery of your own. While other sites provide you with an easy way to share your pictures with friends and fun ways to place your photos online there is no better way to showcase your personal work in an unique way than with our photography website builder.
Website Style & Navigation
We’ll be focusing on making an easy to navigate site were you can showcase any kind of work that you need adapting it to your personal needs and style. This is how your website could look at the end, keep in mind this is just our site and what you can do with Breezi is limitless. Breezi lets you build a one page site where you can show your work with no problems. If you are a Photographer or part of a Photography Studio there is no doubt that not only does Breezi surpass file sharing and picture bucket websites, but it also provides a way of adding style and unique view to your photography site.
Click HERE to view actual website!
This tutorial will be divided into a few sections and videos so you can easily follow trough it, if you have any questions re check the images and see the videos again, full process is shown over there.
You an download all files used y clicking on this button below. Feel free to use them and upload your own.
Sections are going to be:
- Home & Intro
- Projects and Gallery
- Inspiration and Contact
- Sticky Footer
Home and Intro
Having a representative homepage and introduction is really important. I’m going to show you the process by creating a simple landing page that can show your visitors a glimpse of your style, brand and personality. Below you’ll see how our two sections will look like at the end.
Choose from one of our main pre design layouts, first go to Breezi.com and click on the Sign Up! Button, an array of layouts will show up, select the one shown on our picture. Screen 1 Indicates the button, Screen 2 shows the layouts.
Block text to keep images separated
Replace background by clicking on the background dot show in the picture on the upper left corner and then checkign the box for background image and clicking edit, scroll down to the proper background and tried other or upload your own by using the custom image button at the lower right corner.
Replace image by double clicking on it, upload your own logo or use our on as a placeholder.
Add a Text App at the top of your logo and place the name of your page there. Add also a Text App at the bottom of the logo and place information there, we have placed just a brief paragraph about our page. This are the fonts used on the text. Make sure you check spacing and size besides font type used.
- Add a border for the text app on the bottom of the Logo. Click on the dot an use this values. Uncheck boxes for borders on the left, right and bottom and change border type, also, maintain thickness to one, make sure the color of the border does not contrast too much with background used. Click on the color box and choose other colors.
We have completed the first section of our site, now we need to add a little bit of info on what our website theme is about. We are using Eadweard Muybridge as a theme since he is one of the precursor of Silent Cinema. Click on its name to see info about him and Tesseract, wich is a film that “draws a line between photographer Eadweard Muybridge’s obsession with photographing movement and his act of jealous murder in 1873″. Now we need to add a block, check the video for step by step instructions and see images for detailed explanation. We’ll start by adding a block. Add a block at the bottom of the current one, we are gonna place the introduction information about the name of your page. To do this hover over the checkered space area on the right side of the editot and look for the button with the plus symbol. you’re gonna see a green overlay showing you where the block is gonna be added and a tooltip with the label saying “Add Block”
On this section we are going to add background as we did before. Use background dot to give top and bottom spacing. We are going to add a text app with the name of the section and another one under this one with information about the section. For illustrative purposes we are adding also an app on the right side of the second text app. Do this after splitting the column that the text app is on. Check the next image to see how to do it. Replace default image with the image from our zip file or upload your own.
Highlighting the Image Gallery
This is the main section and the main purpose of the site. Showcase your work in a stylish way and assure full visibility of your work with the sue of thumbnails. We are going to learn how to set up a cool gallery by the use of thumbnails and how we can create a displayable picture once this is clicked. Check images and check our video tutorial. Add another block under the last one for the next section and replace it’s background too. Place a text app with the name of your section there and another one under this one but on another section with information about the section itself. Split the section into two columns, do this by hovering over the line and hitting on the split column button with the plus symbol. Green overlay indicates how column will be splitted.
The Main App used here is the Image Gallery. We are going to show you how to handle properly our recently modified version of the Image Gallery to create a simple but cool way to show your work. Click on THIS link to learn more about the app itself. Install an image gallery on a new section under the last one and remove borders. Do this by clicking on the thumbnail dot. You can see this dot on the image with a white arrow. Once this is done set Corner Radius to the maximum and uncheck the border box to remove them. Play with other options until you feel satisfied. This is how the thumbnails of your image gallery are going to look like.
Once styling is done for the thumbnails we have to resize them, Each one of the thumbnails will have the same size. What we have to do will be to hover over the thumbnail and wait for the resizer corner to show. You can do this resize the thumbnails by grabbing the resizer corner shown on the top left picture. When you are resizing a blue overlay will show showing you the size of the thumbnail and the percentage of the image that you are using. Under both pictures you-ll see how to add more entries if you need them.
Double click on one of the thumbnails to open the Image Gallery Slide. On this slide you can edit the images on a more organized way. Use the images tab to check all images on that gallery and click on the Edit Image Button to replace current image and its crop area. On the next picture you will see how the two different states of the Image Gallery work.
Once you click on the Edit Image Button you’ll see several things. Replace the default iamge with a proper one and then make sure you leave the thumb image crop area the same as we have before. Using a square thumbnail over here and a corner radius at it’s maximum value on the thumbnail dot will allow the thumbnails to look as circles. Click on the Main Tab and click on the Use Full button. This is how much of the image will look on your actual site once your thumbnail is clicked.
Click on the Images Tab to show all images. Over here you can see all of your thumbnails and can manage to edit and delete all images. Replace all images from her.
Once all images have been replaced you can duplicate this app to add more galleries with the same style. Do this by hovering over the app and clicking on the 2X Button shown on the App Toolbar
Single click on one of the thumbnails to see how your picture will look like once clicked on the actual site. Double click the caption at the bottom to edit it. If you want no captions to show simply delete all text on the captions field.
Here is the place where you add your teammates and collaborators. Managing your layout is really simple and with Breezi Layout Builder there are no pixels you can’t control. We are going to show you how to create a simpel but useful layout with our Layout Builder, click HERE to learn more on this great feature. Check video for step by step instructions on how to create this section and see our images for details on fonts and sections. As we have done before add another block and replace background, Use this configuration for your columns. Use one section with only one columnd as we have done before for the name of th section. Two columns and one section for the information and three columns and one section for the Team. Place a Text App and a n Image App per column per Team member.
This are the fonts used on this section. They are slightly different to previous sections.
Inspiration & Contact
Over here we add a little bit of information on what inspires us to create this site and contact information. This is a pretty simple step, Check video for step by step instructions and see images for detail on section and column configuration and fonts used during the process. Add another section, replace backgrounds, install apps and style them as we have done before. This are the fonts used, make sure you check it’s size, space, color and line height.
Insert a slideshow app on a new section under the previous ones. Resize it to the maximum and add images by double clicking on them and replacing them as we did with the image gallery. Open the app dot and add spacing to the bottom, left, right and top. Add borders also.
As you see we also added a double border to our App, its really easy to do this, follow our video and check THIS small article on how to add borders really quick to any app and image on your site. Add one section on top of the current slideshow and one at the bottom. Insert a text app at the section and place an image on it, use the border images we have place on the folder.
Our Contact Information is important, and setting up links is a really easy but important task. Check the video to see how this is done step by step and see THIS small tutorial to get an overview on how links work.
This is a small but important process. We add a footer just lie we do with any other section but we use a really small trick and code to make that footer stick to your page. This add style and could end up being the main contact tab for your site. Check THIS main post on how to make this work and also check our video tutorial and the images we have placed for detail. Add another block, this is going to be the last one added. Replace background as we have done before, split it in five as it shows on the picture. On the middle one place a text app with an image of your logo. Install two Social icons Apps each one with links to your social network sites.
Now we have one important step. Making a Sticky Footer by the use of code may sound like a really complicated task but its by far one of the easiest that you’ll find for advance techniques, on THIS tutorial you can see How To Set a Sticky Footeron your website, check this images or the tutorial and see the video for step by step instructions. As you saw on the picture at the start of our tutorial, we can make the footer to stick at the bottom of your site. To do this use the code under this picture. First step is to open the More Tab at the bottom of the Shelf on the editor. Click on the URL/Custom Tracking Code section, a slide will open.
That’s All Folks!
Save your site, hit the Publish Button and logout from your site, enter your URL into a browser and see how your site looks like. Any questions you can always check other tutorials or come back to our videos. Thanks for reading and watching.