Chaos Laboratory

Came upon something interesting today…

Should I use tables for layout?

Dec 16th by miCRoSCoPiC^eaRthLinG

Continue Reading

Finally got around to doing something that has been pending for ages… i.e. give the site it’s own look & feel.

There are plenty of good WordPress themes around – but almost all are overused. I needed something fresh and unique (if possible). I had contacted a few designers but their starting prices ranged $300 to $400 – something that I would rather spend on getting better hosting (dedicated server maybe) or on advertising. In the end, what had to be done – had to be done. Got down on my hands and knees and started designing one on my own.

Adobe (formerly Macromedia) Fireworks helped me a long way in designing all the graphics for the theme. Thanks to Twitch for the logo (lab flasks) – that really brightened up the page.

Once the initial issues with the CSS were sorted out, it was time to port it to WordPress. That was the easier part though and you can see the result proudly on display here. Incidentally, I decided to name it “Chaotica”. Yeah, I know – it’s pretty cliche. But that’s the best I could come up keeping at par with my site name. Maybe you can suggest a better alternative for me!

There are plenty of “cool stuff” that I’m yet to implement – but whatever I’ve put up so far isn’t bad for a first-timer ! What do you say ?

May 31st by miCRoSCoPiC^eaRthLinG

Continue Reading

A quick note to everyone… I’m coming up with a leaner and meaner theme for Chaos Laboratory. I’m almost done. Should be able to unleash it in a day …or two, at the most. Learnt a hell lot in the process – both CSS and WordPress Theme design wise – not to mention, bending some popular plug-ins to work the way I want.

My own plug-ins – namely, LiveSig and curreX are both in need of critical updates which I plan to do over the weekend. Till then

May 29th by miCRoSCoPiC^eaRthLinG

Continue Reading

This isn’t about those shiny Web 2.0 badges spotted abundantly around the web these days. Rather these are real-world badges that gadget freaks and people with that individualistic trait would love to show-off on their apparel. These custom buttons and badges are brought to you by Fat Statement AB – a Swedish company specialising in print media.

The badges come in two different sizes – 25 and 45 mm (1 and 1 3/4″) and are made from stainless steel with a protective plastic mylar that covers the picture. Talking about the picture brings us to the coolest part of this service – a fully interactive flash-based designer with which you can create and submit your design in a jiffy. Ordering your own button involves 4 steps. Design, Choose Size & Quantity and Add to Cart. As simple as that. Note that you’ll require Flash Player 9 installed on your computer to be able to work with the designer. Also, for some weird reason the designer didn’t quite finish loading a couple of times. The buttons are printed at 300dpi resolution on high-quality matte photo paper using high-end inkjet printers – so you won’t be wrong in expecting sharp colours and print.

Another cool thing I liked about the service is that it employs an IP-based geo-location service that (on most occasions) correctly identifies your region and immediately tells you the shipping costs. The price for a custom button (of either size) is quite decent – USD 1.5. Shipping is worldwide and as I mentioned earlier comes as an extra that depends on your geographic location.

As for warranty, they do make some sincere promises on their site regarding the replacement of defective shipments. Orders upto 1 kg in weight (approx. 150 medium sized or 450 small badges) are handled with ease.

For more information and ordering, visit Fat Statement.

Oct 11th by miCRoSCoPiC^eaRthLinG

Continue Reading

This comes in rapid succession of the last review of Web 2.0 Badges. No sooner had I posted it, I stumbled upon another free online Web 2.0 Badge Generator called freshbadge – and this one offers far more in the way of features. The basic idea is all the same – you pick your badge style, add in your text and adjust a couple of factors (text size, color etc.) and Voila ! Your badge is ready to download.

Here’s a brief comparison between the features offered by both of these services…

Badge Templates

Web 2.0 Badges has a much wider selection of predefined templates (different colours & shapes but of fixed sizes) – whereas with freshbadge, you get to start off with 4 basic shapes only. However, the latter gives you the opportunity to adjust the badge & petal widths, the border thickness as well as the gap between each petal.

Badge Boder / Body Colours

With Web 2.0 Badges, you’re pretty much stuck to the colour schemes offered by the site – but freshbadge lets you select both. If you’re one with a good colour concept, this one’s definitely for you.

Badge Text

Not much of a difference here in either. Both let you adjust the textual content, font size, angular inclination and colour, although the variety of fonts offered in freshbadge is a lot more.

Text Effects (Outline, Glow etc.)

This section is entirely missing in Web 2.0 Badges. freshbadge lets you stroke the text with a colour of choice and add a glow to it.

Badge Effects (Background patterns, Gloss, Shadow, Glare)

Once again freshbadge wins in this category hands down. None of these effects are possible with Web 2.0 Badges.

Peel Appeal

Here comes the final touch – the Peel Effect, which can really jazz things up, brought to you by none other than freshbadge. No score for Web 2.0 Badges.

That’s about it – I guess.

Conclusion

Both these services are good – Web 2.0 Badges being the winner in the time-saver category. If you’re in a real hurry, don’t think twice before heading over to them. freshbadge on the other hand, is for the control freaks (and graphics pros) and is a clear winner in the features category.

Got an opinion? Comments are always open for you.

Sep 05th by miCRoSCoPiC^eaRthLinG

Continue Reading

Nope ! You don’t need any expensive graphics editing tools. Nor do you require to perform painstaking and complicated procedures to generate those ultra-cool reflective Web 2.0 style badges. You can do all of that online under less than a minute and for free with Web 2.0 Badges.

The site offers a whole bunch of pre-created badge templates in the most common formats (rounded/serrated/flowery edges). All you need to do is take your pick, set the colour palette, specify the text and font and hit Apply. Your shiny new badge is ready for download. You can tweak around with several other factors like X, Y coordinates of the text (which is normally centered on the badge), size and colour of the font as well as the angular inclination of the text.

And in case you’re not satisfied with the results, there’s even a box.net drive linked to the site, from where you can freely download PSD (Photoshop) templates of every conceivable kind of badges.

Here’s a quick preview of their interface…

Once you’re at the site, you’ll notice a couple of links right at the top pointing to AjaxDaddy and SocialScan. Any web-developer will find AjaxDaddy a royal storehouse of rich, Ajax based effects that you can implement in your sites. As for SocialScan, it’s a link popularity checker for social media networks. These two sites are worth visiting.

Incidentally, Web 2.0 Badges distinctly reminds me of AjaxLoad, which is a similar free online service that generates those fancy loading icons usually associated with Ajax-based sites.

Sep 03rd by miCRoSCoPiC^eaRthLinG

Continue Reading

This tutorial was created for an opensource site named AntiLost that a couple of my friends and myself had tried to launch a while back. While the site never really took off (and has been torn down long since), some of the material that were hosted there still remains with me. I was going through them yesterday and discovered this one. It’ll come real handy to a lot of the aspiring digital artists out there. So here it is in honour of my good buddy Twitch aka Michael Land, who happens to be the original author. Twitch is an excellent graphics / web-designer and has one of the most brilliant colour matching brain I’ve ever seen.

We’ll be using the vector graphics tool named Fireworks from Macromedia (now a part of Adobe).

Step 1

Launch Fireworks and create a new document in it. Set the width and height of the Canvas at 75px each and set the resolution at 72px/inch. As for the Canvas colour, set it to Transparent as it’ll enable you to place the final image over any other artwork you like. It’ll also make it easier for you to work with the Doughnut Tool later on.

Step 2

Now, instead of using the standard Ellipse Tool to make the outline of a CD, we’ll use the Doughnut Tool , as the generated image contains an “empty” circle in the middle which allows for seeing objects placed behind it. With the Doughnut Tool selected, draw a simple doughnut shape on the canvas in the default Layer.

Once done, adjust the X, Y Coordinates of the shape to 5px each. Then set the dimensions (width & height) to 65px – so that you doughnut shape nicely fits inside the canvas leaving some marginal area around.

Name this layer, CD Base.

Step 3

We have our basic CD. You may want to adjust the inner radius (of the little circle) so that it ressembles a CD all the more since the spindle hole of the CD isn’t as big as that of the doughnut shape. To do so, click and drag the Diamond Dot on the inner ring till you get a shape that satisfies you.

Following the adjustment, the image should look like this…

Step 4

Now that it looks a bit more like a CD, we’re going to add some colours to it. Feel free to use whatever colours you like – but keep in mind that you’ve to pick two tones (light & dark) of the same colour. To keep to the Web 2.0 style, you should pick pastel shades. For your doughnut, change the colour to Solid > Gradient > Linear.

Make sure your gradient band is horizontal and not at an angle – or else, you won’t get the desired effect.

When you’re ready, we’ll go ahead and change the gradient start and end colours. Make the first or beginning tag the lighter one while choose the darker colour for the ending tag. For our purpose, I’m going to pick #94CAE4 and #2F8EBD respectively.

The recoloured CD image should now look like the following …

Step 5

Our CD is finally coming together. Although it may not seem like it, there are only a few steps remaining now. Next apply a Stroke. This doesn’t mean “stroke your screen”. By stroking, you add a solid line in the external regions of the figure so as to define the edges. So select your CD, choose a colour that is a triffle bit lighter than the darker shade of your gradient and apply a stroke of 1px thickness. If you’ve used the colour tones that I used, #388BB4 would be a good tone to use for the stroke.

You should end up with an image like this…

Step 6

This is the easiest step. Go to the Filters Panel and drop a Shadow (follow Shadow & Glow > Drop Shadow). Leave the settings as they are.

The end effect should be like this…

Step 7

This is the second hardest part of this tutorial, but if you’ve followed the guidelines so far you shouldn’t face any problems. Create a new Layer and name it CD Ring. Make sure it is placed above the last layer (CD Base). Selecting this layer, draw another doughnut shape smaller than the CD image but overlapping it. Be careful as to not cover the spindle hole. Give it a Solid Fill (I’ve used White – #FFFFFF here). If the shape inherits a Shadow by default, simply remove the effect from it.

Next, adjust the dimensions, coordinates and inner radius of the doughnut so that it fits around the spindle hole of the CD like a narrow ring. This may take some effort but eventually you’ll get it right. For me, setting the dimensions to 30px each and the coordinates to 23 x 23 and then trivially adjusting the inner radius worked like a charm. Finally, apply the same Stroke colour as before. Here’s the result…

Step 8

The hardest of all ! Making the reflection segments. When I say hardest, I don’t mean you require an expert to do so. However, you’ve got to be extra careful with this one as it can make or break the whole effect.

Start by creating a new Layer named Reflection. Place this in between CD Base and CD Ring i.e. above CD Base and below CD Ring. Copy your larger CD from the CD Base layer and paste the copy in the newly created layer. Remove the Drop Shadow effect from it and give it a Solid Fill with White. Remove the Stroke too.

Next set the transparency (opacity) of this shape to about 25%.

Here comes the fiddly part. On the doughnut shape, there’s a little Diamond Dot on the Outer Ring. Press and hold down the ALT key and drag the diamond a bit along the circumference to create a segment. If you’ve difficulty working with the dot, you can always Zoom In the image. A zoom of 300-400% should suffice. Now, from the end-point of the last segment, create another segment of a different (wider or narrower) circumference and do so till you’ve created 5 segments of varying circumferences.

The reason that you create 5 segments is that 2 of them in between will act as spaces (well, 6 segments & 3 spaces – if you count in the part between the last segment and the starting point).

Now switch to the Subselection Tool by pressing 1 or A on your keyboard. Select a segment which you consider a space (will show through to the bottom layer) and press Delete on your keyboard. You may get a warning – just go ahead and click OK.

Delete two more such spaces till you get your perfect CD Image with alternating reflection segments. If you did everything right, you have your Web 2.0 style CD Image.

Note: One final touch-up. I noticed that the shadow was getting cropped a bit at the right and bottom edges. Increasing the Canvas size to 77px by 77px keeping the Anchor on the Top-Left did the trick.

If you require the original Fireworks file containing all the layers, simply right-click and save the final CD image. Opening it in Fireworks will reveal all the layers.

Have fun

Aug 29th by miCRoSCoPiC^eaRthLinG

Continue Reading