Jean-Marc's infotainment stream » Smashing Magazine

« Expand/Collapse

Smashing Magazine

March 02, 2009
12:50
Please Update Your Smashing Magazine RSS Feed
» ‎ Smashing Magazine
0:36
Showcase Of Beautiful Shadow Photography
» ‎ Smashing Magazine
By Daved Brosche and Smashing Editorial Team

Shadows can add a lot to a photograph. They can emphasize emotions, create surreal images, and be used in a variety of ways. While strong use of shadows in color photographs tends to be mostly used in silhouettes, it can also appear in a variety of other forms in color photos as well. In my opinion though, shadows are most powerful when used in black and white photographs.

Below we present a showcase of truly outstanding photos that make strong use of shadows in a variety of ways. All images are linked to the sources where they were found. Please feel free to explore further works of photographers showcased in this post.

You may also be interested in the following related posts:
45 Beautiful Examples Of Shadow Photography
Ricky Montalbano
Just a neat, artistic picture of a skateboarder and his shadow.

deadstar

Philippe Sainte-Laudy

Newbaro

Vic Nicholas

John Sloan

Vilhjálmur Ingi Vilhjálmsson

Nuuttipukki

teddymb

Thomas Mues

Bill Hinton

TJ Scott

Valerie (pearceval)

Gazza or Garry

Darvin Atkeson

F. A. Ecker

William Hundley
William Hundley is the fan of the so-called “Entoptic Phenomena”: cover your friends with a cloth, ask him/her to jump in the air and make photos while they are jumping.The result is the effect which is called Entoptic Phenomenon in digital photography.

madolina

Kap’n'Kaos (Mike)

Jason Swain

Lara Fairie
A stunning silhouette of a beautiful young lady. The light and shadows here create and excellent beauty shot.

Paul Bredow

Rosie Hardy
A very creative use of shadows to help portray a powerful feeling and emotion in this picture.

Massi Miliano
A combination of deep shadows, dark colors, creativity, and perfect time make for a very interesting and surreal photo.

David Herreman
“View from the top of ‘Levant Terril’ at Mons in Belgium. A ‘terril’ is a hill made from mining waste. There are still a lot of them in the old mining regions like Mons, now being appreciated as green areas. I’ve used a ND1000 filter in order to have an ‘evening effect’ even if the sun was high in the sky. This is NOT a tone-mapped HDR but a digital blending of 3 exposures. The main exposure was of 30 sec.”

Alonso Díaz

Leley Noronha

Fred Eerdekens

Katarina Stefanović

Kevin McNeal

Josh Exell

ms4jah

Michael McAreavy

Watari Goro
Original picture – no Photoshop or image manipulation is used.

duesentrieb

ViaMoi

Ciscophotography

Sarah France

Gloredel
Create use of shadows to create some abstract tears.

Last Click
Joshua Liberman

Related Posts
You may also be interested in the following related posts:
© Daved Brosche for Smashing Magazine, 2009. | Permalink | 25 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: inspiration, photography, shadows
February 27, 2009
15:29
Desktop Wallpaper Calendar: March 2009
» ‎ Smashing Magazine
Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months.

And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?

This post features 45 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.

Please notice:
- all images can be clicked and lead to the preview of the wallpaper;
- you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
So what wallpapers have we received for March 2009?
Paragliding
"Some people are made for the sky, some people are made for the Earth! Clear Sky, travelling and flying that’s what we are living for." Designed by Michael Gabris from Zvolen, Slovakia.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Third Month of the Year
"Playing with typography." Designed by Nikola Lazarevic from Nis, Serbia.
- preview
- with calendar: 1440×900, 1680×1050, 1920×1200
March-09
"I wanted to do someting with the avantgarde font, but because its very used and its very destinct I thought why not do it in 3D. I have never seen avantgarde in 3D (its probably done, but I havent seen it). Anyways, I wanted it clean but with some color to symbolize that its still winter here in sweden but the spring is coming right up with all its color." Designed by Pål Linder from Sweden.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Spring is coming
"Spring is coming soon and I can’t wait until the flowers start blooming again." Designed by Kathleen Verhetsel from Belgium.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Valentine Hangover
"I designed this for those who are sick of Valentine’s Day in mind. March may be pushing it to be hung up on some holiday but I think you have to keep the ol’ love box going all year. And it’s my birthday on the 18th! Yay! " Designed by Jason Jajalla from Toronto, Ontario, Canada.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Hug me Forever
Designed by Jana Jelovac from Belgrade, Serbia.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Inspiration Inspired
"The motivation for this wallpaper is David Ogilvy one of the greatest minds in advertising." Designed by Martian Design Studios.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1280
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1280
Space Invaders
"The inspiration for this wallpaper comes from the classic arcade video game Space Invaders. Since the game itself is very simple, I thought it was appropriate to make the wallpaper minimalistic too." Designed by Reinis Ivanovs from Riga, Latvia.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Good Luck
"Happy Saint Patrick’s Day! Though many think that it’s the “luck of the Irish” - Irish luck is indeed bad luck. (or at least that’s what I’ve heard) So this wallpaper is a play on that with the destruction of the 4 leaf clover and the words “good luck march” trying to actually wish everyone the best of luck for the month of march even though Irish luck is seen as bad luck." Designed by Lucas Tetrault.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Abstract Eastegg
"My work is for the march month, thats the month off the east time, i wont to rememenber that, the eggs, the rabits, anda the place where their live and eat: the carots. I creat a beautiful composition with that elements." Designed by Ana Fernandes from Castelo Branco, Portugal.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Lost Between Earth and Space
"Inspiration behind Lost-Between-Earth-and-Space came from feeling lost and confused. Sometimes you are not sure whether you are here or out there so. I created this wallpaper to constantly remind me to not always be like everyone else, to be different and to remind me that confusion is not a bad thing because it can lead to excellent ideas and great success." Designed by Marcos Garcia.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
April loves March
"Following on from some of the valentine inspired calendars from Feb, I thought that maybe March could do with some loving to. A simple postcard from ‘April’ would spread the love." Designed by John Sheppard.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Pizzicato Wail
Designed by Laura Racero from Madrid, Spain.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Madman
Designed by Manuel Ressel from Germany.
- preview
- with calendar: 320×480, 1024×768, 1280×960, 1600×1200, 1680×1050, 1920×1200
March Spring
"This one is the Beauty of Spring. As we all know March is the season of Spring in the northern hemisphere, the beauty of nature can be seen in this season. Greenery all over the place makes the Earth look like Heaven." Designed by Shashank Goswami from India.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Crane
Designed by filip from Germany/Spain.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Random Assortment
Designed by Jon Victorino from Campbell, USA.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Ripe and Raw
"This wallpaper tells that with combining old and fresh designs you can come up with something that will attract different generations:) and also this pic was shot by my girlfriend who is a professional photographer and my source of inspiration." Designed by Roy Galve from Philippines .
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Urban Night
"March is that month when winter gives way for first signs of spring. The origin of the name comes from Roman *Martius* after Mars. I wasn’t able to catch Mars from my window, so I settled with Moon." Designed by Ilan Bresler from Israel.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Eat Sleep Design
"After a great deal of personal searching and staring moodily into still pools of water, I made the admission to myself that these are really the only things that I need on a regular basis. It also comes as a handsome 11×17 freely available on my web site." Designed by Colin Parks from Canada.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Clinging to Colour
"I designed this wallpaper as a typographic / abstract work paying tribute to my thoughts whilst creating it with the words inscribed. It was also an exercise of “less is more”, as the piece started out with many other elements and textures and was eventually reduced right back down to what you see today." Designed by John O’Nolan.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Magic Horse
"I like Magic and fantasy and full moon so I thought to do a fantasy with a full moon . . . finally I came up with this . . ." The wallpapers is based on the tutorial Create a magic night. Designed by Maya Sivalingam from Sri Lanka.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
St. Patrick
"This wallpaper not only touches on my faith as a Catholic but also my roots in Ireland. Using a St. Patrick Prayer Card. I created an aged wallpaper bearing St. Patrick along with a little information about him other than he drove all the snakes out of Ireland." Designed by Rachel E Cobb from USA.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Computer Head
"This wallpaper features a watercolor of a guy with a computer monitor as a head, with a big eye on the screen. I work with computers a lot, and sometimes it feels like I’m turning into a computer zombie - you know, when 5 hours later you realize its 5 hours later." Designed by Nicole Hanusek from USA.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Colorful March
"March is my favorite month because it starts with my birthday ! :) it brings colors and fun in my life. thats why theme is colorful march ;)" Designed by Veerendra from India.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Spring Coming
"When spring’s coming you can feel it in your bones. I wanted to recreate this feeling with colors and textures. Simplifying things (too much): each month is a journey (car), but it can be creative (pencil) and magical (fractals)." Designed by PeHaa from Poland.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Stpatsday Spring
"I took a shot of the moss in the back garden to use one day in a design but have never found the need till now. With St. Patrick’s day coming up I thought it would be nice to add a four leaf clover sprouting out and highlighting this fantastic day, and add a blast of colour to peoples desktops." Designed by Gareth Brown from Birmingham, UK.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Gritty St. Pats
The wallpaper was removed due to the copyright infringement.
Deep Underwater
"There are deep underwater fishes. All ocean creatures are wonderful, they always inspirate." Designed by Valeria Kuzminskaya from Ukraine.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Spring Tulips
"Spring is ready to begin, it is my favorite season of the year." Designed by Benedikte Vanderweeën from Ronse, Belgium.
- preview
- with calendar: 800×600, 1024×768, 1280×960, 1600×1200, 1680×1050, 1920×1200, 2560×1600
- without calendar: 800×600, 1024×768, 1280×960, 1600×1200, 1680×1050, 1920×1200, 2560×1600
Flowers & Fly
"Its part of the calendar cyclus, a series of artworks, painted on mesh gear. The flowers and the fly symbolize the reawakening of nature and life, the rise of spring, grey fades to colors…" Designed by Werner Wagner from Germany.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Detail
"Details are small, but they can make the different… or a big poo." Designed by Alexander Chludek from Germany.
- preview
- with calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080
- without calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080
Art Retro Motion
"I had some time off from school so I like to design and this is the result." Designed by Sipko Dijkstra from The Netherlands.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Martius Blindness
"This started out as a skull vectorization with numerology turned grunge piece with a symmetric touch march was originally named ‘martius’ after mars, roman god of war. This is the 3rd month of 09, a year of many wars; civil wars, financial wars & the never ending human wars.
In man’s quest for their own causes, they are seemingly blind to those around them while they have moved on, those left behind have to pick up the pieces and it never ends - satisfaction is not a permanent vocabulary in man’s dictionary. " Designed by Joy Lym from Singapore.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Colour of Love
"March is the month when people start impatiently waiting for early Spring; and Spring, among other things, associates with falling in love. To me the colour white symbolizes these feelings more than any other colour. And this design is also quite personal - about my own feelings towards that maybe special someone. The surrealistic touch of bits and pieces connected with strings is how we slowly get to know the other person." Designed by Signe Cāne from Latvia.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Scrappy Love
"This calendar reflects my love of collage and texture. I love tiny details and layers of different styles and subjects. It also showcases a love of typography and tokidoki! Its a free flowing doodle." Designed by Cara Bonsdorf from Victoria, BC, Canada.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
First Blossoms
"First Blossom - a hand drawn tree that bursts into blossoms the first day of Spring (the 21st of March)." Designed by PeHaa from Poland.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
March Holi
"Vibrant Holi is the name I have given to this set. As you may know - “In INDIA Holi is celebrated in March and it is a festival of Colors, where people color each other with ‘gulal’ and play it with all happiness and enthusiasm.” So Say HOLI HAI!!" Designed by Shashank Goswami from India.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Typo
"My motivation is my imagination =D" Designed by Filip Skundric from Slavonski Brod, Croatia.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
How Should I Fly
Designed by Sinem Şenol.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Japanese Girl’s Day
"This calendar design is inspired by kimonos, origami birds, and the Japanese holiday Girl’s Day, which is on March 3rd each year. March 3rd is also my sister’s birthday, so I made this for her." Designed by Viil Lid from Norway and Honolulu, USA.
- preview
- with calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
- without calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
The Search
"I shot this picture in Mahabalipuram, Tamilnadu. The lady was
February 26, 2009
22:16
10 Steps To The Perfect Portfolio Website
» ‎ Smashing Magazine
by Lee Munroe

You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you’d need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.

A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.

You may want to take a look at the following related articles:
- Creating a successful online portfolio
- 50 beautiful and creative portfolio websites
What makes for a good personal portfolio website? 1. Logo
Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.

It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.

Mohit goes by the alias of CSS Jockey.

Jason Reed uses a signature-style logo of his name.
2. Tagline
Once the user sees who owns the website, they’ll want to know what it is you do. This is where you explain what you do with a tagline. Your tagline should be short and snappy, summarizing what you do.

Things to ask yourself when writing your tagline:
- What are you? A designer? A writer? A developer?
- What do you do? Design websites? Develop games?
- Where are you from? Country? City?
- Are you a freelancer or do you work for a studio? Are you looking for work?
Sarah Longnecker makes it clear that she puts together videos and is good at it.
3. Portfolio
This is a personal portfolio website after all, so your portfolio will determine whether the website is interesting or not. People will want to see your previous work to decide whether you’re good or not and for general interest, to see what you’ve been up to in the past.

Depending on what you do, your portfolio should contain big high-quality images, clearly accessible to the user. Always include a link to the live version of the website you worked on, and link your screenshot to the live version (another common convention that people expect). Include a short description for each project, including the different skills that you needed to complete the project.

It’s never a bad idea to get a testimonial from a client. Your visitors might also be interested in the stages of development for your projects and how you arrived at the final outcome.

Leigh Taylor displays nice clear screenshots of previous work and indicates what software was used during development.
4. Services
Your tagline summed up what you do, but you’ll want to go into a bit more detail here about each service that you offer. You can’t expect potential clients to guess what you do based on your portfolio, and you don’t want to leave them wondering whether you offer a particular service or not.

Make it clear, and break it down: Web design, development, video, copywriting, branding, etc. You may want to be even more specific: corporate branding, church website design, Flash banner ads and so on.

Chris Spooner clearly indicates the services he offers for both print and Web.
5. About me
It’s all about you. Let people see the man or woman behind the mask (i.e. website). Share your background, where you came from, how many years you’ve been in the business, etc. The more details you give, the better your users can form a bond and build trust with you.

If you’re not camera-shy, show a picture of yourself. This will give potential clients peace of mind by allowing them to see who they’re dealing with, and it adds an element of trust.

Don’t be afraid to show off your awards and recognition here. You want people to know you’re good at what you do.

Chikezie Ejiasi shows us a photo of himself and even lets us know how to pronounce his name.
6. Contact
This is one of the most important elements of a portfolio website but is often hidden or even neglected. A potential client has browsed your website, is impressed with your portfolio and can see who you are. Now they want to hire you.

Your contact information should be obvious and easy to access; don’t hide it in the footer. Let people know they can contact you for a quote or a chat. Use a form to make it easier for users to contact you (so that they don’t have to take down your email address and then open up their email manager). A form also allows you to ask for specific information, such as name, email address, website URL, details of inquiry.

Stuart Johnston offers clear contact details throughout his website but also provides an easy-to-use contact form.
7. Blog
A blog is always a good idea. Blog about your area of expertise; show you know what you’re talking about. It will help promote you and prevent your website from lying static.

Let people follow you by subscribing to an RSS feed, and show off your most popular blog posts to new readers.

Be sure to enable comments for feedback. Don’t make users register to add a comment to your blog, and don’t use anti-spam Captcha software, which only turns people off from commenting. There are plenty of anti-spam plug-ins available that don’t require users to do extra work.

Chris Wallace uses his blog about Web design-related topics to help out other people in the industry and to engage in discussion.
8. Call to action
Ask yourself what you want to get out of your personal portfolio website. Do you want to be hired? Attract more blog readers? Maybe you just want people to know who you are.

Each page should have a call to action, a “Next step.” The best way to accomplish this is with a “call to action” button that is clear and stands out from the rest of the page. Link it to your blog, portfolio or contact page, and use appropriate language (e.g. “Hire me,” “Request a quote,” “View my portfolio”).

Matthew Brown’s call to action is a contrasting button that stands out from the rest of the website.
9. Use social networking websites
Now that people have an interest in you and your work, encourage them to follow you on other websites. Make it clear that they can follow you on Twitter, Facebook, Flickr, LinkedIn, etc. Make the most of social networks and have a group of friends to call on if needed.

Sam Brown offers clear links to other websites he uses, allowing us to stalk him.
10. Language and communication
How you conduct yourself is important. Remember, it’s a personal portfolio website, so be personal. You don’t need to sound like a corporate brand with no emotion. Be friendly and personal, but also clear and precise; don’t ramble. Once you write all the text for your website, read it again and see if you can cut it in half.

Marius Roosendaal uses a relaxed and friendly tone on his website.
Other tips:
- Let people know where you’re from. This is always interesting to know, and some clients prefer to work with people nearby or in the same time zone.
- Validation is important, especially for Web designers. If you’re going to be building professional websites for clients, then your own website’s code should at least be valid.
- Link images, not just text. Most people will click on images, expecting them to point somewhere.
- If you don’t have any previous clients for your portfolio, create a WordPress theme, design an icon set, develop a Twitter mashup, etc. You have a lot of possibilities, and there’s a big difference between having one project to show in your portfolio and having none.
40+ beautiful personal portfolio websites
Robbie Manson

F. Claire Scroggins

Timothy van Sas

Ole Martin Kristiansen

Maru Velázquez

Chikezie Ejiasi

Miki Mottes (Flash)

Jakub Krcmar

Mopa

Chris J. Lee

Pedro Lamin

Cartonblanc (Flash)

Leigh Taylor

Alex Coleman

Sarah Longnecker

Toby Powell

Jay Hafling

Elliot Jay Stocks

Tony Geer

Marius Roosendaal

Ryan O’Rourke

<img /> is everything (Phil Thompson)

Leigh Taylor

Design Me (Marek Levak)

Matt Dempsey

Brad Candullo

Andre Augusto

Rob Hawkes

Magnus Jepson

Corking Design (Daniel Cork)

Evan Eckard

Alexandru Cohaniuc

Miles Dowsett

Andrew Bradshaw

Shannon Moeller

Vitor Louranco

Mark Dearman

Wong Yeng Kit

Chris Wallace

Spoon Graphics (Chris Spooner)

Fabiano Meneghetti

Mark Wallis

Chris Morris

Paiko (Heiko Brömmelstrote)

Conan Robbins

Henry Jones

Winnie Lim

Greg One (Gregoire Hoin)

Mark Hadley

David Appleyard

Design Moves Me (Roy Vergara)

Brian Murchison

Mike Precious

Digital Deceptions (Duncan)

Chirag Solanki

Jason Reed

Johnston North (Stuart Johnston)

Penflare Designs (Sean Farrell)

Nine Lion (Chikezie Ejiasi)

Brian Wilkins

Jason Santa Maria

David Hellmann

Guillaume Pacheco

Dave Lam

Luke Stevens

James Lai

Alessandro Cavallo

CSS Jockey (Mohit)

Kerry Nehil

Darren Hoyt

Matthew Brown

Digital Mash (Rob Morris)

The Things We Make (Mike Kus)

Ed Merritt

What do you expect to see on a good personal portfolio website?
Anything important we’ve missed? What would make the difference between your deciding to hire someone and deciding against it?
Further reading:
About the author
Lee Munroe is a freelance web designer from Belfast. You can see his other writings on web design on his blog, or follow him on Twitter.

(al)

© Lee Munroe for Smashing Magazine, 2009. | Permalink | 156 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: design, Design Showcase, portfolios
February 25, 2009
21:21
10 Useful Tips For Ruby On Rails Developers
» ‎ Smashing Magazine
By Greg Borenstein and Michael ‘MJFreshyFresh’ Jones

Rails is an model-view-controller Web framework written in the Ruby programming language. One of its great appeals is being able to quickly crank out CRUD-based Web applications. A big advantage of Rails over other frameworks is that it values convention over configuration. If you follow the correct conventions, you can avoid lengthy configuration of files, and things just work! Therefore, you spend less time writing boring config files and more time focusing on business logic.

Now, we love Rails. But don’t get us wrong. Like any tool, it’s not the perfect solution to every problem. A lot of the biggest complaints people have about the framework come from using it in situations where something simpler, smaller and more lightweight would do just fine. We love Sinatra for anything with minimal server-side involvement. Merb is another excellent minimal framework. And nothing beats apps that run completely in the browser with JavaScript: they can be deployed nearly for free, can scale almost infinitely and never have to be restarted.

In the overview below we present 10 useful tips, ideas and resources for Ruby on Rails-developers (both newbies and professionals). Please feel free to share your tips, ideas and suggestions in the comments to this post!
1. Plug-Ins Save Time
Rails has a well defined plug-in structure that enables you to easily install and use plug-ins in your application. David Heinemeier Hansson, the father of Rails, once stated that he uses five to six plug-ins in each Rails application.

There’s an old nugget of developer wisdom that “the best code is no code at all.” Part of what makes us so productive when developing in Rails is that all the code that we don’t have to write because someone else in the community has already written a plug-in that provides the functionality we need.

There are a few ways to install a plug-in in Rails, however the most common is using script:
```
# Install from a git repo
script/plugin install git://github.com/mislav/will_paginate.git

# Install from a url
script/plugin install http://topfunky.net/svn/plugins/calendar_helper
```
You can save yourself a ton of time and hassle by becoming good at searching the Web (and especially the almighty GitHub). A couple of places to find plug-ins are Core Rails, Railsify and Rails Plug-in Directory. Need to integrate with an existing API or consume some kind of standard format data? Need tagging, pagination, or another common Web application feature? Odds are that some great Rails or Ruby developer out there already has a project going that will get you at least most of the way there.
2. Testing is Fun and Easy with Rspec
For most people, the word “test” brings back scary memories of school exams. When working with Rails, however, automated testing can make your development experience much more enjoyable. While lots of people have strong, nearly religious, opinions about them, at their core, automated tests are just little helper programs you write that run bits of your main code to make sure they do the right thing. When done right, testing will improve your workflow and increase your confidence in the results.

Rails ships with a test framework baked right in, but for the last couple of years all the cool kids have been using an alternative called Rspec. Rspec’s biggest advantage is its syntax for specifying tests:
```
describe "My Cool library" do
  before do
    @cool = Cool.new
  end

  it "should be full of penguins." do
    @cool.get_penguins!
    @cool.penguin_count.should == 10
  end

  it "should melt if it gets too warm"
end
```
What’s great about Rspec’s syntax is how much English it uses. The describe block that sets the context and each assertion within it takes strings that you use to explain what your code should do. Often, this is the most important stage: you sit down to write the assertion, getting as far as you can, and then you think, “Right, what should this code actually do then?”

Because Rspec lets you leave off the block that implements the assertion (as in the second melt example), you can quickly brainstorm all of your functionality, and then go back and implement the tests later as you write the code. In the meantime, Rspec will consider those tests as “pending” and give you little reminders about them in your test runs.

Besides helping you write code in the first place, another great thing about tests is that, once you have enough of them, they let you see how all of your code is related, making it easy to know if your recent change broke anything else in your application. Rspec makes it easy to get good test coverage through the use of custom generators that create the tests right along with the rest of your code:
```
$ script/generate rpsec_scaffold MyModel
```
Once you’ve got tests to ensure that the basic functionality works successfully, you can make changes and add new code with confidence without worrying about introducing invisible bugs. As long as you run your tests regularly, you’ll know as soon as you break something. And as GI Joe taught us, knowing is half the battle!
3. Save Time, Use Rake
Projects often include more than just application-specific code. Sample data have to be created, Web services have to be queried, files have to be moved, code snippets rewritten, etc. Resist the urge to shell script or to cram in a migration or controller. Use Rake. It rocks!

Rake is a build tool written in Ruby, very similar to make. Rails projects have several Rake tasks already defined; to see these, run the rake -T command.
```
macbook$ rake -T

rake data:bootstrap		# load in some basic data [caution: will nuke and replcace cate...
rake db:create:all		# Create all the local databases defined in config/database.yml
rake db:drop			# Drops the database for the current RAILS_ENV
...
rake ts:run				# Stop if running, then start a Sphinx searchd daemon using Thi...
rake ts:start			# Start a Sphinx searchd daemon using Thinking Sphinx's settings
rake ts:stop			# Stop Sphinx using Thinking Sphinx's settings
```
Adding your own Rake tasks is quite easy. In the example below, you see that the task is name-spaced and has a description and task name, allowing you to write in Ruby.
```
namespace :data do
  desc "load in some basic data [caution: will nuke and replcace categories, categorizations and inventory items]"
  task :bootstrap => :environment do
    # clean out existing:
    [Category, Categorization, InventoryItem].each{|m| m.find(:all).each{|i| i.destroy}}
    InventoryItem.create! :name => "Compass"
    c = Category.create! :name => "Basic Apparel"

    ["Men’s Heavyweight Cotton T",
    "Men’s Heavyweight Polo",
    "Women’s Organic Cotton Fitted T",
    "Women’s Fitted Polo",
    "Children’s T-Shirt",
    "Jr’s Distressed Hoodie",
    "Hemp Messenger Bag"].each do |name|
      c.inventory_items.create! :name => name
    end

   ...

end
```
4. Track Application Exceptions
Exceptions happen, and when they do, you want to know about them! Your client shouldn’t be the one telling you that a problem has occurred; you should already be aware of the issue and working to resolve it. Exception notification has been available in Rails for a while. There are exception notification plug-ins that make it easy to be notified. However, some services such as Hop Toad and Get Exceptional add a lot of value to your application.

Both of these services are easy to install and provide a great UI for tracking your exceptions. You can even sign up for a free account to try things out.

By centralizing the application exceptions, you are able to see how frequently these exceptions occur, what environment they occur in (a particular browser? a particular location?), what parameters were present and the full stack trace. This centralization of data helps you see patterns and resolve the issue more quickly, which results in a better application and happier users.
5. Mix and match between frameworks and servers with Rails on Rack
As of version 2.3, Rails runs on top of Rack. Rack makes it possible to mix and match between Ruby Web frameworks and servers. If you’re using a framework that supports it (like Rails, Sinatra, Camping, etc), you can choose from any of the servers that do also (Mongrel, Thin, Phusion Passenger, etc.), and vice versa.

In addition to introducing all kinds of new options for deployment, this change means that Rails now has access to the exciting world of Rack middleware. Because Rack lives at the intersection of your app and your server, it can provide all kinds of common functionality directly. A great example of this is Rack::Cache.

Rack::Cache provides a caching layer for your application that you control simply by sending the correct headers in your responses. In other words, all you have to do is install a bit of code in the Rack config file:
```
require 'rack/cache'

use Rack::Cache,
  :metastore => 'file:/tmp/rack_meta_dir',
  :entitystore => 'file:/tmp/rack_body_dir',
  :verbose => true
```
And make sure your controller actions send the right headers (for example, by setting request.headers["Cache-Control"]) and Bam!, you’ve got caching.
6. Easy Data Dumping
You’ll often need to get data from production to dev or dev to your local or your local to another developer’s local. One plug-in we use over and over is Yaml_db. This nifty little plug-in enables you to dump or load data by issuing a Rake command. The data is persisted in a yaml file located in db/data.yml. This is very portable and easy to read if you need to examine the data.
```
rake db:data:dump

example data found in db/data.yml

---
campaigns:
  columns:
  - id
  - client_id
  - name
  - created_at
  - updated_at
  - token
  records:
  - - "1"
    - "1"
    - First push
    - 2008-11-03 18:23:53
    - 2008-11-03 18:23:53
    - 3f2523f6a665
  - - "2"
    - "2"
    - First push
    - 2008-11-03 18:26:57
    - 2008-11-03 18:26:57
    - 9ee8bc427d94
```
7. Keep Your Constants in One Place
All applications have constants, variables that are defined with data that don’t change, such as the name of the application, the tagline, values for crucial options, etc. We use the Rails initializer feature to define a config/initializers/site_config.rb for housing these constants. By using this convention, all developers on a project know exactly where to look for the constants and can quickly make changes.

Many people have questions about when to put a constant in the site_config.rb instead of the class it is used in. For a constant that are only used in a single class, we suggest putting it in that class. However, if the constant is used in more than one location, put it in the site_config.rb. For more on constants, have a look at Rubylearning.
```
# File config/initializers/site_config.rb

REPORT_RECIPIENT = 'jenn@scg.com'
REPORT_ADMIN = 'michael@scg.com'
```
8. Console for Working on Code
Sometimes you may have code that you’re curious about. Will it work this way? What’s the output? What can I change? Rails ships with a wonderful tool called console. By running script/console you will enter an interactive environment where you can access your Rails code just as though the application were running.

This environment is incredibly helpful. It is often used in production environments at times to quickly peek at data without having to log in to the database. To do this in a production environment, use script/console RAILS_ENV=production:
```
macbook$ ./script/console
Loading development environment (Rails 2.1.1)
>> a = Album.find(:first)
=> #
>>
```
9. Ugly Views Getting You Down? Try Haml.
Views are how your Rails application generates the HTML pages your visitors actually see and use. By default, Rails uses the ERb templating system to let you embed bits of Ruby in your markup so that you can insert your data as needed. However, recent versions of Rails let you take your pick of templating languages, and nowadays the Ruby interwebs have been all abuzz about an alternative system called Haml.

Haml is marketed as “markup Haiku.” Its CSS-inspired syntax lets you focus on the semantics of your data rather than worrying about closing all the angle brackets that come with using ERb and HTML.

For comparison, here’s a bit of markup in standard ERb:
```
<%= print_date %>
<%= current_user.address %>

<%= current_user.email %>
<%= h current_user.bio %>
```
And here’s the equivalent in Haml:
```
#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right_column
    #email= current_user.email
    #bio= h(current_user.bio)
```
Haml’s not for everyone, and many people will find this syntax quite alien. But if you value concision and are fluent in CSS, Haml may be just the ticket.
10. Know Where to Watch What’s Happening in Rails
Rails and Ruby both have large and active communities that constantly generate changes, improvements and new projects. Trying to keep up with all the activity can be daunting, but it’s essential if you want to benefit from the community’s best work and continue to increase your Rails and Ruby knowledge.

Thankfully, a number of sources aggregate some of the most important activity:
- GitHub has a most-watched projects page, which is a great place to start.
- Similarly, RubyInside’s monthly What’s Hot on Github and
- the GitHub blog’s Rebase series both feature selections of interesting work from the website.
There’s also a whole universe of Rails training:
- Rails Envy
- PeepCode
and news aggregators:
- follow ruby_news on Twitter,
- subscribe to Ruby Inside,
- subscribe to Ruby Flow.
Another avenue is the Rails Core mailing list and the #rails-core IRC channel.
About the authors
This guest post was written by Greg Borenstein and Michael ‘MJFreshyFresh’ Jones, lead Ruby developers for StepChange Group. StepChange designs, develops and manages social media widgets and Facebook applications in partnership with leading brands and agencies. Outside of work, Greg builds drum-playing robots and other hardware hacks, and MJ leads a local group of Unicycle-borne pirates. They live and work in beautiful, moist Portland, Oregon.

(al)

© Crystal Beasley for Smashing Magazine, 2009. | Permalink | 53 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: rails, ruby, tools
February 24, 2009
22:02
The Smashing Book: Join In!
» ‎ Smashing Magazine

No, we’re not giving anything away in this post. Instead, we’ve got some work to do, and we need you to play an important role in it. Our most interesting (and important) project for 2009 is something we are modestly calling “The Smashing Book”: a smashingly written, beautifully designed and professionally printed book. It will be created by and for the Web design community. Four key decisions have already been made: the book’s title will be “The Smashing Book”; it will be a paperback; the price is fixed, as is the release date, which is early September 2009.

We want to create a totally unique and exciting book, full of insightful and useful articles; a book that contains only articles that a reader of Smashing Magazine would really want to read. No fluff, no cruft, just hearty meat and potatoes content.

To achieve this, we need the help of our community: your help. And what could be better than working on this important project together with our readers? If you want to participate in our project, please visit the forum (the registration is required for replies) and help in any of the following ways:
1. Suggest The Book Content
First, you can suggest a topic for The Smashing Book. Let us know what you want to read and what topics we should cover. What enticing, creative, useful articles should be written by us and our team? What should a Smashing Book contain? You can propose any topic you think would be great, but it must fit the small universe of Smashing Magazine and relate to design and Web development.

Once we receive your suggestions, we’ll evaluate them, filter and sort them. If necessary, we’ll open a second and third round of voting, which will (hopefully) help us select the most important and relevant topics.

Afterward, we’ll present the final list of topics to our authors team, discuss the ideas with them and assign topics. Articles for the book can also be written by members of the Web design community (of course, the authors will get paid for their work). So, if you want to propose an article for the book, please suggest your idea in the Book topics forum.
2. Suggest The Cover Design (Front And Back)
We want you to decide what The Smashing Book will look like. You can propose ideas for an unforgettable book cover design (any colors can be used), and you can also present your drafts in the Cover design forum. We’d love to see first drafts and invite forum members to discuss them, too! We haven’t decided anything about the appearance of the book yet, so free your imagination.

3. Suggest The Layout Drafts
Help us decide on the perfect prepress for The Smashing Book (not the final layout, but only layout drafts). How should it be designed? What typefaces should be used? What about font sizes, headings, columns, footnotes, image captions, page numbers, markup? What structure should the book have in general? We are open to your suggestions, so please participate in the Book layout forum: suggest your ideas and submit your drafts. We are looking for your ideas, wishes and expectations.

4. Help Us Out, And Spread The Word!
We want you to be part of The Smashing Book. Help us out by designing some outstanding buttons, badges, banners, pins, icons, graphics and whatever else you can think of. We are confident that together we’ll achieve truly outstanding results, even if the process will be a long one and see the inevitable hurdles along the way.

Of course, we will reward you! And as you would expect, we’ll also have small, exclusive rewards to give away to the most active helpers and participants.

Thanks for reading. And now, let’s get to work let’s move to the forum!

(al)

© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 129 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: book, community, smashing
February 23, 2009
20:55
Hardware Giveaway: 5,000 Comments Challenge!
» ‎ Smashing Magazine
Update (27/02): we received 9000 comments – we hit the 5,000 mark! And the winners are: 1) graphic card goes to Joshua Lawson (#5533) from Sewell, NJ; 2) the mouse goes to Gareth (#5651) from Cape Town, South Africa; 3) the headphones go to Catalin (#8598) from Bucharest, Romania. Congratulations! All winners have already been contacted.

If you didn’t win, it may make sense for you to subscribe to our RSS-feed, more giveaways are coming! Thank you for participation!

Why should you get gifts only on Christmas and your birthday? We at Smashing Magazine love to give away things all year long. This time, you have a chance to get some really cool hardware.

Taking part in this giveaway is easy… well, maybe not that easy. We’re keen on seeing a lot of comments and want to see at least 5,000 comments in this post, so spread the word and help us get to 5,000 or more comments and then win one of the smashing prizes below.

The 5,000 comment challenge is important, folks. If we don’t reach that goal, then the prizes get torched. Okay, they don’t get torched, but the giveaway only kicks in after 5000 comments. It is not a random, unrealistic figure either; we got 3,800 comments in our recent books giveaway.
Prizes You Can Win
Sapphire Radeon HD 4870 X2, with 2 GB of GDDR5 memory 2 x 256-bit memory interface, 2.4 teraFLOPS of GPU power and 1600 stream processing units.

Sennheiser PXC 350, a high-end travel headphone, with active noise compensation and a set for active attenuation of ambient noise.

Microsoft Arc Mouse Black, an ergonomic laser mouse with customizable buttons that folds to 60% of its fully expanded size; for both left-handers and right-handers.

How Do I Participate?
To participate, just leave a comment and tell us:
- Where in the world are you currently located (country and city), and
- How is the weather outside? Rainy? Sunny? Foggy?
The giveaway lasts until Friday, February 27th. The three winners will be selected randomly. Good luck, folks, and please spread the word!

© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 9000 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: Events, giveaway, hardware
14:59
Magazeen: Free Magazine-Look WordPress Theme
» ‎ Smashing Magazine
We love our readers. We respect the hard work of designers and developers across the globe. And we do our best to make the web design community stronger and the Web a little bit prettier. Therefore we ask talented artists and creative professionals to showcase their skills and release something unique and beautiful as a gift to the community. And when designers agree, truly impressive works see the light of day.

Today we are glad to release Magazeen — a free advanced Wordpress-theme in a magazine-llok created by the talented WeFunction Design Agency. This bold magazine 2-col-theme was designed with the main focus being on typography, grids and magazine-look. It was created especially for Smashing Magazine and its readers.
Download the theme for free!
The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the theme as you wish.
- live demo
- large preview (.jpg, 1.7 Mb)
- download the theme (.zip, 0.3 Mb)
- download the PSD-sources (.zip, 4.5 Mb)
- release post on WeFunction.com
Inspiration behind the design
As usual, here are some insights from the designers themselves:

“We’ve created the Magazeen theme to try and pump as much style and functionality into a WordPress theme to give people something they might not expect from their standard Wordpress theme. There really is very few limits to what WordPress handle, so we’ve built in a lot of custom features and options to give people a little taste of what is possible, and how some small functionality tweaks can make a huge difference to the overall experience of browsing a blog. On top of that we’ve wrapped all that functionality up in a really cool and modern theme, with nice big title fonts, and a stylish colour scheme.

The Magazeen theme is packed full of cool features to really encourage your readers to explore new posts and similar items. The first thing you might notice is the jQuery image showcase at the top, which is fully automated and will display the image from the latest post, and the title above it without you having to do anything other than define the image URL in the custom field we have created which will appear on in your admin post area.

Drop-Down Menu

The other cool and fully automated feature is the related posts drop down effect. It’s a simple idea, if you click the category of the full posts a drop down will appear with some related posts from that category. And if you don’t see a post you like you can always view the full category by clicking view more.

Sidebar

The sidebar area’s have been created to give you a lot of control over the featured posts, and recent posts. Once you’ve installed the theme, you need to go to your Widgets area, and simply activate the “Magazeen Latest Posts”, and “Magazeen Featured Posts” widgets. You can easily control how many posts each feature displays, and using this widget will ensure the area is styled correctly with the post image showing correctly.”

Footer

Thank you, guys. We appreciate your great work, your attention to details and the brilliance of the execution.
Related posts
You may be interested in the following free Wordpress-themes as well:
© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 231 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: Freebies, theme, wordpress
February 22, 2009
23:06
20 Brilliant TV Show Title Sequences
» ‎ Smashing Magazine
Since the advent (and in turn, massive success) of “TV on DVD”, television programming has really upped the ante in production value. Now-a-days it seems every show is presented in glorious high definition with big name actors and well-structured story telling. But there is another significant improvement in television over the last few years that could use some recognition: the title sequence.

Long gone are the days of cheesy video montages involving “memorable” moments from seasons past, coupled with tacky music you can’t get out of your head… yes I’m looking at you, Golden Girls.

Today, the credit sequences on television are so visually pleasing that even though we possess the technology to skip past them, we don’t. They’re that captivating. It is in recognition of these amazing television title sequences that we’ve compiled our favorite 20 Brilliant TV Show Title Sequences.

You may want to take a look at the following related articles:
20 Brilliant TV Show Title Sequences
Mad Men
This is probably my favorite title sequence on television at the moment. Every time I watch it, it leaves me wanting more. It was also hilariously parodied on the Simpsons.

The United States of Tara
A new show with a beautifully animated title sequence. The pop-up book effect is really well done.

The IT Crowd
Such a fantastic title sequence! The 8-bit style animation no doubt speaks to the shows demographic.

Fringe
It’s amazing how captivating a 20 second title sequence can be. This one really draws you in.

House MD
The title sequence for “House M.D.” is simply beautiful. The imagery and music work so well together.

Dexter
A dark and clever title sequence that sums up the tone of the show beautifully.

True Blood
A masterfully made title sequence that really throws you into the creepy world the show has created.

Nip/Tuck
Love this title sequence! The symbolism used is both brilliant and creepy at the same time.

Clone High
Clone High’s title sequence is so well made, it rivals any live action show out there.

Desperate Housewives
Say what you will about the show itself, there’s no denying it has a pretty cool title sequence. The animation is great.

Flight of the Conchords
If you’ve ever seen this show, it’s only appropriate for the title sequence to feel like a music video.

Carnivàle
A brilliantly animated title sequence that brings tarot cards to life.

The Sopranos
Though a fairly simple title sequence, this remains one of my all time favorites.

Samurai Champloo
The colors, imagery and typography all work together beautifully in this title sequence.

Six Feet Under
The title sequence for “Six Feet Under” is beautifully shot and at the same time sets up the tone and premise of the show perfectly.

Lost
For a show like Lost that is so reliant on instant gratification, this minimalist title sequence works perfectly to keep up the momentum.

Deadwood
The title sequence for Deadwood will bring you back to the old west faster than you can say “sarsaparilla”.

Rome
A wonderfully animated title sequence. The effect of the wall paintings coming to life is perfectly executed.

John Adams
Though bending the rules a little to include a mini-series, we would be remiss to include John Adams’ powerful title sequence in this list.

Big Love
For a show about polygamy, a title sequence that is littered with metaphors and symbolism is an absolute must.

Dead Like Me
The title sequence for the “late” Dead Like Me perfectly captured the dark humour of the show.

The Simpsons
After 20 years, the Simpsons have fully revamped their famous animated title sequence for their transition into high definition.

Honorable Mentions
There were so many titles we wanted to include in this list but didn’t quite make the cut for one reason or another.
Related Posts
You may want to take a look at the following related articles:
About the author
Andrew Lindstrom is a freelance web designer, blogger and inspiration junkie. Say hi to him on Twitter or read his ramblings on his design inspiration blog at WellMedicated.com.

© Andrew Lindstrom for Smashing Magazine, 2009. | Permalink | 126 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags:
14:47
Space Explosion Photoshop Tutorial
» ‎ Smashing Magazine
by Tyler Bramer

Digital space art is one of the most inventive and beautiful art genres of this era. This tutorial shows you how to create your own space scene using three stock photos and Adobe Photoshop. The majority of the effects use the brush tool, layer effects and the filter gallery. You may want to set aside an hour or two before starting this tutorial because it requires quite a bit of work to accomplish. So get those creative juices flowing and let’s get started!
Download the files
Before we begin, we need some resources to use for this tutorial. Let’s also preview the image that we will have created by the end of this tutorial. You can also download the full source files.
- Download images
- Download full Photoshop source files (.zip, PSD)
* Note: Planet and moon were found on Google Images. The rock was taken from stock.exchng.
Step 1: Placement of Planets
Create a new document that is 1200 x 1600px with a black background. Then, place the image of the planet in your document and move it to where you want it located.

Because the colors of the planet are a little dull, let’s modify a little. Duplicate your planet layer by right clicking it and selecting Duplicate Layer. Set the new layer’s Blending Mode to Overlay.

Go back to your original planet layer and grab your Burn Tool. Set the brush size to 300 px and make sure the Range is Midtones and the Exposure is 50%. Burn the lower left half of the planet, making sure you follow the curve of the planet as you do so.

Place the image of the moon in the upper-right area of the planet. Like we did with the planet, duplicate the moon and set the layer to Overlay.

Step 2: Creating the Environment
Before creating an environment for our space scene, you may want to look at some resources and art work done by others to get some inspiration and knowledge. PSDTUTS has a great post with some amazing artwork done by talented artists.

Make sure all of these layers are located beneath the planet layer. You may also want to put them in a group.
Creating the Coloration
Create a new layer and fill it with White. Grab a 300 px soft brush with 75% opacity and turn Scattering on.

Erase across your layer so that there are random areas of white and gray. Then set the layer opacity to 25%.

Create a new layer. Make sure your foreground and background colors are black and white, and go to Filter > Render > Clouds to fill your document with some black and white “clouds.” Then apply Filter > Render > Difference Clouds about three or four times.

Set the blending mode to Overlay, the Fill to 75% and apply the following Gradient Overlay.

Create two new layers. On each of them, render some clouds and apply difference clouds on only one of them. Set both of them to Overlay.

Creating the Stars
Make a new layer and fill it with black. Go to Filter > Noise > Add Noise. Set the Amount to 10%, Distribution to Gaussian, and make sure Monochromatic is checked.

However, this adds way too many stars to our document. To fix this, go to Image > Adjustments > Levels. Set the left slider to 50 and the right slider to 100. This will keep only the larger stars and a few medium ones in the image. Then, set the blending mode to Screen so that only the stars show up and that the black areas of the layer are hidden. You may want to create multiple layers with this technique and lower the Opacity to create more depth.

Create a new layer and grab a white 5 px soft brush. Then change the brush settings to the following:

Brush areas of the new layer to add some larger stars. Don’t add too many, and try to put them in places that make them pleasing to the eye. Then add a white Outer Glow, with the blending mode set to normal.

More Coloration
Create a new layer and fill it with a dark blue color, such as #1b1464. Grab a large 300 px soft eraser brush with 75% opacity. Turn the Scattering on and erase areas of the layer so that only certain parts are colorized. Try to leave more in the upper-right area of the layer, because this is the focal point of the graphic. Set the layer to Screen, and lower the opacity to 40%.

Repeat this process again with a different color, such as with a green, #20410a. Set this layer to 50% opacity.

Create a new layer and grab a large soft black brush, between 300 px and 800 px. Brush once or twice behind the upper-right corner of the planet. Lower the opacity to 40%, and then apply Outer Glow of the white, set to Overlay.

Color Balance
Now for the fun part. This next step brings the background environment together! Go to Layer > New Adjustment Layer > Color Balance.

Shadows:
- Cyan/Red: +20
- Magenta/Green: -3
- Yellow/Blue: +20
Midtones:
- Cyan/Red: -1
- Magenta/Green: +23
- Yellow/Blue: +31
Highlights:
- Cyan/Red: +52
- Magenta/Green: -17
- Yellow/Blue: -76
Light Bursts
Create a new layer. Grab a 300 px soft white brush, set to Dissolve, and brush once on the layer in the upper right. Then go to
Filter > Blur > Radial Blur. Set the amount to 75, Zoom, and Best. Set the layer to Overlay. Repeat the process using a larger brush and apply it further down.

Empty Space
On a new layer, grab a 500 px black brush and brush around the outer edges to create some nice black space. Make sure the bottom-left corner has more because we want that area to be dark.

Step 3: Planet Effects
Make sure the following layers are all placed beneath the moon layer, so that they only apply to the planet. You may also want to put them in a group.
Darkening Areas
Duplicate your planet layer. On the bottom planet layer, apply a Filter > Blur > Gaussian Blur of 3 px. Then apply an Outer Glow of white, set to Overlay.

Create a new layer above your planet. Then, select your planet by Ctrl + clicking on the layer thumbnail of the planet. Fill the selection with black, and set the layer to Overlay. Then lower the opacity of the layer to 40%.

Create another new layer, and once again select your planet. Grab a 500 px soft black brush and brush around the outer edge of the planet, but leave the upper right untouched, because we want this to be the bright side of our planet.

Creating an Inner Glow
Create a new layer, and select your planet. Grab a 300 px soft blue (#00aeef) brush, and brush around the outer edge of the selection, making sure you get more blue on the upper right of the planet because this is where our bright side is.

Create a new layer and select your planet. Fill the selection with white. Drag the selection diagonally down and to the left, and delete most of the white. Then apply a Gaussian Blur of 5 px.

Then give the layer an Outer Glow of white, set to Overlay.

Color Balance
Once again, select your planet. Then go to Layer > New Adjustment Layer > Color Balance. You’ll notice that the color balance layer now has a mask applied to it of the selection we made.

Shadows:
- Cyan/Red: +6
- Magenta/Green: -1
- Yellow/Blue: -3
Midtones:
- Cyan/Red: -78
- Magenta/Green: 0
- Yellow/Blue: +29
Highlights:
- Cyan/Red: +47
- Magenta/Green: -8
- Yellow/Blue: -33
Glow Effects
Once again, create a new layer and select your planet. Grab a 300 px white soft brush and brush around the bottom ¾ of the planet. Try to make the brushes fit the curvature of the planet. Then set the layer to Overlay, and lower the opacity to 50%.

Create another new layer and select your planet. Using a 300 px white soft brush, brush inside the upper-right side of the planet. Then set the layer opacity to 20%.

Create another layer, similar to the last one, except create more white space on this layer. Also, change the layer to Overlay and the opacity to 50%.

Create another new layer. This time, grab a 300 px brush and a nice red-orange color (#e6602b). Select your planet and then brush an orange area underneath the moon. Change the brush color to a yellow (#fdfc92) and brush a smaller area underneath the moon. Lower the layer opacity to 50%.

On a new layer, select a 200 px black brush and then brush around the bottom ¾ of the planet. Don’t restrict the selection to the planet this time. Let some of the brush overlap the background.

Intermission!
I would like to take this moment to congratulate you if you’ve made it this far. This is quite a long tutorial and requires a lot of dedication from you to follow. Don’t be frustrated, either, if your example doesn’t look like mine. It takes years to develop your skills in Photoshop. Keep experimenting, and find some great inspiration and resources to keep you moving along.

When working on a document of this complexity, make sure you keep all of your layers organized and labeled. Below you can see how I currently have my groups and layers organized and labeled, so that I can easily recognize them when I look back at them later. Ignore the hidden layers, those will come later.

Large view

Step 4: Moon Effects and Explosion
Make sure all of the following are located above the moon layer. You may also want to put them in a group.
Glow Effects
Remember when we used a red brush and a yellow brush to create a glow in the upper right of the planet? We are going to do the same thing to the lower edge of the moon. Grab a 200 px red-orange (#e6602b) brush, and brush around the outer edge, ¾ of the way around the moon. Repeat the same process with a 100 px yellow (#fdfc92) brush. Then lower the opacity of the layer to 20%.

Remember how we created the white glow in the upper-right area of the earth? Repeat the same process for the moon. Select the moon on a new layer, fill it with white, move the selection down some and then delete most of the white. Apply a Gaussian Blur of 1 to 2 px. Then give it an Outer Glow of white set to normal.

Explosion
Create a new layer and grab a 65 px white soft brush. Then brush a small area where the moon meets the planet. This layer will add to the effect that the next two layers create.

Create another new layer and keep your 65 px white brush. Brush a larger area underneath the moon. Make sure you follow the curvature of the moon as it meets the planet. Then, grab a small 3 px brush and turn Scattering to 1000% and Size Jitter to 75%. Brush some white particles around the area that you just brushed white.

While still on this layer, apply an Outer Glow with the color #ffa800, set to Overlay.

Create a new layer and fill it with black. Then go to Filter > Render > Lens Flare. Set the Brightness to 100% and the Type to 50 to 300 mm Zoom. Move the flare so that it is positioned towards the bottom left, and then press “Okay.”

Erase most of the layer, only leaving a small area around the main part of the flare. Then position the center of the flare over the moon. Then set the layer to Linear Dodge.

Create a new layer. Use a number of soft brushes with a nice red color (#ed1e26) to create a red hotness above the moon. Then lower the opacity of the layer to around 10 to 15%.

Step 5: Creating the Asteroids
To create our asteroids, we are going to add another stock image to our document. There’s a great picture of a huge rock over at stock.xchng, so we’ll use that! Normally, you would use the pen tool to cut the rock out yourself, but I’ve done it for you to speed up the process.

Large view

Open the image, and select the white background using the Magic Wand Tool. Then go to Select > Inverse to invert your selection, so that the rock is selected. Copy and paste it into your document. Then position it over the planet, rotate it so that the light part is facing the explosion, and finally resize it to a nicer size. Then duplicate it, and set the new one to Overlay. Press Ctrl + E to merge the two layers together so your asteroid is one layer again.

Duplicate your asteroid multiple times, resize it and rotate it. Do this until you have a nice little cluster of asteroids. If any of the asteroids gets blurry, go to Filter > Sharpen > Sharpen to sharpen it up a bit.

If you have any asteroids above other asteroids, they need to cast a shadow. Select the asteroid that has a shadow cast on it. Then, on a new layer above that asteroid, use a small soft black brush to brush a shadow in.

As before, use a nice orange (#e6602b) and yellow (#fdfc92) color to color the edges of the asteroids. Do this by Ctrl + clicking on the layer thumbnails and then using a large soft brush to brush the edges on a new layer. Set the layer mode to Multiply and the opacity to 50%.

Repeat the process multiple times for the other asteroids. Try to find other pictures of rocks to get some different sizes and shapes.

Step 6: Final Touches
These next steps are for really going in and chiseling out the look we want. This stage usually involves a lot of experimentation and patience to get the look you want.

Create a new layer on the top level of your document. Go to Image > Apply Image and press “Okay” to paste a merged copy of your document onto the layer. Go to Image > Adjustments > Desaturate to make the image grayscale.

Then go to Filter > Blur > Gaussian Blur and apply a blur of 2 px. Set the layer to Overlay and lower the opacity to 50%. What we just did was make our dark colors darker and our light colors lighter, and also add a small blur between them to give it a glow.

Large view
Final Step: Pat Yourself on the Back
There we have it: our Space Explosion is complete! I don’t know about you, readers, but I’m exhausted. Normally, pieces like this take days or weeks to put together, and now that you know how to do it you can create some original pieces of your own. Below, you will find some links to works that inspired this tutorial and others that are for inspiration.
Resources
About the author
Tyler Bramer loves graphic design and game development. He constantly seeks to improve himself and find as much inspiration as he can. He passes any knowledge he has on to others as best as he can. You can follow Tyler on Twitter.

(al)

© Tyler Bramer for Smashing Magazine, 2009. | Permalink | 55 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: explosion, photoshop, tutorial
2:11
50 Useful Design Tools For Beautiful Web Typography
» ‎ Smashing Magazine

By Noura Yehia and Smashing Magazine Editorial Team Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce ...
February 21, 2009
10:56
50 Useful Design Tools For Beautiful Web Typography
» ‎ Smashing Magazine

By Noura Yehia and Smashing Magazine Editorial Team Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce ...
2:11
15 Beautiful High-Quality Free Fonts
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
February 20, 2009
13:31
Ask SM [CSS/JS]: Divs of Equal Height, Dealing with IE 6
» ‎ Smashing Magazine
This is our third installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we’ll cover how you can take care of a smooth page scrolling and Internet Explorer 6 bugs. You’ll also learn how to aggregate RSS Feeds, how to create dynamic width list images and how to create div-containers of equal height.

If you have a question on HTML, CSS or JavaScript, feel free to reach me (Chris Coyier) using one of these methods:
1. Send your question by email to ask [at] smashingmagazine [dot] com.
2. Post your question in our forum
3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier
Please note: I will answer as many questions as I can, but I will certainly not be able to answer them all. I hope that you will use the forums to post questions because that will give you an opportunity to get help from the community as well.
Smooth Page Scrolling
@Mango_Juice writes:

What is the best JavaScript method for a smooth page scroller?

Hey Mango_Juice, jQuery has the ability to do animated scrolling, using its animate function and the “scrollTop” parameter. Karl Swedberg covers this technique on his great website Learning jQuery.

The best way to handle it is to set the scroll targets with hash tag links (e.g. #about) on your page. You set your “href” value in the anchor links to “#target”, and then that link will jump to the page element on that page with “target” as its ID. This means it will work regardless if JavaScript is enabled or not.

For the majority of users, who do have JavaScript enabled, we’ll intercept the clicks on those links and scroll down to them (or up), as needed. Here is the code that makes it happen:
```
$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name='   this.hash.slice(1)  ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});
```
View Demo | Download Files
Dynamic Width List Images
Giedrius writes:

Is it possible to create a list with CSS that has the text aligned to the right side, but on the left side has an image taking up the width of the remaining space?

Hey Giedrius, when I first read your question, I thought immediately of a recent post on Web Designer Wall, CSS: Menu List Design. Nick La uses some clever positioning techniques to build a flexible text-based list mimicking standard menu design. You know, the kind that has a little dotted line that connects the text on the left to the price on the right.

But then as we talked, it was clear you needed something different. Because the image has to have a gradient that isn’t horizontally repeatable, we literally need to use an inline image and set its width as needed. CSS alone isn’t capable of performing calculations and effecting DOM elements like that, so let’s enlist jQuery for the job.

First, the completely normal unordered list in HTML:
```
<ul>
	    <li>Lorem ipsum dolor sit</li>
	    <li>Aliquam</li>
	    <li>Vestibulum auctor dapibus neque</li>
</ul>
```
The only thing to note is that the length of text in each list item varies significantly. So let’s think through what we need to do:
- Measure the full width of the list item.
- Measure the width of the text inside.
- Append the image to each list item.
- Set the width of the image to (full width) - (text width).
Here is how I did it with jQuery:
```
$(function(){
	$("li")
	  .wrapInner("<span></span>")
	  .prepend("<img src='images/listimage.png' />");
	var listWidth = $("li").width();
	$("li span").each(function(){
	      var itemWidth = $(this).width();
	      var imageWidth = listWidth - itemWidth;
	      $(this).parent().find("img").width(imageWidth - 10).height(1);
	});
});
```
View Demo | Download Files
DIVs of Equal Height
Adrian Engelbrecht writes:

How is it possible to have two divs, one with the navigation and one with the content, that always have the same height. Is that possible?

Hey Adrian, there are actually a lot of different ways to do this, but everyone would agree that none of them are as easy as they should be with CSS.

1) Fake it with Faux Columns.
If you just need two divs to look like they are the same height, but not necessarily be the same height, this is the easiest method. You can read about Dan Cederholm’s faux-columns method here and see a simple example here.

2) Use Tables or CSS Tables.
Obviously, you know that using tables for layout is bad mojo, but if it gets you out of a tough spot once in a while, the world will forgive you. So rather than using divs, you could bust out table cells to do this, because in the same row they are always the same height. CSS tables are a hot new technique (personally, I still have serious doubts), but they may help as well. Check out this tutorial on NETTUTS.

3) Use Absolute Positioning.
If you know one column is going to be taller than the other, you can use absolute positioning to accomplish this task. Simply wrap both of them in a div with position: relative;. Then have your main column grow to however large it needs to be, pushing the wrapper out. Then absolutely position the other column with both top: 0; and bottom: 0;, and a fixed width along one edge. Dan Rubin has more about this technique here.

4) Use JavaScript.
I generally avoid JavaScript for anything layout-related, but if you aren’t worried about that, you could possibly use JavaScript to set equal heights. JavaScript has the power to measure elements, compare and perform calculations and all that other magic necessary to get the job done. Take a look at this jQuery plug-in.
Aggregating RSS Feeds and Implementing Them on a Website
Kyle Steed writes:

Are there any free services that can take RSS feeds from different locations and combine them into one feed that I can use? Then once combined, is it easy enough to implement on a website and style using CSS?

Hey Kyle, yes, there is such a free service. Whenever I need to work with external RSS feeds and integrate them in a website, I turn to SimplePie, which is a brilliant and free PHP class for doing just this.

I put together a little demo for you, which smashes together the CSS-Tricks and Smashing Magazine feeds and displays them on a page.

View Demo | Download Files

It was pretty easy to do. First I include the SimplePie file on my page and set up the options that I want:
```
<?php

    //get the simplepie library
    require_once('inc/simplepie.inc');

    //grab the feed
    $feed = new SimplePie();

    $feed->set_feed_url(array(
    	'http://feeds2.feedburner.com/CssTricks',
    	'http://smashingmagazine.com',
    ));

    //enable caching
    $feed->enable_cache(true);

    //provide the caching folder
    $feed->set_cache_location('cache');

    //set the amount of seconds you want to cache the feed
    $feed->set_cache_duration(1800);

    //init the process
    $feed->init();

    //let simplepie handle the content type (atom, RSS...)
    $feed->handle_content_type();

?>
```
Now you have an object loaded with RSS goodness. This loop will spit out the feeds in order of date:
```
<?php foreach ($feed->get_items() as $item): ?>

	<div class="chunk">

		<h4 style="background:url(<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>) no-repeat; text-indent: 25px; margin: 0 0 10px;"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>

		<p class="footnote">Source: <a href="<?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?>"><?php $feed = $item->get_feed(); echo $feed->get_title(); ?></a> | <?php echo $item->get_date('j M Y | g:i a T'); ?></p>

	</div>

<?php endforeach; ?>
```
Clearly, you have everything, both the markup and CSS, to fully control all of these elements now. The SimplePie website has some nice tutorials on it (including screencasts). Refer to the API Reference to find all the stuff you can get out of the object.
Dealing with IE 6
@chrisjlee writes:

Best practice/workflow for designing for IE 6?

Hey Chris, ain’t IE 6 fun? It’s been a hot topic for a long time now, all of this business about how and what to support. jQuery does a fantastic job of abstracting all of the cross-browser pains for JavaScript, but unfortunately we don’t have such magic for CSS.

The fact is, we still have to deal with IE 6 when we are creating websites intended to cater to as wide an audience as possible. At work, I think every single major client we have uses IE 6 at their desk. Makes me want to cry some days, but that’s just one of the painful parts of our job and we’ve got to live with it.

The more you deal with it, the better you become at avoiding IE 6’s common pitfalls and quickly fixing bugs. Here are some of the most common ones. To fix them, never use browser hacks. Hacks simply aren’t needed, because you can use conditional comments to serve up special styling just for IE.

If you’re not comfortable dropping IE 6 support, Simon Clayson has an elegant workaround:
```

<link rel="stylesheet" href="my_gorgeous_layout.css" type="text/css" media="screen" />





```
This will serve up your regular style sheet to all other modern browsers and serve up a special style sheet, starting from scratch, to IE 6. This special “textonly.css” could contain only very basic text styling so that the website is usable but mostly unstyled.
Help us to improve the “Ask SM”-section!
Please feel free to suggest improvements for our “Ask SM”-section. Do you miss something? Would you like to change something? Please let us know in the comments!

Is the new “Ask SM”-section useful for you (if not, please suggest improvements in the comments)?
( polls)

(al)

© Chris Coyier for Smashing Magazine, 2009. | Permalink | 63 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: CSS, equal height, html, ie6, javascript
10:56
15 Beautiful High-Quality Free Fonts
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
2:11
Free Fonts Of The Month: Myndraine, Museo Sans
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
0:31
40 Excellent Illustrations In Web Designs
» ‎ Smashing Magazine
In website design, there are an endless amount of possibilities, styles and techniques that can be used to make a beautiful design that flows with the content. One of these styles is an illustration-heavy layout, which can take a website to a whole new level. Illustrations are becoming more and more popular, and some designers are really pushing the limits with some beautiful ones.

Below you’ll find 40 designs that feature skillful and beautiful illustrations, integrated properly to create a visually pleasing style.

Also consider our previous articles:
- Web Design Trends 2009
  A review of trends and popular design elements for 2009.
- Retro and Vintage in Modern Web Design
- 50 Beautiful And Creative Portfolio Designs
- Textures in Modern Web Design
  A great showcase of websites that have unique and creative textures.
- 50 Beautiful Blog Designs
Beautiful Illustrations In Web Designs
DivVoted
An all-around beautiful layout, with some beautifully colored illustrations to accompany it.

The Alamo Basement
A nice, colorful illustration that has a comforting air.

StrawPoll
StrawPoll has a beautifully illustrated landscape, with an extremely clever layout.

Green Globe Ideas
A high-quality and very creative illustration in the header.

old loft
A very nicely illustrated layout, with good coloring and contrast.

Pixele
Pixele has a colorful and rather funky header that works well with the rest of the website.

Radu Ceuca
Another very colorful and grungy layout, with a painted effect.

ten24 Media
A beautiful yet simple illustration that looks excellent against the brown background.

Silverback
A very skillful and detailed illustration on a nice green layout.

Banjax
A simple but powerful illustration in the header, amidst a minimalist layout.

Neweracaptalk
A unique, flowing illustration that doesn’t detract from the content.

Dean Oakley
This is a great portfolio with a very creative horizontal layout. The illustration looks very nice with the layout.

K4 Laboratory
A very colorful illustration mixed with interesting moving Flash objects and some cool effects.

Visit Cascadia
A very detailed header background illustration.

Galan
A beautiful and brightly colored portfolio, with nice hand-drawn illustrations.

Branded07
A very clean website with some blue minimalist illustrations and really cool penguins.

WP Coder
A very clever design with a nice, detailed, semi-realistic illustrated machine.

Africa Tour 2008
An excellent mixture of grunge and clean styling.

45royale Inc.
Another elegant header design that looks great with the clean layout of the rest of the website.

Fatburgr
A few skillful illustrations in a very cool overall layout.

Drink ZZZ
This Flash website uses grungy illustrations and smart Flash effects to create a fun user experience.

Ali Felski
Another website with grungy textures and fancy colors.

DrupalCon DC
A colorful background graphic with a unique style.

LightCMS
The LightCMS website is known for its awesome coloring, textures and graphics.

Sourcebits TangledDecals
A very beautiful website, with colorful illustrations across the background, great type and grungy graphics.

GoMediaZine
A nicely detailed and colorful illustration the doesn’t detract from the content. This is also a good example of how colorful shapes can be mixed with black and white graphics.

STUDIO7DESIGNS
One more very popular website, because of the breathtaking background illustration.

Phizz
A mainly black and white illustration mixed into a colorful website.

answerJam
A very colorful minimalist website with simple shapes for illustrations.

Adit Shukla
A cool illustration that uses many different shapes but not too many colors, thus achieving a perfect balance.

Iceberg
Nice shapes and beautiful blue colors create a flowing design.

Marchand de Trucs
A quite stunning and extremely realistic illustration.

Erguvan Platin Evlri
A stylish watercolor background and a realistic illustration with interactive features.

Starbucks
Hand-drawn and illustrated graphics in a beautiful Flash-based layout.

Viget Extend
A colorful and creative header illustration.

Vimeo
A few simple graphics on a peaceful blue background.

Go Glamping
A cool layout with distinctive shapes and good color scheme.

Twither
Subtle cloud illustrations on a nice layout, with a great landscape illustration in the footer.

IL FRUTTETO
Simple shapes, great colors and gradients combine to make a completely illustrated website.

Umbrella Today?
Very realistic and detailed graphics with a great background design.

Further Resources
You may be interested in checking out these further articles and related resources:
- Web Design: Illustration
  An inspirational resource full of illustrated websites; worth checking out.
About the author
Matt Cronin is a freelance Web and graphic designer and developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials and more. Spoonfed Design is part of the VAEOU Creative Network, a new start-up in progress with new services coming soon.

(al)

© Matt Cronin for Smashing Magazine, 2009. | Permalink | 61 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: design, Design Showcase, illustrations
February 19, 2009
10:56
Free Fonts Of The Month: Myndraine, Museo Sans
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
10:30
Please Update Your Smashing Magazine RSS Feed!
» ‎ Smashing Magazine

By our own admission, we have had trouble these last few months delivering a perfect RSS news feed. Until now, our feed has been hosted by Feedburner, but due to all the recent Feedburner-problems, we decided to take over that task directly and deliver our RSS feeds from our own server, for several reasons.

We bought and configured a new server exclusively for our feed. Hence, the URL of Smashing Magazine’s RSS feed has changed. Of course, we are using a redirection, but it is not working in all cases. So please check your configuration and use the following URL in your feed reader or whatever software you are using to access our articles:

[rss1.smashingmagazine.com]

The old feed URL will not work any longer, so please update your SM RSS Feed, or, if you haven’t subscribed now, it’s best time to subscribe to our RSS-feed now. Thank you for understanding.

The Tasty Smashing RSS Feed

© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 63 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags:
2:11
Ampersands With Attitude
» ‎ Smashing Magazine

By Huw Wilkins Ampersands have long been the character in a typeface with which typographers can indulge themselves. Sweeping curves, flirtatious finishes and bold statements - these are the things that make ampersands an exciting character to use and, better still, to design. Can you spot what typeface is used to display ...
1:23
9 Common Usability Mistakes In Web Design
» ‎ Smashing Magazine
By Dmitry Fadeyev

By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them.

You may also be interested in the following related posts:
1. Tiny clickable areas
Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of links that are far too small; clicking them is harder than it should be. These are the comments links on Hacker News, a social news website. (Clickable areas are highlighted in red):

Here’s an example of the same interface element, the comments link, but this time with a much larger clickable area:

Newspond comments link.

Why would we want a larger clickable area? Simple. Because our hand movement with the mouse isn’t very precise. A large clickable area makes it easier to hover the mouse cursor over the link. To ensure we get a large clickable area, we could either make the whole link bigger or increase the padding around the link using the CSS “padding” property. Here’s the code:
```
<a href="http://www.examplesite.com" style="padding: 5px;">Example Site<a>
```
The CSS has been placed inline together with the markup to make the example simpler, but in real life you’ll likely want to add this styling to your CSS file by giving the link a class or id and targeting it with that.

You can read more about padded link targets for better mousing in a 37signals article on padded link targets. According to the article, padding provides users with “a feeling of comfort. It’s just really easy to click the links. It feels like the links are working with you instead of against you.”
2. Pagination used for the wrong purpose
Pagination refers to splitting up content onto several pages. This is often found on websites that have long lists of items; for example, products in a store or pictures in a gallery. Using pagination for this purpose makes sense because displaying too many items on one page would make the page slower to download and process.

FeedMyApp uses pagination in the right way: to display its vast list of apps in digestible chunks.

But there is another way that pagination is used on the Web today. Content pages, like blog articles, are sometimes split into several pages. Why is this done? What’s the gain? It’s unlikely that the article is so long that it requires pagination; in most cases, it is used to increase page views. Because a lot of blogs and magazines get their revenue through advertising, getting more page views (i.e. individual page loads) boosts their viewing statistics and allows them to charge more for each ad.

The Wired article about Google’s logo is split into eight pages, making it very difficult to read.

While this may seem like an easy way to squeeze more money from your ads, it poses two main problems. The first is that it’s just really, really annoying. Having to load several pages just to read one article isn’t fun. You’re creating a barrier for your visitors that doesn’t have to be there.

The second reason has to do with SEO (search engine optimization). Search engines use the content on your page to make sense of what it is about and then index it accordingly. If the content is split into several pages, it is diluted, and so each page makes less sense on its own and holds less keywords about its topic. This may negatively affect the ranking of the article in search engine results.
3. Duplicate page titles
The title of each Web page is important. Page titles are the pieces of text we write between the <title> tags in the <head> section of our HTML code. Sometimes people create a generic title while working on their website’s template — their website’s name, for example — and then re-use the same title across the whole website. This is wrong because it robs each page of a couple of key benefits.

The first benefit is that a good title communicates to your visitors a lot of information about what the page is about. People can quickly figure out if they’re in the right place or not. Remember that this title doesn’t just show at the top of the browser window; it’s also shown on the search engine results pages. When people see a list of results on a search engine like Google, they read the page title to figure out what each page is about. This alone is a good enough reason to spend a little time optimizing your page titles.

The second reason has to do with SEO. Search engines need different information to rank the results of a particular query. Page title is one of the more important pieces of information they use to gauge how relevant your page is to a particular search term. This doesn’t mean you should load as many keywords as possible into the title — that defeats the first benefit — but you should ensure that each title succinctly describes the content of the page, including a couple of words you think people will search for.

Here’s an example of a good page title. This is a Smashing Magazine page title as seen in Safari:

Here we have the title of the article, the category of the article and the name of the website. Putting the name of the website last puts more emphasis on what the page itself is about, rather than on website branding, which is still there. Here’s what the HTML code looks like in the markup:
```
<title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</title>
```
And here’s how the page is displayed in a Google search result:

4. Content that is difficult to scan
To ensure that your website is usable, you cannot only have a good design; you also need good copy. Copy is a term used to describe all of the text content on a website. Yes, good design will guide your visitors around the website, focus their attention on the things that matter and help them make sense of information chunks; but visitors will still need to read text to process information. This makes copy an essential part of your overall website design.

Before you can write good copy, though, you need to understand how people will actually view your website. Don’t assume that your visitors will read everything from top to bottom. That would certainly be great, but unfortunately that’s not how it works. The Web bombards people with information, and most of us try to consume as much of it as possible. This leads to very frantic browsing behavior: we jump from one piece of content to another, from one website to the next. People tend not to read websites top to bottom; they start reading whatever pops out at them first, and then move to the next thing that captures their interest. The pattern looks a little like this:

The Basecamp landing page.

The red circles indicate the areas where visitors tend to focus their gaze, and the numbers indicate the order in which they look at these elements. Users dash from one interesting part of the page to another. To take advantage of this chaotic browsing pattern, you need to structure your copy a certain way. Here are a few pointers:
- Have a few points of focus. These are the parts of your page that attract the attention of visitors. This can be achieved by stronger, higher-contrast colors and larger fonts. You can also use images, such as icons, next to text to give these areas even more visual pull.
- Each focus point should ideally be accompanied by a descriptive heading. Without reading the copy any further, visitors should be able to understand what this bit of content is about. Don’t make headings mysterious or vague to draw people in. Keep them informative yet concise. People want information quickly, and withholding it only annoys them.
- Any other text should be short and easy to digest. Provide just the essentials, and strip out the rest. In most cases, extra text that copy writers put in to make a point less ambiguous only adds dead weight. People will read bite-sized pieces of text but are put off by long paragraphs. Cut your copy down until no fat is left to cut.
The “Why you should use OpenOffice” page could definitely use improvement. No clear points of focus are provided, aside from the large banner at the top; and the copy is grouped together in huge chunks, making it daunting to read.

Things app’s features page splits up each feature into little bite-sized segments, each with its own icon and heading. This makes the list easy to scan. To make copy even more effective, list actual benefits rather than feature names.
5. No way to get in touch
User engagement is important if you want to build a successful community, and communities are important if you want to build successful websites and social Web apps. User engagement is also important if you want to build loyal customers. Quickly answering people’s questions and fixing their problems doesn’t just mean that you have good customer service — it means you care, and your customers and visitors will appreciate it.

But many websites still don’t give visitors an easy channel for getting in touch with the company. Some websites don’t even have an email address or contact form on them.

When you click on the contact link on the official Coca-Cola website. you’re presented with this page. No email, no phone number. Most of the links lead to automated FAQs; the feedback form requires your address and age and has a 500-character limit; the “Submit an idea” form is two pages long, with terms and conditions attached. It doesn’t look like Coca-Cola really wants you to contact them.

Sure, putting your email address on the Web will likely attract a lot of spam, but there are a couple of solutions.

Enkoder is my favorite solution for putting email addresses on the Web. Enkoder is an application that comes in two flavors: a free one for Mac OS X, and another free one as a Web app. It encrypts any email address that you give it and gives you a bunch of gibberish JavaScript code to put on your page. When the page with the code loads, your email magically appears as a clickable link. Bots scouring for email addresses won’t be able to interpret the code — at least that’s the plan.

You could also use contact forms to bypass the problem of showing your email address on a page; however, you’re still likely to receive spam unless you put some good Captchas or other spam protection mechanism in place. Keep in mind that things like Captchas are barriers to user interaction and will likely degrade the user experience.

Forums to the rescue. Online forums are a great communication channel that can be an alternative way for users to get in touch. A public forum is better than a simple contact form or email because your customers can help each other on a forum. Even if you don’t personally respond to a customer, another helpful customer may help that person out, solving his or her problem.

GetSatisfaction is a Web app that works like a forum. Users can post their problems and feedback as topics on the board, and customers and staff can respond to them. Users can add comments to elaborate on their problem. Whether you go with a hosted solution like GetSatisfaction or roll your own message board, a two-way communication channel like this is a great way to keep in touch with your customers.

The GetSatisfaction forum for Apple.
6. No way to search
A lot of people start looking for a search box as soon as they arrive on a page. Perhaps they know exactly what they’re looking for and don’t want to spend time learning the website’s navigation structure. Jakob Nielsen calls these people search-dominant users:

Our usability studies show that more than half of all users are search-dominant, about a fifth of the users are link-dominant, and the rest exhibit mixed behavior. The search-dominant users will usually go straight for the search button when they enter a website: they are not interested in looking around the site; they are task-focused and want to find specific information as fast as possible.

Jakob Nielsen

Whether you run an online shop or blog, you need search. People may come looking for a particular product or for an article they remember reading a while back, and chances are they’ll want to find it with a quick search. The good news, if you haven’t already implemented search on your website, is that it’s very easy to do.

You don’t need to code your own search feature; search engines like Google and Yahoo have very likely already indexed most, if not all, of your website’s pages, so all you need to do is pick the one you want to use and plug in a search box. Here’s the form code for using Google as your search engine:
```
<form action="http://www.google.com/search" method="get">
<fieldset>
<input type="hidden" name="sitesearch" value="smashingmagazine.com" />
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</fieldset>
</form>
```
And here’s the one for Yahoo:
```
<form action="http://search.yahoo.com/search" method="get">
<fieldset>
<input type="hidden" name="vs" value="smashingmagazine.com" />
<input type="text" name="p" />
<input type="submit" value="Yahoo Search" />
</fieldset>
</form>
```
To make it work, all you need to do is change the value of the “hidden” field to your website’s domain name. This will limit the scope of the Google or Yahoo search query to just your website. You may also want to modify the value of the “Submit” text to say whatever you want.
7. Too much functionality that requires registration
Your website may have some content or features that require visitors to register before using. That’s great, but be careful how much content is put behind this registration shield. Very interactive Web applications, such as email, document editing and project management, restrict 100% of their functionality to registered users. Other websites, such as social news websites, do not. I can browse all the stories on Digg and Reddit without having to log in; users do not have to identify themselves to enjoy some functionality.

When you implement a log-in barrier, be careful that you don’t lock away features that don’t really need user identification. Some blogs require people to register before posting. Sure, that will significantly decrease spam, but it will also significantly decrease the number of comments you see, too.

User participation on your website is affected by how many barriers there are. Removing barriers such as registration will almost certainly increase user participation. Indeed, once users start using your website, they will more likely sign up, because they’re already involved.

The GetSatisfaction interface allows you to fill in your comment about a company or product and then click the “Post” button. Instead of seeing your feedback posted, you’re greeted with an unexpected “Log in or register” message. Not good, considering the customer may already be frustrated.

The landing page for Pixlr, an online graphic editing app, has a link titled “Jump in n’ get started!” Clicking on it opens the app. No trials, no registration; you test drive the app right away.

Posterous, a blog hosting network, doesn’t even require registration to start using it. Just send an email with your post, and a new blog is created for you.
8. Old permalinks pointing nowhere
A permalink is a link to a page that isn’t meant to change; for example, a link to a blog article such as the one you’re reading now. Problems occur, though, when a website moves to another domain or has its structure reorganized. Old permalinks pointing to existing pages on the website become dead unless something is done about them. That something is called a 301 redirect.

301 redirects are little instructions stored on your server that redirect visitors to appropriate pages. So, if someone arrives on your website using an old link, they won’t see a 404 error page (”Page not found”): the 301 redirect forwards them to the right location, provided that you’ve set it up correctly. The number “301″ designates the type of redirect that it is: permanent.

Frye / Wiles 404 error.

There are various ways to do 301 redirects. How they’re implemented depends partly on the Web server you’re using. Here are the basics of handling 301 redirects on the most popular Web server right now, Apache.

The following code should go in a file called “.htaccess” in your main website folder. Yes, the file name begins with a full stop. This means it’s a system file, which standard file browsers tend to hide by default. So, if you can’t see it using your file browser or FTP client, turn your “Display invisible files” option on. Just create or (if it’s already there) edit this file using your editor of choice. This file is retrieved whenever a visitor arrives on your website, and any redirect rules you put in there will be applied.

Here’s a simple 301 redirect code:
```
RewriteEngine on
Redirect 301 /oldpage.html /newpage.html
```
The code is fairly self-explanatory. When somebody tries to access “yoursite.com/oldpage.html,” they will immediately be redirected to “yoursite.com/newpage.html.” The “RewriteEngine on” bit at the top ensures that the mod_rewrite engine is turned on (the default is off). This is the engine that handles the redirects.
9. Long registration forms
Registration forms are barriers. They are barriers because it takes effort to fill them in, and the task itself is no fun. People have to invest time and effort to register, and then they have to invest even more time and effort in future to remember what user name and password they used.

We can shrink this barrier by making the sign-up form as short as possible. At the end of the day, the purpose of a registration system is simply to be able to identify each user; so, the only requirements are a unique identifier, such as a user name or email address, and a password. If you don’t need more information, don’t ask for it. Keep the form short.

The ReadOz sign-up form is very long. On closer inspection, we find that half of the fields are optional. If they’re optional, they don’t really need to be there. Such a form would likely scare off a user seeing it for the first time. Show only what the person needs to register; the rest can be filled in later.

Tumblr has one of the shortest sign-up forms around. Just three fields: email, password and the URL of your new blog.

The Basecamp sign-up page has a smart trick. It has no website navigation aside from a home-page link. This keeps the user focused on the sign-up process, without any distractions or means of leaving the page.
Less Thinking
Usability is all about making things easier to use. Less thinking, less frustration. A website should do all the work and present visitors only with the things they’re looking for. Usability is also about the experience people have using your website, so attention to detail matters, as do the presentation and feel of the page.

Drop your thoughts on these and any other usability problems you run into in the comments section below!
About the author
Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. Follow Dmitry on Twitter @usabilitypost.

(al)

© Dmitry Fadeyev for Smashing Magazine, 2009. | Permalink | 153 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: blunders, mistakes, problems, solutions, usability
February 18, 2009
16:37
Compositio: Clean, Beautiful and Free WordPress Theme
» ‎ Smashing Magazine
In comments to our recent freebie releases you asked for a simple, clean and beautiful WordPress-theme; the theme should be easily customize for different purposes and in a variety of settings. We’ve been listening to you and we heard you: and today we are release (hopefully) exactly what you’ve been asking for.

In this post we release Compositio – a simple, clean and user-friendly WordPress-theme, created by talented Elena Gafita for Smashing Magazine and its readers. Compositio is a two column theme, made to for those who want to put their content at the front with a unique light blue design. Random square shapes are the defining graphics of this theme. They are used throughout the background, bringing a special rhythm to the theme.
Compositio: A Free WordPress Theme
A special feature of this theme is the logo changer. You can use the default WordPress setting (“blog name”) or you can use your own logo. Upload your logo in the root folder of Compositio theme and name it logo.png. You can also use the PSD Logo Template in the source folder of the Compositio Theme. (Image limitations: max is 590px/85px). If you want to activate this option go to Administration Panel > Appearance > Logo Options, and select logo type.

The theme is widget-ready, so you can use it as you like. Also Elena customized the CSS for the default widgets to match the site style better. The theme is using a couple of plugins, with some already integrated into functions.php, so there is no need to install them. The only plugin you need to install manually is FlickrRSS (FlickrRSS plugin is in the theme folder) (see the demo).

This work is licensed Creative Commons Attribution-Share Alike 3.0 License. This means that you may use it, and make any changes you like. Just leave the credits on footer if you respect the designer’s work.
- full image preview
- live demo (the server experiences some problems)
- download the theme (mirror) (.zip, 0.2 Mb)
- release post on DesignDisease’s blog
Thanks for the truly great work, Elena, we really appreciate it.
Previews

Comments to a post

The comment form

The sidebar
Related posts
Suggestions for particular themes?
What themes would you like to be released on Smashing Magazine next? What are you looking for? Or, more importantly, what kind of themes shouldn’t we release any more? We appreciate your input in the comments to this post!

What kind of theme should Smashing Magazine release next?
( polls)

© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 66 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: downloads, Freebies, theme, wordpress
10:56
Ampersands With Attitude
» ‎ Smashing Magazine

By Huw Wilkins Ampersands have long been the character in a typeface with which typographers can indulge themselves. Sweeping curves, flirtatious finishes and bold statements - these are the things that make ampersands an exciting character to use and, better still, to design. Can you spot what typeface is used to display ...
2:11
Free Fonts Of The Month: Fertigo Pro, FF Nuvo
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
0:56
50 Useful Design Tools For Beautiful Web Typography
» ‎ Smashing Magazine

By Noura Yehia and Smashing Magazine Editorial Team Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce ...
0:54
10 Easy Steps To Advanced Photography Skills
» ‎ Smashing Magazine

By Trey Ratcliff (aka Stuck in Customs), one of the most famous and renowned HDR photographers on Flickr. In his article Trey describes some professional insights and useful photography tips that he collected over the years of his career.

A camera does not work like an eye; film does not work like memory. There is a fine line between a photo that is quite nice and one that is quite breathtaking. At some unknown point, a photo can cross the Rubicon and be forever a piece of beautiful art. That hinterland between a regular photo and evocative art is a shifting area from person to person and taste to taste. However, that zone can be narrowed a bit once you start to consider the way the brain stores memories and emotions.

And yes, it gets a bit touchy-feely here trying to determine if your work has crossed that line. With rigorous practice and peer feedback, you can start to appreciate where that zone is and, consequently, improve your hit ratio.

The back of the Taj Mahal during a summer sunset.

The good news is that divining your way to more beautiful photos does not require rune rites of scapulimancy. There are some basic things and mantras to keep in mind as you practice and fail, then practice and succeed, then practice and fail, then practice and succeed, and rinse and repeat. We’ll detail a few of these below.
1. Think About The Brain
I’ve always thought about photography differently. I grew up seeing out of only one eye, thanks to several botched surgeries in the 1970s using refurbished archaeological tools of the Australopithecus medicine men.

When you see out of one eye your whole life and then start using a camera in your mid-30s, something happens to you! You come to realize that a camera works nothing like the eye. Forget 3D; I’m talking about the way the brain stores images and scenes.

Upon birth, you have legs, but it takes a few years for your legs to get along with your brain well enough to actually walk you around the savanna a bit. The eyes are the same. They get wired faster than the legs, but the neural pathways from the optic nerve to the parts of the brain that matter take a while to find their chemical trails. You start to sense light levels, then shapes, then edges, then relative positions and the like. And then, around the age 2 or 3, you finally come up with a tagging system that allows you to know generally what a “barn” looks like. Your brain has been working nonstop over that time to give you the visual and memory infrastructure to enable this watershed event.

Fourth of July on Lake Austin: the first HDR photograph to hang in the Smithsonian.

Now, let’s fast forward to today. You’re older, your brain is more or less fully formed, and you happen upon a barn in a field. But it’s not just any barn: it’s the barn you’ve been wanting to see your entire life. And in the distance, a storm is brewing as a gentle sun sets. It’s beautiful; you lock it into memory. The way you lock it into memory is nothing like the way a camera records the image on film (or a CCD). This is what I quickly came to realize as I sat there, looking at a photo I took with a fabulously expensive Nikon and showing it to a friend. “Well, you really had to be there.” I’m sure you’ve all said that!

Now, this first step is a big step: it’s a philosophical re-assessment of how the camera works in contrast to how the memory maps a scene, the latter being a process of layering visual reality with the emotions and memories linked to that scene. You see, you are not just remembering that barn but are remembering every barn; you are not just remembering that storm but are remembering every storm. A beautiful photo must tell the epic tale of the memory, linked with the other emotions that fold into a whole.
2. Engage In The New Global Salon
In the 1860s, all art roads led to the Salon in Paris, which was the most important judged competition of art in the western world. During a period of just over 10 years, the Impressionist masters battled it out in a competitive and cooperative tour de force that created a panoply of creations that we now cannot imagine the world without.

The reason Paris became the center of the art world and an explosion of new art is the combination of new technology in travel and communications combined with Napoleon III’s focus on infrastructure around the Salon.

Hong Kong from a peak on a summer night as the city comes alive.

Today the same thing is happening, although perhaps not everyone really realizes it in a grand historical sense. It’s called Flickr. Flickr has become a techno-Salon, allowing the world to easily use the Internet to enter the competition and force each other to evolve and improve their art. The automated “Explore Algorithm” does a pretty good job of automatically filtering the best photos that are uploaded every day. Go ahead and look at some of the current best of the last 7 days.

Click “Reload” a few times and I promise you will have seen something that impresses. It is quite unbelievable the level of art and beauty that is created every single day. Now, all of this amazing art on Flickr can either inspire or intimidate you, depending on your mindset for competition. I hope it inspires you to upload one photo a day and see if you can make it in the top 500 or even the top 10. And don’t give up. Competition makes everyone better; this is an undeniable truth, and you are not realizing your full potential if you remove yourself from the process.

I can think of a number of things Flickr can do to improve this new global competition. Its AI algorithm to find the most interesting new artists still makes many mistakes. Maybe I will save that for another article! But in many ways, Flickr is close to squandering an amazing opportunity to set the art world on fire.
3. Get Rid Of Your Toy Camera
Oh, look at that camera you have! It’s so tiny and slim and techno-looking. Look! It fits right in your pocket! Oh my, you can take it to parties and sporting events, and it’s so convenient. Oh, it is 10 megapixels, too? Oh my. Well, that is a good camera then!

No, it’s not. It’s a toy: give it to your kids or the nearest gradeschooler (for whom it was designed) and get serious. I know that 19-year-old punk at Best Buy told you that your compact camera is really neat and just what you need. But are you gonna listen to him or me?

Get yourself a DSLR (I have suggestions on my page that aren’t very expensive for people just starting out). For those of you who don’t know, a DSLR is one of those cameras you see the pros carrying, but it doesn’t have to be a giant one like what you see in the NFL endzone.

Sorry to be rude about the toy thing, but you want to take more beautiful pictures, no? Well, a decent DSLR has such a good sensor chip, combined with more flexible lenses, that your batting average will dramatically improve.

An ancient Hindu temple at sunset in the jungles of Indonesia.

Also (people with DSLRs already know this), it is important to have a good wide-angle lens for landscapes. Beautiful photography does not have to be of a landscape, but it commonly is, and this is what many people envision when they want to make their own beautiful photos. So, we should talk about wide-angle lenses here for a moment.

If you are used to using a toy camera, then you have never really seen the world through a good 10 to 24mm lens. It’s almost the difference between regular TV and HDTV. The vistas are wide and bold; the clouds, sun and mountains all fit; the river and bridge are easy to compose; and so on. Once you go wide-angle, your landscape will never be the same!
4. Carry A Tripod For Those Beautiful Sunsets And Sunrises
Oh, what’s that? You don’t want to carry a tripod? What are you, a 9-year-old? Now, come on. You’re a grown-up, and you want to take some seriously beautiful photos. Do you think pros carry around tripods because they like the extra weight? No, of course not. They know what the heck they’re doing.

If you bit off on getting a DSLR, then you are going to need a tripod, especially for sunset and night shots. Unless you have the steady hand of a T-1000, you are going to get some camera shake.

A tripod allows you to do the following things with landscape photography (in no particular order): set up and take your time to compose a photo with serious intent; keep noise low as the shutter stays open longer; look cool as you carry it around; keep the shutter open for 5 or more seconds for those fleeting sunrise and sunset shots; use it as a weapon in a tight spot while traveling (not kidding).

Dresden, Germany

So, are you still worried about carrying it around? The problem, you understand, is mostly your attitude. Let me provide a different perspective. Nothing in life is worth doing unless you’re serious about it. Believe that you are going to shoot that sunset, and you are going to take your nice DSLR and tripod out there and make it happen, and no one is going to stop you. You’re carrying that tripod around because you’re serious about it. Otherwise, you could just go sit on a pretty beach at sunset and drink beer with your friends and not be serious about it. Go ahead… but you won’t be getting any beautiful photography out of it.
5. Admire Impressionism
I spoke earlier about the Salon of Paris and what happened during the Impressionist movement. While the process and examples of what happens when artists start cooperating and competing is interesting from a social-group evolutionary perspective, this section is more about the art itself.

Early critics of the art form found it crude, sloppy and unconventional, to the point that they felt it didn’t even deserve to be placed alongside the classic masters. But the public was awestruck by the new art form. It doesn’t take a critic to know good art, but it does take a careful and discerning eye.

Consider the colors and styles of Degas, Cézanne, Monet and Renoir. There is not a single detail about any well-known Impressionist painting that is the slightest bit “realistic.” But yet, the rough shapes and colors still make sense. Something about it just feels right. What is that something?

An icy lake at sunrise, fed from the seasonal melt at Glacier National Park; a panorama of 90 shots.

To me, what feels right about Impressionism is what we discussed above. These Impressionist images go deep into viewers’ brains and evoke memories of shared scenes and events. The memory is in fact an Impressionist playground of fleeting colors, shapes and edges. A face here, a blur there, a hint of something almost there, but not quite.

Look at Monet’s work. Think about how the yellows of a sun in the distance is the same yellow as an up-close flower. But something about the colors makes the sun feel brighter than the flower. How does he do that? Can you get closer to achieving this with your photography?

As you look at Impressionist paintings, juxtapose them with your own photography. If you want to evoke the same sort of feelings, then consider how it was done without resorting to realism.
6. Practice With HDR
What is HDR? It’s short for High Dynamic Range photography, and it’s all the rage. I have a tutorial on HDR on my blog. But here, I’ll explain HDR in a circuitous but meaningful way.

About 80% of my photos are in HDR, but I do something a little different. As you start looking into HDR (many of you already have), you will begin to notice how absolutely horrible most HDR looks. When many people begin experimenting with it (myself included), it is overdone and looks too psychedelic. Over time, mine have improved via rigorous self-examination and an evolving methodology.

Remember that bit about me growing up and seeing the world with one eye? Now, we come to the second part of this daring mini-biography as we are cross the stepping stones to my point. My background in college was Computer Science and Math, so I’ve always thought about things in terms of algorithms and software. The very first time I used a DSLR camera, when I was 35 or so, I very quickly came to the realization that something was missing.

A young Amish boy allows me to freeze time after I help him carry wood with his sisters.

That missing something was the “software” layer between the eye and the memory. Consider what you do with the barn and apply it to how the camera works. You survey the scene. Your eye jumps around from interesting object to interesting object, sometimes moving slowly, sometimes quickly. Your eye lets in more light in some areas, less in others as your pupil dilates. You squint into the setting sun and see warm colors splashed across the clouds, grass and barn. You remember other barns, other storms, other sunsets. You may have been with someone or were alone, but you certainly remember. You lock it all up in your mind’s eye forever.

Because we are visual creatures, a photo or painting can evoke great memories. But the only way to trigger some of those intense memories on a deep level is to adjust the light levels in the photograph, so that the light levels and color match those buried in your head. The HDR process can help achieve these goals.
7. Take Your Camera Everywhere
Don’t just take your camera out on those rare occasions when you actually decide to set aside a portion of your day for photography. Face it: we’re all busy people with real lives, and setting aside three to four hours for anything extracurricular is tough. But it takes only a few seconds to get inspired for a photo, and it’s no good if your camera is back home.

Gulfoss in Iceland. Catholic theologians of old believed this was the entrance to hell.

Keep it in the trunk of your car in a fun little photo backpack, with a small selection of lenses. You never know when you will see something wonderful. Use this opportunity to take at least one photo a day. It doesn’t have to be a grand landscape; just something small and nice that you may not have noticed before.
8. Understand The Fantasy/Reality Membrane
Do you have kids? Are you a kid at heart? Think about when you were a kid and what happened when you turned into a jaded old grown-up. Maybe by the end of this section you can ask yourself some new questions about reality.

Kids have this remarkable “membrane” between fantasy and reality. They can jump back and forth between the two in an effortless way. In fact, the membrane itself is wonderfully “thick,” in that there is a vast dream-state wilderness where the world is both fantasy and reality. When pressed, kids will tell you what is real and what is pretend, but that is often a painful process that pries them from the escapism they felt so viscerally just a few moments before.

My personal foray over the last year into learning how to draw.

When we are all grown up and serious, that membrane is razor thin, and there is little tolerance of “pretend” and “fantasy.” Why is this? Is it because we are surrounded by other serious people and want to conform? Is it because fantastic escapades are what “kids” do and thus not pertinent to our lives?

Obviously, we can all still get into that fantasy zone, and we all love it. That’s why movies are still such a potent force; they give us social permission to be like kids for two hours, once a week. It also explains the growing relevance of online games.

But when we start talking about photography — well now, that is a different subject! Photography is a serious art form, practiced by classically trained masters whose reality is quite serious indeed! There mustn’t be anything fantastical in the art form. The process goes from camera straight to the film, you see!

Poppycock.
9. Learn To Draw
This is a weird one, eh? Who on Earth has time to learn to draw? Well, you would have time if you stopped wasting it on less important activities. You’ve got one life here, so you might as well start applying yourself. “I don’t have any time! I have kids to look after, a full-time job, a bunch of cool games to play, books to read, exercising to do, a bit of photography, and blah blah blah.”

As a personal experiment, I wanted to see if anyone could learn to draw. This is similar to an earlier experiment I did on myself to see if I could take something I hated and turn it into something I enjoyed. That experiment was with coffee, but I was afraid that learning to draw would be harder, particularly because of the jitteryness introduced from the first experiment.

A tame wild-haired horse on the windy fjords of Iceland.

I’ve always admired people who can just grab a pencil and paper and make something amazing. Man, I’ve always wanted to be able to do that! I began the experiment with the hypothesis that great natural artists can draw anything without any instruction whatsoever. These are true masters, and I was unlikely unlikely to reach that level. However, I thought I could become adequate at drawing and be at least satisfied with myself. A great side-effect, I envisioned, would be new insight into photography: into line, shape, light and composition.

All of this turned out to be true. So, if you have hit a rough spot or are in the doldrums with photography, take up drawing. A few instructional books out there are practical hands-on guides that give you basic pointers. I think you will be quite impressed by how it starts to bleed into your photographic art!
10. Make Mistakes
Make a lot of mistakes. Throw yourself and your art out there and see what works and what doesn’t. Show your stuff to true friends who will give you frank feedback.

Don’t be like those sorry saps on American Idol who make fools of themselves in big auditions because they’ve spent their whole life listening to their tone-deaf mom tell them they are incredible at singing “Over the Rainbow” or because Aunt Mabel enjoyed it so much during the grade 2 play.

Get yourself online and begin making friends by finding other photographers who you respect. Beg and plead for them to come look at one or two of your photos and give frank feedback. They will cut you apart, but just take your medicine, lick your wounds, and go out there and improve.
Fin
And there we have it: 10 things to shake up your world a little bit. I’m no Baudelaire when it comes to writing these sorts of polemics. However, just as he drove Manet to be Manet, perhaps I can do my own little part to stoke the fires and help drive a new art revolution. Evolve and evoke, or whither into nothingness.
Extra Credit
To end off, here is a random selection of some of my other favorites.

The Lonely Trinity

An elderly woman, who has never cut her hair, ascends the stairs to her daily Hindu pilgrimage

Dante’s Gates of Hell, a sculpture by Rodin, captured in proper lighting

About the author
Trey Ratcliff describes himself as a slightly evolved monkey that happens to carry a camera. He’s become unintentionally popular from his photography blog, mostly because his mom emailed about 350,000 people to tell them about it. Trey can found there on his blog or followed on Twitter at @treyratcliff, where you’ll be the first to get news of his latest daily creations.

(al)

© Trey Ratcliff for Smashing Magazine, 2009. | Permalink | 222 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: inspiration, photography
February 17, 2009
10:56
Free Fonts Of The Month: Fertigo Pro, FF Nuvo
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
2:11
Free Fonts Of The Month: Anivers, Gentium, Fresco
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
1:59
50 Free High-Quality Icon Sets
» ‎ Smashing Magazine
By Daved Brosche, Naveed Javaid and Smashing Editorial Team

When it comes to freebie designs, beautiful icons sets are tops. Designers scour for these free treasures more than anything else. You can use icon sets in Web applications, website designs and on your desktop. If well designed, they make a great impression on others. Beautifully designed icons also prove the quality of a designer’s work, so many designers make theirs freely available online, thus giving their work more exposure.

In the overview below, we present 50 beautifully designed, free and professional high-quality icons for desktop and Web design. All of them can be freely used for private projects, and some are available for commercial use as well. Regardless, always read the licenses — they may change from time to time.

You can also scan through our other icon-related articles:
- 40 Professional Icon Sets for Free Download
  Download some fresh, professional icon goodies.
- 35 (Really) Incredible Free Icon Sets
  Spice up your posts with nice illustrations, or enrich your desktop with outstanding dock icons.
- Icons for Your Desktop and Icons for Your Web Designs
  High-quality free icons that you can use for your desktop and Web designs.
- 20 Free and Fresh Icon Sets
  Over 20 free beautiful sets and links to other free icon libraries.
50 Beautiful, Free and High-Quality Icon Sets
Container Icon Pack
Container Icon Pack contains 40 high-quality (256 x 256 pixel) icons in PNG and ICO formats. This package includes box, cargo, trash icons and more. Created by Mehmet Gozetlik.

Baggy Icon Set
Contains five high-quality icons in three formats (ICO, ICNS and PNG) and six sizes, ranging from 16 to 512 pixels!

Round theme icons
A beautiful set of 106 various rounded icons.

Fortune 500 Badges
Over 200 badges of famous brands, PSDs included.

Red Moleskine
Red Moleskine is a beautiful icon set in PNG format and sizes of 16, 32, 64, 128, 256 and 512 pixels.

Old-School Icon Set
A set of six beautiful old-ish icons: typewriter, camera, radio, TV set, Gameboy, and telephone. In PNG and ICO.

Playground
Nine beautiful and original icons (in PNG and ICO), created by the talented Miriam Moshinsky.

Windows 7 Build
A set of various basic software and office icons.

Classic Timer Icon
A quality timer icon in transparent vector format, with different sizes.

Nes Icons Pack
A set of retro icons (TV, NES, Pad, Alimentation box, Zelda box, Zelda game, Desktop, 1up, Magic Toad) in ICO and PNG (512 × 512 pixels).

Jeans Feed Icons
A set of stylish feed icons as denim pockets.

Cemagraphics Icons
A set of various beautiful icons in PNG (32 × 32 and 512 × 512 pixels).

To-Do List Icon
Use these icons in your Web applications to make them more attractive.

Social Media Handycons
Handycons is a free hand-drawn set of 12 social-media icons. All icons are available in four sizes: 16, 24, 32 and 48 pixels.

Canon 400D + lens 17-85mm
Set of two icons: camera and lens. Comes in sizes of 512 and 16 pixels and iContainer, ICNS, PNG and ICO format.

Retrofukation
A stylish set of icons to complement almost any theme out there. Designed to be easily distinguishable, simple and intuitive. This icon pack contains over 100 icons. Designed by Jamie Green.

e-Commerce Icons
A huge set of icons that you can use for an online shop.

Function icons set
A beautiful and useful set of 128 icons, available in 48 × 48 pixels.

Elementary Icons
A set of smaller Web developer-style icons.

Human 02
Here is a nice multi-purpose icon set for your business website.

32px Mania Icon Set
Another series of smaller icons that can add flair to any website design.

Business Icons
A collection of random business-related icons with a Web 2.0 look.

Chums Icon Set
This is the ultimate collection of high-quality tech-related icons. You can find everything from iPods to digital cameras.

Tom Tom
Does your business deal with GPS and navigation systems? Then this is the icon set for you.

Black Neon Agua Icons
A unique icon set that is ideal for darker website designs.

Credit Cards Icons
15 beautiful credit card icons in AI and EPS format. And here are yet more credit card icons.

Antique Icons
A set of antique icons in PNG, ICNS and ICO formats, ranging from 16 × 16 to 256 × 256 pixels.

Hand-made food and beverage icon set
Seventeen hand-drawn icons, created by Victor Amanatidis.

Social Media Mini Iconpack
This icon set consists of 30 finely crafted social media icons in a size of 16 × 16 pixels. They are free to use non-commercially.

Manto Smiley Icon Set
Twenty original emoticons by Chinese designer Manto.

Emotions For WordPress Icons
Emoticons for WordPress.

Green and Blue Icon Set
Five icons, each in 128 × 128 pixels and PNG format. Included are icons to represent gallery, downloads, emoticons, calendar and folder.

Airport Express
This icon is for personal use only. Download includes iContainer, PNG and PSD formats.

Coquette Part 3 Icons
This free playful icon set contains curvy and colorful icons made with one goal: to get some affection and playfulness into your projects. The 50 high-quality icons come in sizes of 16, 32, 48, 64 and 128 pixels, and in 32-bit transparency PNG format.

Email Me Icons
These icons are free for personal use and available in 32, 48, 64 and 128 pixels.

Reality
A set of beautiful, realistic icons of different daily-use object. These are free for non-commercial use.

Music Icons
Beautiful icons of music instruments. Icons are absolutely free for any purpose.

Sleek XP: Basic Icons
A set of 50 stock icons in PNG and ICO formats.

Set of Social Icons
A set of beautiful social icons in PNG format and sizes of 16, 32 and 64 pixels.

GP Icons
A set of 23 PNG icons of different software products. Has a great grunge style.

Banking Stuff Icons
Banking-related icons for non-commercial use, in sizes of 32, 48, 64, 128 and 256 pixels.

Smashing Magazine’s Icons
Smashing Retro Icon Set
A set of 10 beautiful, high-quality “vintage” icons. The set contains 10 original icons: search, sign-up, calendar, news, RSS, comments, email, ads, home and address.

Flavours Icon Set
This set, aimed to help designers in their Web and user interface designs, contains 177 icons in a resolution of 48×48 pixels. The files are available in the PNG and PSD sources, so you can modify the files as you wish. Created by Oliver Twardowski.

Stationery Icons Set
A useful set of 22 vector icons (256 × 256 pixels). It contains book, brush, crayon, clip, color pencils, document, eraser, pad, palette, post-it note, scale and scissors, as well as the Fireworks source file.

On Stage Icons Set
The set contains 49 free vector icons, including PSD, which can be useful for both corporate and personal projects. You can use the set for free, without any restrictions whatsoever. The icons are available in PNG format in a resolution 128×128 pixels. Also included in the package are 100% pure shape-based layered PSDs.

Fresh Icons Set
This set contains 59 raster and vector icons. The set includes icons in PNG, ICNS and ICO formats. An EPS vector file is available as well.

Practica Icons Set
A free set of 11 useful high-quality icons, designed by DryIcons especially for Smashing Magazine and its readers. The icons are available in resolutions of 64, 128 and 256 pixels, in 32-bit transparency PNG format.

About the author
Naveed Javaid is a Web designer and runs the blog SmashingApps, which focuses on free resources and inspiration especially for designers and developers. If you want to connect with the author, you can follow him on Twitter.

(al)

© Daved Brosche for Smashing Magazine, 2009. | Permalink | 163 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: downloads, free, icons
0:56
15 Beautiful High-Quality Free Fonts
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
February 16, 2009
10:56
Free Fonts Of The Month: Anivers, Gentium, Fresco
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...
0:56
Free Fonts Of The Month: Myndraine, Museo Sans
» ‎ Smashing Magazine

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for ...

← Samat Jain's personal home page The Programmer's Paradox →

Jean-Marc's infotainment stream » Smashing Magazine

Feeds

Smashing Magazine