Jump to content

Web 2.0 graphics with Paint.NET


Recommended Posts

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.

Link to comment
Share on other sites

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.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

reflectfinal2.png

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

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...