• The Gimp
• Shape Paths plugin
• Web 2.0 Gradients for Gimp

Without going into great detail, a while back I found the need to come up with a flashy web 2.0 style button for my employer’s website. I am not a graphic designer, and the designer we do have isn’t very up to speed with the times, so I set out to learn how to make one on my own. The only catch, I don’t have a copy of Photoshop.

There are several free web 2.0 badge generators out there, I know because I tried them. However, not one was able to create a badge the size I needed. I also found several tutorials on how to make them in Photoshop, but again, I don’t have Photoshop.

The solution was to make one using Photoshop’s free, open source alternative, Gimp.

The Tutorial

1) Start Gimp

Once you have Gimp downloaded and installed the plugins listed above, start it up so we can get going.

2) Create a new image, 420px x 420px filled with Transparency

Creating a new image

3) Create a new shape by choosing Script-Fu -> Shape Paths -> Star

Create a star

4) Place the star in the center of the image using 210 as the X and Y coordinates

5) Set your desired inner and outer radii. These numbers should be fairly close if you don’t want your badge to look stupid.

6) Choose the number of points you want your star to have, and set a rotation if one is desired.

7) Check “Stroke Path” and “Fill Path” and make these black so we won’t end up with a transparent image.

Your new star should look like this

If you don’t already have the Layers dialog on your screen, toggle it by selecting Dialogs -> Layers, or by pressing Ctrl+L

9) Now we want to select our badge so we can fill it with a nice gradient. Do this by right clicking the layer and choosing Alpha to Selection. Then choose the Blend (gradient) Tool by pressing L.

10) Select the gradient you want for your badge. I choose Blue Flat #2 for mine.

Selecting a gradient in Gimp

11) Fill the badge by clicking near the bottom and dragging up.

Filled with a blue gradient

12) To give our badge a glossy look, we first need go back to the Layers dialog and create a new transparent layer. Make sure your badge is still selected. Use Alpha to Selection again if it isn’t.

13) We now want to use the Ellipse Select Tool (E) to select an edge of our badge. Change the select mode to “Intersect with the current selection” (Shift + Ctrl when dragging).

Selecting a corner

14) Use the Bucket Fill Tool to fill the selection with white.

Badge filled with white corner

15) Now, give the badge a glossy look by changing the Opacity of the white layer to about 30. This is done using the Layers dialog.

Badge with glossy corner

16) We want go give a bit of a glow to our badge as well, so create another new transparent layer.

17) Using the Free Hand Select Tool (F) with Feathered edges of about 50, draw a small crescent over the badge.

Selecting a crescent

18) Fill this layer with white and change the Opacity to around 30. Now that I think of it, let’s also change the Opacity of the corner to 10. These values will vary depending on the color you chose for your badge.

Badge with slight glow

19) Now we want to give our badge a drop shadow. To do this, first select the background layer and choose Alpha to Selection. Then go to Filters -> Light and Shadow -> Drop Shadow.

20) I didn’t want my shadow to be too big, so I set the X offset to 2 and Y offset to 1. I also changed the blur radius to 4 and Opacity to 60.

Adding a drop shadow

Your badge should now look something like this.

Blue Badge

If you want, you can merge the layers and be done, otherwise continue reading for more cool effects.

Still with me? Ok.

21) Next let’s add a cool warning effect to the badge. Select the background layer using Alpha to Selection and create another new layer.

22) Choose the Fill Bucket Tool again, but this time change the Fill Type to pattern fill. The pattern we want is called Warning! Fill the new layer using this pattern.

Messed up badge

23) Now that we destroyed our perfectly good badge, fix it by changing the layer’s Opacity to 2.0.

New blue badge

We now have a cool warning effect.

24) Now let’s change the color of the badge to black. We can easily do this by selecting the background layer and applying a different gradient. I chose Web 2.0 Black 3D for this one.

Black Web 2.0 badge

We can finish our badge giving it some text.

25) Choose the Text Tool (T) and begin typing.

My badge will say “That Smith” using Arial Rounded, size 24.

26) To give the text a cool effect, select it by right clicking the text layer and choose Alpha to Selection.

27) With the selection in place, create a new layer just below it.

28) Now choose Select -> Grow, and add 2 pixels to your selection.

Growing the selection

29) Fill this layer with white (make sure you change the Fill Type back to FG color fill), and change the Opacity to 20. This gives our text a highlighted look.

That Smith badge

We are now done making our Web 2.0 badge and are ready to show it off.

Download the tutorial files: Blue Web 2.0 Badge, Blue Web 2.0 Badge w/ Warning, That Smith Badge.

As an added bonus, you are also welcome to download the badge I made for work and a 5-point star.

Discounted Inventory

5-point star w/ extra flavors

© That Smith, 2008. | Permalink | No comment
Want more on these topics ? Browse the archive of posts filed under Advice.

For the first time in a long while I actually had fun at my regular job.  This happened Friday, and happened because I got the opportunity to take advantage of an unsecured website.

Recently at my job (I am in marketing) I have been responsible for updating our website to make it easier to maintain and navigate, and more secure.  Prior to my assignment to the website, someone who knew what they were doing would have been able to view confidential company information, get credit card numbers for anyone who has ever purchased from our online store, and a list name’s and addresses for all our customers.  This is extremely scary stuff since we are in a highly competitive industry.

What happened on Friday wasn’t anything this significant, but it easily could have been had the website been that type of site.  On Friday my boss simply asked me to update our profile on the website of a trade show we are attending in September.  One of the things I was asked to do was add the name of our trademarked products.

In doing this I wanted to add the trademark symbol ™ which is done by typing the HTML code ™.  I wasn’t thinking when I did it, but later realized what had happened - a website that said I could only type 150 characters doesn’t actually check or secure what I type.  Long story short, I ended up styling our entire profile (as you would a MySpace page), and was able to load dynamic content to do basically whatever I want.

Now, not only does our free profile have an amazing photo gallery and more features than one we could have upgraded to, it also gives us the name and address of every single visitor to our page, adds us to their schedule of exhibitors to see, and removes our competitors from their list if they are on there.  Pretty sly for 150 characters.

How this could have been avoided:

• Cleanse your data

I have to say the best part of my actions is they can not easily be tracked because the code I entered looks exactly like code they were already using, and can not be removed without potentially damaging everyone else’s profile.

The pages they offered were simple question and answers from each company exhibiting at the tradeshow (which means ours now stands out from the rest) so the company in charge should have made it so you could only type text.

On several websites I am developing I have it so people can upload content and make their own profile. One of the first things I had to do was make it so everything else would be stripped out.  This is typically done using regular expressions or a predefined function that comes with almost every major programming language.

In their case, a single line of code could have done just that.  But because they failed to do so, I am now able to run remote scripts (aka XSS/Cross Site Scripting) that could do pretty much any evil thing I want.  Luckily for them, chances are no one else who visits the page would ever know the flaw exists.

• Verify all uploaded files

Another major issue that exists with this site is they allow you to upload and post files (supposed to be only images) but they do not check to see what kind of file it is.  While this doesn’t necessarily do anything harmful per say, I was able to upload and re-download a word document, and pretend like I uploaded a file when I hadn’t.

What this means is I was able to grab a file from their server because their site thought it was one I uploaded.  The file I grabbed was their website configuration file, which could have given ,e endless access to their server. I did this by guessing the name and location of the file and was surprised they didn’t check to see if the file I entered was an uploaded file.

Again, this is a huge risk because anyone who knew what they were doing could take control of their entire server all because someone didn’t know to include a single line of code.  In case you are wondering, I did not do anything to access or harm their server, and was kind enough to notify their webmaster about these issues.

• Cleanse your data again

A recurring theme here, but again very important.  I found another instance where the site did nothing to secure themselves from what users typed in, this time on the login page.  They have it set so you type your company’s name and a password to log in.  I decided to pay around with this and found they are venerable to SQL injection.

Because they did not strip unwanted characters from what I entered, I was able to log in as any company, and, if I wanted to, could have deleted their entire database.  This is something I had to fix on my work’s website as well because the company who originally designed our website didn’t know jack about web security.

When user entry is used to input or read data from a database (such as validating a password), everything they type should scrubbed before you allow the query to run. I use CakePHP for most of the sites I build, which has an excellent set of functions to sanitize data.  There are several ways to accomplish this in any language you use.

I would be glad to offer free consultation to anyone who has general questions about internet security.  I am also available for long term consulting.

© That Smith, 2008. | Permalink | No comment
Want more on these topics ? Browse the archive of posts filed under Advice.

A disposable e-mail address is an e-mail account where you can receive mail for a predefined period of time, which enables you to sign up for services without having to worry about people selling or spamming your real e-mail address.

The idea of temporary e-mail isn’t anything new, however the way I will be approaching it is.  Plus the name nospam.me gets the point across and looks cool.

Laura and I hosted our own web and e-mail servers before, but it got expensive keeping our computer on 24/7 just to have our own e-mail.  Our internet company also began blocking it.  We switched to “shared hosting” about a year ago which reduced our electric bill significantly, but now we will be moving up to a dedicated server so we can serve up more of our brilliant ideas.

I will reveal another one of my ideas - which is now completely developed - on Monday.

Photo: chotda

© That Smith, 2008. | Permalink | No comment
Want more on these topics ? Browse the archive of posts filed under Projects.

If you haven’t seen it yet, a little over a month ago I decided it was too much trouble to pick up my phone and dial, so I made a Firefox addon to call whatever number I clicked. Laura said I was being lazy, but by the looks of it, tons of other people are lazy too because as of today over 5000 people have downloaded my click to call addon.

Last weekend the addon was featured on one of the most popular technology and productivity websites, and at my last count, more than 50 other sites have been talking about my addon.  The feature led to more than 2000 downloads in the first 24 hours after it was posted, and since then, the number of new visitors to the addon has been around several hundred per day.

Other than work, the baby, and supporting the addon, there hasn’t been a whole lot happening with Laura and me.  The baby rolled over for the first time a while back, which was awesome, and we posted several new pictures on our baby sites.  About a week ago I had our domain names appraised and found out mine alone are worth over $110,000 so I plan to spend more time developing them into useful services to turn around and sell.

I did come up with a few new projects this week that I hope to begin on soon, however I promised the wife I will finish at least one before starting on the others.  If I have time, I will share more of my ideas tomorrow, and hopefully will be announcing two or three new services on Monday.  At work I have been doing a lot more graphic design and web security stuff writing a few things on those too.

The great news was on the domain names, however they won’t make us rich or anything unless we find someone willing to pay for them.  One of the services I will be sharing Monday will hopefully make us some extra income.

© That Smith, 2008. | Permalink | No comment
Want more on these topics ? Browse the archive of posts filed under Daily Life.

For those of you who are unfamiliar with what happened, a while back GoDaddy reached an agreement with Montenegro (country) which allowed them to sell Montenegro’s domain ending to anyone.  .ME’s went on sale yesterday at 10am exclusively through GoDaddy, and myself and thousands of others rushed to get the good ones.

According to GoDaddy, I successfully registered (and paid hundreds of dollars for) several awesome domains such as:

RESU.ME
SPONSOR.ME
AWESO.ME
TXT.ME
INCO.ME
INBOX.ME
PROFILE.ME

The only problem is so did hundreds of others.  Try searching Google for the names to see what I mean.  In short, their systems became so overloaded they had no way of telling who the rightful owner was, so they ended up putting all the good ones in auctions instead.

I did manage to pick up and keep at least one really good name though - NOSPAM.me.  I picked this one because I knew there were already thousands of people registering on sites using nospam.me as a fake address to protect them from spam.  Believe me though, there is nothing fake about these addresses.  In fact, because of it I now have access to many, many accounts across the interweb.

I will be turning this domain into a new project in the coming weeks, as well as publicizing a few others Laura and I have been working on.  We are dropping two of our domains in September though.  More on that later.  For now, go see the new Kaden pictures on BEER dad.

© That Smith, 2008. | Permalink | 2 comments
Want more on these topics ? Browse the archive of posts filed under Site News.

For starters, she’s still painting the basement (it’s hard to do with a 3 month old!) and we have done a lot of yard work the past few weekends as well.  I’m still making beer and have a couple other beer related sites and companies I am slowly working on.

At work I am rewriting the entire company website to make it more secure and easier to navigate and have been given a lot of leeway to experiment with stuff because only midway through the year I’ve already increased our internet revenue 100%.  I am also working on an auto-mailer application for our sales engineers to automate the tedious task of finding out which sales leads are quality leads.

Another thing I’m working on there is developing a system that would automatically check our contact databases for invalid addresses, which would save us money and save us from having to license similar software from Pitney Bowes.

Here at home I am still working on finishing up my Good Karaoke Project, but have slowed down some because I keep changing the framework the site is written in.  It’s been ready for a few months to allow DJs to list their songs on their websites using a fancy AJAXy widget, but I haven’t bothered to contact any yet.

I’m also working on a top secret dating site that only me and Laura know about, and have had an idea for a business-type network that I should start on soon once one of the other sites are done.

I rolled out an update to my GrandCentral addon the other day, but haven’t updated that post yet, and I contacted T-Mobile to see if they had a webcall feature similar to the one Vonage has because I wanted to make a click-to-call addon for that as well.  Makes sense since I would only have to change a few lines of code.

The last majors projects I am working on includes one that is still in the planning phase at work.  One challenge we are facing at my regular job is that no one knows anything about our competitors, so I’m developing a database fed by my own search engine that crawls industry sites for competitive news and information on our enemies.

My boss was wanting to hire a clipping service to do a similar thing but in print media, which turns out costs an insane amount, so I’m working on my own social driven system to do the same thing.  Currently it costs upwards of $8,000 per year for monitoring 14 free magazines for mentions of a competitor. I might as well offer the same thing for next to nothing.

© That Smith, 2008. | Permalink | No comment
Want more on these topics ? Browse the archive of posts filed under Projects.

A feature I requested in the past was an addon for Firefox that would allow GrandCentral subscribers to place outgoing calls by clicking any number in their browser.  While I’m sure the GrandCentral team is hard at work on this and other new features, I decided to take the liberty of making it happen.

I’m proud to offer the Firefox and GrandCentral communities my first add-on for Firefox, the GrandCentral Click to Call Add-on for Firefox .

This is the first release of the addon so I’m calling it version 0.1. The addon has been updated to v0.2.8.  Read about the version changes below.

Features of version 0.1:

• Automatic login to your GrandCentral account
• Hover your GC number on the toolbar for the most recent call
• Double click your GC number to redial the last call
• Quickly access your voice messages, address book, and call log by right clicking the toolbar
• Click any phone number to place a call

Features planned for future versions :

• New message notifications
• New missed call notifications
• Prettier display of recent calls added in v0.2.5
• Option to select number to use for outgoing calls added in v0.2.4
• Option to manually input a number to call added in v0.2
• Better tracking of GrandCentral session id’s added in v0.2.4

Quirks of this version:

The current version is fully functional but occasionally GrandCentral asks you to select the number to use for outgoing calls.  Right now you may have to sign in to GrandCentral’s mobile page to set your preference if the addon doesn’t work.  Once you do this, right click and reload the call log for the addon to start. Fixed in v0.2.4, you now set the line to dial from via the addon settings

If you log in to GrandCentral manually, that sometimes changes your session id.  The session id is cached by the addon so if it changes you may have to force the addon to refresh it.  This can be done by right clicking your number and choosing Update Calls. Fixed in v0.2.4, session id is now retrieved from cookies.

In order to be able to place outgoing calls, the number you are calling has to already be in your address book for the call to go through.  This addon will automatically add the numbers you click to your address book and then place the call.  This means you may need to occasionally tidy up your address book to remove numbers you no longer need. Fixed in v0.2.4.

Screenshots:

Updates:

As of this time you will not automatically receive notifications of updates to the addon.  This is something I am working on, so please bear with me until then and check back often for new versions.

July 3, 2008 - The addon has been updated to v0.2.  The download links have been updated to the new version of the addon.  v0.2 contains a minor bug fix where the name of the last caller would not display correctly if the phone number was unknown.  Unnecessary lines of code were removed in this version of the addon.  This version also contains the following new features:

New features in v0.2 :

• Option to manually input a number to call
• Link to select the phone number to use for outgoing calls (requires “Update Calls” after selecting)
• Duplicate phone numbers are no longer added to the address book if they are in the list of recent calls

New features in v0.2.2 :

• Addon now compatible with Flock (Unsupported)
• Speedier phone number checking thanks to Jon Miniat

New features in v0.2.3 :

• Added option to disable click-to-call functionality
• Fixed error where anonymous number would mess up last call

New features in v0.2.4 :

• Numbers no longer have to be added to the address book to make an outgoing call
• You can now set the line you want to dial from (not your GrandCentral Number) directly in the options menu - once you upgrade you will need to do this before you will be able to place a call
  
• Added the option to confirm all outgoing calls before the call goes through
• Fixed session handling so you won’t have to reload the addon after visiting GrandCentral
• Slightly improved display of most recent call
• Rewrote most of addon for optimization / speed

New features in v0.2.5 :

• Fixed an error that was given when the addon was first installed
• Last call popup now contains the call type (prettier display)
  

New features in v0.2.6 :

• Made “incorrect username or password” error more specific
• Error now specifies if the login failed or if the username or password is missing

New features in v0.2.7 :

• Non-alphanumeric characters in passwords should work now (tested using ~!@#$%^&*()_+`-=1a)
• Remembers forwarding number after automatically refreshing the call log
• Added license block: MPL 1.1/GPL 2.0/LGPL 2.1
• Added correct MIME type so you no longer have to manually install the addon
• Submitted to addons.mozilla.org for testing

New features in v0.2.8 :

• Sped up phone number checking by reducing number of expressions
• No longer looks for numbers in CSS and Scripts (no breaking Blogger)
• Only valid phone numbers are clickable (000-000-0000 is not real number)
• Numbers that were already clickable will not be made clickable again
• Numbers that are links can no longer be clicked
• Added tooltip to options clarifying what is meant by “Forwarding number”
• Added tooltip when numbers are hovered (example 316-555-1212)
• Clickable numbers now inherit the style of parent document (see Lifehacker comments for example number)

Features planned for v0.3 :

• Notification of updates to the addon
• Fancier method of selecting number for outgoing calls
• Prettier display of recent calls
• Notification of new missed calls
• Notification of new voice messages

Compatibility:

This version has been tested on and is fully functional with Firefox 2.0.0.x, 3.0.1, 3.1a2pre, and 4.0a1pre.  It has only been tested using Windows XP and Vista.  Please notify me of any other compatible versions or platforms in the comments.

Credits:

The GrandCentral addon was written by myself (Chad Smith) but I did borrow code from Brendon Wilson’s PBX Click2Call Firefox Extension to save time from having to entirely rewrite the functions to recognize numbers and make them clickable, and borrowed code from Winston Huang’s TMobile Minutes Used Firefox Extension for caching the call list.  Thank you to them for their hard work on their addons.

License:

This addon is distributed without warranty under the MPL 1.1/GPL 2.0/LGPL 2.1 licenses.  View the addon source or visit http://www.mozilla.org/MPL/ for additional information on the licenses.

Download:

GrandCentral Click to Call Add-on for Firefox

Donate:

Manual Update Checking:

There currently are no automatic update notifications for this addon, so check this page regularly or follow me on twitter to be notified of new versions.

Manual Installation:

I’m not sure why the addon doesn’t give everyone the option to install when you click the download link (I probably missed something) so if it doesn’t install directly, drag the downloaded file back to your Firefox or addons window to start the installation. Fixed in v0.2.7

© That Smith, 2008. | Permalink | 106 comments
Want more on these topics ? Browse the archive of posts filed under Firefox.

The total damage was $85 and a week of not being able to wash our towels.  We did end up pulling out the floor tile in our laundry room (which is something we were eventually going to do anyway) and now have a 1m x .5m hole in our paneling.

I wasn’t very fond of the paneling either so I won’t be too upset about tearing out the rest of it.

Before:

After:

The three sections in the picture above each had about 2 inches of moldy insulation in the bottom.  The washer drain pipe in the center section meets the pipe from the kitchen sink and dishwasher on the right.  The cleanout valve (bottom right) had to be forced open to remove grease and other junk and I guess needs to be cut out and replaced now too.

On a positive note, the rest of our basement wasn’t affected by the flooding in the laundry room.  Laura is almost done painting our basement family room as well.

This is the large wall by the bar.  The rest of the room is light beige.

© That Smith, 2008. | Permalink | No comment
Want more on these topics ? Browse the archive of posts filed under Home.

We went to Overland Park for Father’s Day but first found out our washing machine leaked everywhere the night before.  Last night we discovered the leak was actually coming from the drain pipe in the wall rather than the washer, so we tore out some paneling and floor tile only to discover there was also black mold growing there too.

This is the first time we’ve ever had an issue with our plumbing, but by the looks of it the previous owners did too.  I removed most of the mold and am waiting for bleach to kill the rest.  Tonight we bought an auger and tried to fix the clogged pipe ourselves but had no luck, so I will be calling a plumber tomorrow during my lunch break.

Luckily so far Kaden hasn’t complained any about the mold.  Here’s some pictures Laura took of him  Monday.  We bought his nice outfit at Goodwill.

© That Smith, 2008. | Permalink | No comment
Want more on these topics ? Browse the archive of posts filed under Home.

To make a long story short, Birt (female) is now the newest member of our family.  She is a chihuahua-fox terrier mix.  She is about 6 months old and has pretty much reached her full adult size.

© That Smith, 2008. | Permalink | 3 comments
Want more on these topics ? Browse the archive of posts filed under Daily Life.