Web 2.0 Violators

Posted in Uncategorized by Scott on February 3, 2007

Note 1: there is now an Inkscape version of this tutorial.
Note 2: since this tutorial is not really very helpful, I’ve decided not to update it. Please refer to the Inkscape version for all your violator needs.

For this P2G tutorial, I’m going to recreate Ajax Lessons: Web 2.0 Badge Photoshop Tutorial.

  1. Open a new file, 200px by 200px with a white background layer.
  2. Open the GFig dialog by clicking Filter>Render>GFig…
  3. Select the “Create star” tool, set the number of sides to 12, uncheck the “Stroke” checkbox, select “Color Fill” from the drop-down menu and select white for your color from the color picker.
  4. In the drawing area of the GFig window, starting at the center, click and drag to the outside creating a star shape that almost fills the window. Leave some room on the outside for the border and drop shadow later.
  5. Select the “Move a single point” tool in the GFig toolbar, grab the middle handle, and drag it toward the outside to increase the angle of the points. You can also use this tool to move the outside point if you want to rotate your shape. When you’re happy with the shape, click Close. You should now have a GFig layer above your Background layer in the layer stack. Rename this layer “Border”.
  6. Making sure the Border layer is active, select the “Select regions by color” tool from the toolbox, make sure the Feather checkbox is unchecked and click in the center of the drawing window. You should have a hard edged selection the shape of your star.
  7. Click Select>Shrink… and shrink the selection by 2 pixels. Create a new layer above the Border layer and name it Color. Select a color you want the violator to be from the color picker, and fill the selection with it.
  8. Activate the Border layer again, and select the colored regions like you did in step 6. Create a new layer called “Shadow” and position it under the Border layer and above the Background layer.
  9. Click Select>Feather… and feather the selection by 10 pixels. Making sure the Shadow layer is active, fill the selection with black, and drop the opacity of the layer to 50.
  10. Activate the Color layer, and select the colored regions like you did in step 6 and 8. Click Select>Shrink… and shrink the selection by 2px.
  11. Create a new layer above all the others and name it Gradient. Select the Gradient tool from the toolbox, set your foreground color to white, select the FG to Transparent gradient, set the shape to Radial, and create a gradient in the upper left area of the selection. Personally I think the white is a little too harsh, but we’ll keep it as is for the sake of direct translation.
  12. Select the Text tool, pick a font you like and enter some text. I couldn’t find the font they used, so I just used Rasheeq-Bold. To rotate, select the rotate tool, and just click and drag around the text until you have an angle you like.
  13. For the final step, we’ll add a drop shadow to the text by clicking Script-fu>Shadow>Drop shadow… Set the X and Y offset to 2 and the blur radius to 4 and the opacity to 80 and click OK.

That’s it! I hope you enjoyed this tutorial and found it to be a good translation of the original. The comment board is open, so drop me a note. Thanks!

Tagged with: , ,

10 Responses

Subscribe to comments with RSS.

  1. Mauro De Giorgi said, on February 13, 2007 at 2:18 pm

    The Gimp is not Photoshop, i’m sorry…

  2. Scott said, on February 13, 2007 at 2:26 pm

    Hi Mauro, thanks for commenting, although I’m not quite sure what you’re getting at. Maybe you’ve followed the wordpress tag here and expected a photoshop article? The reason I used that tag is because this is a GIMP adaptation of a Photoshop tutorial. I realize that GIMP is not Photoshop. Maybe I should adjust my tagging strategy. What do you think?

  3. Piotr Usewicz said, on February 13, 2007 at 3:59 pm

    Ok, but where’s antialiasing?

  4. Scott said, on February 13, 2007 at 5:06 pm

    Actually Piotr, I’m glad you brought that up. I really had a hard time with that and could not find a good solution. Does anyone have any suggestions for that ugly path? The GFig paths don’t seem to be actual vector paths, because if they were, that would be an antialiased line, not that chunky mess. I’d guess the only real solution currently would be to use the pen tool, but that would be a total pain, or possibly an external application like Inkscape, but that’s beyond the scope of this blog.

    If anyone knows a good way to get antialiased lines from a GFig shape, I’d love to hear it!

  5. James said, on February 13, 2007 at 6:58 pm

    I would reccomend incorporating inkscape in with some of your tutorials, things like paths are much easier in inkscape. Here is a similar image made with inkscape and gimp…

  6. ak said, on February 13, 2007 at 7:21 pm

    Yes I do think that Inkscape is more suited in creating Web 2.0-style badges

  7. Scott said, on February 13, 2007 at 7:27 pm

    I wasn’t sure if I should include Inkscape tutorials on this blog since it’s intended to be a GIMP-centric thing, but maybe I should after all. Surely people who have already installed the GIMP wouldn’t see a problem with using another OSS application. Right?

  8. Mauro De Giorgi said, on February 14, 2007 at 3:59 am

    Scott, i mean that the photoshop version the result is much better that the gimp version… i love open source, but photoshop is another universe.
    Hope this not hurt you, ciao

  9. Mario Lucci said, on February 18, 2007 at 7:22 pm

    Just buy a copy of Photoshop and everything will be easier! :]

  10. mustangrider said, on October 29, 2007 at 5:47 pm

    I think this was a great tut…..Gimp does all the things I want… again nice job Scott.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: