Photoshop animation using the Timeline

Design  ×  2 minute read Photoshop animation using the Timeline

This week I was working on a Photoshop animation for a client’s email campaign. I hadn’t done simple frame animation in Photoshop in a while, so I figured I would document the process in case anyone might benefit from it.

Setting up the scene step-by-step

  1. In my Layers panel I have three layers: a container, a green tree Smart Object, and an orange tree Smart Object.
  2. You only need a total of two frames to start your tween animation. The first frame is the green tree, the second frame is the orange tree (which we’ll be transitioning to).
  3. Select the first frame on the Timeline (the green tree) and Shift+Click the second frame (the orange tree). Then click the Tween button and add 20 more frames. This will put 20 additional frames between the orange and green tree frames.
  4. Next, select all the frames and change their time duration to “No Delay”. This will give the animation a seamless frame to frame transition.
  5. Finally, select whether you want the animation to run Once or Forever in the dropdown and save out your gif. If you want to test your animation, simply open a new browser tab and drag your gif file in to it. If you see the tree change from green to orange, you’re all set!

Follow along with the Photoshop animation screencast

I’ve included a simple screencast to show the steps—feel free to follow along. If you have any questions about the process or run in to any snags, please don’t hesitate to reach out on Twitter.

Getting out of our layout ruts

Design  ×  1 minute read Getting out of our layout ruts

If you’ve been involved with web design in any capacity over the past few years, you might have noticed that things are starting to look… well, the same. Oh c’mon, you know what I’m talking about. The basic and stale “content on the left, sidebar on the right” layout. So what can we do about it? How can we better use the space inside the glass rectangle?

Jen Simmons gives us insight in to how we can break out of our tired layout habits and produce something more intriguing and memorable with modern web technologies. Have a look at her talk at An Event Apart about laying things out in the browser, new CSS properties, and much, much more.

Deadpool Visual Effects Breakdown

Design  ×  1 minute read Deadpool Visual Effects Breakdown

“Deadpool” marks the beginning of a new era for superhero films, and one sequence in particular was key to setting the tone. This is an in-depth VFX breakdown reel showcasing the behind-the-scenes efforts by the Atomic Fiction team.

The work involved creating computer generated characters, vehicles, and an entire urban environment, for the thrilling car chase that kicks off this new franchise. Check out the video below, it will blow your mind.

Python Darth Vader Helmet

Design  ×  1 minute read Python Darth Vader Helmet

Now there’s cool, and then there’s this. Check out this one-of-a-kind Python Skin Darth Vader helmet. And yes, that is real Python. And no, no one else in the world will have this. Handmade in New York by Elemnt, this limited edition Darth Vader helmet can be yours for a mere $3,000.

Tools of the trade

Design  ×  4 minute read

Building a standards compliant web site is a dirty deed these days. There are many things to consider when planning your site, but none as important as proper markup and styling. And there in lies the problem. Not all markup is created equal and many browsers play by their own rules. If you have weak or poorly structured XHTML, your site will suffer from bloat, bad links and lackluster search engine results. As for styling, your site might look fantastic in one browser but a mangled mess in another. So what in the world is a designer to do? Organizations such as the W3C and WaSP are looking to create more defined standards for cross-browser consistency, but the battle is still far from over. There are however some ways to get around the annoyances of standards-based design and I’ve outlined a few of them for you.

Firefox to the rescue

I’m sure many of you are aware of this wonderful utility for the Firefox browser but I couldn’t let it fall to the wayside. The Web Developer Extension for Mozilla and Firefox has been the most valuable web resource for me over the past few months. Not only is there a wealth of available information, but it’s perfect for testing your site in almost every posible user scenario. Download it now if you haven’t already, you won’t be sorry.

The good kind of Vista, I swear!

No, I’m not talking about the long overdue and much beguiled Windows Vista. I’m talking about CSSVista; probably one of the most useful tools for standards compliant coding since the Box Model Hack. CSSVista is “a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously“. For Windows testing, you can now see how your site looks in the comfort of one pane rather than switching back and forth between programs and cluttering up your screen. Not to mention the best part about this wonderful new tool is that you can have it for the low, low price of $FREE.99! I highly recommend you try this application for your cross-browser compatability needs. I prefer my Powerbook over my PC and with this application, I spend less time working on Windows browser testing than ever before. That’s a good thing!

Validated for your pleasure

After spending a good deal of time getting the site up and ready for the CSS Reboot, validation for XHTML and CSS was at the bottom of my seemingly endless list. However I spent some time tonight making sure that all of the pages validated in XHTML 1.0 Strict. It was important for me to do this not only because it’s a strong core for any site, but it’s also a search engine’s best friend. Well structured code is easily indexed and allows spiders to crawl through it with simplistic ease. As the traffic to this site grows, I want the updated content to be found quickly and easily by anyone looking for it, and that includes robots.
* On a related note, my CSS does not validate because I have had to impliment some hacks so that users with Internet Explorer could see my site. Thanks Microsoft.

The motherload

I’ve mentioned this in a previous post, but it’s so good that it bears repeating. Motivated by a passion for web development, Vitaly Friedman has been working on a project that houses some of the best and most useful bookmarks on the internet for web professionals and enthusiasts. You have to see it to believe it. Well, what are you waiting for?

These are just a few of the resources that I use to enhance my web standards development. Whatever the project size, utilizing these tools will greatly enhance your finished product. If you have any other resources in your bag of web standards tricks, I’d love to hear about them and I’m sure others will find it useful as well.

Reboot aftershock

Design  ×  2 minute read

What a crazy two days it’s been around here. We’ve received a lot of attention due to the CSS Reboot and it doesn’t seem to be slowing down. In fact, I have received almost twice as many hits today as I did when the Reboot launched yesterday. Thanks to everyone who has taken the time to check out the site and vote for it on the Reboot home page, it’s much appreciated. I’m proud to say that I’ve consistently stayed in the top 50 fluctuated in and out of the top 50 in terms of total ratings and the experience has far surpassed my expectations.

On a related note, someone submitted my site to Dark Eye and to my surprise it received 8 out of 9 stars from the people that voted on it there. Thanks to whoever submitted it, there have been some positive comments left there and it’s been fun to watch it progress. If you haven’t gotten a chance to check out Dark Eye yet, you really owe yourself the visit. It’s built using some pretty slick .Net and Ajax that offers “living design” users can interact with in real time.

I am still in the process of compiling my ‘Top Five‘ CSS Reboot sites and will have that posted by the end of this week. I’d like to hear which ones are some of your favorites and which ones you don’t quite think lived up to their expectations. If you have an opinion on this site or other sites that you have found through CSS Reboot, I’d love to hear about them.

As an aside for new visitors, I recently wrote about gDisk and the great storage options now offered for folks on a Mac with Gmail. I still have quite a few Gmail accounts left to give out so if anyone is interested, please post a comment and I’d be glad to send you the invitation.