Pro Socialgo > For web community software

In what you love, there is no end to inspiration.

I won't lie. I was a terrible hack when I first started web design. I would grab CSS from this site and that, HTML here and there, but it showed, they all looked like frankenstine, because they were ideas of many different people, and as much as I want to, I can't make another artist's ideas look good. 

Quit making it such a dredge by forcing creativity upon your self that is not yourself. It really does leave you with a un-satisfied taste in your mouth, because, you go back and look at the stuff you hacked from, and there is something missing from yours. some balance or invisible grid you can't quit make out. It makes designing your web site more of a experiment than a creative decision.  I'm not talking about inspiration. I constantly find inspiration in other work and try my own twist on their idea. I'm talking about the code and graphics. 

Design what you love 
What do you love? Do you love the ocean, or rusty old trucks--the candy dish your grand mother had on the dresser beside her collection of glass angels. 

I loved junk. My Grandfather had a thrift store, and it was full of junk. Old junk, that even back then I couldn't believe people would buy.  Every time we came to spend the day with him, he would let us pick one thing out of the store to take home. I usually went for the army gear, rusty grenades (no pin :), helmets and canteens. As I got a bit older I started picking photographs. He would buy from estate sales so there would be boxes of boxes of old torn weathered family photos. What people did with them back then? I don't know. But I loved them. I still do. I go to estate sales and buy pictures of their family, old letters and medical forms. 

I use these in my designs, or for inspiration in a design.  I almost can't get passed flowery old textured looks, but I have to to keep my job. Everyone wants the web 2.0 slick minimalism.  Don't get me wrong, I have a special place in my heart for that kind of design too, but it is not my true design. 



Put it together
To incorporate what you love in to your designs is one of the most satisfying  accomplishments a artist can have, especially when you do it well, which is about half the time. 

But you say, "I don't know how to incorporate what I love".  Everything has a feeling to it, and sometimes that feeling is all you have to go on in design. You may love women :), well women have inspired great design all through time. Think of the majestic curves, and the soft textures, the colors of beige, pink, stunning red lips, all of the tones of brown in her hair. The Ocean is liquid, so make your site a liquid design with subtle colors and make use of blur, smear and ripple.  Even video games bring about certain shapes and colors in your mind. Take a snap shot of your video game in play, horizontally blur it, brake it up, copy and paste until it's unrecognizable as that game, but instead colors, balance, shapes and harmony. 



The zen of ones and zeros
In what you love, there is no end to inspiration. When you start to indulge this part of your design you will be amazed at how far it will take you. And don't ever take the easy way... As in the example above, don't put pink flamingos and pictures of the bahamas (unless your a travel agent), Don't just put a woman's body (unless your Zauku), dig deeper. Challenge yourself by scanning things that represent that love, find colors that best represent the many emotions it gives you. Shapes that harmonize.

Your on the computer all day anyway, why not make it something that adds to your life rather than takes from it. Yes, you can have spiritual, existential moments even with ones and zeros.  

We're going to mak a little web 2.0-ey starburst and then place it in the header of our Socialgo Network. We will use this as a button for prosocailgo that directly links to our latest  CSS 101 series. But first things first. Here is how you create the graphic using Photoshop. 



Create a new doc around 200px by 200px.  Now select the shape tool in the tool bar.

 

In the toolbar at top center you will see the Shape drop down click on it and look for the starburst shape. If you don't see it, then click the options drop down (a small arrow, top right of pallet. ) and select all. You should find it now.. 

 

click on it and draw a shape hold down the SHIFT key to keep it proportionate.  you will need to fill this shape with the color you want I went with black.

 

Once you find the color, click ok and fill the shape by using key command alt + Delete. You have to colors in the tool bar. The foreground (the one ontop) the background. You can use this key command to fill with either foreground or background. Foreground is alt+delete, Background Command or control Delete.  

Now Make a new layer above the shape.
 

Now select you marquee tool (the dancing ants tool)



Now drag a circle once again holding the Shift key to keep it a true circle. Draw it about 40% to %50 over the shape creating a half moon.



While it's still selected,  (make sure your on the new blank layer) fill it with white. you can do this with key commands b hitting the D key, that sets your colors to default (black and white.) then hit the  X key, that puts white to the foreground, and as we know you can now fill it with alt+delete. 



Now we are going to delete the outer section of this white circle. We will retain the starburst shape by using it as the selection for deleting.  

Ok, Make sure your new white layer is still selected and  caommand (apple) Control (sucky computers) CLICK the shape's mask layer.



You will now see that the shape has been selected with the dancing ants. 




Now we want our white highlight to be a few pixels in from the edge of the shape. So while this is still selected go to your SELECT menu drop down and click Modify > Contract. In the Pop-up enter 3 for three PX, press enter.

Now don't touch anything and go back to the SELECT dropdown and select "Inverse"



Hit Delete. You have now deleted the outside parts of the white, and left a cool little outline for our highlight.

That Highlight is too bright so we will just drop the transparency. NOTE: it's also a nice touch to do a very subtle gradient on this highlight, from White to transparent. But first transparency. Select the layer and slide your transparency down to around 30%. 



Now for a few effects. We will put a outline at 1 px, with a color that is only a few degrees bellow our starburst color. So I'm using a very dark gray.





While we have that open select the "drop-Shadow" radio button at the top of the panel.  adjust the occupancy to about 50.



Almost done. Now on that starburst shape we created we want to make a gradient to give it some more dimension. 

The way we will do this is close to the same way we deleted the white circle. Create a new layer, while the layer is still selected Control or Command click the starburst mask, just like before. 



Make sure the blank layer you just created is selected and go to your color picker on the tool bar. Now to do our very subtle gradient, I'm going to pick black as my  foreground and a few degrees lighter gray for my background. Now we are going to fill that selection that should still be dancing ants on the stage. 



Select Gradient tool and then click the gradient properties in the horizontal top toolbar. You have the option (usually default) for the foreground to graduate into transparency -- we don't want that, we want the one that is fading our foreground to our background color.



Now drag the gradient to diagonally across the selection. (It it's still not selected, just command click the shape mask again, then select the blank layer we want to fill. )



Well thats it! You can of course play with it more, try some different gradients, maybe bevel / emboss.  I'm just going to throw some text on there (text with slight drop shadow) and we're done. In part two we will put this into our header. If you want to see a example go to littlepraerbox.com look in the banner and see our beta burst. this one is not linked though, like the one we're going to do.

 


>>>Download PSD Starburst 2.0
GoTO: Part 2 

Ran across this cool and very simmple adobe air app that allows you to coustomize CS3 icons and web 2.0 badges to your own needs called icon generator. You might only use it once, but it's a nice little tool for those without photoshop.