$99 Websites + Website Design: September 2019

Monday, September 30, 2019

You Can't Predict the Future, But You Can Get a Preview

So many things that seem like surprises or shocks really aren't--at least to companies that have trained their organizations to scan the horizon. We live in a world of anomalies. Don't ignore them.

4 Ways to Better Plan Your Business Trips

Yes, it's possible to quickly plan a successful business trip.

3 Ways You Can Limit Everyday Distractions

Tips and insights from best-selling author, Nir Eyal, from his new book Indistractable.

Want to Be a Better Boss? 10 Tips That Will Help

People wantto do a great job its your job to help.

Lost Your Mojo? 10 Ways to Get it Back

10 things to do to help you get back into the right head space.

Does the Movie Business Have the Answer to the Privacy Quagmire?

An MPAA-style rating for data privacy could be a win-win for businesses and consumers alike.

Here's How to Work Alongside Your Spouse in the Same Office in Harmony

Working with your significant other can be a trial or tribulation. Here's how to make sure you come out on the winning side.

4 Ways to Deal with Business Stress During the Holiday Season

Help your employees take the edge off this holiday season.

Study Finds Employees Who Feel Included Are 50 Percent Less Likely to Quit

Start fostering a sense of belonging as soon as the first week to boost employee performance and satisfaction.

You Don't Have to Choose: 5 Tips for Balancing Your Personal Life With Your Business's Growth

Entrepreneurship doesn't have to be all or nothing. Here's how to prioritize balance.

She Came Up With a Device to Keep Hotel Workers Safer. Warby Parker's Co-Founder Weighs In on How to Take the Startup to the Next Level

ROAR for Good's Yasmine Mustafa and Warby Parker's Neil Blumenthal Talking About Doing Good While Doing Well

WeWork Officially Shelves Its Highly Anticipated IPO

After a tumultuous 6 weeks and a change in leadership, WeWork's parent company has decided to end its plans to go public.

These Are 30 Most Desirable Tech Companies to Work At, According to a Survey of 3,600 Employees

Jobs at tech companies are coveted.

Iconic Entrepreneurs Use Their Intuition to Succeed. What You Need to Know About Following Your Gut

Iconic entrepreneurs like Richard Branson rely on intuition to succeed in business. Here's what you need to know about following your gut.

Amazon, Walmart, and Best Buy Quietly Entered an (Almost) $4 Trillion Industry--and the Big Winner Is Obvious

Attention legacy health care providers: You've been put on notice.

How to Create a Vintage Fade Effect Photoshop Action

Final product image — What You'll Be Creating

In this tutorial, you will learn how to create a vintage Photoshop effect using such Photoshop effects as smart filters, adjustment layers, and overlay textures.

If you want to create this fade Photoshop effect in a few simple clicks, check my Faded Presets with different overlay textures and a greater number of color photo effects.

Tutorial Assets

The following assets were used during the production of this tutorial:

1. How to Prepare the Document

Step 1

Press Control-N to create a new document and use the following settings: 3000 x 2000 px; 300 dpi.

Step 2

Go to File > Place and put your image inside the document.

Step 3

Resize your image to the borders of the document and hit Enter.

Step 4

After that, Right-Click on the layer and then Convert to Smart Object.

2. How to Create a Vintage Photo Effect

Step 1

Select the smart object and then go to Filter > Noise > Add Noise and use the following settings:

Amount: 2%
Distribution: Uniform
Monochromatic: On

Step 2

After that, go to Filter > Filter Gallery > Texture > Grain. Use the following settings:

Intensity: 15
Contrast: 59
Grain Type: Regular

Step 3

Place the overlay texture above the smart object and change the Blending Mode of this new layer to Screen.

3. How to Create a Fade Photo Effect

Step 1

Now let's start to create our fade effect. Go to Layer > New Fill Layer > Gradient.

Step 2

Double Click on the Gradient Fill layer and use the following settings:

Style: Linear
Angle: 135°
Color: #f7ff00; Location: 0%.
Color: #912a00; Location: 100%.

setting up colors for the first gradient fill layer

Step 3

Change the Blending Mode of the gradient fill to Soft Light and the Opacity to 35%.

changing the blending mode and opacity of gradient fill

Step 4

Create another gradient fill layer with the following settings:

Style: Linear
Angle: -3,58°
Color: #252b45; Location: 0%; Opacity: 0%.
Color: #f7ae8e; Location: 100%.; Opacity: 100%.

creating colors for second gradient fill

Step 5

Change the Blending Mode of the gradient fill to Hard Light and the Opacity to 35%.

changing the blending mode and opacity of second gradient fill

Step 6

Go to Layer > New Adjustment Layer > Gradient Map and then Double Click on the gradient map icon and create a gradient with the following settings:

Color: #313059; Location: 0%.
Color: #4c4b75; Location: 29%.
Color: #ba6167; Location: 55%.
Color: #ff7038; Location: 93%.

Step 7

Change the Blending Mode of the gradient map to Soft Light and the Opacity to 60%.

Step 8

Create another gradient map with the following settings:

Color: #1a535d; Location: 0%.
Color: #32d49d; Location: 100%.

Step 9

Change the Blending Mode of the gradient map to Overlay and the Opacity to 25%.

changing the blending mode and opacity of the gradient map

Step 10

After that, go to Layer > New Adjustment Layer > Curves and use the following settings:

Step 11

Go to Layer > New Adjustment Layer > Brightness/Contrast and create a new layer with the following settings:

Brightness: 5
Contrast: 35

Step 12

Now we need to create the last gradient fill with the following settings:

Style: Linear
Angle: 45°
Color: #313067; Location: 0%;.
Color: #b03d11; Location: 100%;

Step 13

Change the Opacity of the layer to 15%.

changing the opacity of the gradient fill

Awesome Work, You're Now Done!

In this way, we can create an atmospheric-looking image using overlay textures, adjustment layers, and gradients. Feel free to contact me for any help with the techniques we covered.

If you want to create similar effects using Photoshop actions, you can also check my Faded Presets. This fade effect Photoshop action has a great number of overlay textures and plenty of color Photoshop effects.

If you'd like to know more about vintage effect Photoshop techniques, check these tutorials:

Leaders Must Always Be Improving. This Leadership Strategy Will Help You Do It

If you're trying to achieve exponential growth in your business, start by looking at your own strengths and weaknesses. Build your capacity.

How to Use Easy Video Player For JavaScript

Videos have become a key part of websites and online businesses. This is mainly due to the fact that people in general are getting faster (and in most cases cheaper) internet data plans on mobile devices. Another factor that comes into play is the higher engagement with video content. People are more likely to watch and remember a well-made interesting video than they are to read a lot of text.

15 Best HTML5 Video Players

Whether you're a YouTube creator, aspiring film director, or web developer, these 15 best HTML5 video players will help you build a video-centric website.

Eric Dye
09 May 2017

HTML5
15 Best HTML5 Audio Players

These 15 best HTML5 audio players on Envato are excellent examples of how advanced players can be, while at the same time being easy to customize.

Eric Dye
14 Jun 2017

HTML5
15 Best WordPress Audio Player and Video Player Plugins

CodeCanyon has a wide range of best-selling WordPress audio and video players. No matter what your vision for your audio or video content, there is a player...

Jane Baker
30 Nov 2018

WordPress
Best Video Background Plugins for WordPress

If you’ve been thinking of adding a video background to your WordPress site, here are the eight best plugins available at CodeCanyon.

Nona Blackman
29 Sep 2017

WordPress

If you are serious about getting more people to talk and know about your business, it's high time that you get serious about video. In this tutorial, we will help you get started right away with a step-by-step guide to using the Easy Video Player script from CodeCanyon. You can use this JavaScript library to add videos to your webpages.

Why Use Easy Video Player?

You might be wondering why you should use Easy Video Player instead of a free alternative or any other paid script.

One of the biggest reasons to choose this player is that it is feature packed. First of all, it is responsive. This means that it will look nice of devices of all sizes. It has been optimized for playing videos on both mobile devices as well as desktops.

It has support for multiple video qualities so that users can switch between SD, HD or Full HD versions of a video similar to YouTube. You can also control the playback speed of the video at runtime. It is also possible to add subtitles for multiple languages to a single video. Users can then choose the subtitles they want to display at runtime.

You can also allow the viewers to download the video with an optional download button. It is possible to show the button either globally or on individual videos.

Easy Video Player can also play videos from a variety of sources. You can use it to play local videos, stream videos from a server or to embed YouTube or Vimeo videos.

You can monetize these videos using pre-roll, mid-roll or post-roll ads. It is also possible to add popup ads to the videos and control their show and hide time. Easy Video Player also allows you to show advertisements whenever users pause the video.

It is also possible to encrypt the video paths in order to make sure that users can't steal a video by simply crawling the page source. You can also password protect the videos in order to limit access to specific set of users.

The list of features does not end here. My suggestion would be that you visit the script description page in order to read about all the features of Easy Video Player.

What We'll Be Building

Once you have completed this tutorial, you will have a fully functional video player that supports annotations. The final version of the video player will look like the image below.

We will be using a video of a robin from Pixabay for this tutorial.

Getting Started

After reading that the Easy Video Player comes with so many features, you might think that it would be hard to configure or use. However, as you will see in the tutorial, getting up and running with the script is not complicated at all.

One thing that I should point out before we get started is that any local videos on your server that you play using the Easy Video Player should be located inside a folder titled content. This way you can be sure that all the features of the player will work as expected.

After you purchase the Easy Video Player from CodeCanyon, you will be able to download the script as well as the documentation. The documentation contains a lot of working examples that can be added directly to your website by simply changing the source path or URL for the videos. The fastest and easiest way for you to quickly embed videos in your webpage using this player is to use parts from the working examples themselves. Just make appropriate changes to suit your own needs.

The first step would be to include the CSS and JavaScript files in your webpage.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Easy Video Player - TutsPlus Example </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="content/global.css">
    <script type="text/javascript" src="java/FWDEVPlayer.js"></script>      
  </head>
  <body>
  
    <!-- WE WILL ADD OUR VIDEO PLAYER HERE -->
  
  </body>
</html>

By default, the player keeps CSS file in the content folder and JavaScript file in the java folder. If you change the location of these files, make sure that you update their path in the webpage as well.

Now, you have to specify a container for the video player. This container div will have a unique id which is passed to the constructor of Easy Video Player. You can set the CSS property margin to auto for this div in order to center it horizontally on the webpage but that is optional.

Add the following HTML inside the body of the webpage where you want the video player to appear.

<div id="topVideo"></div>

While it is not necessary, you can add some CSS in order to make the video player look even nicer or to position it properly on the webpage. Here is the CSS that we would use for this purpose.

body {
        background-color: #efefef;
        cursor: auto;
}

#topVideo {
        box-shadow: 0 0 20px #989898, 0 0 50px #b0b0b0;
        margin: 50px auto;
}

Initializing the Video Player

Now, you simply need to initialize the Easy Video Player by passing a bunch of parameters to the constructor. These parameters control all aspects of the video player so you should read the documentation to understand how each of them works. In this tutorial, I will give you a brief overview of the options that we will modify in our own player.

This is the code that you have to put in your webpage for initializing the player. It might look very long and complicated but the parameters have self-explanatory names and they will have the same value from one player instance to another. Most of the times, you will be able to directly take the initialization parameters from the examples in documentation and make changes as needed.

<script type="text/javascript">
FWDEVPUtils.onReady(function(){

        FWDEVPlayer.videoStartBehaviour = "pause";
        
        new FWDEVPlayer({               
                //main settings
                instanceName:"player1",
                parentId:"topVideo",
                mainFolderPath:"content",
                initializeOnlyWhenVisible:"no",
                skinPath:"minimal_skin_white",
                displayType:"responsive",
                fillEntireVideoScreen:"no",
                playsinline:"yes",
                autoScale:"yes",
                openDownloadLinkOnMobile:"no",
                useVectorIcons:"no",
                useResumeOnPlay:"no",
                goFullScreenOnButtonPlay:"no",
                useHEXColorsForSkin:"no",
                normalHEXButtonsColor:"#FF0000",
                selectedHEXButtonsColor:"#FFFFFF",
                privateVideoPassword:"428c841430ea18a70f7b06525d4b748a",
                startAtTime:"",
                stopAtTime:"",
                startAtVideoSource:2,
                videoSource:[
                        {source:"content/videos/robin_sd.mp4", label:"small version"},
                        {source:"content/videos/robin_hd.mp4", label:"hd720"},
                        {source:"content/videos/robin_full_hd.mp4", label:"hd1080"}
                ],
                posterPath:"content/posters/robin-poster.png",
                showErrorInfo:"yes",
                fillEntireScreenWithPoster:"yes",
                disableDoubleClickFullscreen:"no",
                addKeyboardSupport:"yes",
                useChromeless:"no",
                showPreloader:"yes",
                preloaderColors:["#999999", "#FFFFFF"],
                autoPlay:"no",
                enableAutoplayOnMobile:"no",
                loop:"no",
                scrubAtTimeAtFirstPlay:"00:00:00",
                maxWidth:980,
                maxHeight:552,
                volume:.8,
                //logo settings
                showLogo:"yes",
                hideLogoWithController:"yes",
                logoPosition:"topRight",
                logoLink:"https://code.tutsplus.com/",
                logoMargins:5,
                //controller settings
                showController:"yes",
                showDefaultControllerForVimeo:"no",
                showScrubberWhenControllerIsHidden:"yes",
                showControllerWhenVideoIsStopped:"yes",
                showVolumeScrubber:"yes",
                showVolumeButton:"yes",
                showTime:"yes",
                showRewindButton:"yes",
                showQualityButton:"yes",
                showSubtitleButton:"yes",
                showShareButton:"yes",
                showDownloadButton:"yes",
                showMainScrubberToolTipLabel:"yes",
                showChromecastButton:"no",
                showFullScreenButton:"yes",
                repeatBackground:"yes",
                controllerHeight:41,
                controllerHideDelay:3,
                startSpaceBetweenButtons:7,
                spaceBetweenButtons:9,
                mainScrubberOffestTop:14,
                scrubbersOffsetWidth:4,
                timeOffsetLeftWidth:5,
                timeOffsetRightWidth:3,
                volumeScrubberWidth:80,
                volumeScrubberOffsetRightWidth:0,
                timeColor:"#777777",
                youtubeQualityButtonNormalColor:"#777777",
                youtubeQualityButtonSelectedColor:"#FFFFFF",
                scrubbersToolTipLabelBackgroundColor:"#FFFFFF",
                scrubbersToolTipLabelFontColor:"#5a5a5a",
                //redirect at video end
                redirectURL:"",
                redirectTarget:"_blank",
                //playback rate / speed
                showPlaybackRateButton:"yes",
                defaultPlaybackRate:"1", //0.25, 0.5, 1, 1.25, 1.5, 2
                //embed window
                embedWindowCloseButtonMargins:0,
                borderColor:"#333333",
                mainLabelsColor:"#FFFFFF",
                secondaryLabelsColor:"#a1a1a1",
                shareAndEmbedTextColor:"#5a5a5a",
                inputBackgroundColor:"#000000",
                inputColor:"#FFFFFF",
                //thumbnails preview
                thumbnailsPreview:"",
                thumbnailsPreviewWidth:196,
                thumbnailsPreviewHeight:110,
                thumbnailsPreviewBackgroundColor:"#000000",
                thumbnailsPreviewBorderColor:"#666",
                thumbnailsPreviewLabelBackgroundColor:"#666",
                thumbnailsPreviewLabelFontColor:"#FFF",
                // context menu
                showContextmenu:'yes',
                showScriptDeveloper:"yes",
                contextMenuBackgroundColor:"#1f1f1f",
                contextMenuBorderColor:"#1f1f1f",
                contextMenuSpacerColor:"#333",
                contextMenuItemNormalColor:"#888888",
                contextMenuItemSelectedColor:"#FFFFFF",
                contextMenuItemDisabledColor:"#444"
        });                             
});
</script>

Two parameters that have to be unique every time are instanceName and parentId. The parentId parameter is the id of the container for your video. The value of instanceName parameter is used to identify the player when calling methods like play().

The videoSource parameter is used to specify the path to different versions of the same video so that users can play it in SD, HD or Full HD format. The posterPath parameter specifies the path of image file that shows up before the video starts playing.

A lot of other parameters are used to control the spacing, color or background of different UI elements used in the player. If you load the webpage in a browser now, you should see something similar to the image below.

Adding Annotations to Your Video

There are many situations where you will want to give the viewers some additional information while they are watching a video. Annotations are very helpful in that situation. Luckily, Easy Video Player provides a convenient way of adding annotations to your videos

You just need to use a little HTML with special data attributes. In our case, we will use annotations to tell readers a fact about robins and then link to Wikipedia if they want to read more about the bird. Here is the markup that you have to add to the webpage. It might be better to add it right below the video player container.

<ul id="vidAnnotations" style="display:none">
        <li data-start-time="00:00:01" data-end-time="00:00:05" data-left="600" data-top="100" data-normal-state-class="EVPAnnotationNormal">
                <p>The robin was declared Britain’s National Bird on December 15th, 1960.</p>
        </li>
        
        <li data-start-time="00:00:15" data-end-time="00:00:20" data-left="40" data-top="400" data-show-close-button="yes" data-click-source="https://en.wikipedia.org/wiki/European_robin" data-click-source-target="_blank" data-normal-state-class="EVPAnnotationLinkNormal">
                <p>You can learn more about this bird on the Wikipedia page about <strong>European Robins</strong>.</p>
        </li>     
</ul>

Setting display to none for the annotations will hide them from appearing the webpage. The attributes specified with each annotation will determine when and where they appear in the video. The distance of the annotations from the left and top side can be specified using the data-top and data-left attributes. The data-start-time and data-end-time attributes determine when the annotations will show up and disappear. You can also give users the option to close the annotations manually by setting the data-show-close-button attribute to true. You can read about all other attributes in the documentation available with the download.

Keep in mind that the annotations don't start working as soon as you add them to the webpage. Right now, the video player does not know about their existence. So, you have to specify a couple of parameters in its constructor to help it determine where to find the annotations.

annotiationsListId:"vidAnnotations",
showAnnotationsPositionTool:"no",

If someone plays the video now, they will see the annotations after the specified time as in the image below.

Final Thoughts

In this tutorial, we have created a feature-rich fully functional responsive video player which supports annotations using the Easy Video Player script from CodeCanyon. This is just one of the ways of using the plugin. The plugin also offers a lot of other features which increase its usefulness. For example, the script allows you to integrate different kinds of ads in your video to help you monetize your content. You can also use it to play videos inside a lightbox.

Once you purchase this script, you will get 6 months of free support and life time free updates. The plugin is well worth its price due to all the features it offers.

Light your scene well so there are no harsh shadows
Dress the set—clean off surfaces and remove clutter
Get some b-roll so that there's variety in your footage

Here are three of the best templates to help you nail that promotion video. These are all from Envato Elements, where you can download as many as you like once you're subscribed.

Monday, September 30, 2019

Tutorial Assets

1. How to Prepare the Document

Step 1

Step 2

Step 3

Step 4

2. How to Create a Vintage Photo Effect

Step 1

Step 2

Step 3

3. How to Create a Fade Photo Effect

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Awesome Work, You're Now Done!

Why Use Easy Video Player?

What We'll Be Building

Getting Started

Initializing the Video Player

Adding Annotations to Your Video

Final Thoughts

Top Video Templates to Promote Restaurants

1. Restaurant Logo Reveal

2. Modern Restaurant Promo

3. Restaurant And Food—Flat Animated Icons

More Top Articles to Help You Make A Restaurant Promo Video