Big is the new trend around the web because nearly everyone wants it. It is imperative that one stays up on trends as a web designer. Never do you want to put yourself in jeopardy of offering someone (or yourself) a web design that is boring and outdated. It seems that almost every year or even every six months, there are new trends springing up across the web. For many the route now is go big or go home.

Today, we are going to showcase some of the best full image and video backgrounds that are offered online today. Prepare to be dazzled.

Make it Stretch

A Book of Beards

This site is dedicated to selling a coffee table book filled with pictures of beards. The site works not just because of the great beards, but because the images are the same ones in the book. Without a doubt, you’re going to want to know what the experience of the book is before purchasing it.

Volkswagen Beetle

If there’s a car on the market you’re thinking about purchasing, what do you do? You’re going to want to test drive it, see how it rides and how it looks. The wonderful thing this site does is it recreates the experience you get when driving a Beetle, from the video footage to the interface.

Beyonce

Beyonce is well known for her music, her performances and all around her brand. Every square inch of the screen in filled with her on her website by using images and video. You become enthralled in her every being by just visiting.

Sean O’Brien

You may be interested in Sean O’Brien for whatever reason, but when you go to his website, you must take notice of the reason he is who he is. Much like the Beyonce website, this site is tailored to the fun and exciting brand that is Sean O’Brien. You always have your eyes on him.

Jordan Melo M6

Carmelo Anthony stars in this website by giving viewers a walkthrough of how he created his new shoes. The perspective of the video used allows you to actually feel as if you’re talking and walking with Carmelo on this journey. It’s much more effective full screen than it is as a small view of the video.

Hiut Denim Co.

The images used in this full page site aren’t just here for decoration. They actually add to the story of the website and visually contribute to the ideas being tossed around.

Y. Co

High quality products need to have high quality offerings when it comes to web design and other types of collateral. This site dedicated to a luxury brand of yachts uses full screen video to take you inside and around the yacht.

Chicago L-Shirts

These are some nice, well designed shirts. The developer could’ve slapped them on any type of website with an e-commerce theme and called it a day. They decided to go full screen and use elements that consistently represent the brand.

DesignKitchen

There are really many ways you can approach a full screen website. This approach was to use a lot of detailed design work and display it an appealing manner. With full screen designs you have to be careful because people are seeing everything. This design figured that out and really focuses on great design work.

Pixel Pimps

Sometimes the use of many embellishments and decoration really work to make a website exciting. It isn’t always all about minimalism. This site offers great design as well as wonderful decoration and development. This person is really displaying all their skills in once place.

Modoluce

Again, full screen sites will always benefit the company that wants to show off it’s brand and what they stand for. It’s one thing to have pictures of products, but it’s really another experience to wrap your entire site in them. Modoluce figured that out and really created a website that’s all about them and their product.

Planet Propaganda

This is another example of a very detailed design centric website. Everything is well connected and makes sense as far as the user interface is concerned. The full image allows for excitement and a change of scenery along with every page to page navigation.

Hearts’ Cry Inc.

This site uses a simple execution of full page design by offering only one image as used primarily for the background. The design and development puts a focus on all the copy by essentially taking that off the full page design.

Onside Sports Agency

This is more of a minimalist approach in full page design. While we use the full image size, there isn’t a ton of busy things going on with the design. The full image actually helps to make everything interesting and fun.

Healing Histories

With the great advances in technology today, we can pretty much do anything when it comes to websites. This full page site doesn’t just tell you a story, it asks you to get interactive in picking and choosing your story.

Oh Land Music

This website for a music label allows viewers to know exactly what kind of music they create just by looking. The look is fun, fantastical with a little bit of rock. The fullness of the site makes it easy to grasp quickly.

Parachute Journalists

Designers have so much control in guiding the eyes of the viewers. This website utilizes that, first by only using one page with everything visible that’s completely relevant and helpful to their purpose. All useful, no fluff here.

Sandlewood

With furniture and renovation sites, many developers like to give lots of information with furniture placed sporadically around. Rarely is there a focus on the actual work that’s done. Here, the developer used the full page website to essentially make himself stand out and draw attention to the furniture.

Form Rausch

This website utilizes the full image development to show portfolio work in close to high res. Nobody likes going to a website to have to check thumbnails only to get to images that are as small. This helps show the detail in their work.

Twenty8Twelve

Fashion is one of those things where you have to see it in it’s entirety to really get it. If you see a good shirt on a model, you want to know what it looks like paired with the pants and shoes, etc. This website understood that and used the full page method to help display their fashions.

Ben Thomson Photography

Again, this photographer used the full image idea as a way to allow you to see the detail in their quality and composition. It also allows you to get a sense of who he is.

BlackNegative

Full image backgrounds allow for you to get really creative. This time, the creativity is highlighted in the development of this page. This is easily one of the most epic pages online right now.

Damien Hirst

Rather than just give us a big photograph or a huge video of something we can catch on YouTube, this agency used the background to tell us what they’re doing in their studio. The live feed keeps you up to date on the workings of Damien Hirst.

Alex Arts

Bigger canvased websites allow you to break out of the mold of the grid or fixed width website. That allows you to do a bit more and be a bit more creative. This page is a different approach to a portfolio, but fun to interact with and enjoy.

X-Doria

Cool interaction in a website can get you increased traffic as people are more likely to share. This site utilizes the trend and adds a bit of spice by making this site fun and easy to navigate.

Vivacitas

This developer used the trend to create his own little world. It sucks you in and gets you caught up in the wonderful design as well the movement of the page.

Adidas Design Studio

Navigating through this site requires no mouse and is exceptional. The full pages here allowed for well thought out navigation with uncluttered and easy to read information. This probably took lots of time to make, though they made it look really easy.

Ideal

One could play around with this site all day. The navigation is really outside the box and the atmosphere the design helps create is spot on with the work presented. There’s actually some pretty hilarious and great content on this site.

Elastic Minds Studios

Another great portfolio site utilizing video and images for their backgrounds. The interaction and navigation is also out of the box and well planned.

Peripheral Audio

Upon first look, many know exactly what type of group they are viewing. This site is simple yet effective, as it links viewers to all videos dealing with this group.

Conclusion

Whether you are using Flash or jQuery, making single page sites or full sites, full background websites are a great trend to hop on. It makes a lot of sense and can work for almost any brand or business. They’re great to look at (when executed well) and often exciting in a world full of mundane, cookie cutter websites. Are there any full image or video background sites you’d like to share?

(rb)

In the following Adobe Illustrator tutorial you will learn how to create a set of sleek web ribbons. We’ll start with two simple shapes and some basic masking techniques. Next, using a simple rectangle and some simple vector shape building techniques we’ll create the overall ribbon shape. Once we have the starting shapes we’ll continue with the smaller parts. Using some Pathfinder options, several Warp and Gaussian Blur effects plus some basic blending techniques we’ll add the final touches.

As always, this is the final image that we’ll be creating:

Step 1

Open Illustrator and hit Control + N to create a new document. Enter 600 in the width and height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a gridline every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box.

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Ellipse Tool(L) and create a 250 by 40px shape. Fill it with the linear gradient shown below, lower its opacity to 50% and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK. Bear in mind that the yellow zero from the gradient image stands for opacity percentage. Switch to the Rectangle Tool(M), create a 350 by 50px shape, fill it with black and place it as shown in the second image. Reselect both shapes, open the fly-out menu of the Transparency panel, click on Make Opacity Mask then uncheck the Clip box. In the end your masked ellipse should look like in the third image.

Step 3

Pick the Rectangle Tool(M), create a 180 by 75px shape, fill it with the linear gradient shown below and place it as shown in the following image. The white numbers from the gradient image stand for location percentage.

Step 4

Reselect the rectangle created in the previous step and go to Object > Path > Add Anchor Points. Keep focusing on this shape and grab the Direct Selection Tool(A). Select the middle, bottom anchor point and drag it 15px up. In the end your shape should look like in the second image. Move to the Layers panel, double click on this shape and name it "Ribbon".

Step 5

Focus on the top, right corner of the shape edited in the previous step. Pick the Rectangle Tool(M), create a 10px square, fill it with the linear gradient shown below and place it as shown in the following image. Focus on this new shape, grab the Delete Anchor Point Tool(-) and click on the top, right anchor point. This will remove the anchor point turning your square into a triangle.

Step 6

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect the triangle shape created in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the right using the right arrow from your keyboard.

Reselect both copies, open the Pathfinder panel and click on the Minus Front button. Fill the resulting shape with black and lower its opacity to 15%. Focus on this new shape, grab the Delete Anchor Point Tool(-) and get rid of the top, right anchor point. In the end your shape should look like in the fourth image.

Step 7

Reselect the triangle shape created in the fifth step and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its opacity to 15%. Focus on this new shape, grab the Delete Anchor Point Tool(-) and get rid of the top, right anchor point. In the end your shape should look like in the fourth image.

Step 8

Reselect the triangle shape along with the two shapes created in the previous two steps and group them (Control + G). Make sure that this new group is selected and go to Effect > Warp > Arc Upper. Enter the data shown below and click OK.

Step 9

Enable the Snap to Grid (View > Snap to Grid). Reselect the group created in the previous step and go to Object > Transform > Reflect. Check the Vertical button and click on the Copy button. This will create a horizontally flipped copy of your group. Select it, drag it to the left and place it as shown in the third image. The Snap to Grid will ease your work.

Step 10

Reselect "Ribbon" and focus on the Appearance panel. Select the fill and go to Effect > Warp > Shell Lower. Enter the data shown below and click OK. Make a copy of "Ribbon" (Control + C > Control + F), select it and go to Object > Expand Appearance. Move to the Layers panel, double click on this new shape and name it "RibbonExpanded".

Step 11

Disable the Snap to Grid (View > Snap to Grid). Reselect "RibbonExpanded" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, right shape and fill the other one with white. Also, lower its opacity to 40% and change the blending mode to Soft Light.

Step 12

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, right shape and fill the other one with black. Also, lower its opacity to 20% and change the blending mode to Soft Light.

Step 13

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, left shape and fill the other one with white. Also, lower its opacity to 40% and change the blending mode to Soft Light.

Step 14

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, left shape and fill the one shape with black. Also, lower its opacity to 20% and change the blending mode to Soft Light.

Step 15

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image.

Step 16

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image and change its blending mode to Soft Light.

Step 17

Enable the Snap to Grid (View > Snap to Grid). Pick the Ellipse Tool(L), create a 240 by 45px shape, fill it with a random color and place it as shown in the first image. Select this new shape along with "RibbonExpanded" and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its opacity to 40% and change the blending mode to Overlay.

Step 18

Reselect "Ribbon", focus on the Appearance panel and add a second fill using the Add New Fill button. Select it, drag it in the bottom of the Appearance panel, make it black, lower its opacity to 7% and go to Effect > Warp > Shell Lower. Enter the data shown below, click OK and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.

Step 19

Reselect "Ribbon", focus on the Appearance panel and add a third fill. Select it, drag it in the bottom of the Appearance panel, make it black, lower its opacity to 10% and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.

Step 20

For the following step you will need a grid every 1px. So, go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Pick the Rectangle Tool(M) and create a 280 by 1px shape. Place it as shown in the following image, fill it with the linear gradient shown in the first image then send it to back (Shift + Control + [ ).

Step 21

Let’s add a simple background for our ribbon. Pick the Rectangle Tool(M), create a shape the size of your artboard, fill it with R=190 G=190 B=190 and send it to back (Shift + Control + [ ).

Step 22

Disable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Reselect the thin rectangle created in the twentieth step and make a copy in front (Control + C > Control + F). Select it and move it 1px down using the down arrow. Make sure that your copy is still selected, focus on the Appearance panel and replace the existing linear gradient with the one shown in the following image.

Step 23

Pick the Type Tool(T) and add your text. Set its color at R=42 G=92 B=5 then go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 24

Reselect the rectangle used for the background, focus on the Appearance panel, add a second fill and use the radial gradient shown below. Keep focusing on the Appearance panel and add a third fill for this shape. You’ll need a built-in pattern for this new fill. Go to the Swatches panel, open the fly-out menu and go to Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures.

A new window with a set of built-in patterns should open. Make sure that your background rectangle is still selected, focus on the Appearance panel and select that third fill. Lower its opacity to 20%, change the blending mode to Multiply and add the "USGS 19 Land Inundation" pattern.

Step 25

Finally, here’s a quick technique that you can use to recolor your ribbon. Select all the shapes that make up your ribbon and go to Edit > Edit Colors > Recolor Artwork. Click on the Edit button, make sure that the "Recolor Art" and the "Link Color Harmony" buttons are checked then play with the color handles.

And We’re Done!

Once again, here’s how your final result should look.

Now that we have made it to the end, we would like to know your thoughts on this new tutorial. Leave us your two cents in the comments.

(rb)