It’s not easy to pull off an impressive or very creative group photo, but that’s only because we are limited by our imagination and the number of crazy friends we have. When you have those two elements, plus the willingness to take countless upon countless number of frames of the same shot just to get that one photo right, you end up with some great masterpieces that are the envy of other photographers out there.

In this short inspirational post, we have grouped together 5 great ideas that you can try to make your very own creative group photos.

Recommended Reading: Group Photography: Tips And Beautiful Examples

1. One Leg Kick!

Here’s a gem of a shot. Get a few friends to stand some distance in front of you in the same line. Get them to figure out how badly they would look if they get a kick in the stomach for real.

Have them ready to jump, have the hero ready to give his ultra-powerful kick, get the camera ready in burst mode and Click Away!

2. The Beach Super Punch!

An extension of One Leg Kick!, this punch has a radial effect on the victims. For the best effect, take the time to carve out the rings of destruction in the sand, like what you see around the kung fu master who delivers the super punch.

You might want to coordinate who ‘badly’ you are hit (victim right in the middle seems to be bearing the brunt of the force), less smiles more pain on the faces, and some flying shoes may improve on this pretty perfect photograph.

3. Super Grandma!

Grandma has a temper! Looks like all her tai-chi lessons are finally paying off. If you don’t eat your vegetables or always talk back to your na-na, one day she may unleash upon you her tai-chi of doom like this awesome grandma here.

The lady in red (third from the left) may need some attention later on, particularly since she is straight in the line of fire.

4. Fee-Fi-Fo-Fuuuh

You definitely need someone behind the camera for this one since it is a play on perspective and angles. While the first six people gave the impression that they are actually on a giant’s hand, the last two fellas on the far right delivers the home run by breathing life into the illusion. Someone grab on to the last guy before he gets blown away!

5. Perfect Formation

Here’s a cheeky group trying to hold back their cheeky grins as they levitate several feet off the ground. Note that the guys hold one type of pose while the girls try another type.

I’m not sure which of the two is harder but their ability to coordinate the formation while in mid-flight is commendable. Friendly reminder, tuck in them shirts before you start posing for photos where you jump in the air.

One More: Watery Poetry in Motion!

Part of the power of photography is capturing something while it is happening, even when we don’t see it with our own eyes in real life. How often can you capture water droplets marking out a path in mid air?

This might take some practice to get it right and hence willing participants to fling their hair a lot more than once. But in the end, you’ll know when you have a winning photo.

Firefox has long been the preferred browser for web development. There are a number of useful add-ons to do the job. In this post, we are going to look into a few add-ons that I think is essential to be installed if you are going to do web development. Also we are going to uncover some of the features in these add-ons that can help.

First of all, we need to install the Firebug.

Recommended Reading: 50 Time Saving Firefox Add-ons

Firebug

Firebug is a must-install add-on for web development. Assuming that you don’t know where to get Firebug, you can install it here. Probably, you need to restart your Firefox before it is activated.

After that, you can view the Firebug through one of the following ways: follow this menu Tools > Web Developers > Firebug, right-click on the web page and choose “Inspect Element with Firebug”.

Alternatively, you can find a Firebug icon in Firefox and click on it, this will show the firebug window;

Firebug is quite identical to Chrome Developers Tools. it has a panel to see the HTML structure and the styles, and also a Console panel to see the errors, warnings and logs. But, I have a few more tips that hopefully you may find useful.

Adjusting Box Sizing

HTML element is made up with CSS box model that consist of margin, padding and object dimension (width/height). There are times when we may need to modify these properties. In that case, you can select one of the elements you want it to change, then go to the Layout panel.

In this panel, you will find an illustration of a CSS box model along with its information, including the width and height. Even though these two properties are not specified in CSS, this tool is clever enough to determine the value. If you need to modify them, you can simply click on the value and use the up or down arrow key to increase or decrease the value.

Computed styles

In many situations, you probably are wondering why certain styles are not applied. One of the easier and faster ways, particularly when you have thousands of lines of styles, is by inspecting it from the Computed Style panel. This example shows that the anchor tag text color is overwritten by .button class, while the background of the .button class is overwritten by .button.add.

Inspecting Font Family (the easy way)

You probably often find something like this in font-family property in CSS with various font families. Unfortunately, this won’t tell us specifically which font the browser takes. To make the identification easier we can install this Firebug extension namely FireFontFamily.

After the installation is done, load your webpage, and now we can clearly see which font family is applied. In our case it is in fact Helvetica Neue (see shot).

Analyzing Performance

This might be platitude, but Site Speed is now one of Google parameters (algorithm) in deciding website quality; the website that loads faster is considered to be well developed and ranked higher in terms of content. So speed is not something that should be overlooked.

Net Panel

The first place that you might need to visit to inspect your website performance is the Net panel. This panel will record the HTTP request of your website when it is loaded. This screenshot below shows a webpage that loads 42 request and takes around 4.36 seconds to load.

You can then sort the HTTP request upon their type like HTML, CSS, and Images.

Yslow!

Furthermore, you can also install YSlow, an extension for Firebug from Yahoo!. After it is activated, you will find an additional panel expressively called Yslow!.

Similar to Net panel, Yslow! will record the webpage performances when it’s being loaded, but then it will also tell you why the webpage is slow and what can we do to solve it. In this example, we run a test to a webpage and it is scored 86 for overall performance, which is considered OK.

Page Speed

Alternatively, you can also install Page Speed from Google. Similar to Yslow!, it tests website speed performance, albeit the test result may be slightly different. This example shows that the same webpage scored 82 according to Page Speed.

For More: Tools, Tips and Best Practices for Web Optimization

Web Developer Tools

Web Developers Tools is obviously for web developers and it has a bunch of features packed in this toolbar. But this one below is one of my favorites.

Image Inspection

There are times when we may need to get image information from the webpage. I commonly see people do this by stumbling across the browser or by right-clicking the image and select View Image Info, like so:

But this way is not quite efficient when we need to get the information from many images. In that case, we can utilize the Images feature from the add-on. This feature is easily accessible from the Image menu from the toolbar.

And, this example shows how we show the image dimension and image file size simultaneously:

Firefox Built-in Tools

In recent versions, Firefox has tremendously enhanced its built-in features for web developers, some of them are:

Native Inspect Element

This native Inspect Element from Firefox may look similar to “Inspect Element in Firebug”, but it actually acts in different ways.

This time, I will not go through this feature further, as it is essentially identical to Firebug HTML and CSS panel, albeit with a difference in layout and design. But, there is one distinctive feature that is worth trying out, the 3D view.

Using 3D view you can view the webpage structure in depth. To activate this view, you can find the button at the bottom right of the “Firefox Native Inspect Element”. This is how the 3D view looks like.

I don’t use it as often as other features though, but it’s quite an innovative feature from Mozilla I admit, and certainly very useful in certain situations.

Web Design View

Since the increasing popularity in Responsive Web Design, Firefox has initiated a Responsive Bookmarklet to the Browser. This tool will allow us to test our responsive website in different viewports without resizing the browser window.

This view is available from this menu: Tools > Web Developer > Web Design View. And, this how the view looks like.

Style Editor

Lastly, if you are working with CSS frequently, you will likely fall in love with this feature. Since the version of 11, Firefox had added Style Editor in its native developer tools.

This feature is as cool as the Web Design View, it allows you to edit the CSS, see the impact instantly on the browser and save the changes that directly affects the CSS source file.

The Style Editor is available from the following menu: Tools > Web Developer > Style Editor.

Final Thought

There is a bunch of features packed in these Firefox add-ons and those discussed here are just some of the features I utilize quite frequently during web development. Nonetheless, you may have some other tips that might be useful to increase web development productivity in Firefox.

What features do you use frequently? You can share your thoughts in the comment box below.