In the following two blog posts, we’d like to share our method of creating cast shadows in Photoshop. In this first post we’ll let you in on how we make cast shadows for small icons. In the next blogpost we will show you how we usually create cast shadows for larger icons, eg. for webapps and native OSX apps.
Some time ago Jeff Broderick posted this cute little wireframe on Dribbble which intrigued us. We really liked the idea and wanted to try out working with the little wireframes too. One thing we noticed is that drawing all of those 1px, 2px and 3px lines to represent body text and headings was taking a lot of time. That’s why we decided to create a little font that exists of four – characters which we could use to wireframe paragraphs at a faster pace. Following up some discussions we had as a reaction to yesterdays blogpost about using style boards in the design process we wanted to share our font and a mini wireframe template.
The kit includes
In marketing / advertising / design it’s not at all uncommon to find people working with mood boards. For those who aren’t familiar with the term, a mood board is a collage of all kinds of images, that basically serves the purpose of inspiration and style determination. For example, in the early stages of product or brand creation a mood board helps determine what feel the product or brand should be associated with.
Mood boards can help getting everyone on the same page. Because they’re used in an early stage of product/brand development you’re able to tackle possible discrepancies in ideas amongst those involved in the actual development. That’s why, for the last couple of our clients we’ve been putting together style boards, our own version of a mood board.
Whatever business you’re in, productivity can make or break not only your profit but also your morale. In (web)design we’re constantly looking for little productivity boosts. One thing that has proven itself to be a huge productivity boost for us, is assigning keyboard shortcuts to frequently used functions in Photoshop.
In our new portfolio you’ll find lots of scaled down UI elements. We chose to work with scaled down UI elements for various reasons. For instance; we think it allows us to let the visitor get drawn to that specific element e.g. when the original size is just too big to fit a small resolution screen. We wanted to share a couple of things we’ve learned through trial and error that could save you some time scaling down your own UI elements. In these cases we assume that you’ll be scaling your UI element down to about 50% of the original element in Photoshop.
