Snowberry Beauty is a fantastic looking site and it’s made all the more impressive by adding animation to key components with jQuery.
Snowberry Beauty originally had their website designed and built entirely in flash. The only problem was that it was horrendously difficult to manage and their original flash developer was no longer available.
They were in a bit of a bind so I suggested that they rebuild their website with HTML, that way any web developer worth his salt should be able to maintain it. It would also be more searchable and quite simple to develop an administration interface so that they could add new items and articles as required.
They were very particular about the look of the site, and rightfully so as I am guessing they paid a fair amount for it originally, so what about all the gorgeous animation that was done in flash? Well … We can do that in HTML these days. Enter jQuery.
I was the sole developer on this project it presented a number of challenges. I like challenges and two of them I will mention here were the animation and the custom typeface. Read more
Most businesses could really benefit from a solid email marketing solution. It’s an extremely handy tool to have in your arsenal and its so effective and affordable that you just can’t ignore it.
I’ve talked to a lot of people who agree that email marketing should be really beneficial to their business. Many of them have given it a go by trying to use Outlook to handle their email marketing. While you can technically send a stack load of email to people with Outlook let me tell you why it’s a very bad idea and complete waste of time and money. Read more
About two years ago I designed and built a nice looking web site for a local motel and holiday park, Accommodation Te Puna. It was Pauline’s (owner) first foray into the internet and the site served her well over that time. But times change and with some more exposure to the internet, Pauline wanted to start putting a bit more time into her website and use it to generate more leads.
Pauline contacted me a couple of weeks ago to make some changes. She’d just been talking to a chap all about search engine optimisation and marketing as well as social media and networks and she wanted to make some changes to her website so she could be a bit more proactive in these areas. Read how redeveloping Pauline’s website helps to generate more leads.
I’ve been a long time reader of the smashing magazine website and ordered the Smashing Book (www.smashingbook.com) the day it was released.
Anyone that’s familiar with smashing magazine knows that it’s packed full with some really useful articles in the web and design industries.
I’ll find some time over the next couple of weeks to get through the bulk of it and let you know what I think. I’ve managed a quick skim through today and so far it’s looking quite promising.
I’ve recently been putting together an opening sequence for a website I’m developing for a local architect. While I was putting this together it got me thinking that it would be quite nice to animate the clouds moving slowly through the scene. I wanted the effect to look convincing but I don’t want to have to render a 20 second video sequence because it would make the file size too large. Enter Flash.
I remembered a video tutorial I watched over at Aharon Rabinowitz’s web site, www.allbetsareoff.com. The tutorial is “Creating 3D Cloud Motion From a Still Image“. Aharon’s tutorial is designed for Adobe After Effects and the end result is very effective so I thought I’d try something similar in Adobe Flash CS4.
You can view the final effect here (the animation is quite subtle) then follow on for a step by step breakdown of how the effect was achieved.
As well as operating my bread & butter freelance web design business I have recently been devoting more time to learning motion graphics techniques and finding some practical applications.
Sentinel is primarily a web based service that scans your website or server to check if specific services are running.
I wanted to visualize the scanning process and imagined a futuristic robotic style eye that scanned objects with a beam of orange light (yes I possibly have watched too many sci-fi movies).
This was created using Adobe After Effects with Fractal noise, CC Sphere, and a little bit of Trapcode Form. It was also created by lots of learning and the great resources from Andrew Kramer’s www.videocopilot.net and John Dickinson’s www.motionworks.com.au. If you are at all interested in motion graphics then I highly recommend checking out their sites.
I also made another version of the scanning effect and used it as the background animation for the current sentinelmonitoring.com beta website. It takes a few seconds to load as it’s about 150KB.
To do this I rendered out an FLV from After Effects, used it as the basis for a Flash movieclip and then overlayed the text that I wanted to appear. I changed the blend mode on the text so that it would only appear during the brightest parts of the underlying animation and then rendered out a .swf movie. From there I inserted the swf into a web page, set the wmode to ‘opaque’ and then stacked the html elements over the top. Pretty straightforward but very effective.
Not so long ago I had a prospective client ask me what my web design qualifications were. I thought about it for a moment and replied “Err none actually”.
I rattled off all the years of experience I had. How I got into the internet in 1996 and went on to work with some of the big names in New Zealand’s internet industry. I explained how myself and a couple of friends revolutionized the web hosting model in New Zealand with the launch of iSERVE limited back in 2001 and how I ended up doing a stint of teaching at a tertiary institution and, more recently, was involved in starting a small web and interactive design company.
All of this accounted for absolutely nothing in the eyes of this prospective client. He wanted to see a piece of paper that said “Mark Shingleton has completed web design 101 and now knows how to build web sites”.
Though I’m primarily a web designer I have recently become interested in motion graphics … and I have to admit it sure is a lot of fun.
One of the web sites that I frequent is www.motionworks.com.au. Motionworks is run by John Dickinson and one of the many resources that he has is a great interview series called ‘Unplugged’.
John decided to get the community involved in submitting concepts for a new opener for the series and has issued a challenge.
Motionworks needs a hot new opening title sequence for Unplugged, our popular motion graphics interview series. We have a cool music track composed by Selcuk Can Guven, and are looking for some cool graphics to match. All entries will be showcased right here on Motionworks and the best of the best will become the new title sequence for Unplugged with a credit and web link at the end of each interview.
Well I thought that sounded like fun so I have put together a piece and submitted it for consideration.
I must say that I learned a heck of a lot putting this together and it has really whet my appetite for delving deeper into the motion graphics industry. Thanks John for issuing the challenge and thanks also to Aharon Rabinowitz for a snippet of advice; “Shy people get nothing”.
Cross browser testing is one the realities of creating web sites & web applications and it’s one of those things that can be a bit of a headache from time to time.
My setup here is pretty standard. I have a newish iMac for my day to day work as well as a Windows laptop. On the mac I run Firefox and Safari while on the laptop I have IE6, IE7 & IE8. That covers me pretty well for the majority of browsers but sometimes I’m working off site, my laptop is playing up or I need to show a client how something looks in IE6 vs Firefox 3 … enter Adobe Browser Lab. Read more
Recently I was looking for a solution to handle my invoicing, a job which we all no doubt both love and loath .
Most invoicing systems that I have encountered are smaller parts of large accounting systems and designed with accounts people in mind. But for someone like myself, who is most definitely not an accounts person, they can leave me somewhat confused and cold. I just want it to be simple. Read more
If you need a fantastic website built, some digital imagery developed or some motion graphics created then just fill out this form and I will be in touch with you shortly.
Twitter
SENTINEL | Busy day. Rolled out a nice bunch of updates to our server and website monitoring application. http://bit.ly/cSZzMM [mark0s]
CSS Gradients | Handy tool for generating gradients in all the good browsers. http://bit.ly/8Xflge Even supports IE filters if you're bave. [mark0s]
SENTINEL MONITORING | We're changing the twitter account used to send alerts. Please follow @sentinelalert . Changes live next week. Cheers [mark0s]
All bets are off Aharon Rabinowitz website with some great After Effects tutorials and advice.
Doctype TV The show for people that make websites. Very cool.
Freelance Switch A great resource for Freelancers everywhere with a superb podcast, Freelance Radio. Available on iTunes so no excuses for missing this one.
Greyscale Gorilla A brilliant resource for After Effects and Cinema 4D tips and tutorials. Nick is the gorilla … and he is brilliant.
Motionworks John Dickinson is doing a stellar job for anyone interested in After Effects or Motion Graphics in general.
Ponoko Because being able to upload a design file and get it made into a real product is awesome.
Radsmarts Check out Robin’s fantastic site jam packed with tips and realities about running your business.
Videocopilot With his fantastically dry sense of humor and superb motion graphics / vfx knowledge, Andrew Kramer’s site is not to be missed.