Lunascape 6 Orion – IE, Firefox and Safari – all thrown into one

Lunascape 6 Orion: Tripple Engine BrowserLunascape 6 (Orion) is a brand new browser intended to make life much easier for web designers and developers alike.

Any decent web designer is aware of the pains one has to go through to achieve uniform cross-browser rendering of sites. And that involves a long and tedious cycle of writing appropriate CSS and  HTML while consistently testing the same on browsers used en masse namely, Internet Explorer, Firefox and Safari.

So far one had to rely on bits and pieces  software offering disjointed functionality – like MultipleIE (multiple versions on Internet Explorer running simultaneously on the same system), IE & Firefox add-ons like IETab (that toggled the rendering engine between Gecko and Trident) and Chrome Frame (Google Chrome inside IE) or on online services like Browsershots that generates snapshots of a site across a multitude of browsers. What really was missing was a tool that brought all of these under the same roof.

The newly introduced Lunascape version 6 has not only managed to do the same – but also offer side-by-side  (split-pane) view of the same page in all 3 engines – Trident (IE), Gecko (FF) and Webkit (Safari). Throw in it’s Tripple Add-On capability & support for 11 languages – and you’ve got one hell of a testing platform.

It’s only a 10 MB download and definitely worth a try.

How to display FeedBurner Feed Subscriber Count on a custom graphical background

Feed CountHere’s a nice trick I learnt a couple of days back. I wanted to display my feed subscriber count in a way that would match my site’s theme. I was tired of the vanilla feed-count display provided by FeedBurner – probably because you can find it on almost every other site these days (and I wanted something unique). So I got down to designing one on my own and I’m going to show you how to do the same for your site.

I won’t go into any lengthy (step-by-step) discussion on creating the graphical background – that’s something that’ll be your call. But I’ll teach you the core idea – fetching the feed-count from FeedBurner’s server using their API and displaying it on your site.

The Graphical Part

First and foremost, you need to decide on what kind of a display you want – small or large, dark or light. For example, I chose to display mine on a black background with medium sized font (see my RSS box at the top of the page). Depending on your background, you’ll need to either create or find a suitable RSS icon. You can find some excellent tutorials on creating feed icons here, here and here. Alternatively, you can download a whole bunch of free icons from here.

As a starter fire up your favourite graphics editor (Adobe Fireworks for me). For simplicity’s sake we’ll follow the same approach as I did with my feed-count box. Draw a black rectangle with rounded corners. Place your feed icon in a suitable place. Then draw another smaller rounded rectangle inside the earlier one, but with a lighter stroke colour (say white). This will be the container where you display your feed-count. You can throw in some fancy glow / shadow effects as you like. We should get something that approximately resembles the following image.

Feed Count Container Graphics

The image shown above was created with Fireworks and is an editable layered PNG file. If you’re using Fireworks, you can very well download this one (Right Click on it > Save Image), use it as a starting point and add/edit/resize it according to your preferences.

The Coding Part

You need to ensure that your web-host offers cURL (as an extension of PHP). By default, 90% of the web-hosts do – so you shouldn’t have anything to worry about. Secondly, the FeedBurner Awareness API (for your feeds) should be turned on. If you have been using the Feed Count feature of FeedBurner – then it IS already turned on. If not, you can login into your FeedBurner account, select the Publicize tab for the appropriate feed and activate this service. Once you’ve made sure of these two factors, we can progress to the actual coding.

Here’s the code you’ve going to need.

// Get FeedBurner Subscription Count - using FeedBurner Awareness API
function get_feedburner_count( $uri, $display = 'true', $format = 'true' ) {

	// Construct URL
	$apiurl = "http://api.feedburner.com/awareness/1.0/GetFeedData?uri=" . $uri;

	// Initialize the Curl session
	$ch = curl_init();

	// Set curl to return the data instead of printing it to the browser.
	curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
	// Set the URL
	curl_setopt( $ch, CURLOPT_URL, $apiurl );
	// Execute the fetch
	$data = curl_exec( $ch );
	// Close the connection
	curl_close($ch);

	// Parse XML
	try {
		@$xml = new SimpleXMLElement($data);
		$fcount = $xml->feed->entry['circulation'];
	} catch ( Exception $ex ) {
		// echo 'Caught exception: ',  $ex->getMessage(), "n";
		$fcount = "?????";
	}

	// Display or Return, Formatted or Unformatted
	if( $display ) {
		if( $format )
			echo number_format( $fcount, 0, '.', ',' );
		else
			echo $fcount;
	}
	else
		return $fcount;

}

If you’re wondering where you’re going to add this code without messing up your theme – almost all modern WordPress themes have this file named functions.php, which contains the functions essential for registering the sidebar, tweaking specific WordPress routines etc. You can add this code to that file and it’ll be made available for calling from anywhere inside your theme.

The function is called get_feedburner_count() and accepts three parameters – two of which are optional. Here’s an explanation of the parameters…

  1. $uri – This is a mandatory parameter. If you don’t specify this one, the function won’t be able to fetch the feed count. The URI is the name you chose to represent your feed on FeedBurner. For example – my feed url is, http://feeds.feedburner.com/ChaosLaboratory. That makes my URI, ChaosLaboratory. This is what needs to be specified here.
  2. $display – This is an optional parameter. It takes up the values true or false. I have modelled this function on the lines of the general WordPress template functions – which means that the function is able to either display the feed-count directly, OR return it to you for further processing. If you don’t specify any value here, it’ll default to displaying the feed-count.
  3. $format – This too is an optional parameter and takes up either true or false. By default it is set to true. This tells the function to pass the feed-count through another formatting function, which adds a digit-grouping comma to it for every thousandth place. The formatting occurs on Line 31 of the code and you can modify that line to reflect any sort of formatting you want.

A typical call the function can look like,
get_feedburner_count( 'ChaosLaboratory' ); – this will print out the formatted feed-count directly

OR

$fcount = get_feedburner_count( 'ChaosLaboratory', false, false ); – this will fetch the raw (non-formatted) feed count and store it in a variable called $fcount. This doesn’t print the figure directly to the screen, but leaves it at your disposal for further processing

OR any variation thereof.

Now, we need to apply some styling to that background image we created so that the feed-count is aligned properly.

Note: I applied the styling on an anchor (link) tag, since I wanted to make the whole image clickable, so as to provide a way of subscribing to my feeds too. Here’s an example…

a#feedcount {
	display:block;
	width:120px;
	height:26px;
	margin:0;
	padding:5px 10px 5px 0;
	background:url(images/bg-feed.png) no-repeat transparent;
	color:#D6D6D6;
	font-size:2em;
	font-weight:bold;
	text-align:right;
	text-decoration:none;
}

Points to note here: On Line 1, I’ve declared display:block. This is necessary, since the a tag by default is an inline element – which means, it collapses to the exact width of the text contained in the anchor. This is not desirable here as we’re attaching the background image to the a tag, and we want it to adapt to the exact proportions of it (specified in Lines 3 & 4). I’ve aligned the feed-count text to the right (Line 11) and used a padding of 10px on the right (Line 6) so as to leave a comfortable gap from the right edge of the graphics.

The code-block above can be added to your template’s stylesheet file or in the header.php within style tags – depends on you. For me, I prefer to keep all the styling in one place, i.e. the stylesheet file.

Adding it to your template

Now that we’ve got all the code in the right place, it’s time to add it to the template. Open up the appropriate file (header or index) – where you want to display the feed-count and add the following lines…


	< ?php get_feedburner_count( "YOUR_FEED_URI" ); ?>

And that’s it! That should display your feed count with the custom graphical background and make the image clickable too, to act as a feed subscription button. The final effect should look like the following…
FeedBurner Feed Count with Graphical Background

Any questions / clarifications, feel free to write back.

Dumpr: Another great addition to your online graphics toolbox

Dumpr LogoThis seems to be the era of online graphics tools. As computing power and  coding paradigms (read software capabilities) evolve, online tasks that were earlier deemed next to impossible are being delivered right to your doorsteps – most of them at the single click of your mouse. Just last week, I had reviewed this online tool named beFunky, that helps you cartoonize any given still picture and video. Today I came across another one called Dumpr – that adds a horde of PhotoShop like filters (effects) to your toolbox.

Generating any of the effects is a 3 step process.

  1. You select the desired effect (some of which are reserved for the paid Premium Membership level) from a pretty large library.
  2. Upload your image & specify the effect variation you want (if applicable). You can also pull in images directly from other URLs and a couple of Social Networking / Image Sharing sites like MySpace, flickr, Picasa, Zoomr etc.
  3. This is the step – where you are handed out the final image (with the effect applied). You can either download the image or use the provided code to embed it in other sites or even re-upload a whole range of Social Networks.

Here are a couple of examples (different effects applied on the same starting image)…

Dumpr Effect - Cellphone Camera Dumpr Effect - Museum
Dumpr Effect - Easter Egg Dumpr Effect - Rubik's Cube

Pretty slick, eh? The coolest part is that if you decide to sign-up for the service (registration is FREE), all the resultant images are automatically saved in the space allocated to your profile. The only thing I found lacking in their service is the ability to re-use these saved pictures for application of a different effect (you need to manually re-upload the image again). That would have covered all the aspects.

If you decide to opt-in for the Pro / Premium Membership – which, at $3.99 / month is quite cheap – you get added benefits…

  1. A larger selection of effects are made available to you.
  2. You get to be the first one to be able to use any new introductions (effects).
  3. All advertisements are taken-off your account.

Found via: JeetBlog

befunky: Cartoonize your favourite pictures in a jiffy

Here’s the latest addition to the Web 2.0 bandwagon – befunky – a quick & dirty way to cartoonize your favourite snaps in a jiffy.

The site sports a simple flash interface that allows you to upload your snaps (either from your Desktop or by direct capture through a webcam) and convert them to cartoon caricatures. There are a couple of easy-to-understand parameters like Sketch, Colour, Warp and Goodies which can produce widely varying end-results. You can crop or rotate the picture once you’ve uploaded it, adjust the brightness & colour levels, apply different warp brush sizes as well as do a multiple variations of flipping & layering. You can even add frames, modify facial features (hair, lips, eyes etc.), throw in accessories like jewelry, eyeware & hats and top it up with some custom funky text. The resultant pictures are really cool! Here’s a simple example with the most basic effect applied.

befunky: Before & After

Soon to come is a new feature that’ll allow you to transcend the boundaries of static pictures and apply the same effects to videos as well. Oh Yes! Full-length running videos. Ain’t that awesome?

The site sports a comprehensive Tips & Tricks section which gives you creative tips on how to best utilise the toons you’ve just created, which range from personally branded merchandise to e-cards and ways to spice-up your costume parties. All in all a very easy-to-use and useful web-application that can find a large audience – specially in graphically challenged people, like me 😀 Can prove to be a viable option for those who don’t have access to Adobe Photoshop and it’s plethora of filters.

Found via: System Hacks

For all th gadget freaks, Fat Statement’s here with an online custom button & badge designer

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. Buttons & BadgesTalking 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.

Stripemania: A free online striped background generator for your site

Stripemania LogoEver felt like giving your site’s theme a cool, striped look but didn’t know how to go about it? Are the graphics tutorials on stripes too complex for you to follow? Here’s you quick and dirty way out. Stripemania is a free online tool that generates striped background images for use with your site’s theme in just a couple of quick, easy steps.

The interface is pretty simple. To get your desired stripe, you choose the width of the stripes, the distance between each stripe, orientation and a couple of colours and hit refresh. Thats it! Your custom stripe is ready to download. If you don’t like vanilla stripes (alternating coloured stripes) – you can choose multiple gradients for the stripes and get some pretty snazzy effects. There’s a quick full-screen preview option that lets you test your background out even before you download it.

Stripemania Screenshot

Stripemania falls within the recent Web 2.0 genre of online graphics design tools and is one of the better designed tools in this category and pretty much devoid of the ubiquitous AJAX timeout errors. It’s a must-add in any aspiring web-designer’s toolbox.

Fresh Badge: Another free online Badge Generator for your Web 2.0 Toolbox

Fresh Badge LogoThis 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.

Web 2.0 Badges: A free online tool to generate those ultra-cool reflective Web 2.0 style badges

Web 2.0 Badges LogoNope ! 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…

Web 2.0 Badges 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.

How to create a Web 2.0 style Compact Disc (CD) image using Fireworks

IntroductionThis 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.

Fireworks CD Image - Create Canvas

Step 2

Now, instead of using the standard Ellipse Tool Fireworks Ellipse Tool Icon to make the outline of a CD, we’ll use the Doughnut Tool Fireworks Doughnut Tool Icon, 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.

Fireworks CD Image - Doughnut Shape

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.

Fireworks CD Image - Adjust Coordinates and Dimensions

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.

Fireworks CD Image - Adjust Inner Radius

Following the adjustment, the image should look like this…

Fireworks CD Image - After Adjusting Inner Radius

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.

Fireworks CD Image - Change Colour to Gradient

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

Fireworks CD Image - After Applying Gradient

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.

Fireworks CD Image - Choosing the Gradient Colours

The recoloured CD image should now look like the following …

Fireworks CD Image - After Choosing the Gradient Colours

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.

Fireworks CD Image - Adding a Stroke

You should end up with an image like this…

Fireworks CD Image - After Adding a Stroke

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.

Fireworks CD Image - Dropping a Shadow

The end effect should be like this…

Fireworks CD Image - After Dropping a Shadow

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.

Fireworks CD Image - Adding a CD Ring

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…

Fireworks CD Image - After Adjusting CD Ring

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.

Fireworks CD Image - Setting Relfection Layer Parameters

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

Fireworks CD Image - Set Reflection Layer Opacity to 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.

Fireworks CD Image - Creating the Segments #1 Fireworks CD Image - Creating the Segments #2

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.

Fireworks CD Image - Deleting the Segment Spaces

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.

Fireworks - 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 🙂

How to create a Web 2.0 style Arrow using Inkscape

Ever come across those neat graphics of directional arrows and wished you could have them on your site? They can be used for anything from grabbing attention to indicating download links.

Look no further. Here is a step-by-step tutorial that should get you on track, and enable you to create custom graphical arrows.

The tutorial is based on Inkscape, which is an open source vector graphics editor. But that doesn’t mean that the creation process is limited to Inkscape only. You should be able to follow this simple tutorial with other vector graphics editors too.

Step 1

Use the Rectangle Tool Rectangle Tool icon to draw a rectangle.

Rectangular base for the arrow.

Step 2

Using the same tool, you will need to draw a square – a perfect square that is a little bit wider than the first rectangle.

Square above the Rectangle

HintInstead of fighting with the Rectangle Tool in order to get the perfect square, hold down the [Ctrl] button while drawing the square. The length and height will snap to the same size.

Step 3

Next task is to rotate the square through 45 degrees. With the Select Tool Select Tool icon click on the square twice. The selection will change to rotation and skewing mode.

Skew and Rotation mode

Hold down the [Ctrl] key and use the corner rotate icon to rotate the square in chunks of 15 degrees. Holding down the [Ctrl] keys lets you make snapped rotations. If you do not use the [Ctrl] key, the rotation is free form and through an arbitrary degree.

Sqaure rotated through 45 degrees

Step 4

Convert the rotated square to a path, by selecting Path > Object To Path.

Convert the Square to a Path

Use the Edit Node Tool Edit Node Tool icon and select the rotated square shape. Then select the lower node and delete it.

Symmetric Triangle

This will give you a symmetric Triangle.

Step 5

Select both the shapes, and choose Align and Distribute Objects Align & Distribute Objects icon option. Next, Center Align them both over the Vertical Axis Center Align over Vertical Axis icon .

Selected Square and Triangle

Select only the triangle and move it down over the rectangle.

Triangle moved over the Rectangle

Select both the shapes and perform a Union operation. This can be done by either pressing down [Ctrl] and [+] keys or through Path > Union. What you have now is a basic arrow shape.

Basic Arrow Shape

You can apply several vector effects to this and customize it according to your needs. For example, give the arrow shape a fill color, and a darker outline color. Then copy the shape, place it below the first, move it a bit, and turn on the blur. This gives you a fancy shadow effect.

Arrow filled with colours and with a shadow

Here’s a short video showing you how to do that.

Or you can also go on to give it a nice glossy look.

Glossy Arrow

This uses the same basic shape to give a solid fill color, and a copy to give the gradient of dark to light from top to bottom. Another copy of the same arrow, combined with a free form shape transformation gives that glossy look on the side.

Here is an example of how you can use the illustration for your website …

Download Link using the Arrow

Let me know how useful this has been, and also if you would like to learn something else.

Happy vectoring!


Vyoma aka K. Mahesh Bhat dabbles in vector art as a hobby and runs his own arts and graphics design blog titled KalaaLog. This is his first appearance as a guest blogger at Chaos Laboratory.