Category Archives: General

A Web Designer’s Introduction to Adobe Animate CC

What’s better than being static? Being in motion, my good friends. Motion is on the rise for the web, from simple interface interactions, to more complex scenarios and prototyping. In this article we’ll introduce ourselves to Adobe Animate, what it is, what it isn’t, and how it can help with your work as a web designer.

What is Adobe Animate?

Adobe Animate is described as being an evolution of Flash Professional; a product whose proprietary nature was doomed to the history books the moment Steve Jobs put pen to paper. 

“To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC” – Rich Lee, in 2015

So times change, and Adobe have changed their approach to the web as a result. 

Adobe Animate feature timeline
Adobe Animate’s feature timeline

Whether you’re new to motion, or consider yourself a veteran searching for an alternative to prototyping, Adobe Animate CC might be for you. As with all tools its purpose is specific to the person using it. This isn’t a tool everyone must use, but it’s in your interests to be aware of its presence. 

With Adobe Animate creations such as cartoons, advertisements, games, and other interactive content can be published to familiar platforms like HTML5 Canvas, Flash Player & Air, WebGL, and even Snap SVG. 

The Features

To help comprehend Adobe Animate’s capabilities I thought it would be best to list some key features I personally find interesting. The best thing about Adobe Animate is certainly the embracing of web standards. A close second is the fantastic range of exporting/publishing options, then then vector brushes, HiDPI support, 3rd party JavaScript integration and much more.

Timeline and Frames

All animations occur in sequence on what’s commonly known as a timeline. Flash developers will understand these concepts very well. This UI allows you, the developer, to manage your animations in a timeline by gaining a visual perspective of how the entire sequence fits together. Here’s a brief introduction by Adobe discussing timeline basics

Timelines can include fine-grained animations in a frame-based context. This means artists can create animations in isolation and integrate these isolated movements into a larger master timeline.

Exporting and Publishing

With open web standards finally being embraced by Animate CC, developers must still be aware of the technical limitations of the format they’re exporting to. Developers do have the option to export to the Flash player, SWF files, if needed. It’s also possible to export at multiple resolutions making it priceless for bitmap work. You can even generate a sprite sheet based on keyframes and animate through them using CSS! 

There’s no doubt that the export and publish options make it far more efficient to modernize your projects. Ship different versions of the same project without recreating your original source files from scratch by enabling the “scale content” option. Generate an HTML document for ActionsScript projects using the correct object and embed tags via the publish settings dialog box. 

The icing on the cake is you also have the ability to export to SVG.

Vector Brushes

Animate CC introduces new vector drawing tools, including vector brushes that don’t need to be converted to shapes in order to be edited. Everything you’re familiar with in Illustrator for brushes and drawing is also available to you in Animate CC. It allows you to custom-define a brush by setting parameters of the brush such as shape and even angle. Super slick if you care about quality and crisp artwork.

Bone Tool

Flash developers will be right at home with the bone tool to animate objects using “bones” chained linearly or branched in parent-child relationships; think of movements like an arm bending, a snake slithering or a leg kicking. These types of motion could take a tedious amount of time to prototype in code, but with Animate CC it can happen very quickly, making bad ideas cost less and nurturing good ideas faster. 

Armature-based motion sequences can also be included into symbols, or what are known as “instances”, which can be reused throughout your project. 

The bone tool comes with other tricks up its sleeve too. Gain realistic physical movement by integrating dynamic physics into the bones, like springness, making the motion far more realistic to the physical world.

Support for 3rd Party JavaScript

So you made a great piece of art to animate, but want to use a 3rd party helper like GreenSock, for example? Good news! You can do just that. Now from the Animate UI developers can have the flexibility they desire without feeling they reside in a walled garden with no help from the outside world. Use the latest JavaScript libraries at your disposal and get the flexibility you need for the frames in your animation.

Camera Positions and Stage Controls

Animators have complete control over how the stage (i.e canvas) is positioned. Options are  available for rotating the stage in any way, from any point you choose, such as centrally to the stage or even from the corner. Your animation can contain more dynamics too, like adding camera effects such as pan, zoom, or rotate giving your project even more realism; watch out James Cameron.

Animates virtual camera
Animate’s virtual camera

Conclusion

Tools are cool, but they don’t rule the world. Choose wisely, but choose what works for you. Tools are there to be of help not to dictate your workflow. If you’re using Animate in a project leave a comment and a link below of examples if you have some–tell us about your experience with this application. Happy animating!

Further Reading and Helpful Links


Source: Webdesign Tuts+

Web Development Reading List #170: Hamburger Alternatives, Libsodium In PHP And Choosing Profit




 


 

As web developers, we need to rely on our knowledge, and choosing solutions we’re already familiar with is often the most convenient approach to solving a problem. However, not only technology is evolving but also our knowledge of how to use it.

For a while, we thought it’s best to use base64 encoding for inlining assets into CSS files, for example, and that loading JavaScript asynchronously will make websites faster. With more evidence and research, however, we came to realize that we were wrong. We should take this as an occasion to remind ourselves to question our habits and from now on ask ourselves if the solution we have in mind for a given problem really is still the best one we could choose.

The post Web Development Reading List #170: Hamburger Alternatives, Libsodium In PHP And Choosing Profit appeared first on Smashing Magazine.


Source: Smashing Magazine

Copy If You Can: Improving Your UI Design Skills With Copywork




 


 

There’s a technique for improving one’s user interface design skills that is the most efficient way I know of expanding one’s visual vocabulary but that I’ve rarely heard mentioned by digital designers.


Copy If You Can: Improving Your UI Design Skills With Copywork

I’m talking about copywork. Copywork is a technique that writers and painters have been using for centuries. It is the process of recreating an existing work as closely as possible in order to improve one’s skill. In our case, this means recreating a user interface (UI) design pixel for pixel.

The post Copy If You Can: Improving Your UI Design Skills With Copywork appeared first on Smashing Magazine.


Source: Smashing Magazine

How to Build an Off-Canvas Navigation With CSS Grid

The off-canvas pattern is a classic approach to responsive navigation. When the viewport is small enough to warrant it, bulky navigation is hidden “off-canvas” and only brought into view when toggled. 

Today we’re going to build an off-canvas navigation, using CSS to do the toggling (no JavaScript required) and our good friend Grid to form the page structure. Here’s the full page demo of what we’re working towards.

Basic Page Structure

Let’s begin by building a basic page; we’re aiming for something like this:

Semantic page structure
Semantic page structure

This is a fairly typical semantic page structure; you’ll see that everything remains in a single column for small viewports, then the aside moves across on larger screens. The <nav> element is highlighted in blue for clarity.

Here’s our markup:

Now let’s add some visual styles and some Grid rules.

Gettin’ Griddy With it

Begin by wrapping all our structural elements in a containing element of some kind–this will be our Grid container. I’m using <div class="container"></div>

Now add some basic grid styles:

Here we’re declaring that the container should be display: grid;, that it should have a single column of one fractional unit (not strictly necessary at this point, but we’re added it to be thorough), and that the gap between all grid items should be 10px.

Next add a couple of visual styles to make things a bit clearer:

Make it Responsive

Let’s add a media query, so that when the viewport hits a certain size (let’s go for 600px) the layout changes.

So now, on larger screens, the grid declaration changes to grid-template-columns: repeat(4, 1fr);. This gives us four columns of equal width, so we then have to declare how wide we want each of our structural elements. The header, nav, and footer will all span 4 (span across four columns) whilst the section will span across just three, leaving a gap of one column for the aside to fill automatically.

Finally, some styles to alter the way the nav looks:

Here’s what we have so far:

Venturing Off-Canvas

This is a perfect example of how CSS positioning can still work on structural elements, even within a declared Grid. We’re going to grab our nav, remove it from the document flow, and position it off-canvas. The other grid items will fall into place just fine.

Begin with another media query. We already have our min-width query, but this time we only want to style elements up to a max-width. Up until our viewport reaches that magic 600px we want the nav to be positioned off-canvas:

We’ve given the nav a fixed width, positioning it left by enough to hide it completely. We used position fixed too, though you can also use absolute depending on whether you want the nav to scroll with the window or not.

You’ll also notice the transition rule, which will take effect once we build some toggle controls.

Toggling

Having made our nav disappear, we now need some controls to bring it back when needed. Let’s add a link to trigger it, and a link to close it again.

Add this to the header:

and this to the nav:

We don’t need the open link to be visible on larger screens, so we’ll hide the .toggle elements within our min-width media query:

:target

What’s important in the above links is the presence of a “fragment identifier” (the #nav in the href). These identifiers are used by browsers to navigate directly to specific elements on a page. In this case, we’re targeting whichever element matches the id “nav”, and once it’s been targeted we can style it using the :target pseudo class. No JavaScript necessary!

Add the following to our max-width media query:

That’s it! That’s our toggle.

Here’s what we have now:

You’ll need to take a look at the full page demo to fully appreciate what it’s doing.

Conclusion

And we’re done! I’ve kept styling down to a minimum so as not to get in the way, but feel free to go nuts and make this look exactly how you want. 

You may also prefer a JavaScript toggle, instead of the :target, in which case you have all the pieces in place to make that work too.

I hope you enjoyed this little Grid exercise, stay tuned for more to come!

Useful Resources


Source: Webdesign Tuts+

How to Photograph Textures for Designers

As a designer, you might be looking to photograph textures in a different way than a photographer would. While a photographer might be focused on things like composition and visual interest, you may be looking for versatility and symmetry. It might be a mix of these things, but whatever your need for photographing textures, this article will give you all the information you need to go out and start making your own.

All About Textures

Why Use Textures?

Textures come in useful for a whole range of work in both design and photography. You might want to include textures in your own designs, for use as a background, or as part of a mock-up, for example.

peeling paint
Textures are useful for so many things and make really interesting photographs too. 

Finding Textures

You might decide not to start photographing textures until you actually need one, but if you can, then it’s often useful to snap them out and about as you find them and build yourself a little stock library.

screws and shavings
Shavings, bits of metal work and rust can usually be found at any workshop or junkyard

As you’d expect, texture is everywhere, and once you’ve photographed the everyday stuff, like brick walls, tree bark and the like, then you may want to start thinking about capturing some unusual textures or ones that aren’t around all the time, like ice crystals.

Some unusual places often turn up great, original-looking textures. I once visited a train station which has a reclamation yard behind it, full of rusting trains and other paraphernalia. It was a texture photographer’s paradise, so hunting for places like that in your local area can pay dividends.

How to Photograph Textures

ground
Sometimes finding a great texture can be as simple as looking down, like this shot of the ground

A DSLR and Macro Lens

One of the most important things you’ll need to do to photograph a texture is get up close. With DSLRs, the minimum focus distance to your subject is between that and the focal plane on the camera body, so a lens can’t focus at distances shorter than the minimum focus distance. Don’t worry, you won’t need to do epic amounts of maths to work it out, as, usefully, it’s written on the lens.

Macro lenses are designed to let you focus up close. They’re also what’s known as flat field lenses, meaning that when you’re close to an object to photograph it, you shouldn’t see your image curve as you would if you used a regular lens. This should mean sharper focus right across your photograph.

Macro lenses tend to be prime lenses, at a fixed focal length, rather than a zoom lens. This means they’re generally sharper, faster, and tend to break less often! For a budget macro lens, I highly recommend the Tamron 90mm f/2.8. A 50mm is even cheaper and will do a nice job, but you won’t get as close to your subject as you would with a macro lens.

Macro Setting on Your Camera

If you’re not ready to purchase a DSLR and/or macro lens just yet, then you’ll probably want to investigate macro mode on your camera. This is usually denoted by a small flower icon and will allow you to focus closer than you usually would. Be wary, though—it usually also tells your camera to shoot at a lower aperture, and that could result in softer images. I’ll go into this further, shortly.

Get Your Lighting Right

As with just about all aspects of photography, lighting is crucial in getting a good image. There are some key points to consider with lighting.

water
Water can be tricky due to reflections and movement

Is There Enough of It?

If your subject isn’t adequately lit, then your camera may bump up the ISO, creating noise. You might need to think about using an off-camera light, particularly when photographing indoors.

Which Direction Is It Coming From?

If you’re shooting something reflective, you’d need to avoid direct sunlight shining on it and also unwanted reflections.

If you’re indoors and there’s a lack of light, then set up any external lights to the side, at an angle, to replicate natural sunlight as closely as possible. A single light source is enough for much of the time, but if you find yourself creating harsh shadows, then you may need to place an additional light to balance it out.

How Good Is the Light?

This may all depend on what you want, but if you’re shooting during golden hour, for example, it may cause your texture to differ in colour. Golden hour is generally a photographer’s favourite time to make photographs, as the quality of light is lovely.

Harsh light may bring out the texture of rust or bricks nicely, but wouldn’t work as well for water.

Avoid using your flash, as harsh, direct light like this is rarely flattering and will create a dull, flat look to your texture. Although certain shadowing should be avoided, you still need an element of shadow/shade in your image to avoid it looking flat.

Getting Sharp Shots

Macro mode may not work well for you if your camera opts to shoot wide open, i.e. at a lower aperture. If you’re not comfortable shooting with the camera on Manual, then getting used to Aperture Priority mode (usually denoted with an A) is the next best bet.

wall
This shot is slightly soft around the edges. Shooting at narrow apertures will put more of your image in focus, but it will restrict your light, too.

Try to shoot at least at f/8 or above to keep everything in focus and avoid a shallow depth of field. This does have a knock-on effect with other settings, though. For example, if you’re in fairly low light and you use a low aperture, your camera may adjust the shutter speed, slowing it down and thereby blurring your shot, or hike up the ISO and add noise to your image. You can combat this by using a tripod and experimenting with a longer shutter speed. 

When using a tripod, touching the camera to trigger the shutter can itself cause shake. If you don’t have a remote shutter release, then try using your camera’s timer to delay the picture being taken.

Try Different Angles

Mostly, designers will require the shooting of a subject to be straight on, to be the most useful. Don’t limit yourself, though, and don’t be afraid to experiment with different angles. You can always fall back to your straight-on shot if that works best, but at least you’ll have the choice. You’ll learn over time which angles work best with which textures.

wood
Wood is great because it can be all different colours, textures, and tones. Planks are useful as you can flip them around and have your leading lines going the other way.

As a designer, you’ll know how valuable it is to have packages of similar items to use as textures or even brushes. If you see a great texture, shooting it from different angles or even at different times of day could make a nice package item later on.

Take Your Shots at the Highest Quality

If your camera can shoot in RAW, then it’s always advisable to do that. RAW retains a lot more of the image data than a JPEG, but you may need to install additional software in order to process your RAW files.

Compact cameras sometimes have a RAW + JPEG setting, which means you can shoot in both formats and then decide which to process later.

Post-Processing

When it comes to post-processing, as much or as little as you’re comfortable with is fine. You’re not trying to turn the texture into something it’s not. If you’ve taken your shots in RAW, they can look a little flat and boring, so you might want to think about boosting things like saturation, contrast, and sharpness.

Hopefully, you’ll have got enough right in-camera to mean your shot is good to go and you can simply tidy up any imperfections with spot removal or clone tools.

If you’re fairly confident with post-processing photographs, then you might start to mix it up a little by swapping out colours, enhancing reflections, or even combining multiple textures. 

How much or how little you do all depends on what you want to achieve as your final result.

Leave It to Someone Else

If you really don’t feel like photographing your own textures, or there are things that are tricky to photograph for you, then not to worry. There are plenty of great images available from stock sites like our sister site GraphicRiver.

Jeans Texture Backgrounds by Ufydesign

Jeans
Jeans Texture Backgrounds by Ufydesign and Envato Market

Jeans can look faded really quickly. This selection of denim textures gives you a variety of options, all in high resolution. 

6 Packs Artificial Grass Texture by Keattikorn

Grass
6 Packs Artificial Grass Texture by Keattikorn and Envato Market

If you want neat, patterned grass then you ideally need to find somewhere that takes good care of their lawn, like a golf course, and then shoot from above. This pack offers a selection of grass patterns—much easier!

6 High Resolution Metal Textures by Riddy


6 High Resolution Metal Textures by Riddy and Envato Market

Metals are really hard to photograph well. Unwanted reflections, blemishes, and shine make it tricky to get a picture suitable for use as a texture, so you can take the effort out of it with this handy pack of six.

Conclusion

Photography and design go hand in hand in many ways, and photographing your own textures is a great way to increase your skill set, try something new, or even just to give you complete control and inspiration.

Here are some key points to remember when photographing your own material:

  • Check out the macro mode on your camera, or invest in a budget macro lens.
  • Make sure your light is right. If there isn’t enough, add your own.
  • Shoot at a fairly narrow aperture (f/8 or above) to ensure everything is in sharp focus.
  • Use a tripod to avoid camera shake and to allow you to shoot in lower light without compromising.
  • Try different angles or even shooting the same thing at different times of the day, to give you options and the possibility of creating ‘packages’.
  • Shoot in RAW for the best quality, if you feel comfortable doing so. If not, make sure your image type and size is set to the best your camera can take.
  • Do as much or as little post-processing as you feel confident doing. Usually, a tidy-up of imperfections, saturation boost and some sharpening will do the job.


Source: Webdesign Tuts+

Check Out Our New Guide to Learning JavaScript

Do you want to learn JavaScript? We have plenty of JavaScript courses and tutorials here on Envato Tuts+, but sometimes it can be hard to know where to start.

So we’ve put together a free JavaScript learning guide to take you through the process from start to finish.

What You’ll Learn

The learning guide starts right from the beginning, with the simple question “What is JavaScript?”

It then takes you through the fundamentals of JavaScript and introduces jQuery, a cross-platform JavaScript library that makes it easier to write code for the browser. 

At each stage of the process, the guide contains links to courses and tutorials that go into much more depth, such as:

The guide then introduces you to some popular JavaScript frameworks—both front-end ones like Angular 2 and back-end frameworks like Node.js.

Want to learn about cross-platform mobile development? There’s a section on that too, with information on frameworks like Ionic 2, React Native, and Cordova.

And the guide ends with a roundup of more advanced Javascript resources.

Start Learning JavaScript Today!

We’ve designed this guide to help you learn JavaScript from the ground up. So whatever stage you’re at right now, have a read of Learn JavaScript: The Complete Guide and check out the resources it links to. And if you find it helpful, be sure to bookmark it and use it as a reference throughout your learning journey. 

JavaScript is constantly evolving, of course, so we’ll keep updating the guide with new information and links to fresh resources. You can also sign up to our weekly digests to get a comprehensive summary of all our new code tutorials each week. 


Source: Webdesign Tuts+

The Significance of Visual Context in Web Design

According to results from an oft-quoted study by Missouri University of Science and Technology visitors take less than two tenths of a second to form an opinion about your business website. It is visual context that helps them understand what’s going on, form a solid impression and stay longer. Visuals have a compelling impact on users as they can more effectively deliver a quick message than textual content.

In terms of the written word, the absence of context makes it difficult
for a reader to understand what a writer wants to convey. This happens in web
design as well. A website needs to create a visual context which communicates
the background knowledge and story of the organization it belongs to. 

What is Visual Context?

Visual context refers to presentation of content that improves
the delivery of a website’s message.

For example, the website of an architect may include
a portfolio of successful projects. It is at the discretion of a user to either explore this expertise section or not. But visual context from the outset (the use of imagery, color, space) will ensure the users get to
know the architect’s design knowledge, experience in building and construction, and
administrative expertise all the same.

Take another example of this aerospace engineering company.
The bold display of aircraft and engineering clarifies at a glance their position in the aerospace industry. The user isn’t even obliged to read the banner text.

httpwwwmercaerospacecouk
www.mercaerospace.co.uk

Imagine how that same landing page would appear if we were to remove the images of the aircraft? Undoubtedly more vague and complex. Merc
Aerospace offer a wide range of engineering solutions to different sectors but
are mainly exposed to the aerospace industry, all of which is represented
suitably through visuals.

How is Visual Context Created?

Creating a visual context depends on understanding your users. The perspective of a user changes with age, gender,
and ethnicity. For instance, adding images with white color may encourage a notion of
happiness for one community, but convey signs of sadness for others. Therefore, in order to
incorporate visuals perfectly into a business context, you’ll need to
evaluate the understanding of the people you need to reach, something which user personas can help you with.

The following are some worthy ingredients
for creating visual context:

  •          Images relating to the nature of the business
  •          Infographics to summarize a body of text
    in a scannable way
  •          Arrows, lines, and curlicues to highlight
    numbers or show direction
  •          Selection of words and phrases enrich the visual
    context
  •          Storytelling through creatively woven graphics
  •          Appealing icons for helpful navigation

How Important is Visual Context?

Let’s look at some reasons behind the significance of visual context:

First Impressions Count

As mentioned earlier, users take a fraction of a second to form an opinion about
your website. A more concentrated opinion is reinforced in just another couple of seconds after that. The branding, imagery, and icons have
to create a magnanimous first impression in a short span of time. To encourage users to stay for longer, maker sure visual context gives them an informed view of what the website is about and what it stands for.

It Aids Information Delivery

The visuals of a website have a “sensual” appeal compared to textual context. A user will likely notice the complementary images that are
corroborating the overall context, rather than phrases and paragraphs. However good your story telling, that initial emotional response from the user is heavily dependant on visuals, helping the final conveyance of information.

Better User Understanding

The visual context makes a story live. It makes a user
(unknown to the website) understand a business and its operations. He or she will get the core business idea from the context, then search for
the options, products, and services available. 

If you are pursuing
an innovative user interface, which defies conventions, visual context will help bridge the gap between users and your product.

Emotional Bonds Are Important

Visual context is helpful in trigging the emotions
of a target audience. Take the example of Lend With Care, a microfinance organization. Count the number of human faces on the homepage, instantly giving context and connecting with the user. The warm, soft colors make the website inviting, the smiles convey positivity and a feeling of community.

httpswwwlendwithcareorg
www.lendwithcare.org

Within moments visitors have an emotional bond with the website. 

And this can apply to products equally well–customers can just as likely form connections with a variety of products. As a designer it’s your job to create
visuals which touch the inner senses of a target audience. 

Conclusion

Visual context helps users, especially first time visitors, interpret a website’s characteristics and
values. As a designer, you can use what we’ve discussed–that crucial combination of imagery, color, visual data,
infographics, videos, animation, icons, direction, and all other visual tools at your disposal–to create that all-important context. 


Source: Webdesign Tuts+

Web Development Reading List #169: TLS At Scale, Brotli Benefits, And Easy Onion Deployments




 


 

Everyone here can have a big impact on a project, on someone else. I get very excited about this when I read stories like the one about an intern at Google who did an experiment that saves tons of traffic, or when I get an email from one of my readers who now published an awesome complete beginner’s guide to front-end development.

Web Development Reading List 169

We need to recognize that our industry depends on people who share their open-source code and we should support them and their projects that we heavily rely on. Finally, we also need to understand that these people perhaps don’t want a job as an employee at some big company but remain independent instead. So if you make money with a project that uses open-source libraries or other resources, maybe Valentine’s Day might be an occasion to show your appreciation and make the author a nice present.

The post Web Development Reading List #169: TLS At Scale, Brotli Benefits, And Easy Onion Deployments appeared first on Smashing Magazine.


Source: Smashing Magazine

Web Development Reading List #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks




 


 

When working in a team, we focus so much on the work, that we often forget that we all have something in common. Something that is so obvious that we underestimate it: we all are human beings. And well, if we want to grow as a team and get better at what we do, we should embrace this fact more. In fact, I just came back from a week-long team retreat where we had team activities, team games, and sessions and discussions about how we can achieve just that.

Web Development Reading List 167

We figured out how much we value diversity, we realized how different the English language and its words are perceived by people from different countries, and we’ve seen short talks on various topics like work-life-balance but also on technical stuff like Docker or intercepting any computer’s traffic with a Raspberry Zero. So if you have the chance to work in a team, use the opportunity and exchange views and share information with your co-workers. Work is part of your life, so why not make it a lovely part?

The post Web Development Reading List #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks appeared first on Smashing Magazine.


Source: Smashing Magazine

How to Share 360 Panorama Photos With WebVR and A-Frame

In recent times we’ve been seeing a surge in the popularity and technical capability of virtual reality. Typically, when we think VR, we think gaming and dedicated desktop software. However, this is not the only space in which virtual reality is growing.

Through the ever-strengthening power of WebGL, virtual reality is now also making its way into browsers in the form of WebVR, and along with it come new ways to share photography in ever more immersive ways.

With a photo in the right format and a VR device such as Google Cardboard, HTC Vive or the like, a person can be made to feel they’re standing in the exact place the camera was at the time the photo was taken, with the ability to look all around the environment, peering into the depth of simulated 3D space.

And even without a VR device, people browsing the web can still pan all around a spherical panoramic image using a mouse.

Creating Your Own 360 Panorama

In this tutorial we’ll be setting up WebVR-powered 360-degree panoramas in three different ways, using tools that aim to make WebVR accessible and straightforward to use:

To see what we’re working towards, check out demos from each of the above tools, showing the type of 360 image we’ll be making:

Ways to View 360 Images

There are two ways a 360-degree panorama can be interacted with and viewed.

Stereoscopic VR

When a person is viewing a WebVR 360-degree photo through an appropriate VR-ready device, such as a Google Cardboard or HTC Vive, for example, the image will be split into two images and processed in such a way that the headset can use them to generate the illusion of depth.

In this case the person looks around the scene simply by turning on the spot and looking up and down. The device’s accelerometer will update the image display to track with the direction the user is looking.

Click & Drag (Fallback)

When a person is viewing through a device that is not VR-capable, the 360-degree image will fall back to displaying as a single image that can be panned around by clicking and dragging.

Browser Support

WebVR is still somewhat bleeding edge, so some aspects of it are not
widely supported. However, 360-degree panoramas only require a small
subset of WebVR capabilities, so support for at least fallback-level display is
actually pretty widespread.

Desktop Browser

As long as a browser supports WebGL, a viewer will see “click and drag” fallback for a 360 photo. WebGL is now fully functional in all major browsers.

To check if a browser you’re using supports WebGL, visit get.webgl.org. If you see a rotating cube, WebGL is up and running.

Phone-Based VR

Several phones support WebVR when combined with a headset like a Google Cardboard or Daydream. Given Google’s recent push on WebVR, it’s no surprise that its iOS and Android versions of Chrome support WebVR out of the box.

If you have a Samsung Gear VR headset, on the other hand, you’ll need to use Samsung’s own browser.

Full Head-Mounted Display

The way to go about getting set up to view WebVR via a full desktop-powered head-mounted display will depend on the unit in question.

For the Oculus Rift or HTC Vive/SteamVR, you can use either an experimental build of Chromium or Firefox Nightly. The Chromium WebVR build is available only for Windows, while Firefox Nightly is also available for macOS and Linux.

Currently, Oculus Rift only supports Windows, with no reported plans for cross-platform support, so either browser is suitable. However, cross-platform support for HTC Vice / SteamVR is reportedly coming very soon, so if you have this device and think you may prefer to create your panoramas on macOS or Linux at that time, you might wish to choose Firefox Nightly as your main testing browser now.

For full instructions on setting up either of these browsers for WebVR, visit Mozilla VR.

Firefighters battle forest fire in desert conditions
Bert fire, 2016. Firefighters clearing the area on the final days of the fire. Williams Ranger District, north of Parks, AZ. 6-21-16. Photo by Dyan Bone. Credit the U.S. Forest Service, Southweste​rn Region, Kaibab National Forest. CC BY SA.

Getting Started

The first thing you’ll need is a photograph in a format suitable for WebVR panoramas, which you may see interchangeably referred to as a spherical, equirectangular or 360-degree photo. You can take your own by:

  • Using a 360-degree camera.
  • Using an app that allows your phone camera to create spherical images.
  • Stitching multiple images together using software after the fact.

We have some great articles covering some of the techniques you can use:

Alternatively, you can source equirectangular images via Flickr. We’ll be using an image from the Kaibab National Forest for this tutorial. 

Create a directory to house the panoramas you’ll be creating, download the above file into it, and then rename the image to “fire.jpg”.

If you’re planning to view your panorama in full WebVR rather than just as a click-and-drag image in a desktop browser, you’ll probably want to download the “Original Size” version at 10240 x 5120 for maximum visual fidelity. Be aware, however, that users may see a blank white screen while this large image loads, depending on their internet connection. If this will potentially be a problem, choose one of the smaller sizes instead.

NB: later on, if you see a black hole at the bottom of the panoramas you create with this image, it means the file is incomplete and you’ll need to download it again.

Remote Previewing

If you wish to test your panoramas on a remote/secondary device, such as on a Cardboard capable phone, you’ll also want a way to view your files through your local network. You can do this however you’d prefer, but two possible options you might like to use are:

Basic HTML

Each example will sit in its own webpage, so you’ll just need a very basic HTML document to get started with each example:

In the directory for your project, create three HTML files:

  • webvrstarterkit.html
  • aframe.html
  • gurivr.html

Then paste the starter code into each file, changing the content of the <title>...</title> tag if you desire.

WebVR Starter Kit 360 Image

If you were creating a WebVR panorama from scratch, it would be quite complex, requiring fairly extensive coding. However, with excellent frameworks like the WebVR Starter Kit, the process is boiled down to two steps.

All the VR experiences you can create with the WebVR Starter Kit are powered by a single JavaScript file. So to get started, you just need to load that JS file into the <head>...</head> section of your “webvrstarterkit.html” file by pasting in the following snippet:

If you’d prefer not to load this JS file from an external source, you can download the WebVR project from its GitHub repository. You’ll find the “vr.js” file inside the “build” directory.

With the WebVR JavaScript loaded, the page is now ready to have VR elements added to it. To create a 360-degree panorama, insert the following code in the <body>...</body> section:

And that’s it! Your 360-degree panorama is now ready to go.

Note that the value between the brackets is the path to our equirectangular image. This can also be set to load an external image by inserting a URL instead.

When you preview your “webvrstarterkit.html” file now, it should look like this: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.

A-Frame 360 Image

A-Frame is a different WebVR framework, but the means of creating a 360 panorama are very similar to what you completed above. As with the WebVR Starter Kit, A-Frame is powered by a single JavaScript file. Load that file into the <head>...</head> section of your “aframe.html” file with this code:

If you’d prefer not to load the JS file from an external source, you can download the A-Frame repository from GitHub. From the “dist” folder, you should use the minified version of the script for the current version of the project, e.g. “aframe-v0.4.0.min.js”.

Instead of using a script tag in the page body, A-Frame uses its own custom HTML elements. The first element to be added is always <a-scene> in order to create a context for VR elements to be inserted into.

The <a-sky> element is used to simulate a sky in certain scenarios, but it does so by surrounding the viewer with a spherical image, which makes it perfect for 360 panoramas.

Then, to add your 360-degree image, insert the following code in the <body>...</body> section:

Your results should look like this: https://tutsplus.github.io/VR_Panoramas/aframe.html.

GuriVR 360 Image

Under the hood, GuriVR is actually the A-Frame library. What it seeks to do is give an intuitive, straightforward way to set up VR experiences through an editor interface.

To use GuriVR, head to the GuriVR editor. In the editing interface, you can just enter the word panorama followed by the URL to a spherical image, and GuriVR will take care of the rest for you.

Once you’ve done that, click Save at the bottom of the screen, and then click the Share Link button, and you’ll be provided with a link you can give to others to show off your panorama.

Alternatively, you can embed the panorama into a webpage using an iframe element. Update your “gurivr.html” file with the following code, being sure to add your own GuriVR URL into the iframe’s src attribute:

When you’ve done the above, you should get a 360 panorama like this: https://tutsplus.github.io/VR_Panoramas/gurivr.html.

Wrapping Up

You now have three different ways to create WebVR-based panoramas and allow people to connect with your photography in a whole new way. Let’s quickly recap what we covered:

  • WebVR Starter Kit: load the framework’s JS file, add a script tag, and then inside it use VR.panorama() to create your 360 image.
  • A-Frame: load the framework’s JS file, add an <a-scene> element, and then inside it use <a-sky> to create your 360 image.
  • GuriVR: head to the web-based editor, and add the word panorama and then the URL of your photo to create your 360 image. Optionally, embed the provided URL into a webpage via an iframe.

Now that you’ve seen how quickly you can create a WebVR experience from a photo sphere, I hope you’re inspired to get out there and capture the world in three dimensions!


Source: Webdesign Tuts+