Photoshop in 60 Seconds: What Are Layer Styles?

Final product image
What You’ll Be Creating

Layer styles are a classic Photoshop feature, but they don’t have to be stale and lifeless. See how to use GraphicRiver items to breath life into Layer Styles.

Photoshop in 60 Seconds: What Are Layer Styles?

Layer styles are a Photoshop feature that are sometimes seen as tired and/or amateurish. It’s true that the basic application of Bevel and Emboss and Drop Shadow has been overused and grown stale, but that doesn’t mean Layer Styles are ready to be retired. Check out this quick video on how to use an Envato Market item to create some vibrant and exciting effects with Layer Styles.


What Are Layer Styles?

Layer styles are an easy way to add non-destructive and quickly editable effects to any layer in Photoshop.

What are Layer Styles

Simply double-clicking the space next to the layer thumbnail, in the Layer panel, will launch the Layer Style dialog box.

Accessing the Layer Styles box

Each style can be enabled or disabled using the option boxes here along the left side. Then clicking on a layer style opens up the different options that the style contains.

Enabling options

Other Styles 

Layer styles are so easy to use and can give some excellent results. Consider these other Layer Styles for sale on GraphicRiver

Elegant Glass Text Effects & Styles

This set of Elegant Glass Text Effects & Styles from author Webtreats contains 8 Transparent Layer Styles and 3 Elegant Glass Text effects. This product is available for $5.

Elegant Glass Text Effects  Styles
Elegant Glass Text Effects & Styles

Supreme Fire Text Styles

Supreme Fire Text Styles from author Artorius contains 10 Unique Fire Text Styles and is available for $6.

Supreme Fire Text Styles
Supreme Fire Text Styles

New 3D Text Styles

New 3D Text Styles from author designercow contains 10 PSD files with 1 style and is available for $4.

New 3D Text Styles
New 3D Text Styles

Comic Book Text Styles

Comic Book Text Styles from author PixelBuffet contains 8 typical comic book text styles and is available for $5.

Comic Book Text Styles
Comic Book Text Styles

Freehand Ink and Other Artistic Styles

30 Freehand Ink and Other Artistic Styles from author dekurvajo contains 30 single layer Photoshop FX styles and is available for $4.

Freehand Ink and Other Artistic Styles
Freehand Ink and Other Artistic Styles

Download Photoshop in 60 Seconds: What Are Layer Styles?

What is BuddyPress? How to Set Up and Use it Right

If you’ve been using WordPress for a while, you probably know that you can use various plugins to extend the functionality of your website. 

Some plugins help you create more revenue for your business, while others are focused on creating a community around your website. In a sea of plugins, there is one in particular that has a number of benefits for a small business.

The plugin in question is called BuddyPress and it adds a whole slew of community building features. You can create your very own social network for your company and use it to facilitate communication and collaboration between employees.

Another benefit of BuddyPress is that you can allow anyone who visits your website to register and create a profile which is a nice way of connecting with your target audience, clients, and customers. It can help you build hype around your website and you can use it to provide immediate customer support.

How to Set Up and Use Buddypress
How to set up and use BuddyPress. (source graphic)

In today’s article, I’ll show you how to install and setup BuddyPress, how to create the necessary pages, and how to add them to the menu. I’ll also cover different user roles and how to extend the functionality of BuddyPress further.

What is BuddyPress?

BuddyPress is touted as a “social network in a box” and it helps you build any type of community website using WordPress, with member profiles, activity streams, user groups, messaging, and more. 

On top of that, you can take advantage of numerous great add-on features to add extra functionality to your social network. It allows you to include message attachments, document collaboration, likes, a Facebook-like wall, and more. It’s focused on simple integration, ease of use, and extensibility.

BuddyPress website
BuddyPress website.

Users can create their own profiles, send messages, create groups, share status updates, and much more. BuddyPress comes with several components that integrate directly with your existing WordPress site and it even works with your installed theme out of the box. 

There are also themes designed specifically to work with BuddyPress which allow for more customization and functionality, which are available on Envato Market:

Best-selling BuddyPress themes
Best-selling BuddyPress themes, available for sale on Envato Market (ThemeForest).

Now let’s look at how to use BuddyPress, from install and setting up, to working with it and customizations.

How to Install and Setup BuddyPress

If you have ever installed a plugin on your WordPress website, you’ll have no problems installing BuddyPress. In your WordPress dashboard, click on Plugins > Add New and then search for BuddyPress. It should come up as the first result so go ahead and click on Install and then Activate.

Installing the BuddyPress plugin
Installing the BuddyPress plugin.

You will immediately be taken to the BuddyPress welcome screen which has links to help you set up and manage your community.  

BuddyPress welcome screen
BuddyPress welcome screen.

The first thing we’ll do is configure BuddyPress settings. Clicking on the Get Started button on the welcome screen will immediately take you to the settings area for Buddypress.

Configuring Your BuddyPress Setup

As you can see from the screenshot (above), there are three areas that need to be configured:

  1. Selecting the components you want to include
  2. Creating and assigning pages
  3. Tweaking BuddyPress options

Let’s walk through each of them, one step at a time.

Step 1 – Activate the BuddyPress Components

By default, BuddyPress will have some of the components pre-activated. You can activate or deactivate all but two components. The BuddyPress Core and the Community Members components cannot be deactivated because they are needed for the plugin to function properly.

BuddyPress components
BuddyPress components.

The rest of the components include:

  • Extended Profiles – Users can customize their profiles.
  • Account Settings – Allows users to edit their account settings and notifications.
  • Friend Connections – Let users make connections with each other.
  • Private Messaging – Enables private messaging between users.
  • Activity Streams – Global, personal, and group activity streams with threaded commenting, direct posting, favoriting, and @mentions.
  • Notifications – Notify members of relevant activity with a toolbar bubble and/or via email.
  • User Groups – Allows users to organize themselves into specific public, private or hidden sections with separate activity streams and member listings.
  • Site Tracking – Lets you record activity for new posts and comments from your site.

You can select as many or as few of them, depending on the needs of your website. It’s also easy to enable certain components at a later date. Once you’re done selecting which components you want, click on Save Settings.

Step 2 – Set Up Your Pages

The next step is to configure the pages that BuddyPress will use. Most of the pages are already created, but you will need to manually create the pages for user registration and activation. 

Keep in mind that you will also need to enable user registration in Settings > General > Allow anyone to register for the site if you plan on having a public community.

Configuring BuddyPress pages
Configuring BuddyPress pages.

If you want to keep your community closed, you will have to enter new members manually and can skip the following step.

In your dashboard, click on Pages > Add New and then create a blank page called Registration and another one called Activation. You don’t need to add any content to those pages as BuddyPress will automatically display the appropriate content.

Once your pages are created, go back to Settings > BuddyPress and select the Pages Tab. Under Registration, select the pages you just created for the appropriate functions.

Click on Save Settings.  

Step 3 – Tweak Your BuddyPress Settings

Now that the main options have been set up properly, it’s time to tweak the settings. Click on the Options tab. Here you can configure various settings regarding user profiles, groups, activity, and main settings. The settings themselves are pretty explanatory, as you can see from the screenshot below:

Additional BuddyPress settings
Additional BuddyPress settings.

Select the ones that are relevant for your community and click on Save Settings.

How to Work With BuddyPress

The core of BuddyPress revolves around users. We’ve mentioned before that you will need to enable user registration on your site if you want to have an open community where your visitors can freely register for your website. 

BuddyPress itself doesn’t have any default member roles. Therefore, the safest option is to set the user role of new members to Subscriber or Contributor.

1. User Profiles

Once someone registers, they are given their own profile which they can control from the admin area. Aside from the regular profile options, each user can access the Extended Profile settings if you enabled it in the previous step.

A BuddyPress user profile
A BuddyPress user profile.

From there, they can enter as much information about themselves as they want to. You can create different profile fields under Users > Profile Fields to allow your users to enter their name, birthday, a short biography, links to their other profiles, and more. You can also group various profile fields to organize them better.

Extended profile options in BuddyPress
Extended profile options in BuddyPress.

Once your users are done entering their profile information, they can access their public profile which has a large number of features:

  • Last Activity
  • Profile
  • Notifications
  • Messages
  • Friends
  • Groups
  • Settings

This page also serves as a personal dashboard from where anyone, including you, can message other users, post status updates, join groups, modify global settings, and much more.

Users can post status updates
Users can post status updates.

Aside from allowing user registrations, you can also add users manually from your WordPress dashboard under Users > Add New.

2. How Groups Work

If you selected the Groups component earlier, you and your users will be able to create groups. Groups can be set to be public, which allows anyone to join the group. Public groups will also be visible sitewide and their activity will be displayed in the Activity feed.

Setting up BuddyPress group setting
Setting up BuddyPress group setting.

Private groups require users to request membership and they will be visible sitewide. The activity of a private group, though, is only visible to group members.

Finally, hidden groups are invite-only, aren’t visible on the rest of your website, and the group activity is visible only to group members.

Each group, regardless of the group type can be set to allow new invites in one of three ways:

  1. only group admins
  2. group admins and mods
  3. any member of the group

Similarly to members, each group can have an avatar and a header image which makes it more recognizable.

3. Adding Widgets and Menus

To make your community as user-friendly as possible as well as to make navigation easier, you can create a custom menu and take advantage of the widgets that come with BuddyPress.

Let’s take care of the menu first.

Go to Appearance >  Menus and click the create a new menu link. Give it a name and set the menu to be used in whichever menu position you’d like the menu to appear.  

Add the pages you want to show up in your navigation from the Pages section and add the desired BuddyPress pages. Here’s how our custom menu looks:

Setting up BuddyPress custom navigation
Setting up BuddyPress custom navigation.

Now click Save Menu to save it.

Next, let’s add some widgets to our sidebar so our members and site visitors have an easier time navigating around the site and can immediately get an overview of the site activity.  

Click on Appearance > Widgets. The default WordPress theme TwentySixteen has a sidebar widget area and two widget areas that appear below the content. For the sake of simplicity, we’ll be adding a Log In and Who’s Online widgets to our sidebar, but depending on your theme, you can add them to any widgetized area on your website.

BuddyPress widget options
BuddyPress widget options.

Bear in mind that the available widgets depend on the components you activated earlier. They allow your users to log in or register, see notifications, discover who is online, and you can also use them to post a sitewide notice to your entire community.

How to Extend and Customize BuddyPress

Now that your community is properly set up, you’ll need a theme to make it visually appealing. Our theme marketplace, ThemeForest, has a large selection of high-quality premium BuddyPress themes that are sure to take your site to a new level. 

They can be used to create any type of website but they are designed and developed to be fully compatible with the BuddyPress plugin to ensure all your pages, user profiles, groups, and all the functionality works as expected without any issues. Be sure to check out our curated selection of the best BuddyPress themes for community sites: 

There is also a number of amazing plugins that extend BuddyPress even further. Most of them are simple to set up and maintain. They give you the ability to add attachments to private messages, user collaboration on documents, and much more.

Here are a few of the most notable BuddyPress related plugins:

1. BuddyPress Links

BuddyPress Links plugin adds rich media sharing features to BuddyPress. This means that if you share a link to another website, it will automatically display some of the data included in the link. Images, video, thumbnails, and excerpts are usually displayed so your members can get an idea of what the link is about.

2. BuddyPress Docs

BuddyPress Docs is a must-have plugin if you plan on building a company network. It’s the BuddyPress version of Google Docs and it allows members of your community to collaborate on documents, create documentation, and more.

3. bbPress

bbPress adds a great forums solution to WordPress’s already powerful content management system.  It’s a great way to extend the functionality of your BuddyPress website and encourage user interaction. On top of that, bbPress integrates perfectly with BuddyPress.

4. BuddyPress Simple Terms And Conditions

With BuddyPress Simple Terms And Conditions, it’s easy to extend the BuddyPress registration page with a checkbox for accepting the terms and conditions or terms of use. This is a necessity if you run a business website. It can also save you a lot of potential headaches down the road.

BuddyPress Brings Community to WordPress

WordPress alone is a very powerful platform but when you combine it with BuddyPress, it becomes even more powerful. 

You can quickly turn your website into a full-featured social network, company network, and more. It allows your target audience to discuss and comment on your services and products, as well as get immediate support if they encounter any issues.

Pair BuddyPress with a few extra plugins and a gorgeous looking theme and you can open up your website to a whole new audience. If your company needs a place to facilitate communication and collaboration, look no further than BuddyPress.

Download What is BuddyPress? How to Set Up and Use it Right

How to Create and Publish a Jekyll Theme Gem

One of Jekyll’s noteworthy new features is the ability create official themes in the form of Ruby gems. These themes can be installed by a Jekyll user to style their static blog or website with ease, leaving them to manage their content.

Prior to this new theming feature, Kezz Bracey wrote a great tutorial on how to create a Jekyll theme. In this tutorial, we’re going to extend upon Kezz’s post by converting our template into an official Jekyll theme gem.


Before we get started, I would recommend you read through the previous tutorial. I’m going to assume you already have a Jekyll theme created using Kezz’s method, or you may even have a well written Jekyll site that you’d like to convert into an official Jekyll theme.

You’re going to need to use the command line when working on your Jekyll theme, but once again, Kezz has you covered!

Open your command line tool and make sure you have the latest version of Jekyll installed (at the time of this article it’s 3.3) by using the following:

$ gem install jekyll

You’ll also need Bundler, which is a gem for managing other gems. I’ll explain why you need this later on. You can install this using:

$ gem install bundler

Finally, you’ll need to sign up for a account. Doing this allows you to push your theme to their registry so other Jekyll users can download and use it.

Getting Started

To help us get started, Jekyll has a command just for creating a new theme. In your command line tool, locate the directory you plan to work in, and use the following command to create the base files for your theme:

$ jekyll new-theme awesome-jekyll-theme

You should see something like the list below in your working folder:


The _layouts/, _includes/ and _sass/ folders are the same as the folders you’d see in a normal Jekyll project, containing all your page layouts, “includes” (or “partials”) and Sass files.

The assets/ folder is for files you want to output to the user’s site. For example, JavaScript, image or style files. You would normally place these files into js/, css/ or images/ folders.

awesome-jekyll-theme.gemspec is the file that describes your gem theme. Here is where you can list the name, the version, a description, a homepage, and a list of gems for your theme gem.

The Gemfile is for Bundler, which we mentioned before. This links the gems listed in your .gemspec file with Bundler in your command line tool. We’ll be using Bundler later to test out your theme.

Finally, the and LICENSE.txt are there to document your theme and to provide a suitable license. You’re probably familiar with these files if you’ve created a GitHub project before.

Note: It’s important to document your theme thoroughly. That way, people who want to use your theme will be able to do so easily, and use the options and controls you’ve provided within it.

Converting Your Theme

Given that a Jekyll project has a pretty similar file structure to a Jekyll theme, you can go ahead and copy most of your files over. You’ll probably want to overwrite the pre-existing layout files that come with the base theme with your own. So, all your layout files need to go into the _layouts/ folder, your includes into the _includes/ folder, and your Sass files into the _sass/ folder within the base theme you created.

Hint: New to Sass? Check out this course by Adi Purdila, 14 Days to Learn Sass

You’ll need to place your main styles, JavaScript and graphic assets in the assets/ folder. This is a key folder for Jekyll theming as it’s the only directory that will appear in the end users site. You may end up with an assets folder that looks like this:


In turn, you’ll need to update the paths in your code to reflect this path change. For example, css/styles.scss will change to assets/styles.scss.

Hint: To make sure your paths are correct in your theme, you might want to check out relative_url and absolute_url which have recently been added to Jekyll.

Your Theme Metadata

The .gemspec file is designed to provide core information about your theme gem. The base Jekyll theme comes with this file, but you’ll need to replace the example values with your own. Here’s an example .gemspec file:

# coding: utf-8 do |spec|          = "awesome-jekyll-theme"
  spec.version       = "0.0.2"
  spec.authors       = ["David Darnes"]         = ["[email protected]"]

  spec.summary       = %q{A short explanation of my awesome gem theme.}
  spec.description   = "A longer explanation of my awesome gem theme that isn’t the same as my summary."
  spec.homepage      = ""
  spec.license       = "MIT"

  spec.files         = git ls-files -z.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README)}i) }

  spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.0"

  spec.add_development_dependency "jekyll", "~> 3.3"
  spec.add_development_dependency "bundler", "~> 1.12"

Below is a run down of what I changed in my .gemspec file:

The name should be the name of your theme, which should match with the .gemspec file name. The version should be the latest number of your theme gem. The authors can be a list of people, but, for now, it’s just myself developing this theme. email should be the same email you signed up with for

The summary and description should be short and long explanations respectively of your theme gem. You can either set the homepage to a live demo of the theme or even the GitHub repo in which is resides.

The license should match whatever license you’ve provided in the theme gem (the LICENSE.txt file). The files value should be left unchanged as that marks the files and folders that will be used in your final theme gem.

The last part of the .gemspec file is a list of gems that are needed in order for your theme to work correctly. In my example, I have just one gem that is needed for it to run: jekyll-seo-tag. The other gems listed, jekyll and bundler, are development gems and are only needed when someone is developing the theme gem.

Make sure to add all the gems you need for your theme in this file. You can find a full list of Jekyll’s plugins on their site.

Testing Your Theme

Now that we have our theme files and our .gemspec file has been filled in, we can now perform some initial testing. However, we’re going to need some sample content, so copy over the _config.yml from your old template theme, along with some markdown content. An file with some content should be sufficient for an initial test, but you may want to add an example post, as well. Blogging is one of the key features of Jekyll, so it would be a good idea to test this.

Note: Make sure your front matter has a layout selected or you might not see the theme correctly when running locally.

Remember that we installed Bundler and that Gemfile in the base of our theme directory? Well, Bundler uses Gemfiles to manage gems in projects and if you open that file, you’ll see the following:

source ""

What this file does is to tell Bundler to look on for the gems in your .gemspec file. So, with that in mind, let’s test your theme.

In your command line tool, use the command below to install all the gems needed for your theme gem:

$ bundle install

This should install all the themes in your .gemspec, which, in my example, would just be jekyll-seo-tag. Now we can run the theme locally using:

$ bundle exec jekyll serve

You should then be able to view your theme at http://localhost:4000. If an error occurs, it might be because you’re missing a gem in your .gemspec file.

Note: You might need to whitelist gems in your _config.yml file, if you haven’t already done so, as well as stating them in your .gemspec. If you’re struggling to get to grips with Jekyll, Guy Routledge has created a great course for Tuts+ on Building Static Websites With Jekyll.

Refining and Adding Customisation

Next, you’re going to be spending some time refining your theme to make sure it works with a variety of content formats and sizes. You might also want to consider customisation options, either through a global setting in the _config.yml or on separate pages in the front matter.

The user has the ability to overwrite any file in your theme gem with their own file on their own Jekyll site. For example, if you have _includes/header.html in your theme gem, the theme user can overwrite that file with _includes/header.html on their own site. You might want to think about making your theme flexible enough that the theme user can easily overwrite your files to make their own site more unique.


If you’re adding customisation to your theme, you’re going to need documentation to go with it. Documenting your theme gem is very important. If the documentation is poor, then people won’t want to use the theme.

Here are some of the things that I would expect to see in a theme’s documentation:

  • A good description of the theme and its uses
  • A list of features
  • Clear installation instructions
  • Some demo content to show how to use the theme
  • How the configuration options work
  • How the page options work
  • Any shortcodes / includes that can be used
  • References to any open source projects you used to help create the theme

All of this can be listed in the, which was created when we generated the base Jekyll theme. When the theme gets pushed up to, the readme file will be processed and shown on the gem page for people to refer to.

Along with your documentation, I would recommend providing some demo content to get people started with your theme. A _config.yml, and example post file, similar to the ones you used to test your theme with earlier, along with a Gemfile should be sufficient. Although it should only require the user to add the gem to their Gemfile, it would be very helpful to provide an example setup that they can download and use straight away.

You’ll need to provide a screenshot for your theme, as stated in the official Jekyll documentation, with the name screenshot.png. Not only will this allow people to see how your theme looks at a glance, but it will also provide a consistency across all Jekyll themes so that they can be displayed in a gallery or admin UI in the future.

Publishing Your Theme

Once you’re happy with your theme, and you’ve tested and documented it, you’ll need to push it up to the registry so that others can use it.

Locate your theme gem with your command line tool and use the following:

gem build awesome-jekyll-theme.gemspec

Make sure to match the name of the .gemspec file in your theme with the command shown above. This will create a file called awesome-jekyll-theme-0.0.2.gem, which is your official Jekyll theme gem! Next, you’ll need to push your gem up to Use the following in your command line tool:

gem push awesome-jekyll-theme-0.0.2.gem

If this is your first time pushing a gem to, it will ask you to log in with the details you used to sign up. After that, the gem should be pushed up to the registry, meaning your theme gem has been published.

Hint: With most command line tools, if you write the first few letters of a file and then press Tab, it should autocomplete the rest of the file name, as long as there isn’t another file starting with the same letters in the same folder.

Once this has happened, you’ll need to do some further testing and follow your own instructions on installing and using the theme gem. The instructions should be fairly similar to the ones shown on the official Jekyll site.

Additional Reading

As well as following this tutorial, you might want to check out these resources when it comes to creating your own Jekyll theme gem:

Download How to Create and Publish a Jekyll Theme Gem

Building Your Startup: Refining Email Templates

Final product image
What You’ll Be Creating

This tutorial is part of the Building Your Startup With PHP series on Envato Tuts+. In this series, I’m guiding you through launching a startup from concept to reality using my Meeting Planner app as a real-life example. Every step along the way, I’ll release the Meeting Planner code as open-source examples you can learn from. I’ll also address startup-related business issues as they arise.

In this tutorial, I’ll be refining the responsive, HTML email templates that Meeting Planner uses to send out invitations, notifications, reminders, and account-related messages.

During the initial stage of Meeting Planner development, I’ve focused primarily on functionality and have not yet invested significantly in design or hired a designer. Today’s goal is to clean up the appearance of the existing HTML templates so that the basic emails are more readable and usable for people.

Likely half of people’s first experience with Meeting Planner will be via a Meeting Request email.

If you haven’t tried out Meeting Planner yet, go ahead and schedule your first meeting. I do participate in the comment threads below, so tell me what you think! You can also reach me on Twitter @reifman. I’m especially interested if you want to suggest new features or topics for future tutorials.

As a reminder, all of the code for Meeting Planner is written in the Yii2 Framework for PHP. If you’d like to learn more about Yii2, check out our parallel series Programming With Yii2.

Messages and Templates

The Early Templates

Initially, I used basic frameworks I found on the web to create early emails for Meeting Planner. They worked acceptably for the early development phase.

Here’s an example of our existing HTML emails; they’re functional but not very appealing. And, overall, I’ve decided that people don’t need this many options and links within their invitations. It was time to reduce the plethora of options for a simpler experience.

Meeting Planner Templates - Original HTML Invitation Template

Even with the templates I’d used, email tables often appeared corrupted without easy explanation:

Meeting Planner Templates - Example of Corrupted View of Invitation in Gmail

I’d been preparing to migrate to more professional email templates, but it was definitely overdue.

The Variety of Messages 

Here’s a summary of the messages that Meeting Planner regularly sends today:

  • meeting requests (i.e. invitations)
  • meeting updates for changes (also known as notifications)
  • meeting confirmations with calendar file attachment
  • meeting reminders
  • requests for contact information for an upcoming meeting
  • password reset requests

For the alpha test, I’m hoping I can reach a reasonable aesthetic baseline by applying open-source templates to be found on the web. At a later date, we’ll hire a designer to invigorate the templates, theme and brand together.

I began scouring the web for the best email templates.

Open-Source Template Resources

There are a number of helpful guides like these:

And a number of providers offer open-source templates of their own:

Initially, I was drawn to the Mailgun templates as I felt they were thoroughly tested and I could build on them, but ultimately, I decided to go with Sendwithus’s Oxygen email templates. Sendwithus is a synergistic marketing platform for Mailgun (or potentially other email providers), but I don’t have experience with their overall service.

Oxygen offered a complete family of templates for useful scenarios. It seemed simple, organized, and easily extensible:

Meeting Planner Templates - The Send With Us Oxygen Templates

It’s kind of them to offer their open-source email templates without requiring you to be a paying user. Go open source!

Integrating the New Templates

As an MVC framework, Yii separates layouts from body content. So I needed to break down the templates and monitor differences between variations within a group.

You can download the Oxygen family of templates from the Sendwithus GitHub, but they’ve not clearly divided the standard style elements common to each template, so you have to do that yourself.

It took some time to choose which templates I preferred, which elements I liked in each, and which CSS should be integrated into the layout.

Separating the Layout

Ultimately, here’s the new HTML layout (I’ve truncated the styles here for readability):

use yii\helpers\Html;
/* @var $this \yii\web\View view component instance */
/* @var $message \yii\mail\MessageInterface the message being composed */
/* @var $content string main view render result */
<?php $this->beginPage(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <meta http-equiv="Content-Type" content="text/html; charset=<?php echo Yii::$app->charset; ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><?php echo Html::encode($this->title); ?></title>
  <?php $this->head(); ?>
    <style type="text/css">
<link rel="stylesheet" media="screen" type="text/css" href=",700">
<?php $this->beginBody(); ?>
<body bgcolor="#f7f7f7">
<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%">
    <td align="left" valign="top" width="100%" style="background:repeat-x url( #ffffff;">
        <?= Html::img('', ['class'=>'force-width-gmail']);?>
        <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="" style="background-color:transparent">
            <td width="100%" height="80" valign="top" style="text-align: center; vertical-align:middle;">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
              <v:fill type="tile" src="" color="#ffffff" />
              <v:textbox inset="0,0,0,0">
                <table cellpadding="0" cellspacing="0" width="600" class="w320">
                    <td class="pull-left mobile-header-padding-left" style="vertical-align: middle;">
                      <a href=""><?= Html::img('', ['alt'=>'Meeting Planner logo','height'=>'47','width'=>'137']);?></a>
                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d;">
                      <a href=""><?= Html::img('', ['alt'=>[email protected] on twitter','height'=>'47','width'=>'38']);?></a>
                      <!-- <a href=""><img width="38" height="47" src="" alt="facebook" /></a>-->
                      <!-- <a href=""><img width="40" height="47" src="" alt="rss" /></a>-->
              <!--[if gte mso 9]>
<?php echo $content; ?>
<?php $this->endBody(); ?>
<?php $this->endPage(); ?>

Replacing the Common Elements

Within the templates, I had to replace a number of elements:

  • Logo
  • Supporting images 
  • Links

I created a logo file that would work for now, and I statically hosted it and the helper images, e.g. for Twitter, on Meeting Planner’s server.

Meeting Planner Templates - Logo

I also replaced the default links within the email with code for our site links.

Building a Footer Section

To simplify reuse across the application, I separated the code for the footer:

use yii\helpers\Html;
use yii\helpers\Url;
use common\components\MiscHelpers;
  <td align="center" valign="top" width="100%" style="background-color: #f7f7f7; height: 100px;">
      <table cellspacing="0" cellpadding="0" width="600" class="w320">
          <td style="padding: 25px 0 15px">
            <strong><?php echo Html::a(Yii::t('frontend','Meeting Planner'), $links['home']); ?></strong><br />
            Seattle, Washington<br />
        <tr><td style="font-size:75%;"><em>
          <?php echo HTML::a(Yii::t('frontend','Email settings'),$links['footer_email']); ?>
          | <?php echo HTML::a(Yii::t('frontend','Block sender'),$links['footer_block']); ?>
          <?php //echo HTML::a(Yii::t('frontend','Block all'),$links['footer_block_all']); ?>

Updating the Existing Templates

To integrate the templates, I wanted to start with the easiest one. Moving around complex, unfamiliar CSS and HTML is never simple.

I began with our Password Reset email template.

Password Reset

I chose Oxygen’s Welcome template shown below:

Meeting Planner Templates - Oxygen Welcome Template

Each of SendwithUs’s individual templates can be previewed and tested on their Litmus account.

Here’s our reset your password email now on an iPhone, much more aesthetically comfortable than before:

Meeting Planner Templates - Reset Your Password

I was a bit confused when the first Gmail attempts I received looked malformed to me. 

Meeting Planner Templates - Reset Your Password in Gmail

But reviewing their Litmus previews showed me that that’s what they look like in Gmail:

Meeting Planner Templates - Oxygen Welcome in Gmail

I later learned that Gmail requires more inlining of CSS than other services. I’ll guide you through repairing this in a future tutorial.

Here’s the passwordRequestToken.php code that helped generate the above:

use yii\helpers\Html;
/* @var $this yii\web\View */
/* @var $user common\models\User */
$resetLink = Yii::$app->urlManager->createAbsoluteUrl(['site/reset-password', 'token' => $user->password_reset_token]);
  <td align="center" valign="top" width="100%" style="background-color: #f7f7f7;" class="content-padding">
      <table cellspacing="0" cellpadding="0" width="600" class="w320">
          <td class="header-lg">
            Reset Your Password
          <td class="free-text">
            Hello <?php echo Html::encode(\common\components\MiscHelpers::getDisplayName($user->id)); ?>,
            Click the button below to reset your Meeting Planner password:
          <td class="button">
            <div><!--[if mso]>
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
                <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
            <![endif]--><a class="button-mobile" href="<?php echo $resetLink ?>"
            style="background-color:#ff6f6f;border-radius:5px;color:#ffffff;display:inline-block;font-family:'Cabin', Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;line-height:45px;text-align:center;text-decoration:none;width:155px;-webkit-text-size-adjust:none;mso-hide:all;">Reset Your Password</a></div>
  <td align="center" valign="top" width="100%" style="background-color: #ffffff;  border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;">
      <br />
<?php echo \Yii::$app->view->renderFile([email protected]/mail/section-footer-static.php') ?>

The Meeting Request

The invitation people receive as a request to meet is our most complex template. It’s sharing a brief introduction, possible places, possible times, and sometimes a note.

For this, I used the Oxygen Confirm template:

Meeting Planner Templates - Oxygen Confirm Template

I thought the Shipping and Date Shipped boxes could be used for sharing Place and Date Time options, and it’s worked fairly well.

Here’s what the invitation looks like now:

Meeting Planner Templates - Meeting Request Template

Certainly, the basic aesthetic appearance is much better. In the future, I may do some work to level and equalize the vertical heights of the places and date times boxes.

Here’s the invitation-html.php body code that helped generate the above:

use yii\helpers\Html;
use yii\helpers\Url;
use common\components\MiscHelpers;
use frontend\models\Meeting;
use frontend\models\MeetingNote;
use frontend\models\MeetingPlace;
use frontend\models\MeetingTime;
/* @var $this \yii\web\View view component instance */
/* @var $message \yii\mail\BaseMessage instance of newly created mail message */
  <td align="center" valign="top" width="100%" style="background-color: #f7f7f7;" class="content-padding">
      <table cellspacing="0" cellpadding="0" width="600" class="w320">
          <td class="header-lg">
            Your Meeting Request
          <td class="free-text">
            <p><em>Hi, <?php echo $owner; ?> is inviting you to an event using a new service called <?php echo HTML::a(Yii::t('frontend','Meeting Planner'),MiscHelpers::buildCommand($meeting_id,Meeting::COMMAND_HOME,0,$user_id,$auth_key)); ?>. The service makes it easy to plan meetings without the exhausting threads of repetitive emails. Please try it out below.</em></p>
            <p><?php echo $intro; ?></p>
          <td class="button">
            <div><!--[if mso]>
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
                <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">Track Order</center>
            <![endif]--><a href="<?php echo $links['view']; ?>" style="background-color:#ff6f6f;border-radius:5px;color:#ffffff;display:inline-block;font-family:'Cabin', Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;line-height:45px;text-align:center;text-decoration:none;width:155px;-webkit-text-size-adjust:none;mso-hide:all;"><?php echo Yii::t('frontend','View Request')?></a>
          <td class="w320">
            <table cellpadding="0" cellspacing="0" width="100%">
                <td class="mini-container-left">
                  <table cellpadding="0" cellspacing="0" width="100%">
                      <td class="mini-block-padding">
                        <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:separate !important;">
                            <td class="mini-block">
                              <span class="header-sm">Possible Times</span><br />
                                foreach($times as $t) {
                                      <?php echo Meeting::friendlyDateFromTimestamp($t->start); ?><br />
                                <?php // echo HTML::a(Yii::t('frontend','accept all times'),$links['accepttimes']); ?>
                                <br />
                                if ($meetingSettings->participant_add_date_time) { ?>
                                <?php echo HTML::a(Yii::t('frontend','suggest a time'),$links['addtime']); ?><br />
                <td class="mini-container-right">
                  <table cellpadding="0" cellspacing="0" width="100%">
                      <td class="mini-block-padding">
                        <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:separate !important;">
                            <td class="mini-block">
                              <span class="header-sm">Possible Places</span><br />
                              if (!$noPlaces) {
                                foreach($places as $p) {
                                      <?php echo $p->place->name.' '; ?>
                                      <span style="font-size:75%;"><?php echo $p->place->vicinity; ?> <?php echo HTML::a(Yii::t('frontend','map'),
                                      MiscHelpers::buildCommand($meeting_id,Meeting::COMMAND_VIEW_MAP,$p->id,$user_id,$auth_key)); ?></span><br />
                                <br />
                                <?php // echo HTML::a(Yii::t('frontend','accept all places'),$links['acceptplaces']); ?><br />
                                if ($meetingSettings->participant_add_place) { ?>
                                <?php echo HTML::a(Yii::t('frontend','suggest a place'),$links['addplace']); ?><br />
                              } else {
                                  Phone or video <br />
          <td class="free-text">
                if (!$noPlaces) {
                    echo HTML::a(Yii::t('frontend','Accept all places and times'),$links['acceptall']).' | ';
               if ($meetingSettings->participant_finalize && count($places)==1 && count($times)==1) {
                echo HTML::a(Yii::t('frontend','Finalize meeting'),$links['finalize']).' | ';
               <?php echo HTML::a(Yii::t('frontend','Decline request'),$links['decline']); ?>

        <?php echo \Yii::$app->view->renderFile([email protected]/mail/section-notes.php',['notes'=>$notes,'links'=>$links]) ?>
<?php echo \Yii::$app->view->renderFile([email protected]/mail/section-footer-dynamic.php',['links'=>$links]) ?>

What’s Next?

Now that the basic templates have been updated, I’ll begin working to repair their appearances in Gmail. And soon, we’ll implement notifications and reminders using them.

While you’re waiting for episodes about these features, schedule your first meeting and try out the new templates. Also, I’d appreciate it if you share your experience below in the comments, and I’m always interested in your suggestions. You can also reach me on Twitter @reifman directly.

I’m also beginning to experiment with WeFunder based on the implementation of the SEC’s new crowdfunding rules. Please consider following our profile. I may write about this more as part of our series.

Watch for upcoming tutorials in the Building Your Startup With PHP series. There are a few more big features coming up.

Related Links

Download Building Your Startup: Refining Email Templates

30+ Best Resume Tips: That Will Get You Noticed and Hired

Have you recently sent out 15 or more resumes, only to get a single interview.

Sound familiar? If so, you’re not alone. 

Yet, with just a few tweaks, your resume can get you a leg up on other

compiled the best resume tips and strategies into this quick-fire guide. These resume techniques will help you stand out, get more interviews, and land the job you really want. 

The best resume tips and tricks help you stand out to employers
The best resume tips and tricks help you stand out to employers quickly. (source graphic)

Note this post is part of our multi-part series on How to Create a Great Resume (Ultimate Guide). Here is our featured tutorial in this series, which is a great starting point: 

Now let’s jump into this collection of over 30 top resume tips and tricks to help polish your resume and improve your results.

Important Strategy Tips For Preparing to Make Your Resume

1. Read the Job You’re Applying for

Tailor your resume to every job

Read the job ad line by line. Highlight
phrases used repeatedly, company culture hints, and anything that resonates
strongly with your career experience.

“Include their
‘About Us’ page, company news, and annual revenue reports in your research.
These sources are a treasure trove of clues about company culture, goals, and
challenges,” says Sarah Dowzell,
COO Natural HR.

2. Send the Right Document

Are you applying for a job in the U.S.? Is
it an academic, scientific, or government job? Did they ask for a resume or curriculum
vitae (CV)? Read the application instructions. If you’re not sure which one to
send, check out this guide:

3. Don’t Have All the Skills Required? No

Do you pass on job opportunities where you
don’t have all the skills they’re looking for? Big mistake. Companies know
there’s no candidate with ALL the skills and characteristics they want.
Besides, they also get tons of applications from total beginners.

So what’s wrong with lacking one or two
skills they’re asking for? Nothing, so don’t
let it stop you
. It all comes down to how valuable you can be to their
team, based on your resume.

Emphasize your soft and transferable
skills. If you have the experience they need, but not in a company
setting, that’s okay. Side projects, volunteer experience, and academic work or
projects still count.

4. Don’t Write Your Whole Life Story

Your resume isn’t a diary detailing all the
job titles and duties you ever had. Think of it as a concise snapshot of your
present career and future potential.

5. Put the Impressive Stuff ‘Above the Fold’

the fold’
refers to the area people see before having to scroll down. In
print, it refers to the first half of the document, or the upper half of a
folded newspaper. This is the first part recruiters see after reading your
resume. Use it well.

Don’t waste space with a big header for
your name and contact details. It’s common practice to put this information at
the top anyway, so you don’t have to use a big font. This professional resume template has a personalized header, but keeps the space used to a minimum, so your summary statement and work experience stand out above the fold: 

Minimal resume template design
Professional resume design.

a good hook—an achievement, skill, or even a teaser question that will intrigue
the recruiter to read further.

Tips for Better Resume Writing

6. Use Digits in Writing Numbers

Numbers stand out in a sea of text, it also
makes your writing easier to read. Add numbers, statistics, percentages,
metrics, or ranges, to any skill or achievement in your resume to make it more

Number Use Examples:

  • Range:
    Supervised 5 to 9 IT associates while we developed a Fintech app for budgeting
    and investments.
  • Savings:
    Streamlined debugging process of new software, saving over 25 hours of work per
  • Frequency:
    Evaluated 7 website themes submitted by freelancers and in-house designers per
  • Results: 20% increase in ROI, while growing inbound traffic by 60,000 pageviews in the last year.

7. When Possible, Put Numbers at the Start

“People read
left to right so put numbers at the front of the bullets not buried in the
paragraph or at the end,” says Mike Sudermann, President &
Executive Recruiter at AscentSelect.

Example to Follow:

“15% reduction in
turnover after the creation and implementation of a new retention strategy”

8. Use Power Words Correctly

Power words are… well, powerful but only if
used in the right context and frequency.

Don’t forget these resume tips and tricks when
using power words:

  • Check the word’s definition in a dictionary.
    Don’t just use it because it sounds impressive. Don’t use words like ‘revolutionize,’ ‘pioneer’ or ‘dissuade’ if
    you can’t substantiate them, or if there are simpler words available.

Poor Example of Using Power Words:

“Improved team collaboration among
developers and database administrators using a revolutionized documentation

Doesn’t ‘revolutionize’ sound too much for this context?

  • Don’t use power words on every bullet in your
  • Avoid power words that are hard to comprehend.
  • Understand the nuances of your chosen power
    word. For example, ‘correspond’ means
    you communicated through email or letters. Communicate refers to both verbal
    and non-verbal communication.

out the downloadable power words I created for this guide:

9. Show, Don’t Explain, Soft Skills

Writing soft skills like ‘good
communication,’ ‘problem-solving,’
and ‘leadership’ is a waste of time.
Recruiters are immune to this.

Yes, these skills are still important. But
it’s better to prove you have these skills by subtly incorporating them into
your resume.

Leadership Example

“Led a
4-person team in creating a sales proposal for a new client.”

Teamwork Example

“Collaborated with the HR and marketing
team to create an employment roadshow that attracted top candidates from
different universities.”

10. Keep it Recent and Relevant

Only show the most recent and relevant job
titles you’ve held. Don’t waste valuable space for jobs you held in an industry
you’ve already left.

Remove job titles irrelevant to your
current professional goals. This frees up space to boost your qualifications
with more skills, achievements, or certifications.

11. Write a Summary

I often refer friends to companies where I
have an inside source, so I read lots of resumes. Until now, lots of them still
use a career objective that sounds like a wish list of what they want. 

Skip the objective. Write a summary
or career highlights instead. Limit it to 7 one-sentence bullets so recruiters
don’t gloss over this part. If you don’t want to write a customized resume for
every job application, re-write this part at least. For more information on this topic:

12. Maximize the First 3 Words of Your Bullets

In writing, I often read that the first
three words and last three words are what people remember most in headlines. I
think the same logic applies when it comes to writing bullets in your resume, because recruiters don’t read the whole document word for word.

Use numbers,
results, or power words to make your first three words count. Don’t waste it on
a preposition or article like ‘the.’

13. Avoid Clichés

Don’t use clichés like “creative,” “motivated,”
and “passionate.” They’re so overused that they’ve lost their meaning. Here are
the top 10 buzzwords to replace in your resume, courtesy of LinkedIn’s
2016 Global Buzzwords list

Top buzzwords to remove from your resume
Top buzzwords to remove from your resume.

14. Use
S.A.R. Format in Writing Achievements

“Use the formula ‘In Sitaution (S), I performed Action
, which led to Results (R).’ Adding achievements to your experience section
is one of the best things you can do for our resume. It gives recruiters a
tangible sense of how you use your skills to get results,” says Natalie
Severt, Career Expert at UptoWork.

Here’s an Example From

“To increase shopping cart value, I implemented an
upselling strategy, resulting in a 5% increase in sales.”

You can also
invert the formula to lead with the results: R.A.S.

R.A.S. Example – Leading With Results

“5% increase in sales after implementing an upselling
strategy for an e-commerce shopping cart.”

15. Create Curiosity

A little mystery is a good thing.

“You want the
reader to say to themselves, ‘Hmm… I am impressed this candidate had a 15%
reduction in turnover, but how did he do that?’” says Sudermann.

Don’t give away you best trade secrets. That curiosity is your bait in luring employers to call you.

they know what to do, what’s the sense in hiring you? It also lessens the ‘wow
factor of what you achieved, especially if they’re already familiar with your

16. Include Continuing Education

Add online courses and short seminars on
the education section of your resume. Don’t worry if it’s not taught in person,
or conducted by a well-known institution. Online education is widely recognized
nowadays so free and paid courses even from online providers carry weight.

If you took a course on Adobe Photoshop, MS Excel, or any other skill, don’t hesitate to
include it as long as it’s relevant to your job.

 17. Make Your Personality Shine

Your resume should reflect interesting
tidbits about your personality. Why?

Because high-achievers are interesting
people with diverse hobbies and interests. Employers often interview candidates
because something in their resume caught their eyes. Sometimes, these can come in the form of a sport, book, movie, side project, or volunteer

Some hobbies demonstrate skills related to
your job, such as how archery teaches focus and painting enhances creativity. These
activities do double duty to make you look both interesting and qualified for
the job.

Allow your personality to shine through in your resume. This stylish resume template has features to showcase your professional experience and skills, but also includes a “What I Like” hobbies section: 

Stylish personal resume design
Stylish personal resume.

Sprinkle references to books you’ve read,
sports you play, volunteer activities, and even places you’ve traveled in your
resume and cover letter.

18. Beware of Controversial Interests

Did you help a candidate during a political
campaign? Or maybe you raised money to support a church’s restoration. Both demonstrate
your work ethic and willingness to help. But those efforts could be used to
discriminate against you by someone who doesn’t agree with the cause. 

Tips for Better Resume Formatting

formatting increases your resume’s readability and helps focus attention on the most important
parts of it.

19. Organized Spacing

Should you use single space or double space
between job entries? Pick one and stick to it. If you want to combine different
spacing, make sure it’s consistent between different elements. For instance, no
spacing between bulleted points but double spacing between two sections (i.e.
education and work history).

 20. Font Size

My rule of thumb is if the reader needs reading glasses to read the resume, you have already aggravated them. Font size will depend on the specific font but it MUST be legible. Also, avoid cursive and other quirky fonts, the recruiter might think you’re not serious about the job”, says Michelle
, Certified Professional Resume Writer at Riklan Resources LLC.

21. Divvy Up Long Lists

Every profession has multiple skill sets related
to it. For instance, a UX designer has coding, design, illustration, and
administrative skills, just to name a few.

Dividing these skills into different lists
then itemizing what’s included in each clarifies your qualifications and
squeezes more keywords into your resume. It’s also easier to read this way.

22. Reverse Chronological Order

Start your professional history with your
current or previous job. Don’t hide your employment dates using a functional
resume, unless you have a long job gap or a similar situation that necessitates

23. Length

Limit your resume to two pages. Any more
than that and you run the risk of some pages not getting the attention it

24. No Center or Justified Text

People read from left to right, so it’s
easier if most of your text, except the dates, are aligned left. Using center and
justified alignment also makes your resume hard to read because the eyes need
to scan for where the text starts again, instead of just starting immediately
at the left most part of the page.

25. Job Title or Company Name: Pick Which One
to Bold

Format your job title in bold to emphasize
career progression between the job titles you’ve held. If your career progression
isn’t evident after a quick scan of your professional history, just emphasize
your employer’s name. You can also do this to highlight employment from big

Tips for Improving Your Resume Design

26. Prioritize Skimmability

White space is breathing room for the eyes.
It makes your resume skimmable and less overwhelming to read, which is always a
plus for recruiters who spend all day reading applications.

27. Insert Keywords on the Sly

“Use a small
font and white-colored text to insert extra keywords in your resume”, suggests
Darin Herle, Co-Founder of TrackMeet.

It’s a sneaky way to insert
keywords into your resume, so I suggest putting these invisible keywords on the
document’s footer to avoid detection.

28. Match the Company’s Colors

of a plain white-background document, one applicant submitted a resume that
matched our company’s colors. It was the most outstanding resume I’ve seen”,
says Alison Bradley,
Marketing Specialist and HR Assistant at Shiny Window Cleaning.

Using the company logo’s color theme shows
you did your research, and that you’re also passionate about the job.

29. Send a Traditional PDF, Even if You Have an
Infographic or Creative Resume

Creative resumes can help you stand out and get noticed. We have many resume templates with high quality, beautiful styles on Envato Market, such as those curated in these articles: 

Staffing firm The
Creative Group
polled more than 400 U.S. marketing and advertising
executives, and found that 78% of them still prefer traditional resumes in PDF
and word format.


Creative resumes can help you stand out but
unless you have an insider, there’s no way to know for sure if an employer
prefers them over traditional resumes. Just to be safe, send a PDF or word file
resume even if your main resume is an infographic or video.

There are also a number of professional resume templates on Envato Market with traditional and more modern styles. And many easy to customize designs that can be exported to both PDF and Word formats. Here is a simple resume template, with minimal infographic elements: 

Simple resume template design
Simple resume design.

More Useful Resume Tips

30. Add a Resume Supplement

It’s impossible to show all your
qualifications in two pages, so take advantage of LinkedIn, portfolio sites,
and personal websites. Just cover all the important details and accomplishments
on your resume, and then let your online assets do the rest.

A printed portfolio of your works and a recommendation
letter from an influencer are also good resume supplements.

 31. Don’t Give them Reason to Toss Your Resume

“When I’m looking through resumes, I’m not looking for reasons to
interview someone. I’m looking for reasons to toss the resume in the shredder”, says Joshua
I. Wilson
, CMT, Chief Investment Officer at WorthPointe.

Busy C-executives aren’t the only ones guilty of this. Many
recruiters read resumes with the intention of weeding out applicants instead of
qualifying them. After receiving hundreds of resumes with similar qualifications, it’s hard to blame them.

A recruiter’s job is to look for the best candidate,
not the average. Scrub your resume clean of typos and dull job
responsibilities. Emphasize what makes you unique. 

32. Google Me

“If your online presence is extensive and impressive
enough, tell the recruiter to Google you to get a sense of your accomplishments,”
says Herle. 

This is applicable to all applicants, not
just freelancers, writers, developers, and designers whose work are often available

 33. Name Your File

Use your name, job title, and the word ‘resume
as the document’s file name. That will make it easier for the recruiter to find
your job application, after you follow-up or send them a thank you note.

Improve Your Resume One Step at a Time

know reading everything suggested on this list is overwhelming. Doing it all is
even more tiring, so take it one step at a time. Some of these resume tips take
a few seconds to finish, while others might take half an hour—or more.

You don’t have to do it all at once. Make a few tweaks, then leave it at that and just pick up where you left off the next day. Improve your resume one step at a time. 

Learn more about how to make a great resume in our ultimate guide.

Download 30+ Best Resume Tips: That Will Get You Noticed and Hired

How to Highlight Freelance Work on Your Resume

If you freelance do you need a resume?

Some experts would argue that resumes are outdated when it comes to freelancing. The argument is that your website, portfolio, and social media presence contain enough information for a client to hire you. 

While it’s true that it’s possible to get freelance gigs without a resume, if you don’t have one you may be missing out on some lucrative opportunities. Even if you don’t use your freelance resume for every potential client, it’s better to be prepared and have one ready for when you need it.

One reason freelancers avoid making resumes is that creating a resume as a freelancer can be challenging. Most resume formats were designed with traditional employment in mind. It can be hard to fit a freelance career into a traditional resume structure.

Working on Freelance Resume
Working on freelance resume. (graphic source)

In this article, I outline why your freelance resume is important. I’ll also show you how to overcome resume obstacles that freelancers face. How best to include freelance work on your resume. Finally, I’ll share some template resources that work well for designing your freelance resume quickly.

To learn more about creating a resume, study our resume guide, and if you’re a freelancer then let’s get started.

Why Your Freelance Resume Is Still Important

You’re doing great as a freelancer. You’re getting lots of gigs and working regularly. So far, no one has asked for your resume.

That’s great. Now is the perfect time to update your resume to include your freelance work—before someone asks for it. 

When someone does asks for your resume, you want to have one nearly ready to go. You don’t want to have to spend a few days creating your freelancer resume under time pressure. It’s best to tackle this early and be prepared.

Here are some common scenarios when you might need a resume as a freelancer:

  • You’re applying for work with a larger client. In larger companies, freelancers (often referred to as independent consultants) are often asked to provide resumes. A large company is also more likely to use an Applicant Tracking System (ATS) to screen resumes.
  • You’re applying for work through an agency or a recruiter. If you’re looking for work through a third party, such as an agency or a recruiter, they may ask you for a resume that they can restyle and present to their end client.
  • You’re returning to traditional employment. The resume is still the mainstay of looking for traditional employment. If you’ve been freelancing for a while and are searching for a traditional position, it can be challenging to create a resume to encompass all your experience.
  • You’re applying for a professional license or certificate. In some fields, you may be required to submit a resume. Even if you’re not asked directly for a resume, it can serve as a reference to help you describe your experience.
  • You’re applying for an industry award. Sometimes an awards committee wants to see a list of your accomplishments. A resume is an easy way to summarize your accomplishments quickly.
  • You’re speaking at a conference or meeting. If you’re asked to give a presentation, the conference meeting organizer will probably want to introduce you. A resume is one way to provide them with the information they need.
  • Any other time a client requests one. Each client is different. Many will be happy with just a portfolio link. Others will insist on a resume. It would be a shame to miss out on a gig because you didn’t provide the client with the information they asked for.

Note that a resume does not replace a portfolio for a freelance creative. Rather, it supplements it. Be sure to include a link to your portfolio on your resume.

It’s also important to tweak your resume each time you submit it. Use it to emphasize how your experience and skills meet that specific client’s need. There’s no such thing as a “one-size-fits-all” freelancer resume.

How to Handle Common Freelance Resume Problems

One reason freelancers don’t use resumes is because it can be difficult to know how to include freelance work on a resume. Here are some common dilemmas freelancers face when creating their resumes:

  1. What job title do I give myself?
  2. Do I list freelance clients by name as separate jobs?
  3. How much detail do I include about my freelance projects?
  4. What if there are slow periods in my freelancing career? Will these look like gaps in employment?
  5. Do I include a link to my website or online portfolio?
  6. What if I’m freelancing alongside a full-time job? Do I include both?
  7. How do I format my resume? 

I’ll answer each of these topics separately: 

1. Job Title

As a freelancer, your clients don’t provide you with a job title. It’s up to you to come up with your own job title.

Since your freelancing business is a small business, you may be tempted to put a title on your resume that reflects that such as “owner” or even “CEO.”  While such a title might technically be correct, using it on your resume probably won’t help you find work.

Many experts suggest using a title that describes the actual work you performed for your client. For example, the job title “Independent Graphic Designer” is more informative for a potential client or employer than the job title “Owner.”

2. Listing Freelance Clients

Should you list your clients by name? If you’ve had a lot of clients, do you need to list each one separately?

First, consider any contract agreements you made. For example, if you are a freelance writer who does ghostwriting your contract may specify that you can’t name the client. In that case, describe the work only. Consider something like this example:

  • Served as a ghostwriter for a corporate blog. Provided weekly posts of between 500 and 1000 words.

If the contract allows it, list the client’s name while making it clear that you were not an employee. Adding the words “contractor” or “independent worker” after the company name should be enough.

If you’ve done a lot of freelancing work, you don’t need to list every single client you’ve ever worked for. Career experts agree it’s better to highlight work you did for a well-known company or brand over work you did for little-known companies.

When listing a client, make sure there is a contact at the company who can talk about the work you did for that client. Freelance clients do check references.

The best solution is to use your freelancing business name as an umbrella and list the most important client names as sub-points below. Lump lesser known clients and occasional clients together.

Here’s an example from a freelance graphic designer resume:

Graphic Designer, Anytown Consulting 2012-2016
Provided graphic design services for multiple clients including:

  • Big Company No. 1 (Consultant)
    Designed and created newsletter design 
  • Big Company No. 2 (Consultant)
    Developed logo and business card design
  • Smaller Company No. 1 (Consultant)
    Created banner ad and brochure
  • Consulted with additional clients about marketing design needs
    and corporate branding

3. How Much Detail Should You Provide?

Space is at a premium on your resume. A longer resume is not a better resume. This is true for freelancers and non-freelancers alike. A resume for even a senior-level professional should not exceed three pages. (Some experts recommend no more than two pages.)

For that reason, your resume needs to be edited tightly. Limit yourself to a single sentence to describe each freelancing gig that you list. Do use keywords that emphasize your skills and experience.

Omit the Job Objective section. It has no place on today’s resume. It may even cause your resume to be rejected. Learn more about resume objectives versus how to use summary statements instead: 

4. Dealing with Slow Periods and Gaps

Freelancing is known for its ups and downs. Your work may be hectic one month, and slow the next.

You may worry that the ups and downs of freelancing will look bad on your resume. If you use the name of your freelancing business as an umbrella and list your freelancing gigs beneath it, you don’t need to worry that slow months look like a gap in employment.

If you do have legitimate gaps in employment, times when you were neither employed nor running a freelancing business, be honest. It’s better to be honest than to make something up. Some specialists recommend explaining long gaps right on the resume.

For example:

  • Left workforce to care for sick family member, 2011-2012

Volunteer work can also be a good way to fill a gap in employment. This is especially true if the volunteer position is related to the job you are looking for.

Whether or not you decide to list the reason for your gap on your resume, be ready to talk about it in an interview. You will almost certainly be asked about it. If the gap is because you were looking for work, explain that.

If you’re qualified and have an otherwise solid work history, an explainable gap in your work history can be overcome.

5. Sharing Online Information

As a freelance professional, you likely have an online portfolio or website that you want to link to on your resume. You may also want to include links to your social media accounts such as LinkedIn.

Most HR professionals agree that it’s important to share your online information if it’s professional and relevant to your job search. Include your links right after your contact information at the top of the resume.

Be careful, though. Just because you have a social media account doesn’t mean it should be on your freelance resume. Include only those accounts that are up-to-date.

6. Part-Time Freelancing

One dilemma unique to freelancers is whether they should include part-time freelance work on their resume. Here are some questions to help you decide:

  1. Is the part-time work relevant to the position I am applying for?
  2. Do I need to list the part-time work to cover an employment gap?

If you need to list the part-time freelancing to cover an employment gap, do so. Focus on anything relevant to the job you are applying for.

If the job is not relevant to the position you are applying for and you don’t need it to cover an employment gap, then leave it off your resume.

7. How an ATS Affects Your Freelancer Resume

Many medium to large companies use an Applicant Tracking System (ATS) to screen resumes. What this means is that your resume could be rejected before a human even sees it. These systems can even affect freelancers seeking long-term projects or returning to traditional employment.

Here are some pointers to help your resume get past the ATS:

  • Submit the resume in .Doc or .TXT format
  • Focus on keywords used in the job listing
  • Use easily identifiable labels for resume sections
  • Avoid using images, tables, or symbols
  • Fix any spelling errors or typos

Freelancers are often encouraged to submit a functional or creative resume. While those resume formats work great for resumes that will be seen by humans, those formats may cause an ATS to reject your resume.

To learn more about how to create a resume and format it properly, review these tutorials:

Other Problems Freelancers Face

Once your resume gets through the initial screening process, you may still face some struggles.

Here are some common worries that employers have about freelancers:

  • Culture Fit – Freelancers are often viewed as loners. An employer may worry that a freelancer won’t take instructions well. They may wonder how you’ll work with others.
  • Qualifications Matching – Employers often want someone with the exact experience in their ad. As a freelancer your experience is probably broader and more varied than what the employer is looking for.
  • Salary Negotiations – If you’ve been self-employed, salary negotiations can be tough. Employers like to base the salary they offered you on a past salary.

The best way to deal with these issues is to expect them. Be prepared when you go to the interview.

To deal with culture fit worries, explain why you believe you’re a good fit for the company. Stress how your values align with theirs. Emphasize that you are a team player who works well with others.

For qualification worries, focus on those projects and parts of projects where your responsibilities were closest to the position you’re applying for.

To learn what salary you should accept, do some research. Find out what the average pay range is for the job title you are being considered for. That will give you an idea of what you should ask for. Don’t forget to factor in any benefits you are offered.

How to Make Your Resume Stand Out

At some point, your resume will be reviewed by real people. This is why it’s important to make your resume stand out. Appearance counts.

Templates can help you create an attractive, professional-looking resume. It’s not too difficult to use a template. For step-by-step instructions on how to use a Word resume template, review:

Here’s a curated list of creative resume templates that can work well for many freelancers:

You can find even more great resume templates at Envato Market (GraphicRiver), with numerous trending new designs to choose from.


When it comes to creating a resume, freelancers face unique challenges. As a freelancer, you may believe that you don’t need a freelance resume. But whether you want to continue freelancing or transition back to traditional employment, it’s a good idea to keep your freelance resume updated.

Have you faced any challenges creating your freelance resume? Share your experiences in the comments.

Download How to Highlight Freelance Work on Your Resume

Building RESTful APIs With Flask: ORM Independent

In the first part of this three-part tutorial series, we saw how to write RESTful APIs all by ourselves using Flask as the web framework. In the second part, we created a RESTful API using Flask-Restless which depends on SQLAlchemy as the ORM. In this part, we will use another Flask extension, Flask-Restful, which abstracts your ORM and does not make any assumptions about it. 

I will take the same sample application as in the last part of this series to maintain context and continuity. Although this example application is based on SQLAlchemy itself, this extension can be used along with any ORM in a similar fashion, as shown in this tutorial.

Installing Dependencies

While continuing with the application from the first part, we need to install only one dependency:

$ pip install Flask-Restful

The Application

Before we start, you might want to remove the code that we wrote for the second part of this tutorial series for more clarity.

As always, we will start with changes to our application’s configuration, which will look something like the following lines of code: 


from flask.ext.restful import Api

api = Api(app)

Just adding the above couple of lines to the existing code should suffice.


import json
from flask import Blueprint, abort
from flask.ext.restful import Resource
from flask.ext.restful import reqparse
from my_app.catalog.models import Product
from my_app import api, db

catalog = Blueprint('catalog', __name__)

parser = reqparse.RequestParser()
parser.add_argument('name', type=str)
parser.add_argument('price', type=float)

def home():
    return "Welcome to the Catalog Home."

class ProductApi(Resource):

    def get(self, id=None, page=1):
        if not id:
            products = Product.query.paginate(page, 10).items
            products = [Product.query.get(id)]
        if not products:
        res = {}
        for product in products:
            res[] = {
                'price': product.price,
        return json.dumps(res)

    def post(self):
        args = parser.parse_args()
        name = args['name']
        price = args['price']
        product = Product(name, price)
        res = {}
        res[] = {
            'price': product.price,
        return json.dumps(res)


Most of the code above is self-explanatory. I will highlight a few points, though. The code above seems very similar to the one that we wrote in the first part of this series, but here the extension used does a bunch of behind-the-scenes optimizations and provides a lot more features that can be leveraged. 

Here the methods declared under any class that subclasses Resource are automatically considered for routing. Also, any parameters that we expect to receive along with incoming HTTP calls need to be parsed using reqparse.

Testing the Application

This application can be tested in exactly the same way as we did in the second part of this tutorial series. I have kept the routing URL the same for the same purpose.


In this last part of this three-part tutorial series on developing RESTful APIs with Flask, we saw how to write ORM-independent RESTful APIs. This wraps up the basics of writing RESTful APIs with Flask in various ways. 

There is more that can be learned about each of the methods covered, and you can explore this on your own, using the basics you’ve learned in this series.

Download Building RESTful APIs With Flask: ORM Independent

How to Draw a Unicorn Step by Step

Final product image
What You’ll Be Creating

What I love most about drawing is that it lets us picture unreal things as if they were real. If you want to feel the thrill of creation, in this tutorial I will show you how to draw a beautiful, realistic unicorn. These creatures were not just “horses with horns”—they were described as similar to goats, with cloven hooves and a donkey-like tail. Their horns were said to have magical powers, but since the animals were so timid, you’d need the help of a gentle maiden to capture one.

Today, unicorns are no longer believed to be real, but you can bring one to life with art. You don’t need to know how to draw horses, or horns—I will lead you step by step! But if you want to be better prepared, try this tutorial first:

1. Sketch the Pose of a Unicorn

Step 1

Start with an oval for the chest. It doesn’t need to be a perfect oval, and feel free to correct it as many times as necessary. The lines I’m showing you here are clean so that you can see exactly what I’m drawing—normally they would be much messier!

start a pose with oval

Step 2

Add the rump. Its size and distance from the chest will define the shape of the body. If this were a real horse, you’d need to be careful to achieve the right shape, but unicorns aren’t really horses—they’re considered a different species, often smaller/slimmer. So don’t worry if yours looks different than mine!

oval with half oval makes the body

Step 3

Add the neck and head. Again, you can use my proportions or modify them for something more original.

simple neck

Step 4

You can choose any pose you like for your unicorn, but it will be the most realistic if you borrow it from a horse. Check my tutorial about drawing horses to pick a pose. I’ve decided to use a frame from a canter—it’s a fast but very graceful running gait.

how to start drawing a horse in canter
horse in canter simple drawing

Step 5

Finally, add a tail:

drawing horse tail

2. Draw the Body of a Unicorn

Step 1

Now we’re going to add shapes characteristic for a horse body. Draw the head and the muzzle…

how to start drawing horse head

Step 2

… then connect them with two lines and add the ears on top of the head.

how to draw horse head

Step 3

This will be the eye:

how to start drawing horse eye

Step 4

Add some details on the head and start building the hooves. Adjust the direction of lines to the angle of the legs. Normally, the hooves would be larger, but in my vision unicorns are quite similar to deer in this manner.

how to draw horse hooves

Step 5

Finish the hooves:

how to finish drawing horse hooves
how to draw realistic horse hooves

Step 6

Add the wrists and heels. Yes, these aren’t knees!

how to draw horse knees

Step 7

Add some details to the heels. The bones are really showing in this area, and they create a typical horse look.

how to draw horse leg details

Step 8

Add the thigh and the arm.

how to draw horse thigh arm

Step 9

Connect the parts of the legs with gentle lines.

how to draw horse legs

Step 10

Before we draw the neck, it’s good to add some guide lines: the back of the shoulder blade and the width of the neck.

how to draw horse neck

Step 11

Now you can finish the outline of the body.

how to draw horse body

3. Draw a Unicorn Horn

Step 1

The horn of a unicorn may look complicated, but there’s actually a simple formula for it. Start by defining its length and direction with a line.

how to draw a unicorn

Step 2

Cross it with diagonal lines, skewing them more and more as you get close to the tip.

how to draw a unicorn horn

Step 3

Add a copy of every line below, keeping a little distance from the other line.

how to draw a spiral horn

Step 4

Connect each line with its copy with an arc.

unicorn horn tutorial

Step  5

Draw concave arcs in between.

horse horn tutorial

4. Finish the Drawing

Step 1

What would a unicorn be without its fabulous mane? Add some beautiful hair here and there. Traditionally, unicorns have been pictured with tufted tails, but feel free to use a normal horse tail if you want.

how to draw unicorn mane

Step 2

Your drawing looks very dirty right now, with many lines crossing and covering each other. But that’s normal! To create a clean picture out of this, you can use one of these tricks:

  • Create a new layer, if you’re drawing digitally.
  • Scan your drawing, lower its lightness/opacity with a program, and then print it with the sketch barely visible.
  • Draw over the most important lines with a ballpoint pen or a marker. Put a new sheet of paper above the sketch—the dark lines should be seen through.

Remember: tracing your own drawing is not cheating!

how to draw clean drawings

Step 3

Continue drawing on the new layer/printed sketch/new sheet of paper. This time, be more careful with lines, because they’re the final ones. You can again use my tutorial about drawing horses to add realistic details, but you can also finish it with your own style. It’s also always good to use a reference for this part:

how to draw detailed horse
Cloven hooves remind us that this is not actually a horse
how to draw a unicorn with pencil
how to draw a realistic unicorn

Fabulous Drawing!

Unicorns may not be real, but you have just created one! Is there something else you’d like to learn to draw? Let me know in the comments!

realistic unicorn drawing tutorial

Download How to Draw a Unicorn Step by Step

What’s New in watchOS 3?


This year at WWDC, Apple officially unveiled watchOS 3, their latest update to the Apple Watch’s core software. While there were only a few “headline” user features shown off, watchOS 3 opens up a lot of APIs for developers to create even more functional watchOS apps. A lot of these APIs have been available on iOS for multiple years and have now been added to watchOS, including CloudKit, SpriteKit, and SceneKit.

In this tutorial, I’ll show you how you can use all of these new APIs in your watchOS 3 applications. I’ll also show you some of the most significant additions to existing watchOS frameworks.


This tutorial requires that you are running Xcode 8 on macOS 10.11 or later. It is also assumes that you are comfortable with the basics of WatchKit and developing watchOS apps. If you aren’t, then I recommend checking out some of the following tutorials covering the basics of WatchKit:

You will also need to download the starter project from GitHub.

1. New Frameworks

SpriteKit and SceneKit

Two of the biggest additions to watchOS 3 for developers are the SpriteKit and SceneKit frameworks. These frameworks provide rich 2D and 3D graphics respectively in Apple Watch applications. You can display scenes in your apps by using the new WKInterfaceSCNScene and WKInterfaceSKScene interface objects, which are both subclasses of WKInterfaceObject. Similarly to SCNView and SKView on iOS, these interface objects provide properties and methods to manipulate your scenes, including play/pause functionality as well as default lighting.

Open up the starter project and open up the Interface.storyboard file. You will see that in this file, I have already set up some basic interfaces for you. For this part of the tutorial, we are only interested in the topmost interface controller with a single button. Go to the Object library in the bottom right corner of Xcode and drag in a SceneKit Scene object above the Play / Pause button:

SceneKit Scene Interface Item

Next, open up the Attributes Inspector and assign the scene file (Scene.scn) included in the project to the Scene property of this interface object:

Scene Property

To work with this in our code, open up the SceneKitInterfaceController.swift file in the Assistant editor and create and link an outlet called sceneItem for your interface object:

@IBOutlet var sceneItem: WKInterfaceSCNScene!

Please note that in order for your SceneKit content to render correctly, you must link the interface object in your storyboard with an IBOutlet in your code. At the time of writing this tutorial, it is not mentioned anywhere in Apple’s documentation, but this setup is required.

Lastly, to implement the play/pause functionality of our button, replace the existing didPress(button:) method with the following:

@IBAction func didPress() {
    if let paused = sceneItem.scene?.isPaused {
        sceneItem?.scene?.isPaused = !paused

Build and run your app and you will see a red cube spinning on the screen:

Spinning Cube

Pressing the Play/Pause button should stop and start the animation of your scene as needed.

While we just covered displaying SceneKit content in this tutorial, adding support for SpriteKit is very similar. The only major difference is that SpriteKit assets must be used with a WKInterfaceSKScene object rather than a WKInterfaceSCNScene object for SceneKit.


Another addition with iOS 10 and watchOS 3 is the UserNotifications framework. This framework provides a simple way to work with both local and remote notifications being sent and delivered by your application.

If you want to learn more about this framework, check out my tutorial covering it here:

Please note that not all the APIs in the UserNotifications framework on iOS are available in watchOS. Those that are present, however, function identically on watchOS and iOS.

CloudKit, GameKit, CoreAudio, and AVFoundation

Another major addition in watchOS 3 is the availability of frameworks which were previously only on other Apple platforms, including CloudKit, GameKit, CoreAudio, and AVFoundation. 

While the full set of APIs from these frameworks aren’t available in watchOS, the classes and methods that can be used in Apple Watch apps work identically to their iOS and macOS counterparts.

2. Existing Frameworks

In addition to adding many new frameworks, watchOS 3 also brings about many changes to existing frameworks—including WatchKit and ClockKit. 


The first new feature in the WatchKit framework we are going to look at is the new WKCrownSequencer class. This class allows you to retrieve detailed data about the digital crown, including its current rotation speed and whether or not it is idle. While this information is accessible via properties on a WKCrownSequencer object, the WKCrownDelegate protocol enables you to track changes more easily. 

All WKInterfaceController subclasses now have a crownSequencer property, which is an instance of the WKCrownSequencer class. This means that to track changes in the digital crown, you only have to specify a delegate object and implement the methods you want.

In your project, open up your CrownInterfaceController.swift file and make your CrownInterfaceController class conform to the WKCrownDelegate protocol:

class CrownInterfaceController: WKInterfaceController, WKCrownDelegate {

Next, replace your current awake(withContext:) method with the following:

override func awake(withContext context: Any?) {
    super.awake(withContext: context)
    crownSequencer.delegate = self

In the above code, we call the focus method on the crownSequencer because otherwise it will not receive events from the digital crown. If an item in your interface gets focused by the user tapping on it then you will need to call this method again for the crownSequencer to detect digital crown movement.

Lastly, add the following two methods to your class:

func crownDidRotate(_ crownSequencer: WKCrownSequencer?, rotationalDelta: Double) {
    if let speed = crownSequencer?.rotationsPerSecond {

func crownDidBecomeIdle(_ crownSequencer: WKCrownSequencer?) {
    label.setText("Crown\nis idle")

So that this interface is loaded, open up your Interface.storyboard file and drag the Initial Controller arrow to select the bottom interface:

Crown Interface Controller Entry Point

Build and run your app and you will see that, when the watch’s digital crown is moved, the on-screen label reflects the current status:

Digital Crown Status

If you are using the Apple Watch simulator, then you can “turn” the digital crown by just scrolling with your Mac’s mouse or trackpad.

In addition to detecting digital crown movements, the WatchKit framework in watchOS 3 also provides the following classes for your app to detect gestures without using interface items:

  • WKLongPressGestureRecognizer
  • WKPanGestureRecognizer
  • WKSwipeGestureRecognizer
  • WKTapGestureRecognizer

As their names suggest, these gesture recognisers work very similarly to the way gesture recognisers work on iOS. These classes are particularly useful to detect touches if you’re using SceneKit, SpriteKit or a custom image-based interface to display content.


watchOS 3 also brings a few new important features for apps that take advantage of the ClockKit framework to provide complications on the watch face. 

Firstly, because of the new background processing functionality for apps in watchOS 3, if a user puts one of your app’s complications on their watch face, then your app will remain in memory and remain in a ready-to-launch state. Additionally, your app is guaranteed to be able to update its content in response to push notifications up to 50 times per day. 

If you want to learn more about the new background app functionality in watchOS 3, I have already covered this topic here:

Next, some new templates have been added to the extra-large complication family, including CLKComplicationTemplateExtraLargeColumnsText, CLKComplicationTemplateExtraLargeRingImage, CLKComplicationTemplateExtraLargeRingText, and CLKComplicationTemplateExtraLargeSimpleImage.

Lastly, the CLKTextProvider class now provides an API to create a localisable text provider to use different text for specific device regions.

Apart from these small additions, ClockKit remains unchanged from last year’s watchOS 2 release. If you want to learn more about this framework and how to use it yourself, you can check out my tutorial covering it here:


While PassKit was already available in a limited form in watchOS 2, watchOS 3 brings full support for in-app Apple Pay purchases right on the watch. This is done through some new classes and a protocol, including:

  • WKInterfacePaymentButton: used to show a pre-designed Buy with Apple Pay button.
  • PKPaymentAuthorizationController: used to display a model interface with payment information for the user to confirm. This class performs the same role as the PKPaymentAuthorizationViewController class but does not depend on UIKit. This means that the PKPaymentAuthorizationController class can be used on both iOS and watchOS.
  • PKPaymentAuthorizationControllerDelegate: classes can be made to conform to this. This protocol allows your app to respond to the user’s actions regarding your payment, including when they select a payment method or when the payment has been authorised.


Overall, watchOS 3 is a significant release for developers of Apple Watch apps. Games and media-rich applications are now far easier to create with the addition of frameworks, including SceneKit, SpriteKit, GameKit, and AVFoundation. The addition of CloudKit and improvements to WatchKit, ClockKit and PassKit allows you to create more functional apps than ever before while becoming more independent of the iPhone.

As always, please be sure to leave your comments and feedback in the comments section below. For a closer look at how to create an app in WatchOS, check out the watchOS 2 From Scratch course here on Envato Tuts+.

Download What’s New in watchOS 3?

360 Basics: How to Stitch With Autopano Video Pro

In this tutorial you will learn the basics of how to use Kolor Autopano Video Pro to stitch together footage for 360 videos. We go through the entire process from start to finish, along with a few extra tips to add 360 video metadata to your footage so it can be played back in 360° video players online, like on YouTube. If you are not familiar with 360 videos, this lesson can also act as an introduction to the workflow of 360 videos.


In This Video Tutorial

  1. You’ll learn
    how to import your footage
    into Autopano Video Pro (0:41)
  2. I’ll show you how to
    synchronize your clips
    so they are all aligned perfectly (1:15)
  3. Then you’ll learn how to stitch your clips together (2:25)
  4. Then you’ll reorient the horizon (3:10)
  5. And set a starting point (4:54)
  6. We’ll take a look at the stabilization features (5:25)
  7. And color
    correction features
  8. You’ll learn how to decide which blending mode work best for a
    given type of footage (8:08)
  9. Then we will cover how to adjust and fine tune settings (8:38)
  10. Then you’ll learn how to export your video (9:53)
  11. Finally, I’ll show you how to add 360 metadata to your video and make it ready for upload (11:44)

What You Need

In order to follow along with this lesson you will need Kolor Autopano Video Pro along with some footage shot on a 360 camera setup. You can download a trial version of Kolor Autopano Video Pro to follow along. I’ll also show you some addition steps using the Google 360 Video Metadata App and Adobe Premiere Pro CC 2015.3, but these are not required.

1. Import and Prepare Your Footage

Once you launch Autopano Video Pro, the first option you see is to drag and drop your videos into the project. You can use any type of camera setup, as Autopano will work with just about any rig, but make sure you import all the clips. Once you’ve dropped in all of your clips you can see
each one of them in the preview panel. 

Import your clips into Autopano Video Pro

2. Synchronize and Stitch

With advanced camera rigs, like the GoPro Omni, all the cameras start in sync. You may be using a camera setup that has multiple separate cameras
that aren’t in sync.

There are two methods we can
use to synchronize our footage: audio synchronization and motion synchronization. Now, if your camera is on
something is moving, it might be better to use the motion
synchronization, but when all the cameras are locked down
on a tripod, as in our example, audio synchronization works well.

Head up to the
synchronization tab and select the method that’s best for your footage. Start with a search range of 10 seconds: the default.

In our example, we ended up with two different clips off by one millisecond. That’s not even a full frame worth, so we didn’t have to worry about adjusting the nearest frame. If you need to you can adjust
any of your footage using the nearest frame tools.

The next
step is to stitch your footage. Click on
the Stitch tab, and find the camera pre-sets. Select you camera and click the Stitch button.
Autopano Video Pro will now run through and stitch all the clips
together and output an equirectangular image. 

Oops thats not right

3. Fine-Tune the Horizon Line

It’s very common at this stage to get an image that’s pretty wonky looking. You’ll usually need to make some fine-tuning adjustments. Just click and drag to adjust the orientation of your equirectangular

One thing to note with our example: it was an outdoor shot, on a hillside, with no real
horizon line to look at. Making shots is a lot easier when you can see the horizon, but that’s not always possible. However, you can look for something else: a straight vertical edge. Put the straight edge in the center of your frame, this will help gauge
your equirectangular video and get everything lined up. The trees were a good vertical line in our example.

Set a starting point for your viewers

4. Set a Starting Point

You need to set a default field of view for you viewers when they start up a 360 video. In our example, that was where the bikers were going come through from the trees. The reason you want the primary action in the center of the screen at the start of a 360 video is because the viewer will be looking all around once the video starts. You want to immediately direct their attention by already having them oriented towards the action.

The best way to focus your viewer is to move the primary action area to the center of the screen (the direct center of the 360 video is facing forward for the viewer when they start watching). If the point of interest was too far towards the edges, this would force the viewer to ‘wander’ too much, looking left or right to find the action. Reorienting the 360 video so that the action is in the center of the frame is easy: go to the beginning, then just click and drag on the preview, the same as you do to fix the horizon line.

5. Preliminary Render

At the bottom your clip there are four different timelines. We have the
horizon, the stitch, color, and mask and this so we can make
adjustments to each one of these independently of the other. When you finish adjusting everything and are happy with your video, go ahead and click Apply.

At the top of your video are red and purple
bars. The red indicator indicates the render in and
out. Purple
is the current selection. If you just want to do adjustments on certain sections of
the video, you can adjust that with these red and purple indicators.

After you’ve rendered, go ahead and make the video full-screen. Take a closer look and make sure everything is right.

Rendering in Autopano video pro

6. Global Corrections

All right, that’s the basic process, but in most cases your video is going to need a little bit more correction and adjustment to make it perfect.


Our next tab is Stabilization. We’re going to save the deep dive for another day, but here are the
basics of what goes into it:

Click on Stabilization. If your shot is locked down on a tripod, like our example,  you don’t really need to do any
stabilization to it. But if you have a moving shot and you
want to use stabilization you can adjust the compensation level here. What this will do is apply to your selection (anywhere the purple indicator is).
So if you need to process your entire video,  make sure the selection is stretching the
entire time line.

For in the compensation level, you can adjusted different points.  At about 50% it’ll remove any fast jarring motions of your camera but still let the video be dynamic, and responsive to any panning throughout the video. If you want your video to be basically motionless and kind
of locked down you can move it all away to 100%. Click
on compute stabilization to start the process.

Picture Correction

Next up is the Color tab. Now with 360
video, because we have so many different cameras and they’re facing in
so many different directions, it’s easy to have exposure issues and
color issues. One of the best things about Autopano Video Pro is it’s
going to help automatically adjust and iron out any problems that you might have.

Correction types that are
checked by default are the exposure, vignetting and the color
White Balance is another common issue that you’ll often have adjust for. Start with the three defaults,
and click Apply. And Autopano Video Pro will go ahead and
automatically apply those corrections to your footage.

7. Fine Tune the Picture

Now that a basic correction has been applied you can make a fine-tune correction. We’ll cover these in detail in our next tutorials, but here’s an overview:

Lighting Changes

If your camera is moving, for example traveling
through this underbrush as in our example, you’re prone to get lots of different light
changes. Likewise if you’re going from outdoors to indoors. You can do an
autotransition: Autopano will compute the color correction every
five seconds, or 300 frames, or whatever you set it to, up here,
which is very handy.

Click on compute
automatic color correction
. This will run through and automatically
correct for any color changes throughout your 360 video. We also have
access to the exposure compensation, so you can also
adjust this if I need to make it darker or brighter.

One feature I find really cool
is that we get nice little indicators at the bottoms and top to show
us where the clipping in our footage is happening.


360 video uses multiple videos overlapped to make a composite. There are basically two types of blending to make that overlap: sharp blending and smooth blending.

With sharp, it’s
more of an abrupt cut off between each camera. If your
footage is locked down on a tripod, like we have in our example, you may want to
use the sharp blending. If you have a lot of motion in your video you
may want to go with the smooth blending setting. You can also adjust the blend in the
Advanced Settings.

8. Final Render and Export

Alright, time  to render out your final video. Click on the Render tab to bring up the various
rendering options:

  • Autopano Video Pro will give you the width and the height, but it’ll also give you the
    maximum size allowed with your output.
  • Leave the output type on the default mp4: that’s pretty much the most common 360
    video format right now.
  • For a preset, choose H.264 4K.
  • For
    the frames per second, leave it on whatever your footage was recorded at.
  • For video bit rate the
    default is 24,000 kilobits per second. YouTube actually recommends
    anywhere between 50,000 and 150,000 kilobits per seconds.
  • For audio bit rate, set it at 320.
  • For
    aspect ratio, keep the pixels as size.
  • For the audio
    , select which camera
    I want the main audio to be baked into the video.

Finally, name your video, and click render.

At the upper left hand corner you have batch render
options. You can see the current status of your render, and can stop it or pause at any point if you need to.

Now that your video is finished rendering you can open it up
and preview it, make sure everything looks right, make sure all the
stitching lines are correct.

Export presets

9. Add Metadata

Before we finish the 360 video you need to do one
more step: inject some metadata into your video file so that video players will recognize it as a 360 video.

Now there are a few ways we can do this, but I prefer to use the 360 videometadata tool from Google (download link at the bottom of this page).

Download and install the tool. Run the tool, click Open, and navigate to find your exported video. You’ll see that your video has no metadata yet, which is correct.

Go ahead and click on Spherical (this is a spherical 360 video), and then click Save.

Again, what this metadata does is tell any external video
player you upload the video to that this is a 360 video. 

Add spherical metadata to your video

Next Time

I hope you enjoyed this quick tutorial showcasing the features of
Autopano Video Pro and how easy it is to stitch footage together. In upcoming tutorials we’ll take a closer look at stitching and how to get better results, and how to stabilize your footage.

Links Mentioned

Download 360 Basics: How to Stitch With Autopano Video Pro

Menorah six branches lampstand (Miscellaneous)

Game-ready, PBR, UV-unwrapped, Textured Menorah, six branches lampstand 3D Model, with PBR materials, textures, and non overlapping UV Layout map provided in the package.

Made in Blender 3D (Cycles materials) and in 3D Studio MAX 2012 (V-Ray Adv 2.30.02), then exported to other formats; rendered in Cycles (Blender 3D 2.77).

Formats included: 3DS, FBX, OBJ; scenes: 3D Studio MAX 2012 (V-Ray Adv 2.30.02 materials), BLEND (Blender 3D 2.77 Cycles materials with a PBR Shader and colours); other: png with Alpha (non-overlapping UV layout map); jpg (PBR, UV-mapped textures).

1 Object (mesh), 3 PBR Materials (in both Blender Cycles and 3D Studio MAX V-Ray scenes), UV unwrapped (non overlapping UV Layout map provided in the package; see preview images); UV-mapped Textures.

PBR colours and image Textures provided for each Material in the package; channels: Base Color (Diffuse / Albedo), Metallic, Roughness, Normals, Ambient Occlusion; main render made in Blender 3D + Cycles using these PBR colours and/or textures with a Material Node scheme provided in the blend scene (see preview images).

UV Layout maps and Image Textures resolutions: 1024×1024; PBR Textures made with Substance Painter 2.

Polygonal, 12116 vertices, 10519 faces (20772 triangles).

IMPORTANT Main rendering made in Blender 3D + Cycles using an HDR Environment Texture Image which is NOT provided in the package!

Download Menorah six branches lampstand (Miscellaneous)

Spear (Melee)

Game-ready, PBR, UV-unwrapped, Textured Spear 3D Model, with PBR materials, textures, and non overlapping UV Layout map provided in the package.

Made in Blender 3D (Cycles materials) and in 3D Studio MAX 2012 (V-Ray Adv 2.30.02), then exported to other formats; rendered in Cycles (Blender 3D 2.77).

Formats included: 3DS, FBX, OBJ; scenes: 3D Studio MAX 2012 (V-Ray Adv 2.30.02 materials), BLEND (Blender 3D 2.77 Cycles materials with a PBR Shader and colours); other: png with Alpha (non-overlapping UV layout map); jpg (PBR, UV-mapped textures).

1 Object (mesh), 2 PBR Materials (in both Blender Cycles and 3D Studio MAX V-Ray scenes), UV unwrapped (non overlapping UV Layout map provided in the package; see preview images); UV-mapped Textures.

PBR colours and image Textures provided for each Material in the package; channels: Base Color (Diffuse / Albedo), Metallic, Roughness, Normals, Ambient Occlusion; main render made in Blender 3D + Cycles using these PBR colours and/or textures with a Material Node scheme provided in the blend scene (see preview images).

UV Layout maps and Image Textures resolutions: 1024×1024; PBR Textures made with Substance Painter 2.

Polygonal, 166 vertices, 144 faces (324 triangles).

IMPORTANT Main rendering made in Blender 3D + Cycles using an HDR Environment Texture Image which is NOT provided in the package!

Download Spear (Melee)