MDS Blog Hop - Using MDS to Build a Website

Hello and happy MDS blog hop day!
This week we're showing what we've been working on with MDS and this week is a pretty big one for me.

Back in the day (well, about 10 years ago anyway) I used to design websites as my day job. Hand designed and coded them. And even though my disease forced me to move on to another profession where I don't have to use my hands as much, I haven't forgotten how to do it and I still love to play around with creating them.

I needed a new design for my author website. I have a new book finished and my old website was very much about my old book. Which meant - time to freshen it up! The last site I designed in Photoshop, but this one I wanted to create with MDS. I write books for middle-grade readers (grades 4-8) so I wanted it to be a fun looking site and knew I could do that with My Digital Studio.

I started with an empty 12"x12" canvas and for the first page just did my black background with the Vintage Overlays set for the very light chalkboard scratches. Just change it to white and put the opacity down to about 5%. I exported that image out at the web size .jpg and sent it to my server to use as the background image. That way if the visitor to my site was using a big monitor and my homepage image wasn't big enough to fill the space it will fill the background with this background image to make the page look seamless.

Next I inserted another identical page (I LOVE that you can do this in MDS!) and used that already created background to build my home page on. I used a bunch of different fonts and some fun elements like the notebook paper (with torn edges) and some stamped doodles. Once I was done I exported it to a .jpg at the web size and sent it over to my website's server. Once it was there I used a free image map site (http://www.html-map.com) to map out all of my links in HTML, added the code to my .html file and sent that to the server too. Home page done. Yep, it really was that easy.

Next I created another identical page and kept a lot of the elements from my home page design for the header on the rest of the pages on the website. Here's a hint - while having a completely graphic website may LOOK great, search engines won't know what keywords to look for when they are adding your website to their searches. Why? Because the text in images can't be read by computers. Text has to be coded into the document for it to be read correctly. So for the header I just really moved some things around and then exported that for web the same as I did the other pages. I made an image map for the links like I did with the home page.

Finally, I wanted to create a header for my Facebook author page so I duplicated the website header, took out the links, added the ribbon back and straightened the picture frame. Exported it as web and added it to Facebook. I love that everything has such a cohesive look now!

Thank you so much for stopping by the blog today and I hope you continue hopping to the next blog, Jeanna's by using the 'next' button below. I'm sure she has something fabulous to share with you today!