Web 2.0 graphics with Paint.NET

[daibatzu]

Hello all, this is my first post. I've spent most of my development life writing desktop applications but I've recently begun experimenting with web based application. Now, I know you've all probably heard about web2.0, I think the graphics used for these sites are sort of different. They are glossy and more appealing to the eye and I would really like to learn how to create them.

I settled on Paint.NET after trying out the GIMP, Photoshop and many others (like the simplicity of it) and would like to use it create these effects instead of another program.

If you could kindly look at these websites:

http://jadedpixel.com/ (the rss tag looks really shiny)

http://shopify.com/

http://www.blinksale.com/learn/

notice the reflections, the gradient, it looks glossy and alive.

If anyone could post a tutorial on how to do this with paint.net i'd be grateful. I'm quite new to graphics design, a complete novice so any help will truly be appreciated.

[Crazy Man Dan]

Well, there's the Making Glass Buttons (BuzzKill) and Glass Orbs (me) tutorials that explain how to make things shiny. Then there's the Gradient plugin to do the soft fades.

Really, the look of the app will be dependent upon what the app does, as usibility should always come before flashy graphics.

I could try my hand at a PDN example of a pretty site, but I'd be able to be more specific if I knew what you need the app interface to look like.

[Picc84]

try to recreate some of those, i could probally evan do the rss tag...

[daibatzu]

Hello, thanks a lot for the replies.

I'm not really looking at this from the perspective of a particular app, but just to learn a certain skill. So yes I do agree graphics aren't the most important part of an application.

Currently trying the tutorials you suggested.

[daibatzu]

Thanks a lot. The gradient plugin is excellent, the tutorials on glass orbs equally so. Which leaves just one thing, reflections.

[Crazy Man Dan]

For reflections, the Gradient plugin is again your ever-friend!

There's this handy little checkbox called "Alpha-Channel Only." This checkbox takes the Alpha values of your Primary and Secondary colors and applies a graident to the Alpha channel of your current layer, within the bounds of your current selection.

Take, for instance, this image:

It's 99% PDN. I made the graphics for the site in the screenshot on the button mostly in The GIMP, but everything from the screenshot on was PDN. A combination of the Gradient plugin with Alpha-Channel Only enabled, some layer opacity fading, a little Rotate / Zoom action, some resizing, and presto!

If you'd like a specific, step-by-step on how to use the Gradient plugin to do fade-outs, just ask, and I or another one of PDNs friendly talking representatives will be happy to help!

Dan

[trickman]

For reflections, the Gradient plugin is again your ever-friend!

True. I use the gradient effect a lot to make the images alive.