
Get to the grind
We unlock the power of web design with a breakthrough Photoshop plug-in.
By: Allen M. Gottfried
Designing and programming websites has always been in my blood. I remember learning HTML techniques back in my technology classes in high school and learning the simple coding to make text blink. Well, we have come a long way from just blinking text and now with faster connection speeds and more users, the internet is the place to be.
Having a website is almost required these days if you want to promote yourself or sell products to the masses without spending tons on traditional advertising. The idea of designing a site in a program like Photoshop is pretty simple since many artists already use it and are familiar with the program. If you have no idea what you want your new site to look like you can simply logon to some of your favorite sites and get a basic idea of what your site should look like. One that is visually pleasing, easy to use and navigate but still informative is what you want.
Originally, the task of building a website was very time intensive requiring lines of programming code and individual photos and artwork to build the final site. Thankfully more and more web-coding and layout design integration software is becoming available, easier to use and relatively inexpensive. However, I still do recommend getting a basic book on HTML programming to know some of the basics.
For a very long time I used Microsoft Frontpage, which was a simple to use interface yet advanced program that built damn good sites...and still does. However, in 2004 Microsoft stopped further developing the software and they moved on to other more advance software and web-coding programs. I started to see a lot of Macromedia supported sites with flash and I picked up a book a did some basic training in both Flash and Dreamweaver, but DW for what I was designing was way too advanced and complicated and I still ended up using my old edition of FrontPage.
After researching new methods for designing high-end graphical websites, I found that many sites were being built right in Adobe's Photoshop and Imageready and then outputted to programs like Dreamweaver for final programming. I gave this approach a try and I did design some great sites, but like clockwork I would run into some sort of problem with the sites. Most of the time it was alignment issues with different browsers and me not having enough Dreamweaver programming expertise it always turned into a grueling task of trying to fix the problem.
Now, I was desperately searching for new, and relatively simple methods of designing and delivering high-end websites. My latest issue of Photoshop Magazine seemed to promise just that. I saw an advertisement for a plug-in for Photoshop called, Sitegrinder by Medialab. The ad stated that you can build fully functional websites right in Photoshop with little or no programming at all! I had to check this out for myself and see how true it actually was. I searched a few review sites and kept reading amazing reviews...now I really had to try it!
I installed the Demo version of the program, downloaded the online tutorial, and was quickly on my way. The company offers two versions, standard and professional. The pro version allows you to add media integration like flash video and more. Honestly for the little difference in price, you may as well order the pro version. Following the step by step tutorial, I quickly learned how the program operated and how to name the different layers in Photoshop so the program would correctly recognize and auto program them to work in my website.
My task was to take an existing name that we own, www.airbrushgetaway.com , that has been just sitting dormant and design a basic website that people could visit and learn more about our world renowned airbrushing workshops.
I simply reviewed a few other websites and template sites that I liked and felt were all user-friendly and easy to navigate. Eventually I chose a design I wanted to base our new site on. I built everything right in Photoshop and named the layers correctly and was able to easily build a preview of the website while I was laying it all out. When the first preview finished rendering all I could say was; wow! Everything was going smoothly until, I questioned how I would make the website grow when more content was added or subtracted. After reading the technical information I gave it a shot and started to encounter a lot of problems getting this to work. After numerous questions back and forth between, the very helpful and quick to respond, technical support I was able to make it do what I wanted. This is not something that is totally necessary and would all depend on your site requirements, but if you do need a growing content site just take your time read the directions and you will eventually get it to work as well.
I was able to build the new site using many of the program features but there are so many hints, (the term used to name and program the layers). I was able to give most of them a try to test the functionality, but just did not need it on the final site. The hints offer easy was to program embedded media, slideshows, contact forms and more.. all in Photoshop! Keep in mind, after programming and laying some content out, the Photoshop file looks kind of weird and has a lot going on. This is not how it will build in Site Grinder.
Making a few final changes to the website, I attempted to use some other programming features of the pro-version. I tried out their slideshow hint but didn't really like the way it operated, it was good but not what I wanted. So, I did some research and decided I would embed my slideshow content from my Flickr account. A lot of websites have tutorials how to do this and the slideshow player they offer is great! I programmed it into my new layout, in Photoshop, and now I had a professional looking slideshow on my site. I did the same with the Getaway promotional and testimonial videos and I easily embedded the video using html tags provided from our friends at Youtube. Hosting our videos on sites like Youtube save us some big time bandwidth and allows us not to worry about having to build a custom video player. Site Grinder also has a unique programming feature allowing text within the site to stay searchable text and not become just an image. This will allow search engines and crawlers to find the information on your site and help to possibly bump up your rating on searches. Keep in mind, some items are better off as images and also might help if you have any browser alignment issues which you can change with a simple hint command.
Now that my site is laid out and I am happy how everything is programmed, I was ready to do the final build-to-folder in Sitegrinder. Their build interface is very self- explanatory, although, I do recommend reading the instructions. Following the instructions, I was able to easily link the pages together, setup up e-mail information, and more. The program also evaluates the webpage and checks to make sure no errors occur before final output. Once everything is linked and ready to go you can either preview it again or build to folder.
You might have to go back and tweak a few things to make it work for certain browsers. When I built the final site, except for a few of my own stupid mistakes, my site was finished, looked great, and was ready for upload.
Site Grinder does offer features to upload to your hosting company, but I just used my Freeware ftp program, Filezilla to upload the content. Voila! My new site is live, looks great and was pretty easy to do! In addition I do recommend that you download a basic HTML editor too. I use either an old version of Frontpage or I really like the freeware software, HTML-Kit.
In closing, Sitegrinder is a fantastic tool and I highly recommend it, if you are looking for a relatively simple way to build a professional website and are already comfortable using and own copy of Photoshop it's the way to go! You can learn more, download the demo, see site samples and purchase the full version at www.medialab.com
Take a look at the site I built with SG, www.airbrushgetaway.com , the site is easy to navigate, graphically pleasing and only showcases a fraction of what Sitegrinder is capable of! This is absolutely on piece of amazing software!