When I come accross this post by David Airey. Couldnt have said it better. So many are seeking acceptance rather than looking for a path to better ourselves. I reccommend reading David’s post and Paul’s book.

Working with NetSource has taught me that if you are not serving all of your masters simultaneously then sucks to be you. Successful firms the world over are constantly struggling with being visually awesome and providing their customer with what they want, in the end money. Constant focus on the customer proves to be the winning formula, always. This tends to be a point of distress with designers, ‘what does the customer know about design?’. Nada, well generally. And worse, maybe they think they know, and here they are to push all of their ‘design’ ideas on us. It happens. To the best of us.

So your client has poor design ideas, and maybe even rejects your advice. Fact: clean easy to navigate sites, with good colors and contrast, sell themselves. So maybe point out these key steps to success, becuase it is about presenting the content. Right? Chances are you will be able to create something visually appealing and deliver the content. If you are truly doing both correctly it is not Style vs. Substance, it is a 100% blend of the two. I reccommend you pick up Dont Make Me Think by Steve Krug. It shows just how important design is to the succesful delivery of content. In this market, if you are not thinking of your customer and how to succesfully deliver a wining recipe then its a ticking clock. The customer wins, you win.

So long story short I hope to post more here, what do you want to see?

Well I figured this was the best way to get my self prepared for the tutorial writing. Start with a breakdown of a work I have completed. Forgive me if there are any annoying gaps, and if there is anything you feel I should have covered please let me know.

Step 1: Where do I start?

I usually start sketching on paper or maybe even a photoshop doodle, this was a bit of an exception seeing as I had clear cut vision of that iTunes commercial with break dancers. So I opened PS and went to work.

I set my canvas at 1680 x 1050 , I was just planning to make this for me so I made no provisions for larger screens. Then I filled it black.

Step 2: Lighting.

The radial gradient tool is your friend here. I selected some slick colors and went to town with the end of the gradient being completely transparent. The colors I used are:

bf6832
09dcb9
edff55

I drew some gradients that looked a bit like this.

Next I blur that result by 100 pixels with the gaussian blur, then I make a marquee selection of about the area I would like the floor to be and then erase it 70%. Your result should be similar to below.

Then drop this layers opacity to 15%. We area going to apply a layer style to this layer here are the settings I used.

The colors were a little too much for me so I made some adjustments with brightness and contrast.

Now you should have something similar to this.

Next were going back to the radial gradient tool. Here are the colors I used then I smuged them like so.
ed3f92
a9f4f8
979fe0

I then set the layers blend mode to color and opacity to 15%, the result was this.

The next layer was filled with this gradient.

Then I changed blend mode to color and opacity to 30%.

The background layers are done throw em in a group and lets move on to better things.

Step 3: Subject Matter

I used a photo of a break dancer you can use whatever you like. I took the photo and carefully pulled it from the background. I usually do this with three passes, first a extraction with the pen tool, then a eraser pass with a bright contrasting color layer underneath to show me all the details i am keeping, followed by focusing on the hair. I then desaturated the photo and took a large soft brush and painted in shadows except for subtle hints of light to help define the subject. Like so…

Step 4: Dancing lights…

Things will get a little quick from here. I made this some time ago and it is hard to remember the exact steps. I added a layer behind the dancer.  A white radial gradient and smudged it to look like a huge burst of light.

Great this is adding some depth, so lets get crazy. I created another layer like the layer from step two that built the second layer of lights. I used a similar blue and a more red color as well as a light purple and subtle orange. It was blurred and transformed to look like this.

Lets combine this with before.

Next I just started experimenting with different lighting ideas, sorry this inst more in depth. I just started adding more little gradients around the dancer coming from behind him and even some motion blurred 2 or three pixel paths and linear gradients.

Next I added some smokey effcts using some smoke brushes from here. I layerd them up and erased areas I did not need untill I had this.

My fiancé and I have been looking for a house for a little while now and finally found one we like. It’s a nice house with some nice stuff but the customer service of the builder has been horrible. It’s a pretty main stream builder too. But what are you gonna do? So anyway we’re moving on with that, it’s on to fiancing now.

So the app store opened. What free time I have had away from work and house hunting has been spent in the app store or on the phone using apps. So it’s kind of a good thing that this wordpress app pops up this morning. So perhaps I can post a little more frequently.

I have also been entertaining a few ideas for tutorials. Not quite sure yet I’m thinking of interface design or an artsy painty tut, of an octopus with a cleaver! Yes. I think I’ll do that one it may take me a bit as this my first tut but I will do my best to make it thorough and informative. Hope to have it up Friday or Monday. I’m also hoping to do a breakdown of the breakdancer itunes desktop. So hope to give you all sometthing soon.

Edit:
This post has been a local draft scince launch of the wordpress app. It finally decided to let me post it with the update.

Web design has been very recently ‘web fashion’ it evolves and changes so rapidly who knows whats next, but you can be sure that when the next ‘big thing’ hits the scene everyone will love it, company’s will want to relaunch with a fresh look, blog designers will be redesigning, the world of design becomes captivated with it.(For the most part.) Much as the fashion industry becomes captivated by the latest trends. Mostly this is a positive thing, it makes for a great community of designers and developers. The web becomes varied and beautiful, making it a great pool of inspiration and resource. People are really starting to see this area of design as an art form. Go designers of the world!

So whats the ‘fashion’ you say? Color, yeah, color and I am totally digging it. Color is populating the web in a way that is completely perfect right now. Over saturated, muted, rainbowed (I know that is not a word), watercolor, gradients, you name it, its on like Donkey Kong right now. Gone are the days of this being shiny metal and that being blue plastic. Research shows that red is not the only color that gets peoples attention. So whats the big deal? Color has been around forever, it is not like the web was black and white before. True. However it wasnt used to its full artistic potential. Art has been bought and sold for years, it captivates people, it moves them. Art on the web is a great way to sell… you, your company, whatever. It just works, trust me, it is really doing something right now. Check it…
I have compiled a list of sites that are using color in great ways (remember these are just my favorites, please feel free to tell me of any others you know). They are listed in no particular order with exception of the first (which I will be linking to again shortly). I have also added some that I thought maybe some of you haven’t seen. Enjoy them!

The usage of color from the bold tones to the soft muted blended palletes is taking hold accross various styles. This great new use of color has embeded itself among all of the current web2.0 trends. And I hope it lives on forever. But then again the excitment of the next great trend is also something I look forward to.

Also be sure to check out these articles on Web Designer Wall for more info about design trends. They offer some insight to trends going on right now. And a great gallery of sites you may or may not be familar with.

2008 Web Design Trends
Vintage Web Design
33 Artistic Sites

The TUTS family of sites (psdtuts, nettuts, vectortuts) offers some tutorials across some popular fields and software packages. Read my review after the jump..

PSDTUTS - As the name of the site implies, the focus of the tutorials is on photoshop, but there are from time to time some great non PS related articles and inspiration. The sites title is “Spoonfed Photoshop”. I wouldn’t go so far as to say they feed it to you line for line, but they do provide enough instruction that the novice user would be equipped enough to complete the tutorial. They also have a “plus” area to the site that is membership based. The psd files to the tutorials are offered as well an “plus only” tutorials from time to time. This feature appears to be very useful to those who might need the additional breakdown of the layerd psd file to guide them. As for the additional tutorials, I have not seen anything to warrant an advanced users need to join.

The tutorials range in style and complexity. For the most part all of the tutorials will teach you something even if it is not related to the tutorial. There is a lot of great inspiration to be drawn from each of the tuts. All in all a great well rounded site for the beginning or advanced photoshop user.

NETTUTS - Once again easy to figure out whats going on here, web tutorials. This is by far my favorite of the sites. The range of topics discussed can leave some people out in the cold, and I would say that things are much less “spoonfed” here. However, the site has great tutorials, well written and thought out. There are really some gems on this site. The tuts here will have you inspired to make changes to your site or simply wanting to try them out.

Read the comments, there is wealth of information in the comments on this site. There are some really bright people using this site, and any help or additional info they have to offer is as free as the tutorial. And that’s not bad. The tutorials here take a little longer to orchestrate it would appear, but generally they are worth the wait.

VECTORTUTS - This is the newest of the family, but it is off to a great start. I have enjoyed the quality and variety of the tutorials. It would appear that the TUTS family has a grat method down and are on a roll with the sites. There are some great tutorials here already with less than a month or so of live time. This one is my fav a great tutorial and versatile effect in illustrator.

There is also a community of subscribers that overlap from site to site, it is a great group. You can also find some great inspiration through the flickr and news pools on each of the sites.

With news of a flash site on the way there seems to be a great well rounded community of tutorial sites shaping up for web developers, designers and illustrators. I suggest that you check them out, subscribe to the feeds and give some of the tuts a shot. Many of the PSDTUTS tutorials led me to the redesign of the site.

I would have to say overall the TUTS family of sites is one of the best in terms of quality and relevance. The tutorials are well written and will probably teach anyone a thing or two about any of the various areas covered. I hope you enjoy them as much as I have.

I have supplied various sizes and formats for your desktop enjoyment. Oh and iPhone size too.

Downloads after the jump.

800×600 1024×768 1280×800 1600×1200 1680×1050 1920×1200

Download the zip >>

iPhone wallpaper >>