Create an Epic Pirate Sea Battle in Photoshop

Get ready to create an epic battle between a sea creature and a courageous pirate girl. I will share you various tips  and techniques that will hopefully improve your current workflow. In this tutorial I will make extensive use of layers, masks, Smart Objects and other basic Photoshop tools so if you’re not familiar with […]

The post Create an Epic Pirate Sea Battle in Photoshop appeared first on Photoshop Tutorials.

View Tutorial: Create an Epic Pirate Sea Battle in Photoshop

How to Create a Dragon Landscape Photo Manipulation With Adobe Photoshop

Final product image

What You’ll Be Creating

In this tutorial I’ll show you how to use Adobe Photoshop to create a mountainous landscape with flying dragons. 

First we’ll build the misty background using three stock images. After that we’ll import the rocks and clone over them using the rock texture. Later we’ll add the towers and dragons and blend them together using adjustment layers, masking, dodge/burn, and brushes. We’ll also create a misty atmosphere using the sky image. Finally we’ll make several adjustment layers to complete the final effect.

Tutorial Assets

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

1. How to Build the Misty Background

Step 1

Create a new 2000 x 798 px document in Adobe Photoshop with the given settings:

new file

Step 2

Open the sky image. Drag this image into the white canvas using the Move Tool (V).

add sky

Step 3

Import the misty mountains image 1 and add it to the left of the canvas.

add mountains 1

Click the second icon at the bottom of the Layers panel to add a mask to
this layer. Use a soft round brush with black color (soft black brush)
to remove the hard edges of the image.

mountains 1 masking

Step 4

Duplicate
this layer and move it to the right edge of the canvas. Use a layer
mask with a soft black brush to blend it with the first layer.

duplicate mountains 1

Step 5

Select the mountain layers and press Control-G to make a group for them.
Change this group mode to Normal 100%. Go to Layer > New Adjustment
Layer > Curves
and decrease the lightness.

mountains 1 curves

Step 6

Use a Hue/Saturation adjustment layer and bring the Saturation value down to -82:

mountains 1 hue saturation

Step 7

Add the mountains 2 image and lower the Opacity to 30%:

add mountains 2

Add a mask to this layer and use a soft black brush to remove the sky of this mountain image and make it blend more smoothly with the existing background.

mountains 2 masking

Step 8

Create a Hue/Saturation adjustment layer and set it as Clipping Mask. Change the Saturation value to -85:

mountains 2 hue saturation

Step 9

Use
a Curves adjustment layer to darken the mountains a bit. These
mountains are nearer to the foreground so they should be hazier than the
ones farther away.

mountains 2 curves

2. How to Add the Rocks

Step 1

Open the rocks 1 image and isolate the rocks from the background. Add two rocks to the left side and another to the middle. We’re aiming to create the light in the top middle, so arrange the rocks to fit this source.

add rocks 1

Step 2

Create a new layer above the small rock on the left (behind the big
rock). Load the selection of the big rock on the left by clicking its
thumbnail layer while holding Control:

select big rock

Press Control-C to copy the rock selection and then select the clipped
layer above the small rock one. Hit Control-V to paste the selection
into it. Now the small rock has similar textures to the big rock. Use a
layer mask with a lowered opacity brush to paint over the top so it appears slightly different from the original.

copy big rock texture

Step 3

Create a Color Fill layer for the small rock and pick the color #787a7a.
Lower the Opacity of this layer to 50%. We’re aiming to make this rock in the
mist area so it should be less visible.

small rock color fill

Step 4

Create a new layer, change the mode to Overlay 100%, and fill it with 50% gray.

small rock DB new layer

Select the Dodge and Burn Tool (O) with Midtones Range, Exposure about
15-20% to paint more details and enhance the light/shadow of the rock.
You can see how I did it with Normal mode and the result with Overlay
mode.

DB result

Step 5

Create a Curves adjustment layer above the middle rock to darken it,
especially the right. On this layer mask, use a soft black brush to
erase the left where it gets light from the sky.

middle rock curves

Step 6

Make a group for all the rock layers. Create a Hue/Saturation adjustment layer and set the Saturation value to minimum (-100).

Step 7

Use a Color Balance adjustment layer and change the Midtones settings:

rocks 1 color balance

Step 8

Add a Curves adjustment layer and reduce the lightness. On this layer
mask, use a soft black brush to lower the effect of this adjustment
layer on the bright details of the rocks, especially the big rock and
the middle one.

rocks 1 curves

Step 9

Open the rock 2 image. Select the bigger rock on the left and place it on the right side of our main canvas.

add rock 2

Step 10

Add the texture of the rock 1 to the rock 2 using the same techniques
as in step 2. Flip it horizontally by choosing Edit > Transform
> Flip Horizontal
:

add texture to rocck 2

Step 11

Create a new layer and activate the Clone Tool (S) to fill the missing
areas of the rock 2 using the existing texture. Try to clone the
bright details over the front of the rock to fit the light source.

rock 2 cloning

Step 12

Add a Hue/Saturation adjustment and bring the Saturation value down to -78:

rock 2 hue saturation

Step 13

Use a Color Balance adjustment layer and change the Midtones values:

rock 2 color balance

Step 14

Make a Curves adjustment layer to darken the rock. Paint on the bright details on the top of the rock to keep their lightness.

rock 2 curves

Step 15

Create a new layer, change the mode to Overlay 100% and fill with 50%
gray. Use the Dodge and Burn Tool to refine the light and shadow on the
rock.

rock 2 D  B

3. How to Import the Towers

Step 1

Open the towers 1 image. Cut out the towers and place them above the big
rock on the left. You can duplicate and resize the towers and place them at different distances and positions.

add towers 1

Add a mask to each of these layers and use a soft black brush to blend their bottom with the top of the rock.

towers 1 masking

Step 2

Make a group for these towers and use a Hue/Saturation adjustment layer to desaturate them.

towers 1 hue saturation

Step 3

Create a Color Balance adjustment layer and change the Midtones settings:

towers 1 color balance

Step 4

Make a Curves adjustment layer to darken the hidden side of the towers (the left). Paint on the right to keep their lightness.

towers 1 curves 1

Step 5

Use another Curves adjustment layer to increase the light on the right
of the tower. The selected areas show where to paint on the layer mask.

towers 1 curves 2

Step 6

Place the tower 2 above the middle rock after isolating it from the
background and blend its bottom with the rock using a layer mask.

add tower 2

Step 7

Use a Hue/Saturation adjustment layer and reduce the Saturation value to -81:

tower 2 hue saturation

Step 8

Make a Color Balance adjustment layer and alter the Midtones settings:

tower 2 color balance

Step 9

Create a Curves adjustment layer and decrease the lightness. Paint on the left side, which is exposed under the light.

tower 2 curves

Step 10

Make a new layer, change the mode to Overlay 100% and fill with 50%
gray. Use the Dodge and Burn Tool to enhance the details, especially the
light/shadow of the tower.

tower 2 DB

Step 11

Use a Color Fill layer and pick the color #4b4c4c. Lower the Opacity of this layer to 40% to give it a hazy effect.

tower 2 color fill

4. How to Add the Dragons

Step 1

Cut
out the dragons from the background and add the dragon 1 to the top
left and the second to the top of the right rock. Make the first much
bigger and the second much smaller.

add dragons

Step 2

Select
the wing of the dragon 1 using the Lasso Tool (L) and place it in the
lower part of the space between the middle and the right rocks.

add dragon wing

Step 3

To create some depth for the scene, on the dragon 1 layer, go to Filter > Blur > Gaussian Blur and set the Radius to 8 px:

dragon 1 gaussian blur

Apply a Gaussian Blur of 12 px to the dragon’s wing as it’s nearer the foreground than the dragon 1.

wing gaussian blur

Step 4

Create a new layer above the dragon 2 layer, change the mode to Overlay
100%
, and fill with 50% gray. Use the Dodge and Burn Tool to refine the
details on this dragon.

dragon 2 DB

Step 5

Make a group for the dragons and use a Hue/Saturation adjustment layer to desaturate the dragons’ color.

dragons hue saturation

Step 6

Add a Color Balance adjustment layer and change the Midtones values:

dragon color balance

Step 7

Create a Curves adjustment layer to darken the dragons. Paint on the outer details to keep them still bright.

dragons curves 1

Step 8

Use another Curves adjustment layer to increase the light on the outer details. Paint on the rest to keep them still in shade.

dragons curves 2

5. How to Create the Mist

Step 1

Duplicate the sky layer and move it on top of the layers. Use the Free
Transform Tool (Control-T)
to reduce its size and place it between the
middle and the left rocks.

add mist using sky

Use a layer mask to reduce the mist intensity and clear the hard edges.

mist masking

Step 2

Duplicate the sky layer several times and move the copies around the space
between the rocks. Apply a layer mask to each of these layers. Don’t overdo it as it would look unnatural.

add more mist
mist result

Step 3

Make a group for the sky layers and use a Curves adjustment layer to
decrease the visibility of the mist, making it appear more subtle.

mist curves

6. How to Make the Final Adjustments

Step 1

Create a Photo Filter adjustment layer on top of the layers and pick the color #7da4fe.

whole scene photo filter 1

Step 2

Make another Photo Filter adjustment layer and pick the color #00ecb7.

whole scene photo filter 2

Step 3

Create a Curves adjustment layer and increase the lightness a bit. Paint
on the lower edges and sides to make the light visible only on the top
middle.

whole scene curves 1

Step 4

Use another Curves adjustment layer to change the color and contrast of the whole scene.

whole scene curves 2

Step 5

Make a Vibrance adjustment layer to enhance the final effect.

whole scene vibrance

Congratulations, You’re Done!

I hope that you’ve enjoyed my tutorial and learned something new. Feel
free to share your ideas or comments in the box below—I’d love to see
them. Enjoy Photoshopping!

final result

View Tutorial: How to Create a Dragon Landscape Photo Manipulation With Adobe Photoshop

How to Scrape Web Pages for Metadata

Final product image

What You’ll Be Creating

Introduction

Recently I began building a community site on top of the Yii platform which I wrote about in Programming With Yii2: Building Community with Comments, Sharing and Voting (Envato Tuts+). I wanted to make it easy to add links related to content on the site. While it’s easy for people to paste URLs into forms, it becomes time-consuming to also provide title and source information.

In today’s tutorial, I’m going to show you how to leverage PHP to scrape common metadata from web pages to make it easier for your users to participate and to build more interesting services.

Remember, I participate in the comment threads below, so tell me what you think! You can also reach me on Twitter @lookahead_io

Getting Started

First, I built a form for people to add links by pasting the URL. I also created a Lookup button to use AJAX to request the web page be scraped for metadata information.

Web Scraping - Create Link form with Lookup button

Pressing Lookup calls the Link::grab() function via ajax:

$(document).on("click", '[id=lookup]', function(event) {
  $.ajax({
     url: $('#url_prefix').val()+'/link/grab',
     data: {url:   $('#url').val()},
     success: function(data) {
       $('#title').val(data);
       return true;
     }
  });
});

Scraping the Page

The Link::grab() code calls fetch_og(). This imitates a crawler to capture the page and get the metadata with DOMXPath:

public static function fetch_og($url)
    {
        $options  = array('http' => array('user_agent' => 'facebookexternalhit/1.1'));
        $context  = stream_context_create($options);
        $data = file_get_contents($url,false,$context);
        $dom = new \DomDocument;
        @$dom->loadHTML($data);
        $xpath = new \DOMXPath($dom);
        # query metatags with og prefix
        $metas = $xpath->query('//*/meta[starts-with(@property, \'og:\')]');
        $og = array();
        foreach($metas as $meta){
            # get property name without og: prefix
            $property = str_replace('og:', '', $meta->getAttribute('property'));
            $content = $meta->getAttribute('content');
            $og[$property] = $content;
        }
        return $og;
    }

For my scenario, I’ve replaced the og: tags above, but the code below looks for various types of tags:

$tags = Link::fetch_og($url);
      if (isset($tags['title'])) {
        $title = $tags['title'];
      } else if (isset($tags['metaProperties']['og:title']['value'])) {
        $title=$tags['metaProperties']['og:title']['value'];
      } else {
        $title = 'n/a';
      }
      return $title;
    }

You can also grab other tags such as keywords, description, etc. The jQuery then adds the result to the form for the user to submit:

Web Scraping - Create Link with Resulting Title Filled In

Going Further

I also have a table of sources which I’ll develop more later. But basically, each time a new URL is added, we parse it for the base website domain and place it in a Source table:

$model->source_id = Source::add($model->url);
...
public static function add($url='',$name='') {
      $source_url = parse_url($url);
      $url = $source_url['host'];
      $url = trim($url,' \\');
      $s = Source::find()
        ->where(['url'=>$url])
        ->one();
      if (is_null($s)) {
        $s=new Source;
        $s->url = $url;
        $s->name = $name;
        $s->status = Source::STATUS_ACTIVE;
        $s->save();
      } else {
        if ($s->name=='') {
          $s->name = $name;
          $s->update();
        }
      }
      return $s->id;
    }

For now, I’m manually updating the names of sources so they’ll look clean to the user, e.g. ABC News, BoingBoing, and Vice:

Web Scraping - Item page with completed links and clean sources

Hopefully, in an upcoming episode, I’ll review how to use freely available APIs to look up the site’s name. It’s odd to me there’s no common metatag for this; if only the Internet were perfect.

Paywall Sites

Some sites like The New York Times do not let you scrape the metadata because of their paywalls. But they do have an API. It’s not easy to learn because of the confusing documentation, but their developers are quick to help on GitHub. I also hope to write about using the metadata lookup for New York Times titles in a future episode.

In Closing

I hope you found this scraping guide helpful and put it to use somewhere in your projects. If you’d like to see it in action, you can try out some of the web scraping on my site, Active Together.

Please do share any thoughts and feedback in the comments. You can also always reach me on Twitter @lookahead_io directly. And be sure to check out my instructor page and my other series, Building Your Startup With PHP and Programming With Yii2.

Related Links

View Tutorial: How to Scrape Web Pages for Metadata

How to Create a Pixel Heart With Inkscape

What You’ll Be CreatingIn today’s tutorial I’ll be demonstrating how you can design a vector isometric-style heart that looks as if it’s made of pixels, using Inkscape. If you’re looking for premade logo templates, you can purchase one over on Gra…

View Tutorial: How to Create a Pixel Heart With Inkscape

WordPress for Writers: Themes to Make Your Words Stand Out

Throughout history, we have seen just how much of an impact the written word can have. Whether used to declare freedom, spread important news or create a world of their own, words matter to us all.

In more recent times, words have often taken a backseat–particularly online. With the advent of dazzling web technologies and the spread of broadband, websites often are overtaken with giant sliders, ads and the like. Even text-heavy sites can be hard to read in a distraction-free manner.

With that in mind, let’s take a look at some tips to help your words stand out as a focal point of your website with the help of some excellent WordPress themes.

1. Remove Distractions

Keeping your layout clutter-free is the most organic way to ensure that the focus stays on your writing. That doesn’t necessarily mean that you can’t use a slider or images – but you should choose wisely. Too much movement can make it hard to focus on content. Integrating too many bold images can take attention away from your core message.

Preface is a theme aimed at authors. And, while it does include a slider for the home page and makes use of featured images for the blog, it does so in a subtle manner. Typography is both large and the focal point of the layout. Overall, it’s easy to navigate and read.

Preface

Preface: A WordPress Theme for Authors

2. Use Bold, Spacious Headlines

The use of bold headlines, with ample space to breathe, can really make an impact with readers. While ideally the use of short and to-the-point headlines brings the heaviest punch, that’s not always a realistic option for all types of content. But regardless of whether you’re publishing breaking news or showcasing short stories, displaying each post with standout headlines and a solid chunk of real estate allow them all their moment in the sun.

Forte utilizes this philosophy quite well. Each headline on the home page’s grid layout is large, bold and given its own space via muted background images. This is a terrific blend of using typography and imagery together in a way that results in simplicity. It goes to show that, even with the use of large images, you can still make words stand out.

Forte - A Stylish WordPress Theme for Writers

Forte – A Stylish WordPress Theme for Writers

3. Consider Classic Layouts

While it’s tempting to go with more complex modern layouts, there is still a content-first appeal to more traditional setups. The standard one or two column layouts are easy to follow and created with the written word in mind. While they may not be as glamorous, blogs in particular still benefit from the old less-is-more approach.

Textual is a text-centric theme that adds a bit of brutalist design to the classic blog layout. The headlines are huge, the links stand out and the body text is easily read. Nothing fancy here–just the stuff that really matters.

Textual - A Text-Centric WordPress Blog Theme

Textual – A Text-Centric WordPress Blog Theme

4. Utilize a Contrasting Color Palette

It stands to reason that, if text is easier to read, it will help to keep the focus on your written content. Ensuring that your site’s text contrasts nicely with its background is a crucial step in both readability and accessibility. As an aside, my first job out of high school was at a local newspaper. Their motto was that bold, dark text on a light background is always user-friendly. That’s just as true today.

WordMag by default uses black text on both white and light gray backgrounds. It combines the this contrasting color scheme with some modern features such as CSS3 animations, parallax scrolling effects and a grid-based layout. Typography is one of the theme’s core focuses, with both Google Fonts and Adobe Typekit being supported.

WordMag - Typography Focused WordPress Magzine Theme

WordMag – Typography Focused WordPress Magzine Theme

5. Empower Users

There are, of course, any number of ways you may choose to style your site’s typography. But, if your focus is primarily on written content, there are things you can do to further empower users. Provide them with tools that they can use to better enjoy reading. If someone is more comfortable, they may just stay awhile!

ReadWrite is a minimal WordPress theme that offers tools to help users customize their reading experience. Both font sizes and color contrast can be changed by the user in the site’s header. Through CSS, you can further tweak these features to give visitors to your site the best possible UX.

ReadWrite - Beautifully Minimal Writing  Blogging WordPress Theme

ReadWrite – Beautifully Minimal Writing / Blogging WordPress Theme

The Foundation of Good Design

When you think about it, text really lays the foundation for web design. At the dawn of the World Wide Web, it even started out as the basis of all websites. With our desire to constantly add in the latest bells and whistles, we sometimes tend to push text aside as a minor concern. Thankfully, themes like the ones highlighted above have helped to bring text and typography back to the forefront–just where they belong.

Learn more about typography on Tuts+

View Tutorial: WordPress for Writers: Themes to Make Your Words Stand Out

Best of the Design Web: January 2017

2017 is already underway! So kick off the new year with amazing tutorials featuring the latest trends in graphic design and illustration. Tackle some new and exciting projects by checking out the following tutorials from across the web!10 Amazing Tutor…

View Tutorial: Best of the Design Web: January 2017

How to Migrate to Amazon In-App Purchasing From Google’s

Final product image

What You’ll Be Creating

Welcome. If you’re new to the Amazon Appstore, check out our recent introductory guide, How to Submit Your App to the Amazon Appstore. In today’s episode, I’ll walk you through the benefits and requirements of Amazon’s In-App Purchasing (IAP). Specifically, I’ll describe how those of you with Google Play apps that leverage Google’s IAB can easily migrate their applications to work with Amazon IAP.

Benefits of the Amazon Appstore

Before we dive in, I just want to recap the benefits of the Amazon Appstore. 

When you add your app to the Amazon Appstore, it’s visible to Android and Fire users in more than 200 countries, and developers can now list their PC, Mac and HTML5-based web apps as well as Android apps. By submitting your app, web app or game to the program, you can grow your business and revenue.

According to Statista, there are currently more than 600,000 apps in the Amazon Appstore.

In addition to today’s tutorial, you can find a breadth of helpful information at Amazon’s Developer portal.

Moving From Google Play to the Amazon App Store

If your Android app is already in the Google Play store, it’s even easier to join the Amazon Appstore. Amazon reports that over 85% of Android apps just work on Kindle Fire with no additional development necessary. Here’s a short video guiding you through the process, Moving from Google Play to the Amazon Appstore (video):

But if you use Google’s IAB, you’ll need to switch over, and I’ll show you how.

Before I go further, I want to encourage you to reach out with any questions you may have about the tutorial. Post them in the comments below or to me @lookahead_io on Twitter. Let us know if you’d like to see more tutorials about the Amazon Appstore or AWS in general.

Understanding the In-App Purchasing API

With the In-App Purchasing API, you can enable compelling feature sets and scenarios such as:

  • Creating a “freemium” model for your app, where the app itself is free but you charge a premium for advanced services or functionality
  • Allowing customers to purchase in-app currency directly within your app experience
  • Allowing customers to subscribe to content available within your app
  • Making content available for purchase to be viewed within your app

The Amazon In-App Purchasing API allows your app to present, process, and fulfill purchases of digital content and subscriptions within your app experience. To enable this feature set, simply implement the In-App Purchasing API as detailed in the implementation section below:

Amazon In-Appp Purchasing API Implementation Flowchart

The In-App Purchasing API is designed to encapsulate the complexity behind the purchase process while providing a fully featured API. The In-App Purchasing API will handle the details about purchase flow, payment processing, providing a receipt to your app, and managing rights to the purchasable content.

Once you build a storefront, you can use the In-App Purchasing API to vend purchasable items:

There are three kinds of purchasable items:

  • Consumables: content that does not require an entitlement or access rights to use, can be purchased multiple times by a customer, is available only on the device it is purchased from, and does not require any type of entitlement check to use.
  • Entitlements: content that requires an entitlement or access rights to use, can be purchased only once by a customer, and is available on all compatible devices registered to the customer’s account.
  • Subscriptions: content that requires an entitlement or access rights to use, is bound by a period of time, auto-renews, and is available on all eligible devices registered to the customer’s Amazon account

The Amazon Client

The Amazon Client is an integral part of the In-App Purchasing API. Once you initiate a purchase, the Amazon Client surfaces and presents an Amazon-branded user interface to complete the transaction. This flow is used by all apps that choose to employ the In-App Purchasing API.

If the Amazon Client is not installed or is otherwise not available, a message is surfaced to the customer indicating the appropriate course of action.

The Amazon Client presents the user interface for all aspects of the purchase workflow. It provides the logic to display the purchasable item, perform the 1-Click purchase itself, and handle any preconditions or error scenarios that arise.

Providing a link directly to the Amazon Client from within your app is an effective tool for promoting your apps. This type of link is referred to as a deep link. More information on deep linking can be found in the documentation.

Separation of Responsibilities

When developing with the Amazon In-App Purchasing API, it is important to understand which parts of the purchase flow the app must implement, and which parts are handled by the Amazon Client.

The Amazon Client will take care of the purchase workflow, starting when the customer decides to purchase an item and ending when the store provides the application a receipt for the purchase (or other status in the case of a failed purchase). Developers should not provide purchase dialogs, transaction timeout logic, or “Thank You” dialogs. These are all provided by the Amazon Client. Please see the User Interface Guidelines and Conventions section for more details.

In the event a purchase is unsuccessful, the Amazon Client will present messaging to the customer; your app should not message the customer. For example, if the customer does not have a valid credit card on file, the client redirects the customer to a page where they can update their payment information. You should not provide a confirmation or other interstitial dialog to the customer regarding the purchase flow.

Your App Amazon
Presents the catalog of in-app items to the customer for purchase Manages the purchase flow
Unlocks purchasable functionality Performs payment processing
Downloads remotely delivered content Handles secure communication with the Amazon platform, including payment security
Displays and uses downloaded digital goods Verifies entitlements and validates purchase receipts
Tracks customer purchases and consumable inventory Manages subscriptions, including auto-renewing and revoking of entitlements

Content Sources

Your app can leverage the In-App Purchasing API in a variety of ways. How you choose to implement it can affect how you build your app. No matter how you choose to implement it, there are two basic flows available to you: locally available content and deliverable content.

Locally Available Content

Locally available content is unlocked or otherwise made available to the customer upon purchase. Under this model, your app already has everything it needs for the customer to use the purchasable item except the right to use it. You can use all three types of purchasable items with this model.

Your app should contain the unique identifiers for each purchasable item (SKUs), the ability to present a catalog to the customer, and logic within the app to unlock the purchasable item upon successful transaction.

Deliverable Content

Deliverable content allows you to make new content available to the customer. Under this model, your app will download the new content from your servers and make it available to the customer.

Your app should contain the unique identifiers for each purchasable item (SKUs), the ability to present a catalog to the customer, and logic within the app to download, persist, and make available the downloaded content upon successful transaction.

Remember: IAP v1.0 Has Been Deprecated

In July 2014, Amazon released the In-App Purchasing (IAP) v2.0 API, which includes several important updates. As of 30 April 2016, Amazon deprecated IAP v1.0 for new and updated app submissions. While this deprecation does not affect apps that were already live in the Amazon Appstore, any apps submitted as either a new or updated app after 11 May 2016 will need to use IAP v2.0. 

Migrating From Google Play In-App Billing (IAB) v3.0 to Amazon In-App Purchasing (IAP) v2.0

Now, let’s discuss the differences between Google Play’s In-App Billing (IAB) and Amazon’s In-app Purchasing (IAP) and give a high-level description of how to adapt your app to use both API sets.

What Are IAB and IAP?

Google Play’s In-App Billing feature allows users to make purchases of virtual items directly from your app. For example, a user can purchase additional levels to a game that he or she is playing. 

Amazon’s In-App Purchasing is the equivalent feature for Amazon APIs. If you have an app that uses Google Play’s In-App Billing feature, you can easily modify your code to use Amazon’s equivalent In-App Purchasing feature. Both API sets have similar functionality with some differences in naming and terminology.

Requirements for the Amazon Appstore and Amazon Devices

If you will be submitting an app that implement’s Google Play’s IAB to the Amazon Appstore to be made available to run on Amazon devices, such as Fire tablets, your app will need to implement Amazon’s IAP for in-app purchases. Google Play’s IAB will not work on Amazon devices.

Amazon IAP v2.0 vs. Google Play IAB v3.0

Feature Comparison

The table below shows a comparison between Amazon’s IAP API and Google Play’s IAB API:

Feature IAP v2.0 (Amazon) IAB v3.0 (Google Play) Comments
Purchases
Intents handled by API. Y N
Framework of simple API calls provided. Y N
Consumables Y Y
Individual consumables may be purchased multiple times. Y Y
Entitlements
Purchased once. Users notified if they try to purchase an entitlement they already own. Y Y
Subscriptions
Variety of options for time period that a subscription runs. Y Y Amazon’s options: Weekly, Bi-weekly, Monthly, Bi-monthly, Quarterly, Semi-annually, Annually Google Play’s options: Monthly, Annually, Seasonal (custom)
Supports free trial periods. Y Y
Auto-renew options Y Y
Deferred billing option N Y
Receipt verification
Receipt verification service for purchases Y Y Although Google Play does provide receipt verification, Google Play’s receipt verification process is not automated.

Google Play’s Managed Objects vs. Amazon’s Consumables and Entitlements

While Google Play’s IAB and Amazon’s IAP both let your customers make the same types of in-app purchases, Google Play and Amazon use different terminology for their purchase types. The following table notes the Google Play equivalent for each Amazon purchase type:

Amazon Description Google Play Equivalent Examples
Consumable Purchase that is made, then consumed within the app, typically a game. May be purchased multiple times. Managed In-app products Extra lives or moves (within a game), extra ammunition for an in-game character.
Entitlement One-time purchase to unlock access to features or content within an app or game. Managed In-app products Unlock extra levels within a game or “premium member only” features within an app.
Subscription Offers access to a premium set of content or features for a limited period of time. Subscription Online magazine subscription, fantasy football league access.

As you can see, Google Play’s IAB treats all non-subscription purchases similarly; an item is purchased, then consumed by a user. Once an item has been consumed, the item is provisioned in the app, and the consumption is recorded. For items that are likely to be one-time purchases, such as unlocking new game levels, you have the option as a developer of treating the item as a consumable or non-consumable and introducing logic to ensure that the purchase of that item only occurs once. 

With Amazon’s IAP, these one-time purchases are separated by design from purchases, such as extra lives, that app users might purchase again and again.

Porting Your Code

Let’s walk you through porting an App from Google Play’s IAB API to the Amazon IAP API:

  1. Configure your AndroidManifest.xml file to support Amazon’s IAP.
  2. In your app, implement logic to mediate between IAB and IAP.
  3. Add and implement the Amazon IAP API.
  4. Test your app.

Configuring Your AndroidManifest.xml File

Configure your AndroidManifest.xml file to define the IAP Response Receiver for your app. The IAP Response Receiver ensures that the intent communication from the Amazon Client is intercepted by your app. Note that if you are supporting both Google Play’s IAB and Amazon’s IAP, you do not need to remove elements related to IAB; they will simply be ignored by IAP.

In your AndroidManifest.xml file, add the appropriate <receiver> tag for the IAP ResponseReceiver:

<application>
...
    <receiver android:name="com.amazon.inapp.iap.ResponseReceiver">
        <intent-filter>
            <action android:name="com.amazon.inapp.purchasing.NOTIFY" android:permission="com.amazon.inapp.purchasing.Permission.NOTIFY">
        </action></intent-filter>
    </receiver>
...
</application>

Implementing Logic to Mediate Between IAB and IAP

You can use the same code base for your app, regardless of where your app is hosted. Just add logic to your app to determine whether the app was downloaded from the Amazon Appstore or from Google Play. Depending on where the user downloaded the app, execute the appropriate methods for either IAP or IAB.

The following example code determines whether a package was installed from Google Play or the Amazon Appstore:

PackageManager pkgManager = context.getPackageManager();

 String installerPackageName = pkgManager.getInstallerPackageName(context.getPackageName());

 if(installerPackageName.startsWith("com.amazon")) {
 // Amazon
 } else if ("com.android.vending".equals(installerPackageName)) {
 // Google Play
 }

Adding and Implementing the Amazon IAP API

For the most part, Amazon’s IAP works similarly to Google Play’s IAB. When you create the path in your code to implement the IAP API, you should be able to use a similar logic flow to IAB, but will need to account for different class and method names.

The following table maps the most frequently used IAP methods to their IAB equivalents:

PurchasingService method PurchasingListener callback Response object Equivalent IAB call
getUserData() onUserDataResponse() UserDataResponse N/A
getPurchaseUpdates() onPurchaseUpdatesResponse() PurchaseUpdatesResponse getPurchases()
getProductData() onProductDataResponse() ProductDataResponse getSkuDetails()
purchase() onPurchaseResponse() PurchaseResponse getBuyIntent()
notifyFulfillment() N/A N/A consumePurchase()

Note that Amazon’s notifyFulfillment() call and Google Play’s consumePurchase() call correlate with each other somewhat. Calling consumePurchase()on a managed item for IAB will return the item’s state to “unpurchased”, essentially converting it to a consumable. After that, the receipt will no longer appear in the response from subsequent calls to getPurchases(). Amazon will return the receipts for consumable items in calls to getPurchaseUpdates() until the app calls notifyFulfillment().

For more information about the classes and methods of IAP, see the In-App Purchasing API Reference v2.0.

Testing Your App

Download and install the App Tester tool to test your IAP v2.0-integrated app. This tool can also test Mobile Associates APIs, if your app uses those, as well. Follow the instructions and links in Testing In-App Purchasing (IAP) to install and use App Tester.

After testing your app locally, you can use the Live App Testing service to beta test your app in a live production environment with a select group of users.

In Closing

I hope you’ve enjoyed today’s guide as well as our earlier How to Submit Your App to the Amazon Appstore episode. Please let us know which Amazon Appstore areas you’d like to see covered in more detail. You can post them in the comments below or reach me on Twitter @lookahead_io

If you liked this tutorial, please be sure to check out my series on building a startup with PHP, and keep up with my Envato Tuts+ instructor page to see some of my other tutorials and series.

Related Links

View Tutorial: How to Migrate to Amazon In-App Purchasing From Google’s

New Short Course: A Visual Guide to CSS Animation

Final product image

What You’ll Be Creating

It’s now possible to create awesome animation effects using pure CSS, without a scrap of JavaScript in sight. In our new short course, A Visual Guide to CSS Animation, you’ll learn how to create CSS animations powered by the transition and transform properties.

What You’ll Learn

Because animations are highly visual, rather than getting bogged down in code you’re going to be learning visually. Envato Tuts+ instructor Kezz Bracey will guide you through the projects using Webflow’s popular visual web design tool (via a free account) so you’ll see your animations play out in real time, as you create them.

3D animation effect using CSS in Webflow

Watch the Introduction

 

Take the Course

You can take our new course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll get access to hundreds of courses, with new ones added every week.

We’ve built a comprehensive guide to help you learn CSS online, whether you’re just getting started with the basics or you want to explore more advanced CSS. Check out Learn CSS: The Complete Guide. You can also find a huge variety of useful CSS code snippets on CodeCanyon.

View Tutorial: New Short Course: A Visual Guide to CSS Animation

Understanding Nested Routing in React

React is a JavaScript library built by Facebook for building user interfaces. If you are new to React, I would recommend reading one of our earlier tutorials on getting started with React. In this tutorial, we’ll discuss how to handle nested routing in a React web application.

Setting Up the App

We’ll start by setting up our React web application. Let’s create a project folder called ReactRouting. Inside ReactRouting, create a file called app.html. Below is the app.html file:

<html>

<head>
    <title>TutsPlus - React Nested Routing</title>
</head>

<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>

</html>

Inside the ReactRouting folder, initialize the project using Node Package Manager (npm).

npm init

Enter the project-specific details or press Enter for defaults, and you should have the package.json file inside the ReactRouting folder.

{
  "name": "reactroutingapp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Install the react and react-dom dependencies using npm.

npm install react react-dom --save

Install the babel package using npm and save it to the package.json file.

npm install --save-dev webpack-dev-server webpack babel-core babel-loader babel-preset-react babel-preset-es2015

babel packages are required to transform the JSX code into JavaScript. Create a webpack config file to handle the webpack configurations. Here is how the webpack.config.js file would look:

module.exports = {
  entry: './app.js',

  output: {
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      { exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

app.js is the file where our React code would reside. Create a file called app.js inside the ReactRouting folder. Import the required react libraries in app.js. Create a component called App having a div with some text. Render the component using the render method. Here is how the basic app.js file would look:

import React from 'react'
import { render } from 'react-dom'

const App = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
    );
};

render((
    <App />
    ),document.getElementById('app'))

Restart the webpack development server.

webpack-dev-server

Once the server has been restarted, you should be able to view the React app running on http://localhost:8080/.

Handling Routing in React

We’ll be making use of react-router to implement routing and nested routing. First, install react-router in our project.

npm install react-router --save

Now we have react-router installed in our project. Let’s create a couple of views to implement routing. Inside the app.js file, create two components called view1 and view2. Here is how the code would look:

const View1 = () => {
    return(
        <h3>{'Welcome to View1'}</h3>
    );
};

const View2 = () => {
    return(
        <h3>{'Welcome to View2'}</h3>
    );
};

Create a Menu component to display View1 and View2 on clicking. Here is how it looks:

const Menu = () => {
    return(
		<section>
           
            <ul>
                <li>{'Home'}</li>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
                <li>
                    <Link to="/view2">{'View2'}</Link>
                </li>
            </ul>
        </section>
	)
};

Let’s use the react router to display the default route for our application. Make the Menu component the default route. Also define the route for the View1 and View2 components. Here is how it looks: 

render(
    <Router history={hashHistory}>
        <Route component={Menu} path="/"></Route>
        <Route component={View1} path="/view1"></Route>
        <Route component={View2} path="/view2"></Route>
    </Router>,
document.getElementById('app'));

Save the above changes and restart the webpack server. You should have the vertical navigation menu displayed at http://localhost:8080/webpack-dev-server/.

An example of the vertical navigation menu

Try clicking on the View1 and View2 links, and it should navigate to the appropriate components.

Nested Routes in React

We already have an App component which displays the header text. Suppose we want the menu click to display the appropriate view, but we want it to be rendered inside the App component. 

We want the navigation menu to be available across all pages. In order to achieve this, we’ll try to nest our react components View1 and View2 inside the App  component. So whenever the View1 is rendered, it’s displayed inside the App component.

Now modify the router config and place the View1 and View2 route config inside the App component route.

render(
    <Router history={hashHistory}>
        <Route component={App} path="/">
            <Route component={View1} path="/view1"></Route>
            <Route component={View2} path="/view2"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

Modify the App component to nest the Menu component inside it.

const App = () => {
    return (
        <div>
            <h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
            <Menu />
        </div>
    );
};

To render the nested routes inside the App component, we’ll add props.children to the App component. Pass in props as a function argument to the App component.

const App = (props) => {
    return (
        <div>
            <h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
            <Menu />
            {props.children}
        </div>
    );
};

Let’s also add one Home component to our application.

const Home = () => {
    return(
        <div>
            <h3>{'Welcome Home !!'}</h3>
        </div>
        
    );
};

Include the Home component in the nested route list.

render(
    <Router history={hashHistory}>
        <Route component={App} path="/">
            <Route component={Home} path="/home"></Route>
            <Route component={View1} path="/view1"></Route>
            <Route component={View2} path="/view2"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

Save the above changes and restart the server, and you should be able to view the application. Click on the menu items listed, and each when clicked should render nested inside the App component.

The app nested in the App component

Wrapping It Up

In this tutorial, you saw how to implement nested routing in a React application using react-router. You can develop small independent components and then use the components to create larger applications. Making it possible to stitch up small components into large applications is what makes React really powerful. 

React is becoming one of the de facto platforms for working on the web. It’s not without its learning curves, and there are plenty of resources to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace.

Source code from this tutorial is available on GitHub. Let us know your suggestions and thoughts in the comments below.

View Tutorial: Understanding Nested Routing in React

How to Create a Set of Flat Clock Icons in Adobe Illustrator

Final product image

What You’ll Be Creating

Despite the fact that many people nowadays use their smartphones to check the time, the clock remains one of the most popular items of the interior. There is a huge
variety of shapes and colors and types of clock around us: kitchen timers, alarm
clocks, flip clocks, wall clocks, cabinet clocks, and many other kinds of clock.

In this
tutorial we’ll be creating three different types of clock in a trendy flat
style, applying solid colors and geometric shapes. We’ll learn to design the
clock face, working with the Rotate Tool
and using other handy tools and functions of Adobe Illustrator.

By the end
of this tutorial, you’ll be able to create any kind of flat objects, whether
those are flat clock icons or cooking icons or anything else. Make sure you’ve
browsed the vector section of GraphicRiver for more inspiration. And let’s
start! 

1. How to
Design a Kitchen Timer

Step 1

We’ll start
by making the clock face. Use the Ellipse
Tool (L)
to create a 95 x 95 px
light-beige circle.

Copy the circle and Paste in Back (Control-C > Control-B). Scale the copy up to 175 x 175 px, setting its new size either
in the control panel on top or in the Transform
panel. Make the Fill color a bit
darker.

make the clock face from ellipse

Step 2

Let’s
depict the minute and second graduation marks of the clock face, starting from the top.
Grab the Line Segment Tool (\) or
the Pen Tool (P), hold Shift and make a short line with red Stroke color. Head to the Stroke panel and set the Weight to 2 pt and Cap to Round Cap, making the line thick enough
and rounded at the tips.

create strokes for the graduation

Step 3

Select the stroke with the Selection Tool (V), hold Alt-Shift and drag down to make a copy at the bottom of the clock face. Group (Control-G) the created strokes. 

Make sure
that both strokes are centered perfectly. To do this, select the strokes together
with the circle and click the circle once again to make it a Key Object. Open the Align panel and click Horizontal Align Center.

Duplicate (Control-C > Control-F) our group of strokes and rotate the copy 90 degrees.

align and add more strokes

Step 4

Now we’ll
be adding minor graduations for 60 seconds. Duplicate
those vertical red strokes that we created earlier, change the Stroke color to brown, and set the Weight to 1 pt. You can make the red strokes invisible by clicking the eye icon in the Layers panel in order not to be distracted by them.

add minor graduation

Step 5

Keeping our
group of strokes selected, double-click
the Rotate Tool (R) and set the Angle to 360/60 in order to calculate the value automatically. Click Copy to create a new pair of strokes.
Press Control-D to repeat the last
action and continue pressing Control-D
to add all 30 pairs of strokes.

Now we can make the red strokes visible again and Bring
them to Front (Shift-Control-]),
above the brown strokes.

use the rotate tool to add graduation

Step 6

Now we’ll
move on to the body or the case of our timer. Take the Rectangle Tool (M) and make a 140 x 145
px
red rectangle. Send it to Back (Shift-Control-[), beneath the clock face.

Select both the left and right top anchor points of the rectangle with the Direct Selection Tool (A) and pull the circle markers of the Live Corners to make the top of the
shape fully rounded.

make the case from the rectangle

Step 7

We can
also set the Corner Radius of the
top corners to 15 pt in the control
panel on top, while keeping them selected with the Direct Selection Tool (A).

Now we’ll
add some dimension to our shape, creating a rim around the clock case.
Select the case and go to Object >
Path > Offset Path
and set the Offset
value to 5 px, leaving all other
options as default. Make the new shape a bit darker.

apply offset path to add dimension

Step 8

Take the Rounded Rectangle Tool and let’s add a
small stand in the bottom of the case. Create a 115 x 15 px dark-red shape with 7.5
px Corners.

add a rectangular stand to the clock

Step 9

Let’s add a
hand to our timer. Take the Ellipse
Tool (L)
and make a 25 x 90 px red
oval. Pick the color from the case of the clock using the Eyedropper Tool (I).

Duplicate the oval and squash it to 9 x 88 px, making the top shape a bit
lighter.

add an oval tumbler to the timer

Step 10

Switch to
the Rectangle Tool (M) and make a 33 x 55 px dark-red shape. Send it Backward, beneath the hand, by pressing Control-[ twice.

Make the
top corners of the shape slightly rounded, setting the Radius to 9 px.

add details to the tumbler

Step 11

We need to
make the bottom of the shape slightly arched to make it fit the clock face.
Take the Curvature Tool (Shift-‘)
and pull the bottom edge down to bend it.

use the curvature tool to bend the shape

Step 12

Let’s add a
final detail to our timer: a gentle highlight over the plastic case. Use the Rectangle Tool (M) to make a 55 x 190 px shape of a slightly lighter
red color than we have for the case.

Select both
the case and the rectangle and take the Shape
Builder Tool (Shift-M)
. Hold Alt
and click the top piece of the rectangle to delete it.

use the shape builder tool to delete the unwanted part

Step 13

Delete the
bottom piece of the rectangle using the same method—and there we have it! Our
kitchen timer is finished!

Let’s move
on to the next clock.

kitchen timer is finished

2. How to
Create a Flip Clock

Step 1

We’ll start
designing our flip clock from its screen. Arm yourself with the Rounded Rectangle Tool and make a 170 x 85 px light-yellow shape with 8 px Corner Radius.

Keeping the
shape selected, go to Object > Path
> Offset Path
and apply 10 px
Offset
value. Fill the new shape with dark-green color.

make a screen from rectangle and offset path

Step 2

This time
either apply Offset Path once again
or just create a new rectangle of 210 x 130
px
size beneath the previous two. Fill it with vivid turquoise color and
set the Corner Radius to 25 px, thus depicting a plastic clock case.

Add a
darker rim to the turquoise shape by either adding a 3 px Offset Path or by creating a 220 x 140 px rectangle with rounded corners.

add a clock case

Step 3

Create a 170 x 10 px dark-turquoise rounded
rectangle for the stand and Send it to Back (Shift-Control-[).

Let’s make
some buttons. Add another rounded rectangle of 120 x 25 px size on top of the clock, filling it with the same
dark-green color as we have for the edge of the screen. Place the button beneath the clock
case. Add another button on the right side of the clock, applying a
dark-turquoise color.

add rectangular buttons to the clock

Step 4

Now it’s
time to add the figures! I’m using the Type
Tool (T)
and Bebas free font to set the time to 19:30.

Object > Expand the text, turning it into editable curves.

add time to the display using type tool

Step 5

Move each
figure separately, if needed, so that the spacing between 9 and 3 is slightly
larger than the rest of the gaps.

Take the Rounded Rectangle Tool and let’s add 37 x 76 px dark-green shapes for the
flipping elements beneath each figure.

You can
create one rectangle on the left and then just drag it to the right while
holding Alt-Shift to create a copy.
Then press Control-D twice to
repeat your last action.

Use the Align panel to align the
rectangles to the Horizontal Center
of the figures.

add flipping rectangles

Step 6

Use the Line Segment Tool (\) or the Pen Tool (P) to add a divider. Hold Shift and make a vertical dark-green
line across the center of clock face. Set the Weight to 2 pt in the Stroke panel.

And now
let’s split the figures apart as well. Take the Rectangle Tool (M) and make a narrow horizontal stripe across the
display (I filled it with red color to make it clearly visible).

Now select
only the figures and Object >
Compound Path > Make (Conrol-8)
, uniting separate elements into a
single object.

add dividers to the clock face using stroke and rectangle tool

Step 7

Select the
compound path together with the red rectangle and apply the Minus Front function of
the Pathfinder to cut the stripe out, leaving a horizontal gap across all the
figures.

use minus front in the pathfinder to cut out the shape

Step 8

There we
have it! Our flip clock is finished. Now we can move on to the next one!

flip clock is finished

3. How to
Make a Modern Wall Clock

Step 1

As previously,
we start by designing the clock face. Take the Rounded Rectangle Tool and make a 120 x 120 px light-beige square. Apply Object > Path > Offset Path with 5 px Offset value and make the new shape somewhat darker.

make the clock face from rounded rectangle

Step 2

Now either
use Offset Path again or create a
new 150 x 150 px rectangle with 13 px Corner Radius. Fill the new shape
with vivid orange color and Align it
to the clock face (as to the Key Object),
if needed, clicking Horizontal Align
Center
and Vertical Align Center.

Apply a 5 px Offset Path to the orange shape
and make the rim slightly darker, adding dimension to the clock.

create a bright orange rectangular case

Step 3

Let’s start
adding the graduation marks to the clock face. Use the Ellipse Tool (L) and hold Shift
to make a 12 x 12 px orange circle on
top of the face. Hold Alt-Shift and
drag the circle down, creating a copy at the bottom of the face.

Group (Control-G) both circles and Align them to the clock face.

add circular graduation to the clock face

Step 4

Duplicate (Control-C > Control-F) our group of circles and rotate the
copy 90 degrees.

Duplicate the vertical group once again and let’s add
other type of graduation mark. Set the Fill
color of the copy to None and the Stroke color to dark-blue. Set the Weight to 2 pt in the Stroke
panel.

add another type of circles

Step 5

Double-click the Rotate
Tool (R)
and set the Angle value
to 30 degrees. Click Copy and continue by pressing Control-D multiple times to add all 12
circles to the clock face.

use the rotate tool to add more circles

Step 6

Bring the orange circles of the graduation to Front (Control-]) to cover the
dark-blue circles.

Now let’s add the hands of the clock! Start by
making a red circle in the center and Align
it to the clock face.

Make a short vertical dark-blue stroke using
the Line Segment Tool (\), and set the Weight to 7 pt and the Cap to Round Cap, this way creating an hour
hand. Send it Backward (Control-[), beneath the red circle.

make an hour hand from stroke

Step 7

Add a
minute hand, making it longer and decreasing the Stroke Weight to 4 pt.

Finally,
depict the second hand, changing the Stroke
color to red and the Weight to 3 pt.

add minute and second hands to the clock

Step 8

Let’s add
minor details to the clock face. Use the Ellipse
Tool (L)
to create a large oval over the bottom half of the clock face. Now
select both the clock face and the oval, switch to the Shape Builder Tool (Shift-M), and single-click the top part of the clock face to split it apart. Make
the top part slightly darker, creating an overtone.

add reflection to the clock face

Step 9

Voila! Our
wall clock is completed!

wall clock is completed

Tick-Tock
on the Clock! Our Clock Icons Set Is Finished!

Great job! I hope you’ve enjoyed following this tutorial and discovered some useful new tips and tricks.

Clock Icons Set

You can
continue expanding this set and create more clock icons, like those in the image
below.

Flat Clock Icons Set in Adobe Illustrator
View Tutorial: How to Create a Set of Flat Clock Icons in Adobe Illustrator