Posts

Showing posts from June, 2018

Beyond the Image: How to Practice Your Essential Skills and Find Color Grading Work

12 Cool Adobe Premiere Pro Video Effects (Free + Premium)

Creating Pretty Popup Messages Using SweetAlert2

Image
Every now and then, you will have to show an alert box to your users to let them know about an error or notification. The problem with the default alert boxes provided by browsers is that they are not very attractive. When you are creating a website with great color combinations and fancy animation to improve the browsing experience of your users, the unstyled alert boxes will seem out of place. In this tutorial, you will learn about a library called SweetAlert2  that allows us to create all kinds of alert messages which can be customized to match the look and feel of our own website. Display Simple Alert Messages Before you can show all those sweet alert messages to your users, you will have to install the library and include it in your project. If you are using npm or bower , you can install it by running the following commands: npm install sweetalert2 bower install sweetalert2 You can also get a CDN link  for the latest version of the library and include it in your webpage us

Catching the Eye: How to Use Color to Capture Attention in Videos

10 Best iOS App Templates for Business

How to Build a Film Style Look in Adobe Lightroom

15 of the Best Uplifting and Motivational Music Kits

15+ Best Keynote Presentation Templates (For Mac Users)

How to Create a Scary Cellar Illustration in Adobe Illustrator

How to Create a Memphis Style Club Poster in Adobe InDesign

How to Use Implicit Track Sizing on Your CSS Grid

Image
Up until now our CSS grid tutorials have focused largely on explicit values–track sizes which we’ve explicitly defined. We’ve used rows which are 200px high, or perhaps columns which are 1fr wide, and we’ve explicitly stated how many of them we want. But what if we don’t know (or don’t want to commit to) how many tracks we want? That’s where implicit values come into play–let’s take a look. Starter Grid Here’s a basic grid which you can fork to follow along. It gives us a grid container, with 9 grid items. No column widths or quantities have been defined yet, so each item fills the maximum width available: Defining Just One Column Let’s imagine that we want one column on the left, and that we know exactly how wide we want it: 300px. We can define that by adding grid-template-columns: 300px; to our grid container. But we won’t be given any other columns unless we explicitly define them: That is, unless we explicitly say we want one of the grid items to be placed into (for ex

Interactive Storytelling: Non-Linear

20 Best Colorful Sparkle & Lighting Photo Effects for Photoshop

How to Create a Cartoon Gradient Text Effect in Adobe Photoshop

How to Create a Piped Icing Text Effect in Adobe Photoshop

9 Best Font Manager Apps for Mac, Windows, Linux and Online (2018)

Create Interactive Gradient Animations Using Granim.js

Image
Gradients can instantly improve the look and feel of a website, if used carefully with the right color combination. CSS has also come a long way when it comes to applying a gradient on any element and animating it. In this tutorial, we will move away from CSS and create gradient animations using a JavaScript library called Granim.js . This library draws and animates gradients on a given canvas according to the parameters you set when creating a Granim instance. There are different methods which can be used to make your gradient respond to different user events like a button click. In this tutorial, we will learn about this library in detail and create some simple but nice gradient animation effects. Create Solid Color Gradient Animations Before we begin creating any gradient, you will have to include the library in your project. For this, you can either download Granim.js from GitHub or link directly to a CDN . The library version that I am using in this tutorial is 1.1. Some metho

18 Best Marketing WordPress Themes for 2018

Creating a Magnum Mecha Character in Maya: Part 6

How to Create Mesh Leaves and a Wooden Sign in Adobe Illustrator

10 Best Ionic 3 App Templates

How to Create an Editable Line Chart in Adobe Illustrator

Mixing Drums With the Ableton 10 Drum Buss

How to Use Infographic Templates for PowerPoint Presentations

How to Build an Attractive Responsive Image Gallery With slick.js

International Artist Feature: Denmark

How to Create an Abstract Poster Using the Puppet Warp Tool in Adobe Photoshop

Techniques For Empathy Interviews in Design Thinking

How to Create an Editable Pie Chart in Adobe Illustrator

How to Create Agency Websites With WordPress Theme Designs

18+ Modern Keynote Templates for Beautiful Presentations in 2018

New Course: How to Make a Professional Invoice

How to Draw a Duck

How to Create a Quick Rainbow Pride Text Effect in Adobe InDesign

How to Use Free 3D Models From Google Poly in Android Apps

How to Draw a Nature Background in Adobe Illustrator Using Gradient Mesh

15 Best After Effects Templates on Envato Elements

How to Make Great Landscape Photographs with Your Smartphone

Maximize Your Trello Workflow With Checklists and Master Templates

Creating Toon Water for the Web: Part 3

How to Go Live! Why Artists Should Create Live Streams and Screencasts

15 Best Mac Project Management Software for 2018

New Course: Node.js From Scratch

How to Design Law Firm Websites With Responsive HTML Templates

10 Best Small Business Marketing Strategies for 2018

How to Draw a Flamingo

20+ Cool Google Slides Themes (To Make Presentations in 2018)

Join the Design & Illustration Instructor Team!

Image
It's that time of year again, we're looking for some new designers to join our always developing team of awesome instructors.  What We're Looking For Envato Tuts+ has many areas of content, and while we love a variety of avenues, we're specifically looking for instructors to create written content. The topics we're specifically looking for are: Photo manipulation Product mockups Logo design  Adobe Photoshop Procreate Affinity Photo Sketchbook Vector Software Gurus:  Affinity Designer Sketch Inkscape Your area of expertise not listed? We never turn a good application down! You must also be comfortable with the English language. We can proof your content, but we can't rewrite everything for you.  We're looking for content from quick tips to in-depth tutorials. Most of all, we want instructors who can explain themselves clearly and accurately and produce quality end results. Whether you're an expert in Adobe Illustrator, Adobe InDesign,

Creating Toon Water for the Web: Part 2

The Beginner’s Quick-Start Guide to InDesign (Tutorials, Tips & Resources)

What Is a Group Interview? +7 Tips on How to Ace Them

Interactive Storytelling: Linear Storytelling

New Course: Up and Running With Variable Fonts

20 Best Photo Frame Effects for Photoshop to Make Your Pictures Pop

Art for All: Celebrate Diversity in Design—Volume 10

How to Make Your Premium WordPress Theme Competitive

How to Create a Pencil-Themed Seamless Pattern in Adobe Illustrator

How to Use Keynote Presenter Display View in 60 Seconds

JavaScript Regex Cheat Sheet

Quick Tip: How to Create a Memphis Style Text Effect in Adobe InDesign

How to Create Pop Art Photo Effects With Photoshop Actions

How to Create a Vintage Photo Filter With Photoshop in 60 Seconds

Creating Toon Water for the Web: Part 1

3 Strategies for Building Design Culture Where You Work

How to Make a Venn Diagram in PowerPoint in 60 Seconds

Build a Reusable Design System With React

How to Draw a Giraffe and a Giraffe Pattern

What Is the Memphis Style?

25+ Top WordPress Themes to Make Architecture Design Sites

How to Create a Lace-Up Text Effect in Adobe Photoshop

18+ Best Fitness WordPress Themes for 2018 Gym & Exercise Sites

Authentication and Authorization Using Auth0 in PHP

How to Draw a Nature Scene With Dandelions and a Butterfly in Adobe Illustrator

Creating a Magnum Mecha Character in Maya: Part 5

How to Create a Set of Glitches in Adobe Photoshop

Get Started With Pusher: Introducing Channels

Quick Tip: BEM Naming and WordPress Filters for Navigation

Accessibility in Game Design: Text Displays

What Is Public Speaking? & Why Is It Important?

WordPress Gutenberg Block API: Extending Blocks

Illustrator in 60 Seconds: The Asset Export Panel

15+ Top Responsive HTML Lawyer (Law Firm) Website Templates

Envato Tuts+ Community Challenge: Created by You, June 2018 Edition

Getting Started With the Fabric Python Library

Image
Fabric is a Python library and command-line tool for streamlining the use of SSH for application deployment or systems administration tasks. Fabric is very simple and powerful and can help to automate repetitive command-line tasks. This approach can save time by automating your entire workflow.  This tutorial will cover how to use Fabric to integrate with SSH and automate tasks. Installation Fabric is best installed via pip: $ pip install fabric Getting Started With Fabric Usage Below is a simple function demonstrating how to use Fabric. def welcome(): print("Welcome to getting started with Fabric!") The program above is then saved as fabfile.py in your current working directory. The welcome function can be executed with the fab tool as follows: $ fab welcome Welcome to getting started with Fabric Fabric provides the fab command which reads its configuration from a file,  fabfile.py . The file should be in the directory from which the command is run. A sta

15 Great Diversity and Inclusion Quotes for a Better Workplace

Interactive Storytelling: Why and How We Tell Stories

20 Best Photo to Pencil Drawing Effect Actions for Photoshop

New Course on WPBakery Page Builder for WordPress

How to Draw a Penguin

Getting Started With Firebase ML Kit for Android

How to Add Presenter Notes in Keynote in 60 Seconds

New Course: How to Customize a Logo Sting in Adobe After Effects

How to Use the Strip Silence Tool in Pro Tools

10 People Who Have Shaped the Web Design Industry

How to Create a Rubber Stamp Effect in Adobe Photoshop

How to Design an "Eid Al-Fitr" Greeting Card in Adobe Illustrator

How to Create an Ice-Cream Script Poster in Adobe InDesign

20 Best Food Blog & WordPress Website Recipe Themes

How to Create an Animated Photo Reveal for Instagram in Adobe Photoshop

New Course: Coding Blocks for WordPress Gutenberg

Which Digital Game Distribution Platform Is Right for My Game?

How to Use Conditional Formatting in Google Sheets

What's New for Devs in iOS 12 and Xcode 10?

How to Draw a Sheep

How to Create a Summer Vacation Illustration in Adobe Illustrator

A Guide to Becoming an Ethical UX Designer

15 Free Google Docs & Microsoft Word Resume Templates (2018)

How to Build Complex, Large-Scale Vue.js Apps With Vuex

How to Convert Photos Into Paintings Fast With Photoshop Actions

Illustrator in 60 Seconds: How to Use Compound Shapes

Creating Stylish and Responsive Progress Bars Using ProgressBar.js

Image
Nothing on the web happens instantly. The only difference is in the time it takes for a process to complete. Some processes can happen in a few milliseconds, while others can take up to several seconds or minutes. For example, you might be editing a very large image uploaded by your users, and this process can take some time. In such cases, it is a good idea to let the visitors know that the website is not stuck somewhere but it is actually working on your image and making some progress. One of the most common ways to show readers how much a process has progressed is to use progress bars. In this tutorial, you will learn how to use the ProgressBar.js library to create different progress bars with simple and complex shapes. Creating a Basic Progress Bar Once you have included the library in your project, creating a progress bar using this library is easy. ProgressBar.js is supported in all major browsers, including IE9+, which means that you can use it in any website you are creatin

How to Filter Emails in Outlook to Specific Folders (With Rules)

Keys, Credentials and Storage on Android

Image
In the previous post on Android user data security, we looked at encrypting data via a user-supplied passcode. This tutorial will shift the focus to credential and key storage. I'll begin by introducing account credentials and end with an example of protecting data using the KeyStore. Security Storing Data Securely on Android Collin Stuart Android How to Secure an Android App Ashraff Hathibelagal Often when working with a third-party service there will be some form of authentication required. This may be as simple as a /login endpoint that accepts a username and password. It would seem at first that a simple solution is to build UI that asks the user to log in, then capture and store their login credentials. However, this isn't the best practice because our app shouldn't need to know the credentials for a 3rd party account. Instead, we can use the Account Manager, which delegates handling that sensitive information for us. Account Manager The Account Manager

Send Emails in PHP Using the Swift Mailer

Image
In this article, we're going to explore the Swift Mailer library that allows you to send emails from PHP applications. Starting with installation and configuration, we'll go through a real-world example that demonstrates various aspects of sending emails using the Swift Mailer library. What is Swift Mailer? When it comes to sending emails in PHP applications, there are plethora of options to choose from. You might even end up creating your own wrapper to setup email features quickly. However, you're always in luck if you're using a well maintained and a feature-rich library. The Swift Mailer is a popular library for sending emails from PHP applications, and is widely accepted by the PHP community. It's a feature-rich library in the sense that it covers almost every aspect of sending emails: from setting up different transports to customizing the message that's being sent. In fact, it's a pretty straightforward process to send emails using the Swift Maile

How to Make User-Friendly and Reusable Sketch Files

How to Create a Fantasy Jellyfish Photo Manipulation With Adobe Photoshop

How to Respect Indigenous People and Record Cultures and Customs Responsibly

How to Use SEO to Grow Your Law Firm Website Traffic (2018)

How to Turn Photos into Art With Artistic Photoshop Effects

How to Create a Jordan 'Hatta' Scarf Design With Adobe Illustrator

Set Up an OAuth2 Server Using Passport in Laravel

Image
In this article, we’re going to explore how you could set up a fully fledged OAuth2 server in Laravel using the Laravel Passport library. We’ll go through the necessary server configurations along with a real-world example to demonstrate how you could consume OAuth2 APIs. I assume that you’re familiar with the basic OAuth2 concepts and flow as we’re going to discuss them in the context of Laravel. In fact, the Laravel Passport library makes it pretty easy to quickly set up an OAuth2 server in your application. Thus, other third-party applications are able to consume APIs provided by your application. In the first half of the article, we’ll install and configure the necessary libraries, and the second half goes through how to set up demo resources in your application and consume them from third-party applications. Server Configurations In this section, we're going to install the dependencies that are required in order to make the Passport library work with Laravel. After install