Category Archives: Design aid

Simplicity is pretty complicated

Posted on by
Reply

In graphic design the hardest things are actually the simple ones. Sure it sounds a bit stupid, but when you think about the rule of “Less is more” and then look at the big letter “a”, written in helvetica on a white background you can see that it’s not actually all peaches and cream.

Simplicity in webdesign is often refferred to as “minimalism”, which basically says it all. Something “minimalist” (-ic) is something simple, an expression of content/function with very little form.

This form can of course has it’s saturation levels – we can have a nicely designed website with just the text. Various typefaces, paddings and margins working together to create something that’s nice to the eye.
But that would probably be considered ultra-minimalism, so let’s move on.

Another step is adding a couple of elements like a background here, a divider line there, but still keeping it simple with as little colors, gradients, photography as possible. And this is where the hard part starts.
We all know that graphically rich and intense websites can hide their content flaws in a lot of flashes and eyecandy. With minimalism we don’t have that comfort, so everything has to be in place. Considering typefaces, font-sizes for different elements is crucial for the whole thing to look good while still being minimalist. If you want to make minimal websites it’s best to look around first and get some inspiration (that doesn’t mean copy+paste! ;))

I think every designer should have at least a couple of those minimal sites in his/hers portfolio among all those beloved graphically intense sites that we’re all so proud of.

Rasterbate it!

Posted on by
2

10957

There are many ways for achieving “BIG formats” in graphics. One is using very high resolution images. Another one is using vector graphics which is scaleable without artifacts and is great for logos and simple elements. But what if we have a pretty small photo and we’d like it to be big anyway? For a while there weren’t many options but a couple of years ago I found something that I want to share with you.

Rasterbator!

Rasterbator is a tool that you can use to make large prints from small graphic files such as posters, photos etc. How large can it be? Well let’s quote their website:

The Rasterbator creates huge, rasterized images from any picture. Upload an image, print the resulting multi-page pdf file and assemble the pages into extremely cool looking poster up to 20 meters in size.

10530

20 meters is quite large, isn’t it? And it’s all done by creating lots of little (and bigger) circles of many colors that when viewed from a distance create the image we want. It’s actually quite simple, a technique that was known before and used in print (old newspapers) in a slightly different way. Here it’s an algorithm that enables you to convert your photos from simple pixel x pixel ratio to something much, much bigger using dots. And many of them. What’s great about it is that it’s free to use for commercial purposes as well, so another good thing coming from the so called “community” for the fun and usage by the masses. And it’s pretty easy too.

It even can divide the image into smaller portions (let’s say A4 page format) and export a PDF with a4 pages that you can print on your home printer and then hang in the proper order to have the whole big image. Now that’s creative!

You can check out rasterbator at http://homokaasu.org/rasterbator. Don’t forget to see the amazing photo gallery!

Testing Content Aware Fill in Photoshop CS5

Posted on by
4

I downloaded the trial version of CS5 today and of course the first thing I wanted to see is how well does it really handle the hyped content aware fill. Below are my results.
Note that sometimes I had to use the content aware fill a couple of times to fix little mistakes previous fills had done. But overall it’s a very powerfull tool. The results are not as perfect as their promotional video but jaw-dropping nonetheless.

Test 1 – removing me and my snowboard from a cellphone picture. So there’s dirt and heavy jpg compression at the start.

contentawaretest1b

The before picture you can see above, the after just below.

contentawaretest1a

Continue reading →

New photoshop functions to make designers obsolete?

Posted on by
1

Designers will loose their jobs?

Or are they? So content aware fill, puppet tweaking and many more things that seem to make very hard and complicated tasks oh so easy. So now anyone can retouch a photo easily or remove a person from a photograph while preserving the background. So is it the end of designers? Will the clients do their work themselves now with all those “easy to use” automatic tools?

No, not really

Do you bake your own bread? Even though it’s not that hard now is it? Do you print your own business cards? Nah, I didn’t think so. The tools are still for us designers to use and abuse (because the abuse is actually the path to using the new tools creatively and not just as automatic gizmos). It is still up to us, maybe until apple starts to attack Adobe even more and buys Pixelmator or something to create a competition ;)
Don’t be evil, right?

New, easier tools will make our lives easier but they won’t make us disappear. So don’t worry fellow designer! You’ll keep your job. Better worry about paying Adobe their share and as usual it ain’t cheap…

Photoshop tutorial – light trails / curved beams

Posted on by
2

Screen shot 2010-03-11 at 21.02.10

Today I’ll show you how to create those ubiquitous light trails or as I think of them “curved beams of light” that can either go around a character or be just in the front looking like “light painting”. We will create the image above and it will take about 10 minutes to do so because it’s all about the PEN tool in photoshop. If you don’t really know how to use the pen tool then find a tutorial that shows you the basics of the tool before you proceed.

Continue reading →

Fold ’em when you need ’em

Posted on by
4

What is the mysterious “fold” ?

There’s this very big issue among many designers of making all the necessary information above the fold (that being a standard of about 600 / 700 pixels high). So they try and they try to fit everything that’s “important” in there. In a typical layout that gives us 960 x 660 pixels of space that the most users will instantly see. Which is about this much of this website :
cm-960x660

Continue reading →

So you’re a web design agency are you?

Posted on by
4

agency
There are some trends that are common of course, but they are changing constantly and evolving. Sometimes it just takes one Steve Jobs to say “Flash is a technology of the past” to turn some heads around. Unfortunately for the industry, sometimes it’s easy to shape the minds of potential customers. And that might lead to them leaving the site without ever clicking “contact us”. So what are they looking at ?

Continue reading →

Quick review : The Smashing Book

Posted on by
Reply

smashingbook

Photo of the smashing book alongside our iPad parody to prove we got it ;)

I have before me a beautiful example od DIY creativity. The Smashing Book is a compilation (but made apparently especially for the book) made by the nice people from SmashingMagazine.com . Why are they nice? Well they’re nice because they share what they know, and in the modern world information is money, so it’s nice of the to share. Sure the book costs 30 bucks + postage but after giving it a brief shuffle it’s worth it! Definitely. It doesn’t matter if you’re an experienced designer with a portfolio that when printed would have more pages than this book. It doesn’t matter if you’re a complete beginner who hearing “text-kerning” says “WTF mate?”. There’s only one group of people that won’t find this useful. The rest will love it regardless of their experience and knowledge.

So let’s pop the question

Who are those people that won’t need it though? Well the people who will not find it useful are people who don’t really learn anything by themselves. People who rely on knowledge and learning before attempting ANY tries at a subject. People that will have a full typography course before they type in their first Aa’s. These people might only benefit from the nice, easy to understand language. But they probably won’t learn much, because what Smashing Magazine did is organized the most commonly “asked questions” and answered them with both the scientific precision and clarity for the “normal” people who don’t spend their life buried in a textbook.

Is it worth the 30$?

Definitely. It’s a quick read for the first time, and then you might keep it handy since it’s almost like a bible of design, usability, productivity and more down to earth stuff like CSS and coding. That makes it universal in a way that anyone who wants to do more with their projects will want to have it somewhere close to the computer. Good job guys! Thumbs up!

The 960 grid system

Posted on by
Reply

960gridsystem

So you’re designing a website and thinking : are there any universal proportions for columns, element placement and such things? Why do some websites look so good, while others don’t even though there’s nothing visibly wrong with them? Well the devil is in the details as usual, but lucky for us we have the internets and we can use the knowledge other people learned the hard way. The 960 grid system is one of those things. It’s a set of templates for both coders and designers (pretty much a template for any major software). It was initially designed as the my-own-design-aid kit like most of us do, but it has spread and that is because of two things:
Continue reading →

Pixelmator 1.5.1 released!

Posted on by
1

pixelmator151

The guys from “Pixelmator team” are back! And after the long wait they present the next, 1.5.1 version of this supercool raster design software. This is a small update as it only fixes most bugs and adds some nice little features. But finally you can organize your brushes and the way this is done shows, that they don’t want to copy others, instead creating very usable workflows on their own. There’s also the announcement of the next, 1.6 version called Nucleus that they have started working on and that just adds to the overall excitement! Only three more functions (a proper text tool, layer styles and groups) and I’m dumping photoshop forever :)

You can check the software out (Mac only!) at pixelmator.com

Working hard

Posted on by
Reply

I’ve been extremely busy lately, doing a couple of projects at once and I realized a pretty good way (aside from the treadmill I use to “take a break”) is to open up all the projects, however different from each other they might be, and work on each for a couple of minutes, adding touches and changing the overall user-perspective. It really can help you look at your new business layout (no people in suits please!!) in a totally new way.
We reached 10,000 views on our iPad parody recently, and currently we’re working on the next “visual” thing that will be available really, really soon (probably on monday).
There are some new authors around here, so keep the RSS feeds handy, since each one is an expert in his field, and we can all learn a lot from that collaboration.

Cheap photoshop alternatives

Posted on by
Reply

photoshopalternatives
Since a lot of people are still in the dark with this, I decided to shed some light on the matter. First of all – I have tried many apps, and I do dislike a lot of things about photoshop. Mainly the price and it’s interface which actually went better in CS4, but in general is bloated and not intuitive at all. Oh and did I mention that some universal things don’t work in all adobe apps? Like alt + scroll wheel doesn’t zoom in / out in Flash. How cool is that when they’re selling it as a very pricey creative suite ? Well anyways, I do use photoshop at work and it has a lot of advantages over the rest of the software mentioned, but for most of the time, they’d do fine. Because the tasks photoshop is better at are usually those rare ocasions. I’ll focus on both PC and the MAC and talk about two alternatives that I think are the best as far as price-to-features ratio.

pspPC world : Corel Paint Shop Pro Photo
This is a very close one to the photoshop killer. Mainly because it’s more intuitive and the price is a couple of times lower. There are things lacking though, like a good handling of layer groups, layer styles and more. But the thing lacking the most is a good text tool, with plenty of options. Sure there are quite a lot, but the resulting effect is odd for some reason. It does not render text nicely at all. If you’re making a website, that alone can make a difference between good and bad layout. Sure a lot can be done in it, but the bad text rendering and no “justify text” option are likely to become drawbacks while designing. I did use this software for a couple of years though, because it was a lot cheaper and had most of the same possibilities. Still like it and I think you should try it for it’s price.
Corel PhotoShop website

pixelmatorMAC : Pixelmator
At 59$ you can’t really ask for a lot of features. But you get them anyway. A great painting engine for tablet devices, fast and reliable, cool looking interface. But there’s almost no text-tool. I mean it’s so basic it’s like it’s not there at all. And there’s no grouping of layers or layer styles so that makes it a lot harder. But the pixelmator team is working hard on it, so I guess they’ll eventually add all those things there, just like they’ve recently added an amazing save-for-web feature. They do think a lot about the interface, and speed / ease of use and that’s a big big plus. It’s got about 80% of what a webdesigner needs right now, and I can’t wait for the new versions.
You can get it at pixelmator website

Turn that design upside down

Posted on by
Reply

designupsidedown

Where do you usually start when designing a website? Pasting a logo into a blank document, building a header around it? Think about this for a second : forget the logo and header. Sure they’re the eye-candy and eye-catching things, but once in a while it’s nice to do it differently. Take the content. Paste it all over a solid background. And then play with it. No menu, no logo. Just the content, columns, tables, charts, images. Put them in an order that makes them fit into each other. And after you’re done playing with it – THEN add the header and logo. You’d be surprised by how good the content looks now. Usually, with the “normal” way of doing this, you’d make an awesome header and logo, with really great graphics that you like, but often you’ll feel like something is lacking just below that great header graphics. Maybe that is the point – try and organize the substance before the form. You know, that age-old struggle of form vs substance ? Maybe it’s not so corny after all…

Free textures stock database

Posted on by
2

textures-for-free-stock-photo
That’s right. I’ve decided to give away for FREE the collection of texture photos that I took over the years. Some were taken with the phone, some with a DSLR. The quality is different in them, but they’re all useable for either 3d modelling, or compositions in photoshop. Head down to TEXTURES and check those out. Don’t forget to donate if you really like them. And if you want full resolution contact me and we’ll arrange something for as low as 3$ for the full resolution one (2500×1600 or higher). Currently all the 900×650 textures are completely free for both commercial and non-commercial use. It’d be nice if you link to this site though.

Pixelmator tutorial : making a promo visual

Posted on by
Reply

final

Here’s a little tutorial for pixelmator, since I’m working on some new visuals for the upcoming second promo EP from Krop. So let’s start shall we ? All you need for this tutorial are basic pixelmator or photoshop skills, a copy of pixelmator, about 20 minutes and a photo of a person. I used one of the promo pics from Krop. Read more for the tutorial itself. If any of the images is too small for you, you can right click on it, and choose view image opening it in it’s full. This release is an upcoming one, but if you like electronic dance music with an alternative twist check out the last cd at kropband.com . It’s a free download.
Continue reading →