Monday, February 19, 2007

Inkscape: Web 2.0 Violator

My very first tutorial was an adaptation of a Photoshop tutorial on how to make one of those trendy violator badges. Well it turned out pretty ugly looking because the GFig plugin for the GIMP doesn't anti-alias the lines. Much discussion was had on whether or not I should include Inkscape tutorials on this blog to make up for the shortcomings of the GIMP, and I decided that I would give it a shot.

Now, before I start, keep in mind that I am a total newbie at Inkscape, so there is probably an easier way to do the things I'm about to show you. By all means, please suggest improvements on the way I've done things here. Okay, enough weasling, on with the tutorial.
ink.violator


  1. Open up Inkscape and set your document size to 200x200px. Set the X and Y grid spacing to 5px and make sure you've got grid snapping on. Press [5] to make the document fit the window size.

  2. Click the stars and polygons button (or press [*]). Increase the number of corners to 12, and make sure the Polygon checkbox is unchecked. Set the spoke ratio to 0.830 and make sure Rounded and Randomized are set to 0.

  3. star.props
  4. Starting in the center of the drawing area, click and drag out to the 10px mark.

  5. first.star
  6. Click Edit>Duplicate. You won't see a change, but you've actually got 2 shapes now. One on top of the other. Select the top shape and change it to whatever color you want your violator to be.

  7. With the selection tool [F1] press and hold the [Alt] button and click the star shape. This will actually select the one on the bottom. You can tell because the color in the lower left will switch to black.

  8. Click Object>Fill and stroke. Set the Blur to 3.5 and the Master opacity to 80.0%.

  9. fill.stroke.1
  10. Now select the colored shape and duplicate it again. Now, if you still have the fill and stroke dialog box open, change the color to white and click the radial gradient box.

  11. radial.fill
  12. Now select the gradient tool [Ctrl]+[F1], and you'll see 3 handles that form a right angle in the center of the gradient. These control the position and size of the gradient. Grab the middle one and drag it to the upper-left portion of the shape. You can play with the other 2 handles to resize the gradient. I left it as-is.

  13. Now select the text tool [F8] and click anywhere in the shape to start typing.

  14. Using the selection tool, click twice until you see the handles on the corners change to indicate that it's in rotation mode and rotate the text however you want it. Note: You can create a shadow under the text the same way you did with the shadow for the shape.

ink.violator
That's it! Once you get the hang of how inkscape works, it really is easier to use for this sort of thing than the GIMP. I hope you've enjoyed this tutorial. Thanks for following along.

29 comments:

Peter Gasston said...

Couldn't you set the stroke width to 5px (or whatever) and the color to white to come up with the border that was on the Gimp version?

Scott said...

Absolutely! That's a great idea. I thought about it, but I liked the badge without the border better, so I left it this way.

Anonymous said...

just another way with tile clones to get same object is here:
http://www.sanbaldo.com/wordpress/1/inkscape-video-tutorial-tile-clones/
kirk

Anonymous said...

http://www.sanbaldo.com/
wordpress/1/inkscape-video-tutorial-tile-clones


for some reason i got the link cut in the other post! the one above should ne better!

Scott said...

That was educational, but I don't see any advantage to doing it that way. Maybe I'm missing something? Anyway, that was a neat video. I haven't tried to make any videos yet. Is that something people would be interested in?

heathenx said...

ha! i just posted this same tutorial last week.

heathenx.org

Anonymous said...

免費視訊,煙火,煙火工廠,視訊,正妹視訊,真愛密碼,真愛密碼,煙火秀,煙火圖片,衣蝶,衣蝶,AV女優,AV女優,
煙火批發,小泉彩,小泉彩,情趣用品,鞭炮,live119論壇,蜂炮,視訊

Anonymous said...

艾葳酒店經紀提供專業的酒店經紀,酒店上班,酒店打工、兼職、酒店相關知識等酒店相關產業服務,想加入這行業的水水們請找專業又有保障的艾葳酒店經紀公司!
艾葳酒店經紀是合法的公司、我們是不會跟水水簽任何的合約 ( 請放心 ),我們是不會強押水水辛苦工作的薪水,我們絕對不會對任何人公開水水的資料、工作環境高雅時尚,無業績壓力,無脫秀無喝酒壓力,高層次會員制客源,工作輕鬆。
一般的酒店經紀只會在水水們第一次上班和領薪水時出現而已,對水水們的上班安全一點保障都沒有!艾葳酒店經紀公司的水水們上班時全程媽咪作陪,不需擔心!只提供最優質的酒店上班環境、上班條件給水水們。


`

Anonymous said...

Bonjour! Werner Espada . payday loans

Anonymous said...

toronto payday loans This website is optimum I enjoyed reading it quite a lot
AAA Toronto Payday Loans 1172 Bay St #101, Toronto, ON M5S 2B4 (416) 477-2817

Mobility stair lifts said...

Great post!It's very informative.
Keep it up.

California retreats said...

Very interesting thanks.
I believe there's even more that could be on there!
keep it up.

San Diego cemeteries said...

This is good site to spent time on .I just stumbled upon your
informative blog and wanted to say that I have really enjoyed reading
your very well written blog posts. I will be your frequent visitor, that's
for sure. San Diego cemeteries

teragoldonlinefsbest said...

I never thought of using Kontera for older posts. I really dislike Kontera, but this is actually a pretty good compromise. I’ve never heard of anybody using it this way. Here useful link:Tera Gold
cheap rs gold cheap wow gold Tera account

hotels new orleans louisiana said...

A very interesting blog Really this is amazing information found here. Thanks very much for the share and keep posting such an informative articles. I'm looking forward to your blog. Thanks!

Anonymous said...

At this point,Cheap wow gold previous to My spouse and i begin, take into account that I'm a overall rookie from Inkscape, so there is most likely an easier method of doing what exactly I am going to teach you. By all means, you should advise changes along the way I conducted items right here. Ok, enough weasling, Buy rs goldlets start work on your guide.

Anonymous said...

nice man
dna test

Anonymous said...

wow wow wow
Speed Training

Anonymous said...

I am going to cheap D3 Gold additionally more likely altering layout, design here to try to say that i am a genuine internet site weblog. My plan is to simply have the backdated articles and placed back links in their mind from the sidebar. You will never know, probably one of these days Gimparoo Buy Guild Wars 2 Gold will turn to an industrial web host. Possibly.

Anonymous said...

like it man
dna test

Anonymous said...

escuelas de ingles

Anonymous said...

great man
NFL Draft Prep

Anonymous said...

cambridge esol

Emily said...

Sie können das d3 gold Zahnrad an einen Verkäufer für Extragold verkaufen, wenn Sie die Rolle für einen Zahnrad-Fall gewinnen. Die meisten Personen sind glücklich, Spielern auf höchster Ebene zu zahlen, um sie durchbohrt Kerker zu führen. Sowohl der auf niedriger Stufe Charakter bekommt die Hilfe, als auch Sie diablo 3 kaufen werden Gold-für Ihre Dienstleistungen. Unglücklich, um zu sagen, ist Geld zum Bilden in der Welt von warcraft dasselbe als in der echten Welt hart. Fragen Sie ein Darlehen. Angenommen, dass Ihre Situation vielleicht nicht beständig ist, würden Ihr Gilde-Begleiter oder Ihre Freunde Ihnen gern ein kleines Darlehen leihen, bis Sie veranlassen, gold kaufen billig dass das genug Gold sie zurückgibt.

Unknown said...

This is also a very good post which I really enjoyed reading. It is not everyday that I have the possibility to see something
Signature:
download descargar facebook gratis para Android celular and download free descargar facebook apk en español, descargar facebook plus , descarga facebook

Unknown said...

Great post,Thanks for providing us this great knowledge,Keep it up.
A good blog.
Signature:
Jugar juego de frozen en línea gratis, los nuevos de princesa de Disney juegos frozen - la princesa encantadora y linda. Divertirse frozen!

juegosjuegos.com said...

Its really good information, i like your blog post. Thanks for sharing.
juegos de matar zombies
jogos do friv

Unknown said...

I'm happy about everything you bring it very interesting and helpful, thanks
kids games online
friv 2
unblocked games
juegos de un show mas

jasonbob said...

off white jordan 1
kd shoes
stephen curry shoes
air jordan
lebron james shoes
air jordan shoes
bape
birkin bag
moncler
lebron james shoes