Archive for the ‘tutorials’ Category

24/01/2010 - Blogger.Iconshock

Iconshock interview: Css mastermind and sushi addict Jina Bolton

Jina is a must reference for all of you working in web design  & development. Her opinions on CSS are one of the most respected in the designer community, being a frequent speaker in the web developer’s conference circuit and being a consultant for the W3C Web Accessibility Initiative. That is big stuff for a lady so cute my friends! The W3C as you might know, is nothing more than the World Wide Web consortium, the international organization that develops all web standards. So if this girl has something to say you better listen!



23/01/2010 - Blogger.Iconshock

Best website redesigns of 2009

The inspect element blog has made this list of the best web redesigns of 2009, featuring amongst others, Manchester City, CNN, The White house and Engadget. Each example backed up with thoughtful analysis and good arguments. Very good post by Tom Kenny.

Click on image to check out examples of good redesign.
21/01/2010 - Editorial.Iconshock

Making of a clock icon in Sophistique style


Nearly every human being has perceived that time flows cyclically. Day and night, childhood and old age, joy and sorrow, life and death (of course you already know!) everything seems to repeat endlessly.

Well, here it is a clock made in Sophistique style. It looks very clean and calm and if you can get a copy of any version of Adobe Flash (former macromedia Flash versions will work too) you may find its unique beauty through repeating shapes again and again. From flat circles you’ll be creating an object with volume and good style.


20/01/2010 - Blogger.Iconshock

Iconshock interview: Top web designer and premiere Mom Randa clay!

I envy the productivity of a mom. What would happen if mom’s ruled the planet… Have you ever thought of that? I’ve changed diapers, fed and played with children, as I helped raise my little nephew, so I kind of know the drill. A man can sure do all that stuff and certainly do it well. But still, mom’s have always that extra endurance … Its almost as if motherhood is blessed with super powers form the deep beyond that allows them to play football, help out with math homework and at the same time, make that super energy vegetable soup that overshadows a red bull beverage.

Well, you can add to that list designing very cool web pages if you are Randa Clay. This is a lady that gets so much done it makes us feel lazy. She has not one, but two boys, and still manages to run one of the most visited and well respected design blogs in the net. She is kind of an odd case, because she actually majored in music before turning into design. Web design appeared after she had her first child, and she is completely self thought. Some girl! I am very honored to have her featured here, so I appreciate all your lovely comments to express admiration for such a talented designer. You can visit her at her design blog Randa or at her personal site Honestly Crazy.



19/01/2010 - Blogger.Iconshock

Tutorial: How to make 3D typography with 3D max and Photoshop (Part 3)

Last time we learned the basics of 3D Studio Max and created a 3D version of our vector Logo and rendered it.

Now we are ready to complete our “masterpiece” in Photoshop.



19/01/2010 - Blogger.Iconshock

Tutorial: How to make 3D typography with 3D max and Photoshop (Part 2)

Hello again! Last time we left off when we were importing our vector path to 3D studio Max. We will pick up from there.



19/01/2010 - Blogger.Iconshock

Tutorial: how to make 3D typography with 3D max and Photoshop (Part 1)

I will try to explain theses steps in a straightforward and easy way to comprehend, because I want this tutorial to be followed by all kinds of users, from first timer amateurs and hobbyists to hardcore designer professionals. The steps can be followed in any version of Autodesk 3D Studio Max and Adobe Photoshop. I will use version 6 of 3D Max and Cs2 of Photoshop, but the commands and workflow are identical in any version. No plug-ins or aids whatsoever. Many times we feel obliged to update our software to the latest version, spending big bucks that aren’t in reality a good investment if you are not going to need the features the update has to offer. I often see many agencies and studios underestimating the tons of new features new versions have, still making stuff in a way that can be done with outdated or open source software. The other reason I chose these old packages is because they run well in outdated pre dual core era computers, so anybody can dig in this info and use it. So… let the games begin!

Wallpaper Preview
This is the image we are attempting to create.

Before you start.

You can download a free trial of Autodesk 3D Studio Max here.
You can download a free trial of Adobe Photoshop here.

You can download all the resources for this lecture here.

No prior knowledge is necessary to follow this tutorial

First things first

The first step is to make the 3D version of the Iconshock logo from a pretty bad raster source image. When you work in graphic design professionally, clients always fall in love with the worst assets and expect from us to create magic out of them. After all, that’s what they are paying for. If an agency knew the difference between a PNG and a AI file, they would not need designers. I chose this awful 16×16 pixels PNG source to turn things into the worst case scenario possible.  This is based upon true events my friends.

Reference image at 100% and 1600% zoom view


19/01/2010 - Blogger.Iconshock

Hail Typography!(Part 2): 10 Best free font resources

Internet is a rude jungle. There are thousands of fonts laying around, so many that you can browse for days through both amazing, and also not so good contributions. I’ve made three compilation lists for Iconshock so far, and this one has been the toughest. From what I’ve learned , I’d say that you could defeat the ogre, marry a hot queen and live happily ever after, using only free types. It can be done. And certainly it has been done before.

Making our way through this rough world full of picky clients and way too much competence is quite difficult, and certainly any help is welcome. In this second instalment of the typography series, I will show you only the best sites for downloading free fonts. But beware! You have to be focused on what you want before searching, or you can go nuts when encountering such an enormous number of possibilities. The task is daunting in deed and I really hope that having all these resources in the same place can save you some precious time.

1. Dafont

Click on Image to enter site

Click on Image to enter site

They seem to have a quality criteria for selecting the fonts they post, since they have the cleanest collection around; low on rubbish and their categories are straight forward. 9000+ fonts. Dafont gives us preview of the entire character set. You can browse by author also.


18/01/2010 - Blogger.Iconshock

Iconshock Interview: User Interface guru Andrew Maier

In the broadest of senses, an interface is the conjunction of means with which we can interact with any system, be that a complex shampoo dispenser, a brand new Macintosh or a cellphone. And this week’s guest is one of the rising stars in the field of user interface development in the world. Imagine him as a Joss Stone of UX design, (If we placed ourselves 6 years ago that is.) What most impressed me about Andrew when we met him was his wide range of interests beyond computing, like photography and music. This is a guy that has so much talent inside that it flows throughout his many different passions.

He is very well known for his web site UXBooth, where he and his pals reviewed submitted websites in a scale form 1 to 5 from their user experience. He was featured earlier this year as one of the 10 User interface Rockstars by “fuel your interface”.

A big fish indeed. So ladies and gentlemen, with no further ado, here it is: Andrew Maier.



18/01/2010 - Blogger.Iconshock

Hail Typography!(Part 1): 30 Free handpicked professional fonts

After three straight days watching nonstop to tons and tons of free fonts, my head is beating as if my heart was inside my skull, and I’m suspecting I’ve just lost my capacity for pattern recognition.
Typography is by no means an art to be taken lightly, too often underestimated by young professionals and amateurs that miss the fact that a simple shift in the kerning can make the whole difference between a cheap amateurish design and a really eye catching professional piece of work. Typography is a true art on its own, full of complexities and nuances. My intention with this series is to give a brief insight about the basics and show you the best resources I’ve found on the net so you can save time and sanity. There are so many low quality fonts out there, it becomes a titanic entrepreneurship to find the type you want. I feel that most of the time free fonts just encourage you to stop wasting time and just buy the commercial font you need.

Personally, I do not recommend having too many fonts installed because it can distract you from your vision. At first, I thought that I was invincible by having hundreds of fonts, believing it expanded my possibilities endlessly, but the truth was that it made me waste more time browsing and it ended up making me feel always anxious and uncertain of my choices. Having fewer and better fonts brought my designs back to the point giving consistency and strength to my work. Not to mention the time I’m saving.

My own conclusion after browsing through so many, many fonts, is that with a bit of patience and resourcefulness, you can get away with professional work only using free fonts. It’s probably not the fastest nor easiest way round, but it is a real possibility. Hope that with my selection I can save you some time and improve somehow your designs.

1. Kontrapunkt


Click on Image to Download

Click on Image to Download

This font was awarded in 2004 the Danish prize for best typeface design. The kind people of Kontrapunkt have decided to give their beautiful creation to the world for much excitement of the designing crowd. This one is a true classic for font lovers because of its modern and clean feel.


Page 2 of 212