Graphic design is something I knew absolutely nothing about going into this. And with the exception of one lecture on html code during a computer science course I had to take while completing my BPhEd at Brock University, I know absolutely nothing about web design either.

I still don't know much, but I think the website's turned out pretty good though!

I owe a lot of that to Bandzoogle, who's user-friendly platform makes it really easy to renovate and redecorate the layout of the site itself. I'm a tweaker, I like to move things around ... alot... until I figure our exactly where I want everything to go. The templates they have are great, but I wanted a website that was totally unique, so having the option to use the Custom Style builder was a major selling point for me. Plus, you can still use advanced programming if you want to (I find my basic html knowledge useful for writing my newsletter which is a bit of a labrynth because it's written like a Choose Your Own Adventure novel (links and anchors take you to different parts of the document, as you so choose). I also owe a lot of thanks to Byron McQuay of OneDesign who is my blog guru. He has rescued me on a number of occasions from web disaster and has provided a lot of insight and suggestions for improving my blog and website in general.

The rest of the credit goes to Google. I did a lot of "how to ... " searches, watched some great videos, subscribed to some good newsletters (some are listed on my Resources for Indies Page) and read a ton of articles and forum posts. Even that isn't all that straight forward though, because some of that information is out of date (technology changes rapidly), a bunch of different people have different ideas on what is best and a lot of the terminology I didn't understand (more Google searches involved). It was mostly trial-and-error based, but I'm kind of glad it was. In using photoshop, I wasted a lot of time trying to figure out particular functions but I also discovered other uses of functions that I might not have been taught .. just by messing around with it and discovering things by accident.  

The most time consuming part of the design was the background graphic:

• Learned about graphic sizes and print quality and how to change them (This is important to know if you need high res pics for your EPK ... which you do  :)
• Learned about "Tiling" images so that your background image loads faster for your visitors (good for slower connections) then decided not to do that. The artist in me wanted one big image and was willing to sacrifice load time because my content loads fast anyway, so visitors will always have something to look at.
• Searched Google for ideas and Creative Commons for images to give me visual ideas that related to my "Pitch", like Charles Dickens (and the Victorian Era) & Salvador Dali, anything Celtic or pertaining to the East Coast of Canada (where I grew up) like waves, rocks and waterfalls.
• Brainstormed themes and sketched a visual map for how I wanted these images and ideas to flow together
• Learned what the different Creative Commons Licenses mean, so that I could make sure I was only using images with the author's permission and in the ways they have consented (copyright)
• Opened Photoshop Elements which came with my Wacom Pen & Touch Tablet (I heard they were good for graphic design, so I got it. It's AWESOME! Way easier to use than a mouse when you're trying to draw and simulate paint strokes)
• I looked at the sizes of the Bandzoogle templates to get an idea for how big I should make the image and decided to go with a width of 1400 pixels and a height of 730 pixels (it fit on my screen, so I thought that made sense. After I finished the graphic and showed it to my housemate with excitement, I learned that different sized monitors will display differently. Wish I had read this article first)
• Then it was time for the fun part! Figuring out how to create a surreal other-worldy picture using the creative commons images I had found (see the gallery below) and the general ideas I had sketched.
• I started with the image my mother the photographer took of me on the top of the house (the one I grew up in) while at was back home for my brother's graduation. I had gone home planning to do a shoot for the website, but I didn't know where we should do it or what it should be like. When we were taking the family photo (to go with the family Christmas cards) I looked up at the house and got the idea in my head that I should sit up there ... on a chair. Don't ask. I don't question my inspiration most of the time, so I have no answer :)
• Later, realizing that the idea made perfect sense because my website is my online 'home'base, I decided the roof should be positioned in the image in such a way that it would become the roof of the content on the page (in this case 300 pixels from the top of the page).
• From there I pieced together the creative commons images I had downloaded (and found new ones as I needed them) by resizing and overlapping each of the images.
• To make the images more dramatic and to give them a sense of unity in tone and texture, I used a number of effects: I used Diffuse Glow to give the images a 'heavenly' or other-worldy feel, emphasizing the lighter ethereal feelings in my music, while using High Pass (apparently not in the way it's intended, based on that video, haha) to accentuate the shadows in the images, representing the more intense and dark sides of my art and personality.
• Because I also wanted to use the tablet pen to draw and digitally paint on the images, I wanted some of the images to feel like they were already drawings. For this I used Ink Outlines. In the image of me on the roof, I used the Magnetic Lasso Tool to select just my shirt and Ink Outlined that, creating a little more continuity between images without having to adjust the entire picture of me.
• To blend the different pictures together, I used the "eraser" tool on the images that were above the one I needed to blend in. By using different brush sizes and shapes, as well as levels of opacity, I was able to control how much of the image below shows through. This makes it look like the two images are indeed one, not overlapped. The "clone stamp" tool was also very useful when I had to fill space or extend an image (like the siding on the house). For drawing I used a variety of different brush types (especially the basic brushes and dry media brushes), sizes and levels of opacity to have more control of the depth of the additions I was making to the images.
• I added text layers to include my name and pitch. The font is "Rosemary Roman" which I found for free on DaFont.Com. I put a "simple inner" shadow on the text and learned that you can't do that by just highlighting the text (like you would in Microsoft Word if you wanted to change the colour of a specific word). You need to select the entire text layer (on the right) and then the shadow options will become active on the tool bar above.
• Then I saved it as a Jpeg and saved the Photoshop document as well so that I could go back and move things around if I needed to

• First step: I selected "Custom Styles" and uploaded the custom graphic! Then set the background colour to white.
• Under "options", which is beside the thumbnail of your image in the control panel, I chose to have the image aligned in the top-center part of the page with no repeat (you would use this if you were tiling so that the image would appear all over the page, but I have just one big image so it wasn't necessary). I decided not to have the image scroll with the page and selected 'no' for that option That means that my background image stays still and the content moves up and down while someone scrolls along my website. If you select 'yes' for this option the image will also move with the content. Like most of this stuff, it's easier to understand once you try it and play around with it.
• Under "Page Layout" I made the "Top Margin" 438 px (that means the menu bar will be 438 pixels below the top of the page), checked the 'standard width' box and 'position'-ed it on the left.
• I chose not to put in a header, as the background image serves that purpose
• I chose the option to have the menu placed after (below) the header instead of the top of the page with 0px  padding (px = pixels & the more "padding", the taller the menu and more space between the menu buttons and the borders of the menu bar)
• I decided not to use a solid colour instead of an image as the background of the menu bar, but I could have done either. The colour I selected in Photoshop with the eye dropper tool. I copied the colour code (this shade of orange is #9c510f) and pasted that into the colour choice box in the Bandzoogle colour picker. Opacity set to 90%.
• The Menu Button spacing I set to 5 px (that's the distance between menu buttons) with font "Mailbomb" (a font that's in the Bandzoogle library) size 20 px
• I chose not to use custom background images for the buttons, but you can. There are a lot of things you can use custom images for in this builder.
• For the Sub Menu (aka drop down menu) I used 2 shades of grey colours from my background graphic and set the opacity to 100%. I used colour #333333 for a dark background & a lighter #525252 for when the visitor's mouse rolls over that button in the list. This gives it the effect of being highlighted and shows the visitor which page they will be selecting if they click the mouse. You can do the same thing with the font colour, but I decided one roll over option is enough for my page and set both the font and roll over colours to white (#ffffff) so that there would be no change to the font when the visitor hovers over that submenu button.
• Under "Content" I kept the padding at 0px because my menu bar is already pretty far down the screen, I didn't want the content of the page to be any lower (the padding in this section determines how far away your content is from the menu). I set the background to the same shade of white, but this time made the opacity 80% so that my background image still shows through a little bit when the visitor is scrolling.
• I chose Verdana (size 14px) for the content font because it is easy to read and is thin. I write a lot, as you can probably tell, so being able to fit more words in less space is important. For that same reason, I made the line spacing 0% (as close together as possible). Because the content font is on a white background I made the text colour black (#000000) and made the link colour the same orange that is in my menu background and background graphic (#9c510f) to make it easier for readers to recognize when a word is clickable.
• Under "Sub Headers" (not to be confused with sub menu, the sub headers are lines of text to indicate a new section in the actual content of your website, not in the drop down menu. I didn't use any padding for the sub headers, though you do have the option to use vertical and/or horizontal padding in this part (meaning you can decide how far from the side and/or top of the page your sub headers will appear (this does not change the position of your content).You can also choose to have a colour or custom background image for your sub headers, but I wanted mine to be completely transparent so I chose no image and turned off colour. I used the "MailBomb" font that is already in the Bandzoogle builder library. Because I didn't want the subheaders to be too distracting from the background graphic, I set the colour Black so that they would blend in with the rest of the text, but still create enough distinction at size 20px to create clear divisions of the content on the page.