Author:

Tom Giannattasio happily makes things at nclud. He works as an Editor for Smashing Magazine and teaches at Boston University Center for Digital Imaging Arts. He loves to experiment and share his work on his personal site: attasi.

Twitter: Follow Tom Giannattasio on Twitter

Beercamp: An Experiment With CSS 3D

This year’s experiment: a 3D pop-up book á la Dr. Seuss. If you haven't seen it yet, hop on over and take a look. The website was a test to see how far SVG and CSS 3D transforms could be pushed. I learned a lot in the process and wanted to share some of the techniques that I found helpful when working in 3D space.

Beercamp: An Experiment With CSS 3D

Before we jump in, please note that explaining everything about the website without boring you to death would be damn near impossible. For your sake and mine, I’ll provide just brief takeaways. As you skim through the code snippets, be aware that jQuery is being used and that a lot of code has been removed for simplicity (including browser prefixes).

Read more...

Mastering Photoshop Techniques: Layer Styles

Layer Styles are nothing new. They've been used and abused again and again. Despite their ubiquity, or perhaps because of it, many designers do not yet realize the full potential of this handy menu. Its beauty lies in our ability to create an effect and then copy, modify, export, hide or trash it, without degrading the content of the layer.

Mastering Photoshop Techniques: Layer Styles

Below we present, step by step, several practical techniques to help you refine your designs, increase productivity and reduce layer clutter. You will find more useful Photoshop techniques and tutorials in our hand-picked selection, Best of Photoshop on Smashing Magazine.

Read more...

Relationship Engineering: Designing The Happily Ever After

I remember when we first met. We hit it off instantly, and it didn’t take long before I was in love. I introduced her to my family, and they all loved her, too. Hell, I even convinced my wife that she was perfect. We’ve been happily together now for years. I spend a good portion of my day with her and, yes… sometimes she joins my wife and I in bed. Although, not much sleeping gets done; I’m typically too busy studying curves.

Screenshot

Save your scarlet letter. If you’ve read part one — Relationship Engineering: Designing Attraction — you know that I’m not talking about some affair. I’m describing my relationship with Apple and their slew of gadgetry. Even when it’s not practical, I still find myself wanting the latest Apple iWhatever.

Read more...

Relationship Engineering: Designing Attraction

"Look at her: so beautiful, so friendly, so smart. And what a personality. She must be mine. Hooking up with her would make me the envy of all my friends. Sure, she's young and she's gorgeous. Besides, I can easily try something new if I get bored or something better comes along."

No, that’s not an excerpt from Lolita. As cruel and inappropriate as they might seem, these thoughts are fairly common in our society. In fact, in the past year, millions of people have entered into exactly that type of relationship. Don’t bother calling the Special Victims Unit; what we’re discussing here is not what you think it is. It’s the Apple iPad.

Read more...

In Defense Of Photoshop

Waves of change are currently rippling through every aspect of the Web. The iPad and other mobile devices are changing the way we access the Internet, while HTML5 and CSS3 promise to change the way we develop it. However, another storm is brewing that threatens Photoshop's throne as the application of choice for Web design. The battle suggests a fundamental shift in the design process from Photoshop to mark-up.

In Defense of Photoshop

A militia of designers have assembled to launch this coup. Their propaganda is convincing, and their proposed successor is worthy, capable and sexy. Their cause is important, but their manifesto is flawed. The argument against Photoshop focuses on the effect of the final product. Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser

Read more...

Mastering Photoshop: Unknown Tricks and Time-Savers

We all have shortcuts that are essential to our daily workflow. A majority of them are staples such as Copy (Command + C) and Paste (Command + V), but occasionally we stumble upon a shortcut we wish we'd learned years ago. Suddenly, this simple shortcut has streamlined our process and shaved quite a bit of time off our day. Collected here are some lesser known but extremely useful shortcuts. Many of these are not documented in the "Keyboard Shortcuts" menu, and some of them don't even have equivalent menu options.

Layer List

Please note that all of the shortcuts listed below assume that you are using Photoshop CS4 on OS X. They will work on the Windows platform by converting as follows: Command → Control and Option → Alt.

Read more...

Unveiling Photoshop Masks

Design is a fluid and shifting process in which layers are constantly modified and tweaked. As complexity builds, so does the need for preserving data in a flexible way. Learning non-destructive editing techniques helps you produce documents that bend along with your creativity. Photoshop Masks are the cornerstone of this process. Not only do they preserve important pixel data, but they allow for the creation of flexible interface elements as well. In this article, we'll explore the technical aspects and creative advantages of incorporating masks into your workflow.

Unveiling Photoshop Masks

Photoshop offers five methods of masking: Pixel Masks, Vector Masks, Quick Masks, Clipping Masks and Clipping Paths, all of which define pixel opacities without affecting the original data. Each of them has its own pros and cons, and knowing which method to use is extremely important for creating clean, flexible and properly masked layers.

Read more...

↑ Back to top