If you are interested in getting started today with SmugMug, use the SmugMug Coupon of “WEDDINGGIG” to save 20% off ALL their packages. That will save you money on an already affordable product. You’ll love it! Which package should you get? I suggest either of the SmugMug Pro packages because I think you’ll end up using all the features. If you wanna sell your photos and make some money, be sure to get the SmugMug Pro Business account.SmugMug Coupon
Creating my photography website has been one of the best decisions I have ever made for my business. Ever.
Since creating ThePupil.ca in 2005:
- I have had a “home” for my images (backed-up, secure, and on display to the world)
- I am able to direct friends, family (and eventually clients) to my photography website for them to experience my photos the way I want them to be experienced (ad free and without facebook clutter!)
- I was able to sell my first prints – which lead to my second sale, and my third and the eventual launch of my part-time photography business.
- I have a website to make client images available for viewing, sharing, and purchasing prints and other products – for profit.
- I have become more confident in my photography. It has been the perfect stepping stone to conquering my fears about what I can product and how I can offer my services to clients.
As a part-time business owner, my website is my storefront. It’s where people find out that I exist, and that I offer a valuable service. It’s also where they decide if they want to hire me — or not.
It’s incredible, and I get a lot of emails from people that either love my photos, love my website, or both. And that is so cool.
Do you really need me to convince you any further? Now is the time to build your website and this post is here to help you make it happen. Now about this tutorial…
Course Requirements:
Nadda, Zip, Zilch — You don’t need know ANYTHING about web design or website creation to complete this course. Yippee!
OK, I’m Ready to Take the Course. Let’s Do This!
Certainly, just follow me…
Can I See What My Final Website Will Look Like?
Sure! Check out the demo site – www.johnnywalkerphotography.smugmug.com (it’s a fake site, clearly) 
All right. Let’s get started!
Step 1: Sign Up With SmugMug and Upload Our First Gallery
In this video, we’ll create our SmugMug account (if you haven’t done so already), and create our first gallery – filling it with beautiful images.
- SmugMug (20% off, 14 day free trial)
- www.johnnywalkerphotography.smugmug.com (demo site)
Step 2: Tweak Our Gallery Settings
In this video, I show you how I tweak my gallery settings. Spending the time to get these settings “right” is worth the effort. Though SmugMug makes it pretty darn easy to change settings on multiple galleries should you want to later on down the road.
Step 3: Upload a Few More Galleries
Step 3 is really straight forward. We’re going to simply upload a few more galleries to help fill out our site (so we’ll have a wide variety of great images to choose from for when we create our “Portfolio” in step 5). I’ll also show you how to use the “Quick Settings” feature in SmugMug.
Step 4: Customizing Our SmugMug Website
In Step 4 we get to have some fun while we customize the look and feel of our website using SmugMug’s Easy Customizer. It’s what you’ve been waiting for I know! This section is broken up into two videos – for easy digestion.
Using SmugMug’s Easy Customizer tool we’ll make the following changes to your website:
- Add a banner in our footer
- Change the colors of the background
- Chang the colors and fonts for the text
- Add a favicon and description for browsers
- Create a custom “right-click” protection message to lock this puppy down
- Create a navigation bar
- Download the Favicon Image
- The Easy Way to Create Your Website Banner (blog post w/ video tutorial)
Step 5: Create Our Portfolio Gallery
Our Portfolio Gallery is very important. The link to the gallery will be on the navigation bar and it’ll be one of our most visited pages on our website. We’ll want to show off our best images – helping to sell our style to vistors who might be thinking about about hiring us for our mad photography skillz.
There is a serious ninja trick to populate our great images into this gallery – so don’t skip this video!
Step 6: Create Our Homepage Slideshow
In this step, I’ll show you how to create a really nice looking slideshow on your homepage using SmugMug’s built-in slideshow creator.
Step 7: Create Our “Work With Me” Page
In this step, we’ll create a special page on our website which will provide information about you, the photographer, your services, and client testimonials.
Step 8: Final Customization Tweaks
In Step 8 I’ll show you how to make some final customization tweaks to complete the design of your website.
- Use the “Advanced Site-wide Custimization” tool in smugmug to do some CSS coding to make some final changes to your site.
- Copy and paste the code below to make the final changes.
- IMPORTANT – Remember to change xxxxxx below with the gallery code for your own “Work With Me” page. The gallery code is the first set of numbers that come after the gallery name in the browser address bar. As an example, the address for my page is - http://johnnywalkerphotography.smugmug.com/Professional/Work-With-Me/20032763_MbQfT6. So I would replace the xxxxxx below with 20032763. Yours will be a different set of numbers for your Work With Me page.
/* Hide breadcrumbs when not logged in */
.notLoggedIn #breadCrumbTrail {display: none;}/* Hide pageNavigation, Slideshow button, and album navigation for Work With Me gallery */
.gallery_xxxxxx .pageNav {visibility:hidden;}
.gallery_xxxxxx #slideshowButton {display:none;}
.gallery_xxxxxx #albumNav_top {display:none;}/*Move entire website down the page 50 px*/
#bodyWrapper {padding: 50px;}/*Change color of H2 (titles for Work With Me Page) to blue*/
H2 {color: #1963AA; !important;}
- Get your own custom domain name (www.mynamephotography.com instead of www.mynamephotography.smugmug.com) at namespro.ca (yes, they sell .com’s as well as .ca’s and .net’s, etc.).
Bonus Step: The Zen of Pricing Our Photos in SmugMug
In this bonus video, I show you how to simplify the pricing options for both you and your clients to maximize sanity and profits.
- Zen of Pricing Your Photos in SmugMug (blog post)
I truly hope you enjoyed this tutorial. I spent over 30 hours putting this tutorial together for you and I know it’ll help you fast-track your way to a successful website.
If it has helped you in any way, please do me a favor and let me know in the comments section below and also share this tutorial using the social media buttons at the side of this post. Thank you!!
Cheers, and I’ll see you and your website on the world wide web very soon!
|
Share the Love
|
Get Free Updates
|
Hahahaha Scrath that… I just found it right in front of my face, sorry
Scratch that I just found it right in nfront of my nose Hahahaha
Sorry
@ChrisBradshaw
I get asked where that banner tutorial is all the time. Clearly I haven’t done a good enough job to make it clear.
Glad you’re enjoying the tutorials Chris.
Ok I’m getting a bit confused and this now doesn’t seem like the most user friendly system in terms of galleries!?!?!
I’m tying myself in knots… Am I missing something???
Basically what I want to be able to do is have the one nav tab for clients that then leads them to their galleries why on this site is that such a hard thing to achieve???
The Nav Tab you set does not open a new page that then displays galleries, instead it uses a gallery URL which just complicates matters because then all settings of sub galleries are set by the Original, catagories and titles and names all start to become a jumble.
Heres what I’m trying to achieve so you get a better idea:
Ive covered an Equine event (Dressage Test) multiple riders = Multiple clients.
Basically what I would envisage would be clients visiting my page clicking on the tab for Client galleries, a page opening displaying thumbnails with the persons name as the title, they find their name, they open their gallery!
Or To organise different groups of clients, the event/shoot name being displayed with thumb, they click on that and that then opens that events photo galleries or single set.
I just dont seem to be able to arrive at anything like this.
What am I missing??
Hi Ryan,
It’s a great work that you have done! Really, Thank you! I have used Smugmug now for two years and felt that my page looks boring. I do the photos just as hobby anyway, but still. Maby I’m also too lazy to search, test and read all the manuals (like most people) but now I just spent one evening “pausing” Your videos, changed the front page and Info – already feel beeing quite satisfied. Just started with big “clean up” to through out older photos with not so good quality and now over all refreshment will be like cherry on a pie
Thanks again!
http://gerlinkess.smugmug.com/
Hi Gerlin,
Your site is look really good. Well done. I’m glad the video tutorial helped you out.
Ryan,
I am sure you hear this all the time but you ROCK!!!! Holy cow I cannot tell you how thankful I am. You really helped me ~
Thank you again,
Charlene
Hi Charlene — you are very welcome. I’m happy the tutorials helped you out with your site.
Ryan!!
My Smugmug site was SO ugly! Yuck! Black-red-cheap-ugh! The tutorial was great. My Smugmug site is so much better.
Thank you thank you thank you.
Great job!
Cheers–
Debby
Hi Debby — I’m happy I was able to help you out. Thanks so much for taking the time to write.
I tried putting only these lines of CSS code into the Advanced Setting box:
/* Hide breadcrumbs when not logged in */
.notLoggedIn #breadCrumbTrail {display: none;}
/* Hide pageNavigation, Slideshow button, and album navigation for Work With Me gallery */
.gallery_xxxxxx .pageNav {visibility:hidden;}
.gallery_xxxxxx #slideshowButton {display:none;}
.gallery_xxxxxx #albumNav_top {display:none;}
I added the number of the gallery number where the x are located. I then pressed the Update button and was immediately logged out and the code was not saved in the box when I logged back in. What am I doing wrong?
Hi Philip,
Sorry you’re having difficulties. This is the first I’ve heard of this problem, so I’m a bit stumped.
Could you please send me:
1. the url to the page that you’re trying to apply the CSS code to, and
2. the exact code that you tried using (including the numbers where the xxxxxx goes).
And just to confirm — you’ve been following my tutorial videos, right?
Here is the page I’m trying to fix:
http://www.philipvenablephotography.com/Other/About-Me/28821509_2mSvWC
Here is the code I am trying to input into the CSS box in the Advanced Site-Wide Customisation page. I followed your video to the letter.
/* Hide breadcrumbs when not logged in */
.notLoggedIn #breadCrumbTrail {display: none;}
/* Hide pageNavigation, Slideshow button, and album navigation for Work With Me gallery */
.gallery_28821509 .pageNav {visibility:hidden;}
.gallery_28821509 #slideshowButton {display:none;}
.gallery_28821509 #albumNav_top {display:none;}
I sent you an email Philip. I’ll try to help you out “off-line”.
One issue:
On my equivalent of your ‘Work with Me’ page, I cannot remove the slideshow button even though I used the CSS code above – gallery_xxxxxx #slideshowButton {display:none;}. Although its gone when I preview my changes in Easy Customizer, when I publish it there it is. Any suggestions?
Thanx in advance!
Hi John,
This is the second CSS question in an hour after never really having any CSS questions from the users of this tutorial. Therefore, I’m thinking this might be a SmugMug thing…and nothing you or I are doing wrong. If you’re following the instructions correctly, it should work just fine.
I’ll send a message to SmugMug and see if I can get some answers from their end.
Stay tuned…
Ryan
I talked to SmugMug. They don’t think they are having any problems……so could you send me a link to your page and a copy of the exact code you are trying to use?
And I assume you’re watching the tutorial videos and following all the instructions.
Ryan,
Thank you so much for the work you put into the tutorials! You are awesome! It totally help me pull together the loose ends and clean up my site. I just launched it http://www.rosiefowlerphotgraphy.com and had a great response. I can’t imagine how long it would have taken without the help of your tutorials. I will definitely share your link with fellow photogs! I even got an offer to shoot my first wedding the day after launching.
Cheers!
Rosie
http://www.rosiefowlerphotography.com haha! Typing too fast!
Hi Rosie
- You are very welcome.
- No, YOU are awesome.
- I’m glad the tutorial videos helped you out.
- Congrats! Your site looks great!! Your portraits are gorgeous…
- The videos took a while. A labour of love. And it was my pleasure.
- Thanks for sharing SmugMug and my tutorial with your fellow photogs! That’s sweet.
- Congrats again! Your first wedding shoot….that’s huge. I’m sure you’ll rock it!
All the best,
Ryan
Ryan,
You’re more than amazing!!! I’ve had SmugMug for several years and I haven’t been able to figure out how to get rid of my ugly front page. Thanks so much for the amazing tutorials!! I don’t use SmugMug for the normal reason most people do….it’s just easy for me to upload all of my photos quickly and without a lot of hassle. Trying to get help, since I’m not a “photographer” has been challenging, to say the least. Thanks again!! Now if only you would do a tutorial on how to do a FAQ’s page, I’d be one happy camper. Lol!
Cheers!
Hi there!
I’m glad the tutorial videos helped you out. Several years is a long time to live without a site you enjoy looking at.
I would love to do a tutorial on setting up an FAQ page. Do you have an example of one you like?
Cheers
Ryan
Ryan
THANK YOU, THANK YOU, THANK YOU…..
I just finished my website following your instructions and with my tweeks. I’m very happy. It would have been hell without your guidance. You are the BEST….
Dave and Phyllis
Hi Dave and Phyllis,
You’re VERY WELCOME!
I’m glad the tutorial helped you out.
I think your site looks FANTASTIC. The background colour and your header is really really nice.
Did you create the header yourselves? Or did you hire someone to create it for you?
Ryan
I wanted to thank you for all of your tutorials I never would of gotten my site up without them. I do need some help I wanted to add a CONTACT button or link. I wanted a place for customers or potential clients a place to enter their name, address, phone number and questions for lining up possible jobs. Can you refer me to the process to set this up?
Thank you
Jo Haigwood
Hi Jo – I’m glad you found the tutorial helpful.
For a contact button or link there are a few options. I am planning to create a new tutorial video to show people how to do this stuff….but in the mean time, the quickest way is to add a “Contact Me” link to your navigation bar using the Easy Customizer. Then instead of a regular hyperlink, you use this: mailto:someone@example.com
When someone clicks on the Contact Me link, their native email program will open up (ex. Outlook) and your email will be auto-populated in the “to:” field.
There is a better way to do it – which I’ll share in my video. But for now, I hope that helps.
Ryan, thanks so much for this tutorial. I’ve been through most of it so far and it’s been absolutely brilliant because I was not having much luck getting setup the way I wanted to to start with. Your layout is a perfect building block, in fact I can’t think of anything I need to change.
I’m so very grateful for your efforts putting together this tutorial.
Regards
Colin
Hi Colin – I’m glad the tutorial was helpful. Your site looks great! You take some fantastic portraits. I especially like this one – http://www.flickr.com/photos/strainz/8684795202/
Well done. And thanks for taking the time to write a comment on this page.
Hi Ryan,
Many thanks for taking the time to make the videos, they were excellent. When I uploaded a wedding to my previous gallery host, I used to split up the wedding into Bride Prep, Groom Prep etc, I am trying to figure out how can I can do this without going to the extra expense of buying the Business edition and creating an event. Do you have any ideas? I’m going round in circles trying to get my head around it.
Thanks again,
Ross
Hi Ross,
You are very welcome for the tutorial. I’m glad you enjoyed them.
To have one wedding split up into segments – I think you’re right. Your best bet is to use the events feature that’s available with a Business account.
The only other option I can think of would be to have the entire wedding in one album. Then you can simply send out that album link to your clients. You could do this with a Portfolio account.
Hope that helps!
Ryan,
Your tutorial has been a god-send.Your steps are concise but very effective and informative. It has saved me many many hours of trial-and-error. As an enthusiastic amateur, a SmugMug website gives me a central location to store and share my photos with friends. I do not feel I am in any position to think of selling my photos at this point, but you certainly give me the incentive to continue to improve. One question I have is there any way to increase the size of the photos for the slide show window for the Home Page? Increasing the window from the default of 500 only makes the window larger, but not the photos. A slightly larger size would make portrait-orientation photos more dramatic.
Thanks for all your hard work and inspiring others.
Hi Carl,
Thanks so much for the kind words. I’m so glad the tutorial was helpful.
I got my SmugMug site before I even thought of earning money from my photography passion. But once I had the site up and running, it was really easy (and tempting) to earn some extra income — first by selling prints online, and then by offering my services as a family photographer. Many people don’t want to turn their hobby into a job — but I think I’ve found a nice balance by keeping my photography business part-time.
Anyways….
Sorry you’re having difficulties with the homepage slideshow. I’m not exactly sure how to fix it….but I did find this resource for you that you might find helpful. http://help.smugmug.com/customer/portal/articles/93259#slideshow
Let me know if there is anything else I can do for you.