One popular type of web app that is at our everyday disposal is the online photo editor.

Free Online Photo Editors

Online photo editors not only offer a quick and effective way for people to edit their images but it also allows the everyday person to take their photos one step further without having the technical knowhow that a photographer would.

Today we are sharing 10 online photo editors for all of your quick fix photography needs.

1. Pixlr

Pixlr is undoubtedly one of the more popular free online photo editors available today. Pixlr offers three versions of itself based on the user’s skillset. For those who are interested in actually editing their images aside from adding effects and stickers, there is Pixlr Editor.

It however isn’t a simple basic editor with a one-click effect method, a basic knowledge of how to operate layers, filters and adjustments is needed. Those who are familiar with such programs like Photoshop and GIMP will find the interface and optional tools easy to navigate. Speaking of the interface, it is sleek and simple and with the floating dialogue windows you can easily move them to better customize your editing experience.

Pros:

• Pixlr allows you to upload images from various locations
• Available in 20+ languages
• 100% Free
• Images can be saved in various formats and to various locations including Facebook
• Registration not required

Cons:

• Pixlr Editor requires some basic editing knowledge
• Pixlr Express and Pixlr-o-matic appear to be more limited in what you can do as well as output options

2. PicMonkey

If you were a fan of the now defunct Picnik then you will most certainly be a fan of PicMonkey as several of the engineers who worked on Picnik now make up the team who help run this easy to use photo editor. The setup of PicMonkey is reminiscent of Picnik and coupled with a beautiful interface that sets everything up neatly for your use you’re unlikely to find any trouble while using the program.

From basic editing like cropping and rotating your image to adding camera effects like Holga and film stock, PicMonkey has a lot to offer. Although a lot of PicMonkey’s features are free there are some that require you to create an account so that you can upgrade. In other words the use of these effects comes at a price, $4.99 a month to be exact. Not exactly bank breaking for the chance to play with the various tools and not to mention it will remove the ads that appear.

Pros:

• Easy to use
• Nice interface
• Offers useful features such as blemish removal and basic color correction
• No registration required to use the free features

Cons:

• Premium features will cost you

3. BeFunky

BeFunky is a photo editor that offers endless possibilities for you to take your photos to the next level. Though this photo editor offers tons of options in regard to basic editing alone it doesn’t present itself as a professional editor in the same way that Pixlr Editor does. While you can adjust the exposure of your image and even apply some cosmetic fix ups you are also given access to over 20 effects that are pre-equipped with several presets.

The best part about having these multiple effects at your disposal is that they are completely free. That means there are absolutely no premium effects which you have to pay for. Though the effects are free there are unfortunately some things like saving your image at a high quality and online photo storage that will unfortunately force you to pay if you want to have these capabilities.

Pros:

• Can upload your photos from various areas including your Facebook
• Share and explore photos easily
• Simple to use

Cons:

• No full screen workspace with the free plan
• Extra features will cost you
• No High-Res output

4. Ribbet

When you look at Ribbet chances are that you will think you’re back on Picnik and that’s because Ribbet is basically everything that Picnik was and then some. This photo editor features all of the original features that users loved and remembered Picnik for and on top of that Ribbet is built on the same platform.

The interface is still the same clean and simple layout that makes navigation and usability as quick and efficient with a click of a button. The effects in Ribbet are all one-click solutions with the ability to increase or decrease the chosen effects visibility. New effects never seen in Picnik are readily available for your use with exception of some premium features that you would usually have access to in programs like Photoshop. The nice thing is, currently to access premium features you just have to register with Ribbet for a free account.

Pros:

• One-click effects
• Various amounts of effects, borders, fonts, etc. for use
• High Resolution image output
• Simple layout

Cons:

• Premium features though currently free can only be used by those with a Ribbet account

5. Citrify

If you just need a photo editor to do some quick changes to your images without all the fancy effects and added features then Citrify is the photo editor for you. The program is as simple as you can get when it comes to a basic editing program. With the ability to change the color and brightness and even make a few touch-up corrections such as blemish and red-eye removal there really isn’t much to this photo editor.

The effects that are present are simplistic and not quite flattering or as cool as some of the effects that are featured in some of the other photo editors listed but they are free. While it may leave for a lot to be imagined it does exactly what it advertises it will and all at no cost whatsoever.

Pros:

• Easy to use
• 100% Free

Cons:

• Launches in a separate window
• Small selection of effects
• Cannot import photos from your social networks or from URLs

6. iPiccy

Another photo editing option is iPiccy which is a lot like Picnik and Ribbet as the interfaces and applications are pretty similar which makes the program quite easy to use. Aside from your usual photo editing essentials like cropping and resizing, iPiccy takes it a step further by implementing features one would usually find in expensive software programs like Photoshop.

The Blender option allows you to create layers where you can overlap images, shapes and texts that can then be manipulated by changing the opacity and blend mode just like you would in Photoshop. You are also given the ability to doodle and paint on top of your photo using the Painter option. The nice thing about iPiccy is that it offers a lot of effects and features that would typically be premium for free use.

Pros:

• Functional and easy to use
• Offers basic to advanced editing
• Has a lot of interesting effects

Cons:

• To enable Local Storage you must grant iPiccy permission to store images to your hard drive.

7. Splashup

Right off the bat Splashup boasts a sleek dark interface that will remind you of Photoshop by the way the dialogue boxes and navigation menu are set up on the screen. Novice to advanced users can easily navigate this program. You are also given various options when it comes to browsing for your image as the program works with multiple image hosting sites including Flickr and Picasa.

Though the program does try its best to be a free alternative to Photoshop it offers very few filters to use. It also lacks adjustment features such as adjusting the levels and exposure of your images which even standard photo editors offer. An upside to this photo editor is that unlike the other ones you can open up as many photos as you like instead of working one at a time and it is completely free.

Pros:

• Sleek interface
• Allows for multiple image editing

Cons:

• Opens up in a new window
• Image window cannot be maximized
• Few options

8. Photoshop Express

Adobe’s Photoshop Express is exactly what it sounds like, a miniature version of Photoshop but has fewer features than Adobe Photoshop Elements. If you have ever been interested in learning Photoshop then this is the perfect editor to get you started as it features very basic editing abilities such as auto-correction, rotation and adjustments in saturation.

Even though there are only a handful of effects at your disposal the ones that you will find available do come with a few presets for you to choose from to give your photo some dynamic as well as a more professional look. Just like Photoshop you are able to work in full screen with Express. There is also the ability to share your newly edited images as well as save the jpeg file to your computer.

Pros:

• Easy to use and learn
• Simple and functional interface
• Sharing capabilities
• Can view the original edit

Cons:

• Editor loads in a separate window
• Only supports jpeg images
• Handful of Effects

9. Picfull

Picfull is a one-click type of photo editor that stands out from the others as it only caters to applying effects to your images. If you just want to add effects and not worry with any actual editing then Picfull is the editor that you will want to use. The interface of the editor is beyond simple but it is effective and above all else, functional.

It only requires you to upload a picture from your computer, pick the effect that you want and then save it. All in all there really isn’t much to say about Picfull other than it offers some cool effects to add to your everyday photos.

Pros:

• Lots of effects to choose from
• Really simple interface

Cons:

• Can only add effects, no basic editing abilities
• Saving takes some time

10. Fotor

Fotor is a really nice photo editor that is coupled with a basic layout and functional navigation menu. Aside from partaking in basic editing you can also create photo collages, photo cards and you can even add HDR to your images. Fotor is truly user friendly and most of the features can be applied by one click and then adjusted to your preferences.

Working in full screen is possible though the area in which you are given to work in is spacious enough. At first glance it appears that Fotor doesn’t offer a lot of effects but once you click on the effect you will notice that is not the case. There are a number of effects that you can add to your photos not to mention clip art.

Pros:

• Can compare the original with the edited
• Full screen capabilities
• No registration required
• Access the fonts on your computer

Cons:

• Can’t adjust size of the borders

Conclusion

Whether you are a photographer or someone just looking to quickly edit a few photos without having to pay money for expensive software you will find that a lot of free online photo editors are great alternatives.

While not all of them have stunning effects available a lot of them do have the ability to make your images stand out better.

• Infographic: Take Amazing Photos From Your Phone
• 30+ Stunning HDR Photographs of Airports and Planes Around the World
• 60 Websites Using Full Screen Photographic Backgrounds
• Win Free 2 Months of Stock Photo Subscription Accounts from Depositphotos

This led to accusations of unrealistic images of the female body. Some might consider it a graphic design malpractice while others would say it is just a bad Photoshop job. Bad Photoshop results could prove disastrous not only in the fashion industry but also in technology marketing industries. It can result in atrocious misrepresentations on laptop screens and cell phones, and can get creators into hot water.

Photoshop is a program for photo editing which can be used on Microsoft Windows and Mac. Photoshop includes several tools ranging from simple to complex. They can be applied to a wide range of projects. Sometimes, all you need is a simple function. For instance, if you want to create a collage, you will need to extract images from an original picture and then place them in your new image. You need to use the right features and tools to get an effective result.

Common Photoshop Mistakes and Malpractices

How do you know whether you are making mistakes or misusing the program? Photoshop offers you a powerful tool for editing and creating graphics. It has an intuitive interface. Beginners as well as professionals need to know various aspects of cropping and resizing in order to fully master utilizing the Photoshop tools.

This article will help you refine your photo editing skills and create some spectacular graphics. We will discuss how to use: retouching and healing tools; the pen tool; painting tools; color replacement tool; understanding the layer masks; and image masking tools.

1. Unspecific methods of extraction

There are several tools for extracting visual elements in a file. Not all of them offer the same level of precision. These tools are used for removing unessential distractions from the picture or for deletion of an object. For instance: The Quick Select option can be used for specifying the size of the area to be extracted.

The Pen Tool allows the user to trace elements to produce the exact object he visualizes. Practice can lead to improved selection of images and greater precision. Methods selected should be suitable for the required task.

2. Feathered Edges

When selecting the object to alter or move, it is suggested that you feather the edge. This can be done by a two to three pixels resolution, depending on the image resolution.

Feathering prevents the jagged edges that are often found in photo montages. Feathering results in a soft edge that offers better blending with the selected area. Fading out a selection is also more effective by means of using a high value.

3. Rainbow Gradients

You can give the image a rainbow effect with ready made rainbow gradients. Flip the order of the colors to create a realistic effect. This feature should be used sparingly.

Rainbow gradients can be quite jarring. Many websites and designs make use of rainbow gradients. Use them discreetly by blending the gradients from a lighter to darker shade within a single color rather than blending two different colors. Over popping of colors can spoil the picture. Everyone loves vibrant colors and wants to give a picture a neon look.

4. Field Depth

Sometimes, in a picture, one object may be in focus and another is out of focus. This produces a very unnatural look and results in the picture looking odd. The depth of field needs to be corrected. When you combine different images having different depths, you may need to adjust the focus and correct the depth as well. This is one of the most common errors found in Photoshop creations.

5. Overuse of Filters

Newcomers to Photoshop are usually quite enamored with filters and tend to overuse them. Filters can be fun and easy to use. But they are not enough to produce a professional effect. Overuse of filters can produce the opposite effect. Your photo can appear amateurish. Over-editing can become a chronic problem.

When beginners first start learning about Photoshop, they get completely bowled over by the features and capabilities of the tools and do not have the right skills to use them. They start playing about with the filters and plugins. This can even make the picture look worse. Sometimes, less is more.

6. Light Direction

When working on montaging, the images need to be combined by the use of similar lighting conditions. When light plays on an object, it produces a set of shadows that move in a specific direction mostly reliant on the source of the light with respect to the particular object.

When you consider the idea of montaging two images, the light sources for both should be the same. In case the direction of the light for the two images is different, the effect is unnatural and unbelievable.

7. Casting of Colors

The white balance or the hue of white areas is termed as the color temperature of the picture. This should be well adjusted. All white areas should look similar. Otherwise the result will be an unrealistic appearance. The human eye is capable of perceiving such abnormalities. Avoid such errors in montage pictures.

8. Curves

Curves is a very important feature in Photoshop. This tool can be quite intimidating to a newcomer. Amateurs tend or overuse or avoid it. Neither is recommended.

Curves could negatively affect shadows and colors. The curve should not affect the skin tones and color.

9. Layers and Folders – To Use or not to Use

New users of Photoshop generally don’t make use of layers. Layers are central to Photoshop and using them makes it easier to duplicate, move, and perform editing and deleting.

Apart from merely using layers and folders, you need to structure the layers into folders. This tool is essential - especially if you are working on large PSDs or are doing web design. This tool can save a lot of time and headaches.It makes navigating in the project easier.

10. Using Desaturate

When you want to convert the image to black and white, it is recommended that you do not use the Image> Adjustments>Desaturate.

Using it only results in a dull and lifeless photo. Instead, you could convert the image into a black and white one by selecting Image> Adjustment> Channel Mixer. You can get a richer and brighter image by checking of the monochrome and then making adjustments to the channel sliders of colors: red, green and blue.

Black and white photos can convey a classic image that is just not possible with color. In portraits and landscapes, you can produce a haunting and mesmerizing effect. Desaturation is a good option. The problem is: The tool cannot distinguish very effectively between the different tones in case of a black and white image.

Using the channel mixer makes sense. It can be a bit complicated, but it simulates the same effect as the regular filters used for black and white photos and allows you to adjust the red, green, and blue channels. For instance: If you boost the red channel, the reds will be lightened. Experiment until you get the desired results.

11. Guides and Grids

Don’t commit the error of just eyening things up. Make use of guides and grids in Photoshop. The Grid is a tool used for perfect alignment in graphic designing.

It is quite easy to use. You can combine the Grid with the Snap feature to align objects. This will help align objects with the grid lines and along the subdivisions. You can set up grid preferences to suit the working conditions, in inches, pixels or any other standard units of measurement.

12. Features like Eyes, Teeth and Skin

Who doesn’t like sparkle in the eyes? The best way to achieve this sparkle would be to get the light in the eyes while focusing the camera. Do not overuse the Eye Doctor action in Photoshop. It will end up looking fake. As for teeth, you could remove a little yellow and brighten them up a bit. But, make sure you don’t overuse this feature.

We don’t all look naturally like the Osmond’s. Skin smoothening features are really very popular. All of us want skin that looks perfect, without wrinkles and pores. But you don’t want to look like a plastic Barbie doll, do you?

Make sure that you use the smoothing actions feature judiciously. Moderation is the key word. Keep the look natural by using duplicate layers and reducing opacity and masking. Under eye shadows can also be removed but don’t get rid of them completely. Use Opacity here as well.

13. Proper Use

There are many cases where Photoshop can be very effectively applied. However, sometimes, it makes sense to use a different program, such as InDesign or Dreamweaver. They are more suitable for some editing projects. Use Photoshop only when it suits the application. It is basically an editing program for images and is best suited for the creation of visual content that has already been created.

Many designers make use of Photoshop for creating graphics and also logos. The result may not always be ideal. The tools of Photoshop have been created for editing and improving documents and for enhancing photos. They are better used for that purpose than for creating original works.

Other Dos and Don’ts in Photoshop

• Don’t use too much of a hazy look. It looks fake.
• Don’t blow things out of proportion when editing.
• Don’t add too many contrasts. You may lose details in the shadows. When the numbers in the palette are nearing zero, it means that there is no more information in the shadows.
• Avoid heavy toning of monochromatic images. A light tint is a better choice. Sometimes, sepia or other heavy tones may not be the right choice.
• Don’t blindly use Photoshop actions without knowing the effect. Understand the effect of each action before you use them.
• Cropping is useful at times, but, it could result in throwing out pixels and other information. Always save the original photo before cropping. Don’t crop in too close. You might require a different size at a later point of time. Don’t crop your subject at points, such as the hip, the elbow, knees, or neck.
• Some people like a soft glow around the subject to give a dreamy blurred look. If you like this look, you could use the feature. Apply this in moderation, and only if the mood demands it.
• Use heavy vignettes only if appropriate. Don’t put dark edges on every picture. Use opacity instead.
• Over sharpening could also hurt the picture. Of course, digital images require sharpening as it gives a crisp look to the image. However, if the picture is blurry or out of focus, it can only harm the picture. There is no one size fits all rule for sharpening. You will have to try it out on different pictures. Make use of Noiseware for removing graininess from the picture. However, it could take away the texture and make things, such as hair and clothes look overly smooth. Adjust the opacity and use the mask to bring back details where you want them.

Photoshop Trouble

Photoshop can get people in trouble—especially in cases of malpractice. A mug shot of OJ Simpson was placed on both Time and Newsweek. However, Time suffered a setback. The Time artists had used Photoshop to make Simpson’s skin darker, apparently,to make him look more threatening.

It is also possible that Newsweek had made the shot brighter or enhanced it. Images cannot always be trusted.

Most celebrities and superstars have their photos and pictures manipulated by Photoshop before they are published. They go in for erasing, editing, and smoothing the pictures removing imperfections visible to viewers. Such photos tend to set up unrealistic goals.

It is impossible for the average person to look like a movie star. The most unfortunate aspect of such malpractices in Photoshop is that viewers are not even aware of such manipulation. They compare themselves to the images in magazines striving uselessly to imitate them.

Thus, many think Photoshop should be banned. A better practice would be to stick to ethical practices or even provide a disclosure stating that the photo has been altered digitally.

Conclusion

A vast range of tools are available in Photoshop. When embellishing photos, you need to choose the right ones. Small details can create an impressive design. Use details, such as subtle textures and shading, sparingly. Though Photoshop can be a very useful tool for designing, it can produce some questionable results in the wrong hands.

It can also be used for manipulating reality. Many businesses don’t have the time or the budget for creating new images. They are increasingly using cheap stock photography. No one has the time or the patience to shoot images. In addition, there are several royalty-free images available and irresistible to marketers.

Marketers find their budget being slashed at every corner and take the easy course of Photoshop wizardry and malpractice. It is important to steer clear of such practices and do good, judicious photo editing.

• Deadline Crunchers: Timesaving Photoshop Keyboard Shortcuts
• Adobe Photoshop CS6 New Round of Tips and Tricks
• 10 Photoshop Quick Tips to Improve Your Workflow
• How to Use The Pencil Tool and The Paintbrush Tool to Pimp Your Picture

Today, we have an infographic made exclusively for Onextrapixel on how to you can take amazing photos from your camera phone.

Ultimate Smartphone Photography Guide

Did you know that the zoom on a camera phone is your worst enemy? Merely pixelating photographs as it enlarges them, the zoom feature is digital rather than optical. When people traditionally think of great zooming definition, they imagine an optical zoom (an important point of distinction).

For amateur photographers this infographic packs a punch of valuable information, too. For example, you can learn the rule of thirds and how to compose photographs for optimum symmetry and alignment.

Beyond the basics and professional tips, you can also learn about photo-specific apps like Instagram and its many filters. The Blackberry Z10 and other smartphones are packed with features that let the novice photographer feel like a professional.

Learn how to distinguish between the filters, and know when to use Hudson (for a bright shot) and Brannan (to brighten a drab shot). Want to make an otherwise unremarkable photograph seem remarkable? Try the all-masking filter, Nashville.

If Instagram isn’t your cup of tea, this infographic also considers other apps that could be useful for camera phone users.

About the Designer

DJ Miller is a graduate student at the University of Tampa. He is an avid gadget geek who spends most his time writing on anything tech related. In his spare time he likes to travel, play soccer, and watch movies. You can follow him on Twitter: @MillerHeWrote

• 10 Free Online Photo Editors
• 10 Tools to Recover Your Lost/Missing Smart Device
• 30+ Stunning HDR Photographs of Airports and Planes Around the World
• 60 Websites Using Full Screen Photographic Backgrounds

In this round-up, we have collected more than 50 beautifully imaginative examples of digital sci-fi art for your viewing pleasure.

Beautiful and Imaginative Examples of Sci-Fi Digital Art

Evil 1104

Machinery of Light

Android Legacy – Messenger II

LAX Freeway 101

Invasion

Hazard Suit

Berserker of Destruction

Grand Space Opera Entry

Kingdom

Chromominater-Krynne

Battle Tech Board Game: Era Report

The Great Discovery

Adorable Alien

Containment Breach: Sub-Level 5

Mercenary

Nimhoa

Hunt of the Malesquis

Chemical Squirrel

Alien Vs Predator: Pool

Defend Garth

Crash of The Mothership

Darkness Concept XIII

Technification

Grand Space Opera

Red Steam

Day Watch Twilight

Kasim

Future Marine

Inherited Hell

SWGTCG: Hose Down

Duel

Exploratory

Space Marines

Engage

Op. Chastity: Combat Evac

City

Suit Up

Aburod Terra

Escape

Artificial Dream

Epic Sci-Fi Art

Waterfall City Extreme

Res-wR

Massive Mobilization

Angels of War

A Human Moment

USS Nautilus 2.0

The Captive

Hammerhead Down 40K

Home

I Am

Fly Me To The Moon

Forget Me Not

Spaceships Skycity

Conclusion

Hopefully you have enjoyed browsing these amazing digital works of art. Not only do they push the limits of imagination, but they display great artistic skill also. Perhaps you know of some others that should have made this list in your opinion?

Please share your thoughts and links with us in the comments section below.

• A Showcase of Wonderful 3D Digital Renders
• A Tribute to the Dragon – 35 Awesome Examples of Bruce Lee Artwork
• 40 Stunning and Inspirational Flyer Designs
• Amazing Examples of Skateboard Deck Design

In these examples the artists have produced designs to be proud of.

Beautiful and Inspiring Typographic Quotes

Triumph Over Chaos

Art is the triumph over chaos

Movie Quote

Lo there do I see my father. Lo there do I see my mother, and my sisters, and my brothers. Lo there do I see the line of my people, back to the beginning. Lo they do call to me. They bid me take my place among them. In the halls of Valhalla. Where the brave, may live, forever.

Everything

Everything is beautiful but beautiful isn't everything

Design

Design is what you do when you don't yet know what you are doing

FDR Quote

When you get to the end of your rope, tie a knot and hang on.

Pablo Picasso

Action is the key to all success

Wander

Not all those who wander are lost

Music Quote

Music is what feelings sound like

Quote

A man who works with his hands is a laborer; a man who works with his hands and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist.

The Gift

The artist is nothing without the gift but the gift is nothing without work

Moustache Masterpieces: Walt Disney

It's kind of fun to do the impossible

Thomas Alva Edison Quote

I have not failed. I've just found 10,000 ways that won't work

Head First

When in doubt, dive head first

Moments Lost

All those moments will be lost in time like tears in rain

Wash Your Hands

Just was your hands. It's not that hard.

Thinking Around

Nothing can stop a good idea

Life Passes Most People By

Life passes most people by while they're making grand plans for it

Typography: Believing

The most important thing is never stop believing

Daily Quote One

The perfect time to start something never arrives

Quote

Less talk more action

Quote

Mountaintops inspire leaders, but valleys mature them

Typography

Choose a job you love and you will never have to work another day

The Harder You Work

The harder you work the luckier you get

Logic

Logic will get you from A to Z. Imagination will take you everywhere

Hope

Hope is a good thing. Maybe the best of things and no good thing ever dies

Be Awesome

Don't forget to be awesome

Pain Quote

Pain is the breaking of the shell that encloses your understanding

Typography

Designers make a difference

Orihime Typography Study

If... If I were the rain that binds together the earth and the sky whom in all eternity will never mingle. Would I be able to bind two hearts together?

Do Something Productive

Tomorrow is a new day. Make something of it – do something productive

Typography Words

Words: So innocent and powerless as they are, as standing in a dictionary, how potent for good and evil they become in the hands of one who knows how to combine them

Play

Of course the game is rigged. Don't let that stop you. If you don't play you can't win

Sttemnt

Give what you got to get what you want!

Live On The Edge

If you ain't living on the edge, you're taking up way too much space.

Wise Words

Creativity is allowing yourself to make mistakes. Art is knowing which to keep

Art is...

Art is either plagiarism or revolution

Solution

For every problem there is a solution that is simple, elegant, and wrong

Art of Life

The art of life is to live in the moment

Dali

Each morning when I awake, I experience again a supreme pleasure of being

Typography: Quotes

It's only after you've lost everything that you're free to do anything.

Typography Quotes

It is better to fail in originality than to succeed in imitation

Conclusion

After browsing these beautiful examples of typographic quotes, we would love to hear your thoughts. Have you produced any typographic quotes yourself, or have you come across any that you feel should have made this list?

Please share your links with us in the comments section below.

• Web Typography Collection – Great Tools, Books, Resources and Articles
• 4 jQuery Plugins for Superior Typography
• 10 Great Font Combinations from Google Web Fonts
• 30 Stunning Examples of Calligraffiti

One such way is by using website maker IM Creator – a good option for both beginners who have no knowledge of coding and need a simple, effective website to get their subject matter out for the world to see, and for developers who are looking for new ideas on how to create stunning websites for their clients.

How To Create a Free Website

Easy To Use

The opening screen gives you three options: you can choose from one of the many templates on offer; you can start with a blank page or you can edit one of your existing IM Creator sites.

If you select to choose a template, you will be directed to a library of many beautiful templates categorized by profession such as photographer, architect, musician, restaurant, etc.

Now you can customize the template you have selected by adding elements, adding pages, etc with your own content.

When you are done editing you can preview, save or publish your site. You will, of course have to sign up with IM Creator to be able to publish your site, however, you can check out the features and how easy it is to create your site without signing up first, and the builder is free. You can have an i-m.co address with the free package, but there are options to use your own domain also.

For Developers

For professional developers, not only are the templates a good source of inspiration, the builder has options and flexibility that can help create a professional website in a fraction of the time. Here is the list of features as shown on the IM Creator site:

• Drag & Drop HTML Editor: We offer a real 100% drag & drop HTML editor, so nothing constrains your design. Use our ready-made galleries, slide-shows, contact forms, video players and other flexible editable objects.
• Agile Process With Your Clients: Quickly complete a successful project. Offer your clients one of IM Creator's templates or create a brand new design and tailor it to their needs. Your clients can even independently insert content, allowing you to focus on the design and layout.
• Integrated CMS: Once the website is completed, your clients will be able to update the website freely, using the same simple tools.
• High-End Template Catalog: IM Creator comes with a vivid collection of ready-made templates, suitable for a large variety of clients: artists, actors, models, business professionals, restaurants and more. You can base your entire project on one of the designs, or just get inspired by it.
• Compatibility: Im Creator's online editor produces highly-compatible HTML-based websites. We use cutting-edge technologies such as jQuery to make the final website you created friendly to PCs, Macs, tablets, mobile phones and even older browsers.
• It's Free: IM Creator's tools, designs and support service are all provided free for your use.
• Hosting, Domain & Email: IM Creator will host your client's website, connect it to a domain and custom email-services, all in a few steps. No need to deal with HTML coding or any technical aspect of domain and hosting.

Conclusion

For high-end clients, and those requiring a large website, there is no substitution for starting from scratch for designers, but for small to medium sized websites and for complete beginners, IM Creator could be just what you have been looking for to cut down on time without compromising quality.

• Why Your Web Design Portfolio Isn’t Getting You Work
• 10 Great Font Combinations from Google Web Fonts
• 22 Good Prototype and Wireframe Tools for Mobile and Web Design
• Really Useful Resources and Tools for Responsive Web Design

A flyer needs to impart the required information in a relatively small space, whilst also being eye-catching to the particular age group, gender, profession or other group of people you are trying to attract. Flyer design has much the same aims as website design but with very different end results, however, flyer design can be a great source of inspiration for web designers.

Stunning, Inspirational Flyer Designs

Here is a list of 40 stunning flyer designs for your inspiration.

Quem sou eu? Who Am I?

Prism Helvetia

Lovejoy Music & Event Flyer

Old Skull. Little Rude Girl Flyer

Isometric Exhibition

Bischi Bike Flyer

Drop Inn Hostel

Havana

Encore Club

Maj Marrakech

Morph

B3 Sevilla

Dreamers

Blackout Flyer

Mixlife Mixed Live

Adobe User Group XL

Ginger Group

Yellow

Attitude Flyer

Talk Is Cheap Flyer

Sexy Black Party Flyer

Funked Flyer

Extravaganza Flyer

ADCN Flyer

Workshops

Flyer Design

Freshtival

Hyper Flyer

Flyer

Sketch City Flyer

Node10 Flyer

Flyer Fiesta Espacial

Explenden Flyer

Flyer TCC

Epiphany Flyer

Mikro Flyer

Club Fusion

Club Fusion Dance Attack

Club Envato

Daluxe/Spartacus

Chameleon Candy Factory Flyer

Conclusion

Hopefully you have been inspired and motivated by this showcase of flyer designs. Do you design for print, and have you successfully designed a flyer for a campaign or project?

Are there any flyers that you have come across that you think should have been included in this list? Please share your links and opinions with us in the comments section below.

• 50+ Beautiful and Imaginative Examples of Sci-Fi Digital Art
• A Showcase of Wonderful 3D Digital Renders
• Showcase of 46 Superb Movie Posters of 2012
• 25 Save the Date and Wedding Invitation Designs by Web & Graphic Designers

When you lose a regular mobile phone or your laptop, the loss is usually just hardware. The finder simply removes the SIM card and replaces it with his/her own card. No one is the wiser. Today’s iPhones and iPads present an altogether different picture. There is a lot more at stake. You will be losing your data, including: apps, contacts, photos, music, and anything else that you had stored in the iPhone or the iPad.

Of course, you could always buy another phone, but this will entail recollecting all that personal data. Of greater concern is the fact that the person who has found your iPhone or iPad will have access to all your contacts and social networking sites, such as Facebook and Twitter, and your emails. If you are prone to doing online banking, the thief will also have access to your accounts.

The first thing to do in this case is to make changes to your passwords. Your smartphone is a complete key to your identity.

How the Apps Work

As the iPhone and iPad have become the smartest devices in the world, apps have been created for locating the gadget remotely by using the GPS ability of the smartphone. The service is free on some apps. For some, there is an online subscription. The exact location of the phone can be pinpointed using Google maps.

The owner of the phone can also send a message to the phone. This will be displayed on the screen of the phone. It is possible to send such a message even if you have locked the phone. In some apps, it is also possible to make the phone create some sound that will assist you in locating the phone, if it is hidden somewhere like behind some cushions or in a cupboard.

The user can simply logon and check out the smartphone’s current location. In some cases, even if the person who has stolen your iPhone has changed the SIM card, you can still get the number. Above-average accuracy is provided by these apps.

Dropping or misplacing your iPhone is a headache. But, some apps can help you retrieve your phone:

Find My iPhone
This is a free app that allows the person to make use of an iOS device enabling him to locate the missing device on a map. This can help you protect any data you have stored in the phone. You can even display a message on the phone or make it play at full sound volume. This is possible with the app even if you had set your phone on silent.

You can, additionally, lock the device remotely from wherever you are. However, if you wish to use this app to locate your iPhone, you will need to first upgrade the iPhone to an iOS of 5 or above. It is also essential to register your phone with the iCloud account with your Apple ID. Finally, you must install the Find my iPhone app.

Next, go to Settings, iCloud and then go to Find my iPhone. Tap on Allow in order to confirm the option selected. If your app is turned on and if you are connected with the Internet, you can find the current location of your stolen or lost iPhone.

This app was first introduced by Apple in 2009. Initially, it allowed users to trace their phone through the GPS in the device. This service became free after the iOS 4.2 was introduced. Those having iPhones of an earlier version can make use of the service available on a friend’s phone and create their free MobileMe account. They can then access even their older version phones, provided it is running on iOS4.

GadgetTrak
GadgetTrak is another app that increases the odds of finding your lost or stolen iPhone or iPad. The app is able to generate reports about the location. GadgetTrak sends discreet messages to the phone. It is also able to send snapshots of the person who is currently in possession of the iPhone using the built-in camera. The GadgetTrak app cannot be deleted from the iPhone; hence the person stealing the iPhone will not be able to delete the app.

You need to install the app before you lose the device. Buy GadgetTrak and tap the icon of the application on the phone to launch it. Next, you need to create an account and sign in to the account. Create a pass code so that others will not be able to change the settings in GadgetTrak. They will also not be able to see the tracking status of the app.

There are extensive versions offered for Android devices and iOS. The snap photos are an awesome feature for Apple devices. The owner of the device is thus able to gather evidence helping to locate the phone and to catch the thief.

Device Locator
Device Locator is another app allowing you to keep track of your lost iPhone or iPad. It does this by remotely sounding an alarm on the phone and also taking a snapshot of the person currently in possession of it. Device Locator also sends a message along with the sound. There is a monthly or yearly fee for the use of this app.

You must install Device Locator before the device is lost and launch it by tapping on the icon. Next, create your account in the website and customize your settings in the phone. When trying to locate the phone, you need to login to your account after visiting the website and set the account to an emergency mode. You must lock the app from the web site and then track its location and its recent position on the map.

iHound
The iHound app also helps you locate your iPhone or iPad by means of remotely locking it. This app is also able to remove and erase data remotely. It tracks the location as well as playing siren alerts. You can download iHound for free. But, you must take a three-month subscription.

The iHound app is able to find the lost or stolen iPhone or iPad by utilizing geo location to track the whereabouts of the phone. An Android version helps you lock the mobile device so that your personal information cannot be accessed by the thief. If the device falls into the wrong hands your data is safe. The remote messaging feature offered in this app is also very useful. It allows you to communicate with the person who presently has the phone.

The iHound app alerts the user if the thief connects your device to a computer or any other gadget. When the missing device is connected with a computer, the app will immediately send a message by email to inform you that the phone is being actively located. You can log onto the site of iHound and read details about the phone and where it is being connected to a computer. This is a very useful feature when the person who stole your device switches it off and then uses the computer for formatting the memory card.

If Found Lock Screen
This app replaces the background of your iPhone with a message. Thus, even if you have locked your iPhone, if someone has found it and wants to return it to you, he can find you and contact you in case. If Found+ offers a valuable service when it replaces the wallpaper background of the device with your message. A Good Samaritan can return the phone to you even if you have locked it.

It is important to personalize your phone by using this app. You can adjust the color and fade as well as the wallpaper image and add any other information that can make it easier for you to find the phone in case it gets lost.

Mobile Spy
This app allows the device owner to spy or monitor the iPhone or iPad he has lost. This monitoring can be done in real time. The app is able to provide all reports of incoming and outgoing calls from the phone. The app also provides details of any SMS that is sent and the contact list, emails and website URLs being browsed along with the photos and videos being uploaded by the person on the phone. Mobile Spy also gives the GPS location of the device.

There are several versions for iPhone 4 and 5. You need to follow the three basic steps of registering the account and creating your username and password. You have to install the app directly on to the monitored phone and launch the program. After an hour, you can login to the account and view the logs at any time to check them.

Phone Trace 4
The Phone Trace 4 app also allows real-time tracking of the stolen or misplaced device. The app also offers the new number that is being used by the person holding the phone. The app is able to send emails and commands as well as SMS remotely. It is compatible with iPhone, iPod touch and also with iPad. Phone Trace 4 requires an iOS of 3.2 or later.

The app allows you to locate users of your iPhone and view their movements during the past forty-eight hours. There is also a permission-based system that can be used for allowing or denying other iPhone users and preventing them from following you. Some of the versions allow the tracking of two iPhones at a time and the authorization of two phones to follow your location.

Motion Alarm
This app offers an alarm that can be customized to alert you. This alarm can be set so that, when the set level of movement is reached, the alarm goes off. There is also a GPS tracking system available in the app. You can discover the present location of the phone, which will be sent to your email inbox.

The Motion and Sound Alarm is for Android users and the Motion Alarm is for iOS users. This technology uses deterrence that is triggered by motion. Thus, unwelcome hands cannot touch your phone. The stealth mode or the darkened screen mode is used by the application for the purpose of creating confusion. This helps disguise the activity of the app. The device can also be controlled remotely by sending text messages as well as any other instructions to the phone.

Navizon
Navizon is a free app that enables the tracking of the stolen device in real time including an accurate location of the device by marking the position accurately. It is designed to provide information about the accurate position of a smartphone wherever it is located anywhere in the world, whether indoors or outdoors. Users can locate their phones through buildings and malls and even in airports. All major smartphones are supported by this app including: BlackBerry, iPhone, Android, and Symbian.

The app works by triangulating signals that are broadcasted from the cellular towers around the phone in order to estimate the location of your phone in most of the metropolitan areas around the world. It uses the GPS signals to create an accurate map containing the Wi-Fi access points of the person using the phone. Navizon comes with a trial period including all the premium features.

Find My Friends
This free app for iPhone, iPad and iPod Touch can be used very successfully to track the missing device. You will need to first add your family members’ and friends’ contacts on the phone. By using the numbers which have been previously accepted by the device, you can find the location of the phone on a map.

You need to install the free app on your device, which is running iOS 5. You must then sign in with theApple ID you use with iCloud. Adding a friend or family member is easy. Simply send a request and see their location. If the friend accepts the use of the Find my Friends app on his/her device, you can see the location. Similarly, friends can see your location by means of triangulation data.

You can share the location for a limited time in order to keep track of friends or family members. All you need is an iCloud account and iOS 5 or later. You can also create an iCloud account for free on the device. The notification regarding your or the phone’s location appears under Me> Followers. You need to lock the phone with a pass code.

The app is free for iPhone and Android users. You are offered three free locations. After that you must pay a fee each month.

Conclusion

Today, many of us carry expensive gadgets such as iPhones and iPads. On a flight, we listen to music or we read a Kindle eBook or watch movies on an iPad. If your iPhone or iPad gets lost or stolen, what recourse do you have? Losing your smartphone means losing all your contacts and precious, sensitive data. Accidents happen.

There’s no guarantee that you will not lose your iPhone or iPad. You could take some security measures, so that, in the worst case scenario, you will be able to remove the sensitive data from your device and even, perhaps, locate the set.

The good news is that there are apps to help you to tackle such unpleasant scenarios. These apps can help retrieve the lost or accidentally taken smart device.

Some devices and apps are able to trace the lost iPhone or iPad. You need to install and activate them before you lose or misplace your device.

• Infographic: Take Amazing Photos From Your Phone
• The Telco 4G Paradox: Ruining the Web in High-Speed?
• An Introduction to Copywriting for the Web
• 10 Useful Digital Goods Deal Websites to Save You Money

Designing with a content-out methodology is about focusing on content, and only content (what the user needs) in the beginning of any design process. It is less about the visual design details and more about the end user more than ever today. People use the web differently today than they did years ago, and it's time to start thinking of new ways of designing the web to accommodate this.

Image credit: Bigstockphoto

Designing with the Content-Out Methodology & Mindset

What is Content-Out Web Design?

The “content-out” methodology to creating web layouts is one that uses the content itself — copy, headlines, images, and media included, to be the sole deciding factor in creating a web layout. We usually see design crammed into a pre-designated layout, or for responsive design, pre-designated breaking-points, or three to four 'sub-layouts' within one website.

Mark Boulton made a reference in 2011 as to how too many of us are still thinking “canvas-in” in a newly responsive world. That is, we create the canvas of our web, and throw content inside, whether it best suits the content or not.

Content-out design is more concerned not of which breakpoints to use, or what layout is best, but rather, about letting the content itself create the layout that best suits it.

Mobile First

When designing around content, perhaps the best thing we can do first is weed out the best content, and strategically place it with the most importance. This is often a feature in mobile-first design as well. Since we don't want to display a full-service website to a mobile user who's on a smaller screen and using lesser bandwidth, we need to find the most important and most useful content and display only that. Then, if more content is possible, display it next.

Philip Meissner Design for Mobile

Philip Meissner Design

From a design perspective, mobile-first is essentially equivalent to content-out methodology. We want to focus on the content and readability/usability of that content above all else, including fancy design features. In mobile, design is meant to compliment copy, while when we design for desktop, we often get caught up in the design above all else.

Try designing for mobile and then upwards to really help focus on designing around content. Many of the same techniques apply: focusing on readability, content placement, simple yet effective navigation, and less on design layout and more on effective layout of content. Lay out the mobile version first, and place in content as step one.

Then, place essential elements — such as branding and navigation — appropriately so that it makes the most sense with the content. Aesthetic details can be a part of a content-focused design, but put them lower on the priority list.

Use Graphics to Enhance Content, Not Hinder It

When useless graphics are used to make a design "pretty," it doesn't really serve much of a purpose. Why not create graphics that improve the quality of content? Break apart from the simple web design with static images shoved into content, rather, find visual queues that are truly useful to the content, such as icons, infograhics, or minor design details that highlight headlines, blockquotes, or important sections.

Use relevant imagery, and think of creative ways to highlight the piece of copy it's referencing. One way of thinking about it is to design your content as if it were a magazine article, or otherwise print-inspired.

Interim

Think Typography

One of the biggest problems with content-out methodology is that some designers feel that far too much emphasis is put on the type, leaving the rest of the website lacking. This can surely be true. It's important to find a balance of both design and type, with type leading the way — type doesn't have to completely take over though. In order to have a typography and content-focused design, you do not need to have only typography and content on the page. Content-out methodology is all about letting the content guide you in the design process, nothing more. The details are up to you.

Nonetheless, focusing on typography design is important. It is part of the design after all, and what the user will be most focused on.

Marco Barbosa

Take a look at some inspiring showcases of websites surrounded by interesting typography, as well as websites with simple type yet sophisticated content layout.

• Get Inspired: 40+ Websites with Beautiful Typography
• 45 Creative Examples of Large Typography in Web Design
• Type Inspire
• 19 Bold Examples of Typography in Web Design For Your Inspiration
• Web Typography – 21 Beautiful Examples of Typography in Web Design
• Importance of Great Web Typography & Excellent Examples

Use Proven Analytics

What content on your website is currently most popular? What is most useful? What is most needed? Let statistics show you the way; don't just assume. Now, how can you portray content based on that information in the best way?

If you can see that certain types of content are most useful to your visitors, then play that up. If content with a lot of statistics and numbers is most relevant, discover new methods to play that up, instead of hindering it with other distracting content. If story-line content seems to work best and is most engaging, use surrounding visuals to help tell the story.

Content-out methodology is about displaying your content in the most useful way possible, and that includes figuring out what the best content to display is, and in what type of layout. Perhaps you noticed particular pages or posts to be more popular, so why not put them in the most noticeable spot in your layout? Why not use design to put extra focus on that content specifically?

Cut the Distractions

Remove all distractions, and then only add back what is necessary. This includes popular post widgets, comments, images, header graphics, banners, and more. Has your content been hidden behind all this nonsense? Where do your eyes go when its added all back? Consider new placement of your content, and a new way of displaying it. Decide whether your design elements take away from the content, or help bring your focus onto the content as it should. Use details and sideline items with purpose, meant to enhance your content instead of taking away from it.

Ryan Clark Merrill

Conclusion

For the most part, content-out methodology can be considered an extension of "mobile-first" web design, as the core principles are the same. It is really an expansion though of not only being able to intelligently put more focus on mobile, but to really put more focus on how to design for the web on all platforms, and for all users.

Web designers have always preached the importance that Content is King, and design comes second, but it does often get overlooked. Designing for content, rather than around content helps to bring that realization more to life.

Different designers may have different processes, and perhaps even different definitions for content-out design. What are your thoughts on the process and and how to accomplish a more content-focused web?

• 35 Website Designs with a Great Concept
• 40 Effective Examples of Website Design Using Full Screen Video
• 60+ Outstanding Examples of Hand Drawn Website Design
• 50 Examples of Web Design Incorporating Surreal Art

Creating a 3D Interactive Gallery with CSS and jQuery

Step 1: Laying Out the Images

The HTML

<div class="gallery">
  <div class="item">
    <img align="left" src="http://i.imgur.com/c2NAjXD.jpg"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/FeCziip.png"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/OYlw7Pw.jpg?1"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/MVammek.jpg?1"/>
  </div>
  <div href="#" class="item">
    <img align="left" src="http://i.imgur.com/gfp57KR.png"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/FeCziip.png"/>
  </div>
</div>

The CSS

body {
    margin: 0;
}

.gallery {
    margin: 0 auto;
    width: 700px;
}
.gallery .item{
    cursor: pointer;
    position: relative;
    display: block;
    float: left;
    z-index: 1;
}

.gallery .item img {
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
    box-shadow:  -10px 10px 25px rgba(0,0,0,0.25);
    max-width: 100%;
    width: 190px;
    height: 340px;
}

Firstly, we will simply line up a bunch of images we want in our gallery to be interactive with the markups above. Noted that all those images are placeholders so feel free to change anything. If you are changing images, I recommend you find images that are equivalent in size so that every image will be aligned correctly. If not, then you may need other plugins such as Woomark or Masonry to help align different sized images into a grid.

Step 2: Transforming

The HTML

<div class="gallery">
  <div class="item">
    <img align="left" src="http://i.imgur.com/c2NAjXD.jpg"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/FeCziip.png"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/OYlw7Pw.jpg?1"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/MVammek.jpg?1"/>
  </div>
  <div href="#" class="item">
    <img align="left" src="http://i.imgur.com/gfp57KR.png"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/FeCziip.png"/>
  </div>
</div>

The CSS

body {
    background: url(http://i.imgur.com/LBONKMh.jpg) repeat fixed right bottom;
    margin: 0;
}

.gallery {
    margin: 0 auto;
    width: 700px;
}
.gallery .item{
    cursor: pointer;
    position: relative;
    display: block;
    float: left;
    margin: 0 50px -175px;
    z-index: 1;
    transform-origin:20% 40%;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg);
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
}

.gallery .item img {
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
    box-shadow:  -10px 10px 25px rgba(0,0,0,0.25);
    max-width: 100%;
    width: 190px;
    height: 340px;
}

In this step, we tilted each image with the very useful object manipulation style called transform which allows us to freely transform any HTML object. Although it is useful, tilting an object like this causes the images to stack up and we don’t want that. In order to solve this, I added a workaround margin style to keep them separated enough for us to interact with. We’ve also added a transition style to be used in our interactive part in the next step.

Step 3: Interaction

The HTML

<div class="gallery">
  <div class="item">
    <img align="left" src="http://i.imgur.com/c2NAjXD.jpg"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/FeCziip.png"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/OYlw7Pw.jpg?1"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/MVammek.jpg?1"/>
  </div>
  <div href="#" class="item">
    <img align="left" src="http://i.imgur.com/gfp57KR.png"/>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/FeCziip.png"/>
  </div>
</div>

The CSS

body {
    background: url(http://i.imgur.com/LBONKMh.jpg) repeat fixed right bottom;
    margin: 0;
}

.gallery {
    margin: 0 auto;
    width: 700px;
}

.gallery .item{
    cursor: pointer;
    position: relative;
    display: block;
    float: left;
    margin: 0 50px -175px;
    z-index: 1;
    transform-origin:20% 40%;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg);
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
}

.gallery .item img {
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
    box-shadow:  -10px 10px 25px rgba(0,0,0,0.25);
    max-width: 100%;
    width: 190px;
    height: 340px;
}

.gallery .item:hover {
    z-index: 2;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2);
}

.gallery .item.clicked{
    z-index: 3;
    -webkit-transform:none;
}

The JS

$(document).ready(function() {
    $(".item").click(function (e) {
      e.stopPropagation();
      $(".item").removeClass("clicked");
      $(this).toggleClass("clicked");
      $("body").addClass("showing-item");
    });
    $('html').click(function() {
       $(".item").removeClass("clicked");
       $("body").removeClass("showing-item");
    });
});

Make sure you have jQuery included in your HTML file. Any version newer than 1.9.1 is preferable. At this stage, we will make it a little interactive by adding a hover effect and make it clickable. For the hover effect, we simply add a hover style for each image scaling it up a little to let the user know it is clickable. For the click function, we will need jQuery to help us define a class for the clicked state. As you can see in the JS part, the new “clicked” class will be added every time you click the images. The “clicked” class will remove all the transformation we did in the previous step temporarily for the users to see each image as it was intended. The second part is to clear the clicked state whenever the user selects anywhere outside the image.

Step 4: Adding Captions

The HTML

<div class="gallery">
  <div class="item">
    <img align="left" src="http://i.imgur.com/c2NAjXD.jpg"/>
    <span class="caption">
      <h1>
        BucketListly.com
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/FeCziip.png"/>
    <span class="caption">
      <h1>
        BucketListly.com
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/OYlw7Pw.jpg?1"/>
    <span class="caption">
      <h1>
        BucketListly.com
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/MVammek.jpg?1"/>
    <span class="caption">
      <h1>
        BucketListly.com
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div href="#" class="item">
    <img align="left" src="http://i.imgur.com/gfp57KR.png"/>
    <span class="caption">
      <h1>
        BucketListly.com
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </span>
  </div>
  <div class="item">
    <img align="left" src="http://i.imgur.com/FeCziip.png"/>
    <div class="caption">
      <h1>
        BucketListly.com
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      </p>
    </div>
  </div>
</div>

The CSS

body {
    background: url(http://i.imgur.com/LBONKMh.jpg) repeat fixed right bottom;
    margin: 0;
}
body.showing-item .item:not(.clicked){
     -webkit-filter: blur(2px) grayscale(0.5) opacity(0.8);
}
.gallery {
    margin: 0 auto;
    width: 700px;
}
.gallery .item{
    cursor: pointer;
    position: relative;
    display: block;
    float: left;
    margin: 0 50px -175px;
    z-index: 1;
    transform-origin:20% 40%;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg);
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
}
.gallery .item:hover {
    z-index: 2;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2);
}
.gallery .item.clicked{
    z-index: 3;
    -webkit-transform:none;
}
.gallery .item .caption{
    display: none;
    border-radius: 3px 3px;
    font-family: helvetica, arial;
    background: white;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.45);
    width: 300px;
}
.gallery .item .caption:after{
background-color: #fff;
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    content: "\00a0";
    display: block;
    height: 15px;
    left: -5px;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    -webkit-transform: rotate( 45deg );
    width:  15px;
}
.gallery .item.left .caption:after{
    right: -8px;
    left: auto;
    box-shadow: 2px -1px 2px 0 rgba( 178, 178, 178, .4 );
}
.gallery .item .caption h1{
    color: black;
    font-weight: 100;
    text-align: center;
    letter-spacing: -1px;
    margin: 0 0 5px;
    margin-bottom: 10px;
border-bottom: 1px solid #EFEFEF;
padding-bottom: 10px;
}
.gallery .item .caption p{
     color: #444;  
    font-weight: 100;}
.gallery .item.clicked .caption{
    position: absolute;
    top: 25px;
    display: inline; 
    -webkit-transition-property: display;
    -webkit-transition-duration: 0.7s;
}
.gallery .item.clicked.right .caption {
    left: 115%;
    margin-left: 15px;

}
.gallery .item.clicked.left .caption {
    right: 115%;
     margin-right: 15px;
}
.gallery .item.clicked img {
    box-shadow:  0 0 25px rgba(0,0,0,0.25);
    -webkit-transform: scale(1.25);
}
.gallery .item img {
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
    box-shadow:  -10px 10px 25px rgba(0,0,0,0.25);
    max-width: 100%;
    width: 190px;
    height: 340px;
}

The JS

$(document).ready(function () {
    $(".item").click(function (e) {
        e.stopPropagation();
        $(".item").removeClass("clicked");
        $(this).toggleClass("clicked");
        $("body").addClass("showing-item");

        var offset = $(this).offset();
        var pos = offset.left + $(this).width()
        var center = $(".gallery").width() / 2;
        if (pos > center) {
            var align = "left";
        } else {
            var align = "right";
        }
        $(this).removeClass(".left, .right").addClass(align);

        return false;
    });

    $('html').click(function () {
        $(".item").removeClass("clicked");
        $("body").removeClass("showing-item");
    });
});

This is the last step and it is probably the most complex step out of all. In this step I’ve decided to add a caption to each image and in order to do that I’ve added extra HTML markup and CSS, to style the caption box to look like a speech bubble. The styles here are quite straightforward except the new style I used to focus the clicked image and blur all the others. The style is called filter and it allows us to manipulate photos, from adding a blur effect to sepia. In this step, I simply blurred any objects that aren’t in a clicked state.

For the JS part, in order to make the caption work, I have to find a way to detect whether the caption will be shown on the left or on the right. I’ve decided to write a little function to check the position of the image and if the x axis exceeds the center of the page then the caption will show on the left, if not the caption will show on the right as usual. With everything in place, viewers will see beautifully transitioned captions appear every time they click on the images.

Conclusion

Now you get a beautiful 3D interactive gallery for your website. Feel free to customize the code as you see fit and show us in the comments below.

If you need help or have a suggestion, feel free to let me know anytime.

• Create A Google Plus App Tile Animation with CSS3 and jQuery
• 4 jQuery Plugins for Superior Typography
• How to Create a Custom File Input with jQuery, CSS3 and PHP
• How to Slice Images into Tiles with jQuery and CSS3 Transitions