Create a Mystical Rising Angel Photo Manipulation in Photoshop

Learn how to create this mystical image of an angel rising to the heavens from inside a castle. This tutorial will show you how to create bright heavenly light and ambient lighting, blend images together to create an angel, and finish it off with a soft focus photo effect. Preview of Final Results How to […]

The post Create a Mystical Rising Angel Photo Manipulation in Photoshop appeared first on Photoshop Tutorials.

View Tutorial: Create a Mystical Rising Angel Photo Manipulation in Photoshop

Typography in 60 Seconds: What Is Kerning, Tracking, and Leading?

Make your text look great! Learn how to fix letter-spacing and more in this quick video.

Typography in 60 Seconds: What Is Kerning, Tracking, and Leading?

Designers are very detail oriented. We know the importance of space in design, especially when dealing with typography. And you can learn how to fine tune the spacing of your work by studying some basic typography terms.

Got a minute? Master these terms by following along with our quick lessons! Learn more about kerning, tracking, and leading in this video below.

What Is Kerning?

Kerning is both a typography term and a process. It not only refers to the spacing between two letters, but is also defined as the process of adjusting these spaces manually. Kerning is best used when adjusting logos, headlines, and typographic compositions.

What is Kerning - Definition

What Is Tracking?

Also known as “letter-spacing“, Tracking refers to the overall spacing of letters (and not just two characters), allowing you to adjust the spaces in any text uniformly.

What is Tracking - Definition

What Is Leading?

Last but not least, to add more space between the lines of a paragraph you’ll need to adjust the Leading. Increase the number for a quick double spacing effect or for more readability.

What is Leading - Definition

Learn More About Typography

The start of your design career begins with more knowledge. Learn from our experts to help build your skills over time!

Get Amazing Design Resources

Want to create videos like this? Download the resources used in this video:

Check out these tutorials to learn more from our experts:

View Tutorial: Typography in 60 Seconds: What Is Kerning, Tracking, and Leading?

Beginner’s Guide to Android Layout

While Activity handles user interaction with your app, Layout determines how the app should look. In this post, you’ll learn how a layout defines the visual structure for a user interface, such as the UI for an activity or app widget.

The Layout

The Layout file is an XML file that describes the GUI of a screen of your app. For this example, we’ll be creating a linear layout, which is used to display GUI components side by side. These components can be displayed vertically or horizontally. When displayed horizontally, they are displayed in a single row. When displayed vertically, they are displayed in a single column.

Here is an example of what a linear layout looks like.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    tools:context="com.tutsplus.code.android.tutsplusupload.MainActivity">

</LinearLayout>

In the image below, you can see the code, and how it displays on an Android device.

how the code displays on an Android device

The layout starts with an XML declaration. It specifies the XML version and the encoding.

The next line is the opening tag for the linear layout. Inside it, you have a line that looks like this:

xmlns:android="http://schemas.android.com/apk/res/android"

This specifies the XML namespace, used to provide unique names for elements and attributes in an XML document. xmlns:android here describes the Android namespace. This namespacing system was chosen by Google to help Android Studio handle errors during compile time. The Android namespace helps distinguish official Android widgets from custom ones. For example, it lets you distinguish between a custom textview widget and the Android textview widget. The URI of the namespace is http://schemas.android.com/apk/res/android.

The next namespace—xmlns:tools—gives you access to tools attributes. This is not the default namespace: you can build your Android application without making use of it. However, using it helps you add metadata to your resource files that help in the manipulation and rendering of layouts in the Design View. When referencing elements or attributes provided by the tools attributes, you must add the tools prefix. I’ll explain later how we use the tools attributes in this code.

For now, let’s look at the next part.

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"

These attributes are used to determine the width and height of the layout. They also state the amount of padding to be used and whether the components are to be placed vertically or horizontally. Here, vertical orientation is chosen.

Width and Height

android:layout_width and android:layout_height are used to specify the width and height to be used for the layout component. You can use the values wrap_content or match_parent to determine the width and height of your component. wrap_content means the layout (or view) should be big enough for the content. match_parent means it should be as wide as the parent layout.

Padding

Padding is the space between the view or layout and its border. When you make use of android:padding, the space on all four sides of the view or layout will have the specified measurement. If you want to control the individual parts of the padding separately, you can use android:paddingBottom, android:paddingLeft, android:paddingRight, and android:paddingTop. Note that these values are specified in “dp”—density-independent pixels. More on these soon!

Margins

While the padding is applied to the layout or view and its border (within the component), the margin is applied to layout or view border and other surrounding components outside the component. You can use android:layout_margin to specify the margin on all sides at once, or you can control the individual parts of the padding separately with android:layout_marginBottom, android:layout_marginLeft, android:layout_marginRight, and android:layout_marginTop. These are also specified in dp.

What Is dp?

A density-independent pixel, or dp for short, is an abstract unit that is based on the physical density of the screen. Density-independent pixels are used when defining UI layouts. They’re used to express the dimensions of the layout or position in a density-independent way. You can read more about density independence in Android here.

Context

The context attribute is used to declare the activity the layout is associated with by default. Here you can see that the sample layout is associated with the MainActivity. 

tools:context="com.tutsplus.code.android.tutsplusupload.MainActivity"

You can also write this in a shorter form as:

tools:context=".MainActivity"

This is only used when working in Design View, as a layout can be associated with more than one activity.

Child Components

Layouts contain child components. Actually, that is their whole purpose: to organize and display other components.

Let’s add some components to the linear layout—starting with a button view.

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        BeerAdviser
        android:text="Button" />

We’ll also add a text view, which has very similar properties to a button view.

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a text view" />

We have covered android:layout_height and android:layout_width, so now let’s see the others.

Component Id

The android:id property is used to give the component an identifying name. This allows you to access your component from within the Java code of an activity, using the findViewById() method.

Component Text

The android:text attribute is used to tell Android what the text component should display. In the case of the button view, the text Button will be displayed.

Let’s run our code so far and see what it looks like.

Android device showing a button on screen

Recapping, the first element has to be the layout you will be making use of. Here it is LinearLayout. The orientation specified tells Android to display the components in the layout in a single vertical column. The <Button> element is the first element that will be displayed. It will take up the width of the parent, and its height will be determined by its text content.

The second element is a text view which will be displayed underneath the button. Both the height and width will be restricted to the height and width of the content.

String Resources

In our example above, we hardcoded the text for the text view using android:text="This is a text view". This is fine when you start off as a beginner, but it’s not the best approach. Suppose you created an app that hits big on Google Play Store, and you don’t want to limit yourself to just one country or language. If you hardcoded all the text in your layout files, making your app available for different languages will be difficult. So what is the best approach?

The best approach involves you putting your text values in a string resource file: strings.xml. This makes internationalization for your app easy. It makes it easier to make global changes to your application as you need to edit only one file.

The strings.xml file is located in the app/src/main/res/values folder. When you open it, it should have a structure like this.

    <resources>
        <string name="app_name">Tutsplus Upload</string>
    </resources>

Here you have one string resource named app_name, with a value of Tutsplus Upload.

You can add other string resources using the same structure. For the button and text in your layout, the structure can look like this.

    <resources>
        <string name="app_name">Tutsplus Upload</string>
        <string name="main_button">Button</string>
        <string name="first_text">This is a text!</string>
    </resources>

To use these string resources in your layout, you have to update the text part of both views with their respective resource.

    android:text="@string/main_button"
    android:text="@string/first_text"

The @string tells Android to look for a text value in the string resource file. After that is the resource name. Android will look up the value of the resource that corresponds to that name and use it for your component.

Wrapping up, here’s how your layout will look:

Final code and layout on Android device

Conclusion

In this post, you’ve learned some of the basics of working with layouts. As you build more complex applications, you will see how all the parts fit together. After following along with this post, you should be able to understand how to work with linear layouts, text and button views, and string resources. 

While you’re here, check out some of our other great posts on Android app development.

View Tutorial: Beginner’s Guide to Android Layout

Optimize Your Website Without AMP: Optimization Checklist

When you want to optimize a website’s performance manually, without using a ready-made approach like AMP, what are the key steps you need to take?

In this video from my course Optimize Your Website Without AMP, you’ll discover a simple checklist you can use to ensure your site loads just as fast as it would with AMP, if not faster. 

Optimize Your Website Without AMP: Optimization Checklist

 

The Optimization Checklist

Here’s the basic optimization checklist we’ll be working with:

  • Should load as fast as—or faster than—an AMP version of the same site.
  • Load web fonts as early as possible to get them coming in.
  • Efficient, small size CSS loaded inline in the head section.
  • Write CSS in external files for more practical development.
  • Combine and minify JavaScript.
  • Set up a build process to make the above two things happen (we’ll use Gulp).
  • Use only async JavaScript.
  • Defer JavaScript so it doesn’t block rendering (run JS at the right time).
  • Vanilla JS so no JS dependencies to minimize the amount of code to load.
  • Prefer simple JS.
  • Create no JS fallbacks wherever possible.
  • Use lazy loading on images and iframes (videos etc.).
  • Prevent reflow to avoid layout recalculation.

As you can see, this checklist is part tasks that we need to complete, it’s part principles that we need to follow, and it’s also part goals that we want to achieve. Let’s look at each of them in more detail.

Load as Fast as—or Faster Than—an AMP Version of the Same Site

The first thing on our list is a goal, and that is, we want our site to load as fast or faster than the AMP version of the same site. It’s a good idea to keep checking on your load time as you go along with your your development process, so that’s what we’re going to be doing as we work through everything.

Load Web Fonts as Early as Possible

Now let’s get into the technical things that we need to do. The first consideration is that we want to get any web fonts that we will be using loaded as fast as possible. 

Web fonts are often relatively large files, and you can’t show your content properly until those web fonts are loaded. So we’re going to make sure that we get those web fonts loaded very early in the picture, probably as the first thing that starts loading.

Efficient CSS Loaded Inline in the Head Section

The next thing that we’re going to do is make sure that our CSS is very efficient and very small in size. 

Sometimes you can be tempted to take a shortcut and include a massive library of CSS into your sites to help speed up the development process, even if most of that CSS is not necessary.

Throwing in a massive CSS file might help speed up your development, but it’s probably going to slow down your website and diminish the performance of your sites in search engines. I say that because load speed is now a ranking factor. So it’s important for your CSS to be as small and efficient as possible.

You’re also going to take that CSS and load it inline into the head section of the site. This is a technique that AMP uses, and it is an excellent optimization technique. So that is one that we definitely are going to be holding onto with our own optimization process.

Write CSS in External Files

Even though our CSS is going to be inline in the head section, we still want to work on our CSS in separate files. Trying to write CSS directly into the head section of an HTML file is really not very practical. So we’re going to get everything set up so that we can work on our CSS files externally, and then have them inline in the HTML files later, so we get the best of both worlds.

Combine and Minify JavaScript

The next thing that we’re going to do is make sure that to the greatest degree possible any JavaScript that we’re using is combined and minified. 

One of the downsides of working with AMP is that you have multiple JavaScript files you have to bring in, and each one of them has to come in separately. But to the greatest extent possible, we’re going to take our JavaScript and combine it into a single file, so that we have the absolute minimum number of browser requests. 

Set Up a Build Process

To make both of those things happen—working on CSS externally and combining and minifying JavaScript—we’re going to set up a build process that will make both of these things happen automatically.

We’ll be using Gulp to do that. That means that you’ll need to have Node installed on your system, and you’ll also need to dabble a little bit in using the terminal. But during the course I’ll step you through what to do, so even if you haven’t worked with the terminal, you should be just fine.

Use Only Async JavaScript

Next up is that we’re only going to be using async (asynchronous) JavaScript. What this means is that the way we’re going to load our JavaScript is not going to prevent anything else on the page from loading at the same time. 

Defer JavaScript

Another thing that we will be doing with our JavaScript is that we’re going to defer it. That means that we’re going to push our JavaScript right to the end of the rendering process. We’re going to make sure everything else in our site is fully loaded before we do anything with JavaScript at all. 

Vanilla JavaScript Only

We’re also going to make sure that every bit of JavaScript we use is vanilla JavaScript, and we’re doing this to make sure that we don’t have dependencies. If we use, say, a lightbox that depends on jQuery, now we have to load jQuery into our site, and that’s more file size and more processing for the browser to handle. 

It’s often not necessary to use multiple JavaScript libraries. You can often achieve the functionality that you want just as well with vanilla JavaScript.

Prefer Simple JavaScript

We’re also going to prefer simple JavaScript. So we’re going to try to keep the file size of our JavaScript down to an absolute minimum. We don’t want lots of bells and whistles; we want to keep everything as tight and efficient as possible. 

Create No-JavaScript Fallbacks

And the last point on JavaScript is that we want to make sure that to the best degree we can, we cater to people who have JavaScript turned off.

With the AMP version of the site that we’re going to be creating, if we turn off JavaScript, you can see that we don’t have much content to look at.

AMP site cover image
AMP site with messages about lack of JS

There’s a little more that we could do with this site to make it a little bit more fallback-friendly. But for the most part, AMP does fully depend on JavaScript in order to give you any type of content at all. 

With our non-AMP version, we’ve still got our background image showing just fine, and we’re actually also inserting some fallback for the font icons here as well, because often people who block JavaScript block fonts as well.

No AMP site

We have a message letting people know why the YouTube video can’t appear, and the same thing underneath where our CodePen would be.

Message explaining lack of YouTube video

Our gallery still shows up just the same, and then down at the bottom, we just have the text version of our tweets showing as a fallback in case there’s no JavaScript.

Lightbox gallery with no JavaScript

Use Lazy Loading

We are also going to make sure we use lazy loading on both images and iframes. If you have a site that is quite long, the person is typically going to look at what’s at the top of that website first, and then they’ll scroll down and have a look at the rest of the content.

But you don’t want to make them wait for the rest of that content to load before they can start looking at what’s at the top of the content. So, with lazy loading, you only load what’s at the top first, and then you gradually load the rest of the content as the person scrolls down.

Prevent Reflow

Finally, we’re also going to make sure that we prevent reflow. Something that you’ll often see, especially on mobile, is that as slower elements load in, like images for example, the rest of the page layout has to readjust itself around the newly loaded image. 

This is bad for a couple of reasons:

  1. It’s just really annoying for a user. They’ll be looking in one place, and then the whole layout changes, and they lose the piece of text they were reading, and they have to find it again. Then it reflows again, and the whole experience is just very bad. 
  2. One of the most expensive things that a browser has to do is calculate layout, and you want to make sure that the browser only has to calculate layout once. So even before your images have loaded, you want to make sure that you’ve allocated the correct space for those images. So the first layout that loads is the correct layout. 

Watch the Full Course

In the full course, Optimize Your Website Without AMP, you’ll put this checklist into practice. You’ll learn exactly how to take an existing AMP-based site and convert it to use non-AMP equivalents. In other words, you’ll learn how to make your sites run blazing fast, with optimization techniques that you decide on for yourself.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 400,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

View Tutorial: Optimize Your Website Without AMP: Optimization Checklist

How to Create a Color Font With Adobe Illustrator and Fontself Maker

Final product image
What You’ll Be Creating

Creating fonts has never been so fast, fun
and easy as with Fontself, a powerful extension for Adobe
Illustrator and Photoshop CC. In this tutorial, you’ll learn how to make a color font.

Fontself allows you to create a fully
functional font with all the bells and whistles that most professional fonts
have (kerning, ligatures, etc.), and the most exciting thing about it is that it helps you to create a color font!
You can make your imagination go wild and add any shapes and colors you want (including gradients and other effects) to your characters. 

Apart from creating color fonts, that can be used in Adobe Photoshop CC 2017/2018 and Adobe Illustrator CC 2018, you can use Fontself to create standard “non-color” vector fonts that can be used in any other software like older versions of Adobe CC apps, CS6, Microsoft Word, and many others.

fontself

Can’t wait to try
it out? 

Thousands of creatives from Adobe,
Google, Apple, Microsoft and other well-known companies already use Fontself. What
is also cool about it is that it is 100% indie software that was created by
three passionate developers with a goal of bringing us a user-friendly font
creation tool. And they made it!

Let’s go through the whole process of
creating and using our own color font in Adobe Illustrator CC 2018 and Fontself Maker!

1. How to Draw the Letter A

Step 1

When I’m creating a font from
scratch, I usually start by depicting a general idea. This time I decided to create a font in a colorful line-art style.

I started with a rough sketch of every
letter, trying to make each of them unique yet preserving the overall style.
I’ll be using this sketch as a guide for the outlines that we’ll be making in
Adobe Illustrator.

Please note that Fontself Maker works with Adobe Illustrator CC 2015.3 and newer but to use color fonts you’ll need CC 2018 so don’t forget to update if you haven’t done so yet!

font sketch

Step 2

Begin by creating a New Document of desired size in RGB Color Mode. If you select other Color Mode, all colors will be turned to RGB even if defined in CMYK or if the document in the CMYK color space. You can learn more about color space in Fontself from their help page

Let’s start with the letter A. Take the Polygon Tool (you can find it in the
same drop-down menu as the Rectangle
Tool (M)
) and single-click anywhere on the Artboard. Set the number of Sides to 3 and make a triangle.

Set its Fill color to None and
its Stroke color to dark purple in
the Color panel. Now, in the Stroke panel (Window > Stroke), set the Weight
to 2.5 pt and Cap to Round Cap.

Now we can delete the bottom part of the
shape that we don’t need. Take the Direct
Selection Tool (A)
and click the bottom edge of the triangle. Hit the Delete key (or Backspace if you’re on a Mac) to delete it.

use the polygon tool

Step 3

Select the shape with the Selection Tool (V) and hit Enter to open the Move window. Set the Horizontal value to 25 px and Vertical to 0 px, and click Copy to duplicate the shape and move it to the right.

move the shape

Step 4

Keeping both shapes selected, take the Shape Builder Tool (Shift-M), hold down
Alt, and click the piece on the right
to delete it.

use the shape builder tool

Step 5

Copy the first shape and resize it to make a tiny triangle. Place it at
the bottom, creating the feather of an arrow. Select the shape, hold down Alt, and drag it up to create a copy. Add
two more copies and attach them along the left edge of the triangle.

Group
(Control-G)
the created elements of the feather and
double-click the Reflect Tool (O). Select the Vertical Axis and click Copy to flip the shape to the opposite
side.

use the reflect tool

Step 6

Take the Ellipse Tool (L), hold down Shift, and make a 10 x 10 px circle with
dark-blue Stroke and turquoise Fill color.

Tip: Use the Eyedropper Tool (I)
to pick the fill or stroke color or any appearance settings and apply them to
other objects. You can access the options of the Eyedropper Tool (I) by double-clicking
it in the Tools panel, and then you can tick the
settings that you want to pick and apply.

add circles with the ellipse tool

Step 7

Copy the stroke by selecting it and dragging to the side while holding Alt. Use the Pen Tool (P) to add an anchor point in the middle of the line. Then
use the Delete Anchor Point Tool (-)
to delete the point on top of the stroke.

add another stroke

Step 8

Take the Pen Tool (P) or the Line
Segment Tool (\)
and hold Shift
to make a horizontal line across the letter. This is going to be the bar of the
letter A.

Copy (Control-C > Control-F) the stroke and drag it down. Make it shorter by moving the points
with the Direct Selection Tool (A).

add the bar of the letter

Step 9

Now use the Pen Tool (P) to create a zigzag line in the upper part of the
letter, as shown in the image below.

Add some more strokes on both sides of the
letter, making it look more detailed.

create a zigzag

Step 10

Now that the outlines of the letter A are
ready, let’s add some color! We can duplicate
(Control-C > Control-B)
the letter and Hide the copy in the Layers
panel by clicking the tiny eye icon, just in case we need to use these outlines later.

Select the visible copy and go to Object > Live Paint > Make.

make a live paint

Step 11

Now grab the Live Paint Bucket (K) and hover over the area that you want to
fill with color. Once you see a red outline, click the area to fill it.

Continue using the Live Paint Bucket (K) and selecting new colors in the Color panel to fill the triangles in the top part of the letter.

use the live paint bucket

Step 12

Now let’s go to Object > Live Paint > Expand in order to turn each colored
section into a separate object.

expand the live paint

Step 13

Use the Direct Selection Tool (A) to drag a couple of elements out, making
the composition more dynamic.

And there we have it! Our first letter is
finished! Let’s move to the next one and see what else we can use to make it
look unique.

drag out the elements

2. How to Design the Letter B

Step 1

I’m not using any snapping or special grids for this font,
because I want to preserve a bit of a handcrafted touch without making it
geometrically perfect or pixel perfect. However, to make the font consistent, we need to keep
all the letters of the same height (while the width will be different).

Turn on the Rulers (Control-R) and drag a couple of horizontal guides onto the
Artboard to mark the height of the letter A. We can access the Guides menu from View > Guides.

use the rulers and guides

Step 2

Let’s start with the stem of the letter B.
Use the Rectangle Tool (M) to make a
narrow rectangle of about 30 x 120 px
(remember to keep the height equal to the height of your first letter).

Select its bottom edge with the Direct Selection Tool (A) and delete
it.

Add a few horizontal lines and attach a
couple of 10 x 10 px turquoise
circles to the bottom of the shape. We can copy
these circles from our letter A.

make a rectangle

Step 3

Now let’s make a straight horizontal line
using the Pen Tool (P) and go to Effect > Distort & Transform >
Zig Zag.
Set the Size to 10 px, Ridges per segment to 5, and Points to Corner.

Click OK
and go to Object > Expand Appearance
to apply the effect.

Place the created zigzag inside the top
part of the letter and resize it to make it fit the rectangle.

make a zigzag effect

Step 4

Let’s create a rectangle of about 45 x 55
px
size and align it to the top and left edges of the letter. To do this,
select the stem and the created rectangle and click the stem once again to make
it a Key Object (you will see a
thicker selection around it).

Open the Align panel (Window >
Align
) and click Horizontal Align
Left
and Vertical Align Top.

align the shapes

Step 5

Let’s select the top and bottom right corners
of the rectangle with the Direct
Selection Tool (A)
and make them rounded by pulling the circle marker of
the Live Corners closer to the
center. We can also adjust the Corners radius manually from the control panel on top.

Tip: If you can’t find the top control panel after updating to Adobe Illustrator CC 2018, don’t worry! It’s still there, and you can turn it on in Window > Workspace > Essentials Classic.

Let’s delete the left edge of the shape.
Select the bottom left corner with the Direct
Selection Tool (A)
and press Delete
(Backspace on Mac).

Repeat the same for the top left point,
leaving only the arched shape.

Make a larger arc for the bottom bowl of
the letter B.

make the corners rounded

Step 6

Add a smaller arc inside the bottom
bowl. Make the letter more intricate by adding horizontal and vertical strokes.
Finish off the outlines by placing two circles inside the bottom bowl.

add details and strokes

Step 7

Let’s duplicate
(Control-C > Control-B)
the letter and keep the copy invisible
in case we need it later.

Select the visible copy and Object > Live Paint > Make. Use
the Live Paint Bucket (K) and the Eyedropper Tool (I) to pick and apply
colors to the elements of the letter B.

Let’s finish off the letter. Go to Object > Live Paint > Expand and
use the Direct Selection Tool (A) to
drag some of the colored parts out of the outline.

Awesome! The second letter is finished!
Let’s check out some more techniques that we can use for other letters and
symbols.

apply colors with live paint bucket

3. How to Draw the Letter C

Step 1

Take the Ellipse Tool (L) and start with the base of the letter by making a 115 x 115 px circle. Copy the created circle and Paste in Front (Control-C > Control-F). Decrease
the size of the copy to 80 x 80 px.

As you may notice, the letter is a bit
lower than the top guideline. We’ve left some space above the circle in order
to add a few details there.

make a circle for the base

Step 2

Take the Pen Tool (P), hold Shift, and make a vertical line across the
circles. Keeping the line selected, double-click the Rotate Tool (R) and set the Angle
to 12 degrees. Click Copy to add a rotated copy of the line.

Now press Control-D to repeat the last action and keep pressing until you get
30 copies to fill the circle.

Let’s group
(Control-G)
the created rays and hide
them for now.

make a vertical line

Step 3

Now let’s create a silhouette of the letter
C. Use the Add Anchor Point Tool (+)
to add two points on the right side of the larger circle and two for the
smaller one, as marked in the screenshot below.

Now we can use the Direct Selection Tool (A) to click the segment of arc between the created points and delete it. Repeat the same for
both circles.

add points and delete segments

Step 4

Now let’s reveal the hidden rays and select
all the elements of the C.

Take the Shape Builder Tool (Shift-M) and click the rectangles formed by
crossing lines. Don’t click all of them; leave some untouched space at the bottom
of the shape.

Now we can select the unneeded pieces of
the rays in the center of the C and delete them.  

use the shape builder tool

Step 5

Let’s break the pieces of the rays on the
left of the letter C.

Use the Pen Tool (P) to add a new anchor point somewhere in the middle of
the line and delete the top point with the Delete Anchor Point Tool (-). This way we detach the piece from the
edge of the letter.

Continue alternating the rays, making some
of them shorter and detaching others to add variation to the silhouette of the
letter.

break the lines

Step 6

Add some more arched strokes to the inner
part of the letter. Attach circles to the tips of the large arcs.

Duplicate the created outlines and use the Live Paint and the Live
Paint Bucket (K)
to add colors.

add more details and colors

Step 7

Object
> Live Paint > Expand
the shape and drag out
some of the colored rectangles. Great work! Our third letter is finished!

Go on and create more letters, numerals, and
punctuation, everything that you might need for your future font. Don’t worry if you don’t
make all the desired symbols at once; you can always reopen your font file and add them later.

expand the live paint

4. How to Make a Color Font in Fontself

Step 1

Now for the fun part! Since we have everything
prepared, we can finally create a font using Fontself Maker! 

First of all, let’s open the Layers panel and place all the letters
in alphabetical order, from left to right. Fontself will automatically assign the proper characters if your place them in the correct order.

We can rename the bottom guideline, setting it as a baseline.

rearrange the letters

Step 2

Now let’s make sure that all our letters
are aligned to the bottom and placed
on the baseline. Select your characters and click Vertical Align Bottom in the Align panel, using one of the characters as a Key Object.

align the letters to the baseline

Step 3

Go to Window
> Extensions
and run Fontself
Maker
. A compact window of the extension will load, and you can adjust its
size by dragging its bottom corners. It has a simple and user-friendly
drag-and-drop interface with pop-up hints and an online chat assistant that can help you with your questions.

open fontself maker

Step 4

Now let’s select our alphabet and drag it to the Fontself window. Here we have several options to choose from. If you
already have all the characters ready, you can use the ‘A-Z’ area and drop your letters there. Fontself will automatically place them in right order, giving each letter a proper name. 

Otherwise, if you don’t have all the characters finished yet, place your mouse
cursor over the ‘Any character (Batch)’
field and release the mouse key to upload your characters.

In our case, we’re making an uppercase
font, so all the letters will be the same for both upper and lower case.

add characters to fontself

Step 5

What is great about Fontself is that it
makes things so much easier: once we have arranged and aligned our letters, the
program will place them in the correct order, using the information from the Layers panel. Just make sure that you
drag and drop everything together, including the baseline.

If you need some more control
over the guidelines and you wish to add an ascender and descender, you can make
it too! Just add two more guidelines, rename them “ascender” and “descender”
in the Layers panel, and then drag and
drop them into Fontself together with your alphabet. Voila!

You can learn more about using guides in
Fontself from the help page.

Now we have every letter placed in its own
slot. From here, we can type something in the Live Preview window to check out how it looks and play with Letter Space, Line Space and Scale, if needed.

Clicking the tiny cog icon on the
right allows you to change the font size, alignment, and background color.

We can also expand the letter preview
window by clicking the tiny diagonal arrows icon in the top left corner of every preview
slot (circled in the screenshot below) or by double-clicking the glyph.

Fontself maker settings

Step 6

Here we have some more options for
each letter. We can drag the lines, changing the position of the ascender and descender and adjusting other settings.

glyph settings

Step 7

Once we’re happy with the letters, let’s
add other symbols and punctuation! To do this, just select the elements on the
Artboard and click the Batch button
in the Home window of Fontself. Your
symbols will be added and placed in the proper order.

add punctuation

Step 8

Now let’s take a look at some advanced
settings that are vital when creating any font. Find and click the Advanced button in the Home window of
Fontself.

From here, we can adjust the Spacing, Kerning, and some other
parameters that are important to make our font look balanced and consistent.

advanced settings of Fontself

Step 9

Let’s start with Spacing.

In typography, spacing or tracking is the amount of space between the characters, which affects the density and gives the font its relative openness or tightness. In fact, a good spacing will save you a bunch of time when creating a font, so make sure you start by adjusting it first!

There are several ways to work with spacing in Fontself. First of all, click on the Spacing Pad window and type some phrases there to see how the characters behave within a text. Now, in the grey area on the right, you can see a list of letters and their values. Here you can edit the spacing by entering precise values in the table.

adjust spacing in fontself

Step 10

Another way to edit spacing is to do it manually by clicking the character itself and dragging the dashed lines on the left and right sides of it. You will see all the adjustments in the Spacing Pad and in the Live Preview area which already has a sample text with all your characters.

edit spacing in fontself

Step 11

Now that we’re happy with the density of the text and its overall look, it’s time to adjust the kerning pairs by clicking
the Kerning button.

Kerning is the process of adjusting the spacing between specific character pairs to
achieve a visually pleasing result. In proportional all-caps fonts, it often
happens that letters in some common combinations (such as VA or AW) look
too far away from each other. In this case, we need to find such pairs and
adjust the spacing between them manually, creating kerning pairs. And Fontself has this function too! What is more, it
already has some common kerning pairs in the Live Preview window, so that you
can see the result instantly.

The same as with spacing, there are several ways to adjust
kerning. First of all, click on the Kerning
Pad
window and type some kerning pairs that you want to edit, for example
AVA. Now, in the grey area on the right, you can see the Kerning pairs window and type the values there manually.

make kerning pairs

Step 12

Another way to adjust kerning is to click
the character and drag the dashed line between the pair. The red line appears for
negative values, making the space between the letters smaller. The blue
line indicates the increasing space with a positive value that moves the
letters farther away from each other. Simple as that.

adjust kerning pairs

Step 13

The next important thing that you might
want to use in your font—and Fontself has this feature—is the use of ligatures!

A ligature is a combination of two or more letters into one symbol. For
example, in common combinations like ‘tt’, ‘fi’, and ‘ff’, we might want to change
some elements of the letters, such as crossbars, to make them look better together. Moreover, while working with color fonts, we can use ligatures in more creative ways, like making some words or names look fancy by adding new elements to them, such as particles, flowers or swashes. In this case, the whole composition can be used as a symbol, i.e. ligature. 

use of ligatures in fontself

Let’s say we want to merge two letters
together in ‘TT’ to make a single bar for them. Once you draw out the new letter, select it on the Artboard. Then open
the Fontself window and type ‘TT’ in the text area on top and click the Create Ligature button right next to
it.

add ligatures in fontself

Step 12

Once you’ve clicked the button, Fontself
will ask you what kind of ligature you want to create. Later on, you can
find both Standard Ligatures and Discretionary Ligatures in the OpenType panel (Window > OpenType) of Adobe Illustrator and see how they work.

types of ligatures in fontself

Step 13

The last but not the least function that
can make your font more unique and playful is using Alternates—the alternative versions of some (or all) characters
that add variety to the whole text. Those can be versions with other colors, outlines, or swashes.

For example, here you can see that in the
word ‘COLORS’, the ‘O’ letters are slightly different. This is how we do it.
Once you have the alternative version of the letter prepared, select it on the
Artboard and add it to Fontself. The program will ask you if you want to Replace the existing letter ‘O’ or create
an alternate glyph. Just click the Alternate
button, and there you have it!

add alternates in fontself

Step 14

Now that we have added all the characters to
Fontself, adjusted the spacing and kerning, and set the ligatures and alternates, it’s time
to name our baby!

Click the Font Infos button in the Home
window of Fontself and fill in all the needed information. The developers’
hints will guide you throughout the process. I can’t but mention their great
sense of humor in this part.

name your font and add info

Step 15

Finally, it’s time to try out our first
color font! Oh, I’m so excited!

To start with, we can test it right in
Adobe Illustrator by clicking the Install
button in the top part of the Home window of Fontself. Now you can select your font in the Character panel of Adobe Illustrator (Window > Character) and try it out by typing something!

install your font and test it

Step 16

Once you’re happy with the result, go ahead
and click the Export button in the
Fontself window to generate an OpenType file with your font and all the cool
features that we added to it using the extension. Exporting the font also allows you to Save your work and whenever you need to edit it again, you’ll just have to Open it in Fontself and there you have it!

export your opentype font

Congratulations! Our Color Font Is Finished!

Great work! Now we can have fun using
our color font in Adobe Photoshop CC 2017/2018 and Adobe Illustrator CC 2018!
The process of adjusting and installing the font with the help of Fontself Maker was
so fun and easy that I haven’t even noticed how I finished all the steps
that usually make me bored.

I hope you enjoy creating characters
in Adobe Illustrator and turning them into a color font in Fontself as much as
I do. Feel free to try it out, and don’t forget to share your results in the
comments below or in social networks with #fontself!

Color Font in Fontself

If you like the typeface that we’ve created in this tutorial and you wanna play with it, feel free to grab the Fiesta Color Font at Envato Elements! In the archive you will also get vector files with all the characters to make your own lettering or to try out how it functions in Fontself Maker. Enjoy!

View Tutorial: How to Create a Color Font With Adobe Illustrator and Fontself Maker

How to Create a Color Font With Adobe Illustrator and Fontself Maker

Final product image
What You’ll Be Creating

Creating fonts has never been so fast, fun
and easy as with Fontself, a powerful extension for Adobe
Illustrator and Photoshop CC. In this tutorial, you’ll learn how to make a color font.

Fontself allows you to create a fully
functional font with all the bells and whistles that most professional fonts
have (kerning, ligatures, etc.), and the most exciting thing about it is that it helps you to create a color font!
You can make your imagination go wild and add any shapes and colors you want (including gradients and other effects) to your characters. 

Apart from creating color fonts, that can be used in Adobe Photoshop CC 2017/2018 and Adobe Illustrator CC 2018, you can use Fontself to create standard “non-color” vector fonts that can be used in any other software like older versions of Adobe CC apps, CS6, Microsoft Word, and many others.

fontself

Can’t wait to try
it out? 

Thousands of creatives from Adobe,
Google, Apple, Microsoft and other well-known companies already use Fontself. What
is also cool about it is that it is 100% indie software that was created by
three passionate developers with a goal of bringing us a user-friendly font
creation tool. And they made it!

Let’s go through the whole process of
creating and using our own color font in Adobe Illustrator CC 2018 and Fontself Maker!

1. How to Draw the Letter A

Step 1

When I’m creating a font from
scratch, I usually start by depicting a general idea. This time I decided to create a font in a colorful line-art style.

I started with a rough sketch of every
letter, trying to make each of them unique yet preserving the overall style.
I’ll be using this sketch as a guide for the outlines that we’ll be making in
Adobe Illustrator.

Please note that Fontself Maker works with Adobe Illustrator CC 2015.3 and newer but to use color fonts you’ll need CC 2018 so don’t forget to update if you haven’t done so yet!

font sketch

Step 2

Begin by creating a New Document of desired size in RGB Color Mode. If you select other Color Mode, all colors will be turned to RGB even if defined in CMYK or if the document in the CMYK color space. You can learn more about color space in Fontself from their help page

Let’s start with the letter A. Take the Polygon Tool (you can find it in the
same drop-down menu as the Rectangle
Tool (M)
) and single-click anywhere on the Artboard. Set the number of Sides to 3 and make a triangle.

Set its Fill color to None and
its Stroke color to dark purple in
the Color panel. Now, in the Stroke panel (Window > Stroke), set the Weight
to 2.5 pt and Cap to Round Cap.

Now we can delete the bottom part of the
shape that we don’t need. Take the Direct
Selection Tool (A)
and click the bottom edge of the triangle. Hit the Delete key (or Backspace if you’re on a Mac) to delete it.

use the polygon tool

Step 3

Select the shape with the Selection Tool (V) and hit Enter to open the Move window. Set the Horizontal value to 25 px and Vertical to 0 px, and click Copy to duplicate the shape and move it to the right.

move the shape

Step 4

Keeping both shapes selected, take the Shape Builder Tool (Shift-M), hold down
Alt, and click the piece on the right
to delete it.

use the shape builder tool

Step 5

Copy the first shape and resize it to make a tiny triangle. Place it at
the bottom, creating the feather of an arrow. Select the shape, hold down Alt, and drag it up to create a copy. Add
two more copies and attach them along the left edge of the triangle.

Group
(Control-G)
the created elements of the feather and
double-click the Reflect Tool (O). Select the Vertical Axis and click Copy to flip the shape to the opposite
side.

use the reflect tool

Step 6

Take the Ellipse Tool (L), hold down Shift, and make a 10 x 10 px circle with
dark-blue Stroke and turquoise Fill color.

Tip: Use the Eyedropper Tool (I)
to pick the fill or stroke color or any appearance settings and apply them to
other objects. You can access the options of the Eyedropper Tool (I) by double-clicking
it in the Tools panel, and then you can tick the
settings that you want to pick and apply.

add circles with the ellipse tool

Step 7

Copy the stroke by selecting it and dragging to the side while holding Alt. Use the Pen Tool (P) to add an anchor point in the middle of the line. Then
use the Delete Anchor Point Tool (-)
to delete the point on top of the stroke.

add another stroke

Step 8

Take the Pen Tool (P) or the Line
Segment Tool (\)
and hold Shift
to make a horizontal line across the letter. This is going to be the bar of the
letter A.

Copy (Control-C > Control-F) the stroke and drag it down. Make it shorter by moving the points
with the Direct Selection Tool (A).

add the bar of the letter

Step 9

Now use the Pen Tool (P) to create a zigzag line in the upper part of the
letter, as shown in the image below.

Add some more strokes on both sides of the
letter, making it look more detailed.

create a zigzag

Step 10

Now that the outlines of the letter A are
ready, let’s add some color! We can duplicate
(Control-C > Control-B)
the letter and Hide the copy in the Layers
panel by clicking the tiny eye icon, just in case we need to use these outlines later.

Select the visible copy and go to Object > Live Paint > Make.

make a live paint

Step 11

Now grab the Live Paint Bucket (K) and hover over the area that you want to
fill with color. Once you see a red outline, click the area to fill it.

Continue using the Live Paint Bucket (K) and selecting new colors in the Color panel to fill the triangles in the top part of the letter.

use the live paint bucket

Step 12

Now let’s go to Object > Live Paint > Expand in order to turn each colored
section into a separate object.

expand the live paint

Step 13

Use the Direct Selection Tool (A) to drag a couple of elements out, making
the composition more dynamic.

And there we have it! Our first letter is
finished! Let’s move to the next one and see what else we can use to make it
look unique.

drag out the elements

2. How to Design the Letter B

Step 1

I’m not using any snapping or special grids for this font,
because I want to preserve a bit of a handcrafted touch without making it
geometrically perfect or pixel perfect. However, to make the font consistent, we need to keep
all the letters of the same height (while the width will be different).

Turn on the Rulers (Control-R) and drag a couple of horizontal guides onto the
Artboard to mark the height of the letter A. We can access the Guides menu from View > Guides.

use the rulers and guides

Step 2

Let’s start with the stem of the letter B.
Use the Rectangle Tool (M) to make a
narrow rectangle of about 30 x 120 px
(remember to keep the height equal to the height of your first letter).

Select its bottom edge with the Direct Selection Tool (A) and delete
it.

Add a few horizontal lines and attach a
couple of 10 x 10 px turquoise
circles to the bottom of the shape. We can copy
these circles from our letter A.

make a rectangle

Step 3

Now let’s make a straight horizontal line
using the Pen Tool (P) and go to Effect > Distort & Transform >
Zig Zag.
Set the Size to 10 px, Ridges per segment to 5, and Points to Corner.

Click OK
and go to Object > Expand Appearance
to apply the effect.

Place the created zigzag inside the top
part of the letter and resize it to make it fit the rectangle.

make a zigzag effect

Step 4

Let’s create a rectangle of about 45 x 55
px
size and align it to the top and left edges of the letter. To do this,
select the stem and the created rectangle and click the stem once again to make
it a Key Object (you will see a
thicker selection around it).

Open the Align panel (Window >
Align
) and click Horizontal Align
Left
and Vertical Align Top.

align the shapes

Step 5

Let’s select the top and bottom right corners
of the rectangle with the Direct
Selection Tool (A)
and make them rounded by pulling the circle marker of
the Live Corners closer to the
center. We can also adjust the Corners radius manually from the control panel on top.

Tip: If you can’t find the top control panel after updating to Adobe Illustrator CC 2018, don’t worry! It’s still there, and you can turn it on in Window > Workspace > Essentials Classic.

Let’s delete the left edge of the shape.
Select the bottom left corner with the Direct
Selection Tool (A)
and press Delete
(Backspace on Mac).

Repeat the same for the top left point,
leaving only the arched shape.

Make a larger arc for the bottom bowl of
the letter B.

make the corners rounded

Step 6

Add a smaller arc inside the bottom
bowl. Make the letter more intricate by adding horizontal and vertical strokes.
Finish off the outlines by placing two circles inside the bottom bowl.

add details and strokes

Step 7

Let’s duplicate
(Control-C > Control-B)
the letter and keep the copy invisible
in case we need it later.

Select the visible copy and Object > Live Paint > Make. Use
the Live Paint Bucket (K) and the Eyedropper Tool (I) to pick and apply
colors to the elements of the letter B.

Let’s finish off the letter. Go to Object > Live Paint > Expand and
use the Direct Selection Tool (A) to
drag some of the colored parts out of the outline.

Awesome! The second letter is finished!
Let’s check out some more techniques that we can use for other letters and
symbols.

apply colors with live paint bucket

3. How to Draw the Letter C

Step 1

Take the Ellipse Tool (L) and start with the base of the letter by making a 115 x 115 px circle. Copy the created circle and Paste in Front (Control-C > Control-F). Decrease
the size of the copy to 80 x 80 px.

As you may notice, the letter is a bit
lower than the top guideline. We’ve left some space above the circle in order
to add a few details there.

make a circle for the base

Step 2

Take the Pen Tool (P), hold Shift, and make a vertical line across the
circles. Keeping the line selected, double-click the Rotate Tool (R) and set the Angle
to 12 degrees. Click Copy to add a rotated copy of the line.

Now press Control-D to repeat the last action and keep pressing until you get
30 copies to fill the circle.

Let’s group
(Control-G)
the created rays and hide
them for now.

make a vertical line

Step 3

Now let’s create a silhouette of the letter
C. Use the Add Anchor Point Tool (+)
to add two points on the right side of the larger circle and two for the
smaller one, as marked in the screenshot below.

Now we can use the Direct Selection Tool (A) to click the segment of arc between the created points and delete it. Repeat the same for
both circles.

add points and delete segments

Step 4

Now let’s reveal the hidden rays and select
all the elements of the C.

Take the Shape Builder Tool (Shift-M) and click the rectangles formed by
crossing lines. Don’t click all of them; leave some untouched space at the bottom
of the shape.

Now we can select the unneeded pieces of
the rays in the center of the C and delete them.  

use the shape builder tool

Step 5

Let’s break the pieces of the rays on the
left of the letter C.

Use the Pen Tool (P) to add a new anchor point somewhere in the middle of
the line and delete the top point with the Delete Anchor Point Tool (-). This way we detach the piece from the
edge of the letter.

Continue alternating the rays, making some
of them shorter and detaching others to add variation to the silhouette of the
letter.

break the lines

Step 6

Add some more arched strokes to the inner
part of the letter. Attach circles to the tips of the large arcs.

Duplicate the created outlines and use the Live Paint and the Live
Paint Bucket (K)
to add colors.

add more details and colors

Step 7

Object
> Live Paint > Expand
the shape and drag out
some of the colored rectangles. Great work! Our third letter is finished!

Go on and create more letters, numerals, and
punctuation, everything that you might need for your future font. Don’t worry if you don’t
make all the desired symbols at once; you can always reopen your font file and add them later.

expand the live paint

4. How to Make a Color Font in Fontself

Step 1

Now for the fun part! Since we have everything
prepared, we can finally create a font using Fontself Maker! 

First of all, let’s open the Layers panel and place all the letters
in alphabetical order, from left to right. Fontself will automatically assign the proper characters if your place them in the correct order.

We can rename the bottom guideline, setting it as a baseline.

rearrange the letters

Step 2

Now let’s make sure that all our letters
are aligned to the bottom and placed
on the baseline. Select your characters and click Vertical Align Bottom in the Align panel, using one of the characters as a Key Object.

align the letters to the baseline

Step 3

Go to Window
> Extensions
and run Fontself
Maker
. A compact window of the extension will load, and you can adjust its
size by dragging its bottom corners. It has a simple and user-friendly
drag-and-drop interface with pop-up hints and an online chat assistant that can help you with your questions.

open fontself maker

Step 4

Now let’s select our alphabet and drag it to the Fontself window. Here we have several options to choose from. If you
already have all the characters ready, you can use the ‘A-Z’ area and drop your letters there. Fontself will automatically place them in right order, giving each letter a proper name. 

Otherwise, if you don’t have all the characters finished yet, place your mouse
cursor over the ‘Any character (Batch)’
field and release the mouse key to upload your characters.

In our case, we’re making an uppercase
font, so all the letters will be the same for both upper and lower case.

add characters to fontself

Step 5

What is great about Fontself is that it
makes things so much easier: once we have arranged and aligned our letters, the
program will place them in the correct order, using the information from the Layers panel. Just make sure that you
drag and drop everything together, including the baseline.

If you need some more control
over the guidelines and you wish to add an ascender and descender, you can make
it too! Just add two more guidelines, rename them “ascender” and “descender”
in the Layers panel, and then drag and
drop them into Fontself together with your alphabet. Voila!

You can learn more about using guides in
Fontself from the help page.

Now we have every letter placed in its own
slot. From here, we can type something in the Live Preview window to check out how it looks and play with Letter Space, Line Space and Scale, if needed.

Clicking the tiny cog icon on the
right allows you to change the font size, alignment, and background color.

We can also expand the letter preview
window by clicking the tiny diagonal arrows icon in the top left corner of every preview
slot (circled in the screenshot below) or by double-clicking the glyph.

Fontself maker settings

Step 6

Here we have some more options for
each letter. We can drag the lines, changing the position of the ascender and descender and adjusting other settings.

glyph settings

Step 7

Once we’re happy with the letters, let’s
add other symbols and punctuation! To do this, just select the elements on the
Artboard and click the Batch button
in the Home window of Fontself. Your
symbols will be added and placed in the proper order.

add punctuation

Step 8

Now let’s take a look at some advanced
settings that are vital when creating any font. Find and click the Advanced button in the Home window of
Fontself.

From here, we can adjust the Spacing, Kerning, and some other
parameters that are important to make our font look balanced and consistent.

advanced settings of Fontself

Step 9

Let’s start with Spacing.

In typography, spacing or tracking is the amount of space between the characters, which affects the density and gives the font its relative openness or tightness. In fact, a good spacing will save you a bunch of time when creating a font, so make sure you start by adjusting it first!

There are several ways to work with spacing in Fontself. First of all, click on the Spacing Pad window and type some phrases there to see how the characters behave within a text. Now, in the grey area on the right, you can see a list of letters and their values. Here you can edit the spacing by entering precise values in the table.

adjust spacing in fontself

Step 10

Another way to edit spacing is to do it manually by clicking the character itself and dragging the dashed lines on the left and right sides of it. You will see all the adjustments in the Spacing Pad and in the Live Preview area which already has a sample text with all your characters.

edit spacing in fontself

Step 11

Now that we’re happy with the density of the text and its overall look, it’s time to adjust the kerning pairs by clicking
the Kerning button.

Kerning is the process of adjusting the spacing between specific character pairs to
achieve a visually pleasing result. In proportional all-caps fonts, it often
happens that letters in some common combinations (such as VA or AW) look
too far away from each other. In this case, we need to find such pairs and
adjust the spacing between them manually, creating kerning pairs. And Fontself has this function too! What is more, it
already has some common kerning pairs in the Live Preview window, so that you
can see the result instantly.

The same as with spacing, there are several ways to adjust
kerning. First of all, click on the Kerning
Pad
window and type some kerning pairs that you want to edit, for example
AVA. Now, in the grey area on the right, you can see the Kerning pairs window and type the values there manually.

make kerning pairs

Step 12

Another way to adjust kerning is to click
the character and drag the dashed line between the pair. The red line appears for
negative values, making the space between the letters smaller. The blue
line indicates the increasing space with a positive value that moves the
letters farther away from each other. Simple as that.

adjust kerning pairs

Step 13

The next important thing that you might
want to use in your font—and Fontself has this feature—is the use of ligatures!

A ligature is a combination of two or more letters into one symbol. For
example, in common combinations like ‘tt’, ‘fi’, and ‘ff’, we might want to change
some elements of the letters, such as crossbars, to make them look better together. Moreover, while working with color fonts, we can use ligatures in more creative ways, like making some words or names look fancy by adding new elements to them, such as particles, flowers or swashes. In this case, the whole composition can be used as a symbol, i.e. ligature. 

use of ligatures in fontself

Let’s say we want to merge two letters
together in ‘TT’ to make a single bar for them. Once you draw out the new letter, select it on the Artboard. Then open
the Fontself window and type ‘TT’ in the text area on top and click the Create Ligature button right next to
it.

add ligatures in fontself

Step 12

Once you’ve clicked the button, Fontself
will ask you what kind of ligature you want to create. Later on, you can
find both Standard Ligatures and Discretionary Ligatures in the OpenType panel (Window > OpenType) of Adobe Illustrator and see how they work.

types of ligatures in fontself

Step 13

The last but not the least function that
can make your font more unique and playful is using Alternates—the alternative versions of some (or all) characters
that add variety to the whole text. Those can be versions with other colors, outlines, or swashes.

For example, here you can see that in the
word ‘COLORS’, the ‘O’ letters are slightly different. This is how we do it.
Once you have the alternative version of the letter prepared, select it on the
Artboard and add it to Fontself. The program will ask you if you want to Replace the existing letter ‘O’ or create
an alternate glyph. Just click the Alternate
button, and there you have it!

add alternates in fontself

Step 14

Now that we have added all the characters to
Fontself, adjusted the spacing and kerning, and set the ligatures and alternates, it’s time
to name our baby!

Click the Font Infos button in the Home
window of Fontself and fill in all the needed information. The developers’
hints will guide you throughout the process. I can’t but mention their great
sense of humor in this part.

name your font and add info

Step 15

Finally, it’s time to try out our first
color font! Oh, I’m so excited!

To start with, we can test it right in
Adobe Illustrator by clicking the Install
button in the top part of the Home window of Fontself. Now you can select your font in the Character panel of Adobe Illustrator (Window > Character) and try it out by typing something!

install your font and test it

Step 16

Once you’re happy with the result, go ahead
and click the Export button in the
Fontself window to generate an OpenType file with your font and all the cool
features that we added to it using the extension. Exporting the font also allows you to Save your work and whenever you need to edit it again, you’ll just have to Open it in Fontself and there you have it!

export your opentype font

Congratulations! Our Color Font Is Finished!

Great work! Now we can have fun using
our color font in Adobe Photoshop CC 2017/2018 and Adobe Illustrator CC 2018!
The process of adjusting and installing the font with the help of Fontself Maker was
so fun and easy that I haven’t even noticed how I finished all the steps
that usually make me bored.

I hope you enjoy creating characters
in Adobe Illustrator and turning them into a color font in Fontself as much as
I do. Feel free to try it out, and don’t forget to share your results in the
comments below or in social networks with #fontself!

Color Font in Fontself

If you like the typeface that we’ve created in this tutorial and you wanna play with it, feel free to grab the Fiesta Color Font at Envato Elements! In the archive you will also get vector files with all the characters to make your own lettering or to try out how it functions in Fontself Maker. Enjoy!

View Tutorial: How to Create a Color Font With Adobe Illustrator and Fontself Maker

Create the Perfect Carousel, Part 2

Welcome back to the Create the Perfect Carousel tutorial series. We’re making an accessible and delightful carousel using JavaScript and Popmotion‘s physics, tween and input tracking capabilities.

In part 1 of our tutorial, we took a look at how Amazon and Netflix have created their carousels and evaluated the pros and cons of their approaches. With our learnings, we decided on a strategy for our carousel and implemented touch scrolling using physics.

In part 2, we’re going to implement horizontal mouse scroll. We’re also going to look at some common pagination techniques and implement one. Finally, we’re going to hook up a progress bar that will indicate how far through the carousel the user is.

You can restore your save point by opening this CodePen, which picks up where we left off.

Horizontal Mouse Scroll

It’s rare that a JavaScript carousel respects horizontal mouse scroll. This is a shame: on laptops and mice that implement momentum-based horizontal scrolling, this is by far the quickest way to navigate the carousel. It’s as bad as forcing touch users to navigate via buttons rather than swipe.

Luckily, it can be implemented in just a few lines of code. At the end of your carousel function, add a new event listener:

container.addEventListener('wheel', onWheel);

Below your startTouchScroll event, add a stub function called onWheel:

function onWheel(e) {
  console.log(e.deltaX)
}

Now, if you run the scroll wheel over the carousel and check your console panel, you’ll see the wheel distance on the x-axis output.

As with touch, if wheel movement is mostly vertical, the page should scroll as usual. If it’s horizontal, we want to capture the wheel movement and apply it to the carousel. So, in onWheel, replace the console.log with:

const angle = calc.angle({
  x: e.deltaX,
  y: e.deltaY
});

if (angleIsVertical(angle)) return;

e.stopPropagation();
e.preventDefault();

This block of code will stop page scroll if the scroll is horizontal. Updating our slider’s x offset is now just a matter of taking the event’s deltaX property and adding that to our current sliderX value:

const newX = clampXOffset(
  sliderX.get() + - e.deltaX
);
sliderX.set(newX);

We’re reusing our previous clampXOffset function to wrap this calculation and make sure the carousel doesn’t scroll beyond its measured boundaries.

An Aside on Throttling Scroll Events

Any good tutorial that deals with input events will explain how important it is to throttle those events. This is because scroll, mouse and touch events can all fire faster than the device’s frame rate.

You don’t want to perform unnecessary resource-intensive work like rendering the carousel twice in one frame, as it’s a waste of resources and a quick way to make a sluggish-feeling interface.

This tutorial hasn’t touched on that because the renderers provided by Popmotion implement Framesync, a tiny frame-synced job scheduler. This means you could call (v) => sliderRenderer.set('x', v) multiple times in a row, and the expensive rendering would only happen once, on the next frame.

Pagination

That’s scrolling finished. Now we need to inject some life into the hitherto unloved navigation buttons.

Now, this tutorial is about interaction, so feel free to design these buttons as you wish. Personally, I find direction arrows more intuitive (and fully internationalised by default!).

How Should Pagination Work?

There are two clear strategies we could take when paginating the carousel: item-by-item or first obscured item. There’s only one correct strategy but, because I’ve seen the other one implemented so often, I thought it’d be worth explaining why it’s incorrect.

1. Item by Item

Item By Item Example

Simply measure the x offset of the next item in the list and animate the shelf by that amount. It’s a very simple algorithm that I assume is picked for its simplicity rather than its user-friendliness.

The problem is that most screens will be able to show lots of items at a time, and people will scan them all before trying to navigate.

It feels sluggish, if not outright frustrating. The only situation in which this would be a good choice is if you know the items in your carousel are the same width or only slightly smaller than the viewable area.

However, if we’re looking at multiple items, we’re better using the first obscured item method:

2. First Obscured Item

The First Obscured Item

This method simply looks for the first obscured item in the direction we want to move the carousel, takes its x offset, and then scrolls to that.

In doing so, we pull in the maximum number of new items working on the assumption that the user has seen all those currently present.

Because we’re pulling in more items, the carousel requires fewer clicks to navigate around. Faster navigation will increase engagement and ensure your users see more of your products.

Event Listeners

First, let’s set up our event listeners so we can start playing around with the pagination.

We first need to select our previous and next buttons. At the top of the carousel function, add:

const nextButton = container.querySelector('.next');
const prevButton = container.querySelector('.prev');

Then, at the bottom of the carousel function, add the event listeners:

nextButton.addEventListener('click', gotoNext);
prevButton.addEventListener('click', gotoPrev);

Finally, just above your block of event listeners, add the actual functions:

function goto(delta) {
}

const gotoNext = () => goto(1);
const gotoPrev = () => goto(-1);

goto is the function that’s going to handle all the logic for pagination. It simply takes a number which represents the direction of travel we wish to paginate. gotoNext and gotoPrev simply call this function with 1 or -1, respectively.

Calculating a “Page”

A user can freely scroll this carousel, and there are n items within it, and the carousel might be resized. So the concept of a traditional page is not directly applicable here. We won’t be counting the number of pages.

Instead, when the goto function is called, we’re going to look in the direction of delta and find the first partially obscured item. That will become the first item on our next “page”.

The first step is to get the current x offset of our slider, and use that with the full visible width of the slider to calculate an “ideal” offset to which we’d like to scroll. The ideal offset is what we would scroll to if we were naive to the contents of the slider. It provides a nice spot for us to start searching for our first item.

const currentX = sliderX.get();
let targetX = currentX + (- sliderVisibleWidth * delta);

We can use a cheeky optimisation here. By providing our targetX to the clampXOffset function we made in the previous tutorial, we can see if its output is different to targetX. If it is, it means our targetX is outside of our scrollable bounds, so we don’t need to figure out the closest item. We just scroll to the end.

const clampedX = clampXOffset(targetX);

targetX = (targetX === clampedX)
  ? findClosestItemOffset(targetX, delta)
  : clampedX;

Finding the Closest Item

It’s important to note that the following code works on the assumption that all of the items in your carousel are the same size. Under that assumption, we can make optimisations like not having to measure the size of every item. If your items are different sizes, this will still make a good starting point. 

Above your goto function, add the findClosestItemOffset function referenced in the last snippet:

function findClosestItem(targetX, delta) {
}

First, we need to know how wide our items are and the spacing between them. The Element.getBoundingClientRect() method can provide all the information we need. For width, we simply measure the first item element. To calculate the spacing between items, we can measure the right offset of the first item and the left offset of the second, and then subtract the former from the latter: 

const { right, width } = items[0].getBoundingClientRect();
const spacing = items[1].getBoundingClientRect().left - right;

Now, with the targetX and delta variables we passed through to the function, we have all the data we need to quickly calculate an offset to scroll to.

The calculation is to divide the absolute targetX value by the width + spacing. This will give us the exact number of items we can fit inside that distance.

const totalItems = Math.abs(targetX) / (width + spacing);

Then, round up or down depending on the direction of pagination (our delta). This will give us the number of complete items we can fit.

const totalCompleteItems = delta === 1
  ? Math.floor(totalItems)
  : Math.ceil(totalItems);

Finally, multiply that number by width + spacing to give us an offset flush with a full item.

return 0 - totalCompleteItems * (width + spacing);

Animate the Pagination

Now that we’ve got our targetX calculated, we can animate to it! For this, we’re going to use the workhorse of web animation, the tween.

For the uninitiated, “tween” is short for between. A tween changes from one value to another, over a set duration of time. If you’ve used CSS transitions, this is the same thing. 

There are a number of benefits (and shortcomings!) to using JavaScript over CSS for tweens. In this instance, because we’re also animating sliderX with physics and user input, it will be easier for us to stay in this workflow for the tween.

It also means that later on we can hook up a progress bar and it’ll work naturally with all our animations, for free.

We first want to import tween from Popmotion:

const { calc, css, easing, physics, pointer, transform, tween, value } = window.popmotion;

At the end of our goto function, we can add our tween that animates from currentX to targetX:

tween({
  from: currentX,
  to: targetX,
  onUpdate: sliderX
}).start();

By default, Popmotion sets duration to 300 milliseconds and ease to easing.easeOut. These have been picked specifically to provide a responsive feel to animations that respond to user input, but feel free to play around and see if you come up with something that better fits the feel of your brand.

Progress Indicator

It’s useful for users to have some indication about where in the carousel they are. For this, we can hook up a progress indicator.

Your progress bar could be styled in a number of ways. For this tutorial, we’ve made a coloured div, 5px high, that runs between the previous and next buttons. It’s the way that we hook this up to our code and animate the bar that is important and is the focus of this tutorial.

You haven’t seen the indicator yet because we originally styled it with transform: scaleX(0). We use a scale transform to adjust the width of the bar because, as we explained in part 1, transforms are more performant than changing properties like left or, in this case, width.

It also allows us to easily write code that sets the scale as a percentage: the current value of sliderX between minXOffset and maxXOffset.

Let’s start by selecting our div.progress-bar after our previousButton selector:

const progressBar = container.querySelector('.progress-bar');

After we define sliderRenderer, we can add a renderer for progressBar:

const progressBarRenderer = css(progressBar);

Now let’s define a function to update the scaleX of the progress bar.

We’ll use a calc function called getProgressFromValue. This takes a range, in our case min and maxXOffset, and a third number. It returns the progress, a number between 0 and 1, of that third number within the given range.

function updateProgressBar(x) {
  const progress = calc.getProgressFromValue(maxXOffset, minXOffset, x);
  progressBarRenderer.set('scaleX', progress);
}

We’ve written the range here as maxXOffset, minXOffset when, intuitively, it should be reversed. This is because x is a negative value, and maxXOffset is also a negative value whereas minXOffset is 0. The 0 is technically the larger of the two numbers, but the smaller value actually represents the maximum offset. Negatives, huh?

We want the progress indicator to update in lockstep with sliderX, so let’s change this line:

const sliderX = value(0, (x) => sliderRenderer.set('x', x));

To this line:

const sliderX = value(0, (x) => {
  updateProgressBar(x);
  sliderRenderer.set('x', x);
});

Now, whenever sliderX updates, so will the progress bar.

Conclusion

That’s it for this instalment! You can grab the latest code on this CodePen. We’ve successfully introduced horizontal wheel scrolling, pagination, and a progress bar.

The carousel is in pretty good shape so far! In the final instalment, we’re going to take it a step further. We’ll make the carousel fully keyboard accessible to ensure anyone can use it. 

We’re also going to add a couple of delightful touches using a spring-powered tug when a user tries to scroll the carousel past its boundaries using either touch scroll or pagination. 

See you then!

View Tutorial: Create the Perfect Carousel, Part 2

How to Create a Realistic Coin Text Effect in Adobe Photoshop

Final product image
What You’ll Be Creating

This tutorial will show you how to use Photoshop’s shapes and shape settings, along with its 3D tools and options, to create a 3D coin text effect. Let’s get started!

This text effect was inspired by the many Layer Styles available on GraphicRiver.

Tutorial Assets

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

1. How to Create Basic and Custom Shapes

Step 1

Create a new 1500 x 950 px document. Pick the Ellipse Tool, make sure that the Shape option is active in the Options bar, and create a circle shape. Then rename the shape layer to Coin.

Create a Circle Shape

Step 2

Pick the Custom Shape Tool, and add any of the Laurel Custom shape Pack [Photoshop] shapes as a frame inside the coin shape you created.

Add a Laurel Shape

Step 3

You can use the Direct Selection Tool to select and delete the anchor points of any of the laurel shape parts that you don’t like or that you just want to remove in order to add text in their place.

Delete Anchor Points

Step 4

Feel free to try different things with the shape until you get an outcome you like.

Adjust the Shape

Step 5

Add a number as text in the middle of the coin shape. You can use any fonts and font attributes you like, depending on the type of coin you want to create.

The font used here is Bodoni MT, the Size is 120 pt, and the Tracking is set to -60.

Create Text

Step 6

Add some more text to the laurel shape where you removed the anchor points. The font used here is Poppins, the Size is 20 pt, and the Tracking is set to 200.

Add Laurel Text

2. How to Add Text on a Work Path

Step 1

Create another circle shape to create a new coin, rename its layer to Coin as well, and add any of the ORNAMENT CUSTOM SHAPE SET.csh shapes to its center.

It is a good idea to name each layer you create now to keep things organized and easy to work with throughout the tutorial.

Add an Ornament Shape

Step 2

Duplicate the coin’s circle shape and scale the copy down to create a smaller circle inside the original one. Change the copy‘s Fill value in the Options bar to None, click the Set shape stroke type icon, and click the More Options button.

Choose the dotted stroke preset, and adjust its settings as you like.

Adjust the Stroke Settings

Step 3

Pick the Ellipse Tool again, and choose the Path option in the Options bar.

Create a circular work path around the ornament shape in the center to add text on it.

Create a Work Path

Step 4

Pick the Text Tool, click on the path, and type your text.

The font used here is Indira K, the Size is 17 pt, the Tracking is 10, and the text is created in All Caps.

Add Path Text

These are some ideas to explain the tools you can use to create your coins, but feel free to try different shapes, settings, and fonts to create your own coins.

3. How to Create 3D Layers

Step 1

For each of the shape layers you have, select it and go to 3D > New 3D Extrusion from Selected Path, and for each of the text layers, select it and go to 3D > New 3D Extrusion from Selected Layer.

Create 3D Layers

Step 2

Select all 3D layers you have, and go to 3D > Merge 3D Layers.

Merge 3D Layers

4. How to Work With the 3D Scene

Step 1

To access the 3D mesh settings and properties, you’ll need to open two panels: the 3D panel and the Properties panel.

The 3D panel has all the components of the 3D scene, and when you click the name of any of those, you’ll be able to access its settings in the Properties panel. So make sure to always select the tab of the element you want to modify in the 3D panel before you change its settings in the Properties panel.

3D and Properties Panels

Step 2

If you select the Move Tool, you’ll find a set of 3D Modes for it to the right of the Options bar.

When you choose one of those, you can then click and drag to perform changes (on the selected element in the 3D panel).

Use those modes to change the Current View into an angle you like.

Move Tool 3D Modes

5. How to Group 3D Objects

Step 1

Select all the 3D mesh tabs of the first coin, click the 3D panel’s menu icon, and choose Group Objects.

Group Objects

Step 2

Repeat that to group the rest of the coin meshes you have.

Rename the groups to whatever you like. Here, we are creating a gold coin and a silver coin, so the groups will be named Gold and Silver.

Rename the Groups

6. How to Adjust the 3D Mesh Settings

Step 1

Select the Coin mesh tabs, and change their Extrusion Depth in the Properties panel to 10.

Extrusion Depth

Step 2

Select the rest of the Gold mesh tabs, and change their Extrusion Depth to 3.

Extrusion Depth

Step 3

Select the rest of the Silver mesh tabs, and change their Extrusion Depth to 2.

Extrusion Depth

7. How to Adjust the 3D Cap Settings

Step 1

Pick the Move Tool, select both Coin mesh tabs, and use the 3D Axis to move them back to separate them from the rest of the meshes.

The arrows at the ends of the axis move the mesh, the part below them is used for rotation, and the cubes are used for scaling. The cube in the center is used to scale the object uniformly. All you need to do is click and drag the part you want to use.

Move the Meshes

Step 2

Select the Gold Coin mesh tab, and click the Cap icon at the top of the Properties panel to create the coin’s edge.

Change the Sides to Front and Back, the Bevel Width to 5%, the Angle to -23, and the Contour to Cove – Deep.

Gold Coin Cap Settings

Step 3

Change the Gold coin’s Laurel and smaller text‘s Bevel Width to 10% and their Contour to Half Round.

Gold Coin Cap Settings

Step 4

Change the Gold coin’s bigger text‘s Bevel Width to 5% and its Contour to Half Round.

Gold Coin Cap Settings

Step 5

Select the Silver Coin mesh tab, click the Cap icon, and change the Sides to Front and Back, the Bevel Width to 10%, the Angle to -17, and the Contour to Cone – Inverted.

Silver Coin Cap Settings

Step 6

Change the Silver coin’s ellipse stroke‘s Inflate Strength to 20%.

Silver Coin Cap Settings

Step 7

Change the Silver coin’s text and ornament shapesBevel Width to 5% and their Contour to Half Round.

Silver Coin Cap Settings

8. How to Position 3D Meshes

Step 1

To better see the 3D meshes, click the Filter by: Materials icon at the top of the 3D panel, select all the material tabs, click the Diffuse texture icon in the Properties panel, and choose Remove Texture.

Remove Texture

Step 2

Use the 3D Axis to reposition the 3D meshes to create the final coins.

Reposition the 3D Meshes

Step 3

You can click the Coordinates icon at the top of the Properties panel to use numerical values.

Coordinates Values

Step 4

You can also choose between the different Current View presets in order to see things from different angles and make sure all the meshes are in place.

Camera Views

Step 5

Make sure to finish creating the coins now, because once you instance them, it will be much harder to reposition their meshes.

Finish Creating the Coins

9. How to Create Gold and Silver Materials

Step 1

Select all the Gold coin mesh material tabs, and create the gold material using these settings (the color values used are in RGB):

  • Specular: 241, 224, 155
  • Shine: 50%
  • Reflection: 50%
Gold Material Settings

Step 2

Select all the Silver coin mesh material tabs, and create the silver material using these settings:

  • Specular: 222, 223, 205
  • Shine: 50%
  • Reflection: 50%
Silver Material Settings

Step 3

Select the Gold Coin Front Inflation Material tab, click its Diffuse folder icon, and choose Load Texture to open the 2.jpg image from the Metal seamless textures pack.

Load Texture

Step 4

Click the Diffuse texture icon again to choose Edit UV Properties.

Edit UV Properties

Step 5

Adjust the Tile and Offset values to get a result you like.

UV Properties

Step 6

Click the Diffuse texture icon and choose Edit Texture.

Edit Texture

Step 7

Add a Solid Color fill layer with the Fill Color #f5cb71, and change its Blend Mode to Linear Burn.

Solid Color

Step 8

Select the rest of the Gold coin material tabs, click the Diffuse folder icon, and choose the texture name (2) from the list to apply it.

Apply the Texture

Step 9

Select the Silver Coin Front Inflation Material tab, click its Diffuse folder icon, and choose Load Texture to open the 2.jpg image again.

Load Texture

Step 10

Apply the texture to the rest of the Silver coin material tabs.

Apply the Texture

10. How to Create a Bump Material

Step 1

Select the Gold Coin Extrusion Material tab, and click its Bump folder icon to choose New Texture.

New Texture

Step 2

Set the dimensions to 100 x 100 px, and click OK.

Texture Dimensions

Step 3

When the new texture file opens, duplicate the Background layer.

Duplicate Layer

Step 4

Double-click the copy layer to apply a Pattern Overlay effect, and change the Pattern to 10px vertical stripes.

Save and close the file.

Pattern Overlay

Step 5

Select the Gold Coin mesh tab, and change its Texture Mapping to Tile.

Texture Mapping

Step 6

Select the Gold coin’s Extrusion Material tab again, and adjust the Bump texture’s UV Properties.

UV Properties

Step 7

Apply the same Bump texture and settings to the Silver Coin Extrusion Material.

Silver Coin Extrusion Material Bump

11. How to Instance 3D Meshes

Step 1

Select both the Gold and Silver group tabs, right-click any of them, and choose Instance Object.

This will create linked copies that reflect the changes made to the original meshes, like the material settings, for example.

Instance Object

Step 2

Rename the original groups to add Original to their names, and you can either use those groups or hide them if you need to keep the original copies aside.

Rename the Original Groups

Step 3

Select the Gold group you want to start using to create the text, click the Coordinates icon, and change the X Rotation Angle to 90.

X Rotation Angle

Step 4

Click the 3D panel’s menu icon, and choose Move Object to Ground Plane.

Repeat that to rotate and move the Silver group to the Ground Plane as well.

Move Object to Ground Plane

12. How to Create Text Using 3D Grouped Meshes

Step 1

Select a group, and use the 3D Axis to move and rotate it in order to start creating the text.

Start Creating the Text

Step 2

If you need to use the Coordinates values, keep in mind that you can check and uncheck the Uniform Scaling option as needed.

Uniform Scaling

Step 3

What you need to do next is keep instancing and transforming the coin meshes to create the shape of the letters you want. You can type the text using any sans serif font for reference if you like as well.

That can be a bit of a time-consuming process, in which you need to use different camera angles and views. You also need to keep making sure to move each coin to the Ground Plane once you place it, and adjust its positioning so that it sits properly on top of any coins it is above, as well as the Ground Plane itself.

You can simplify the process by placing the coins next to each other without stacking them on top of each other, and then add more coins on top of them, but keep them all horizontal.

It is basically up to you to decide how you’d like to create the text and place the coins, depending on the final result you want to achieve.

Place the Coins

Step 4

Make sure to group each letter’s coin groups to keep things organized.

Group the Meshes

Step 5

Create all the letters you need, and add any more coins around them if you like.

Create the Text

13. How to Add a Background Plane

Step 1

Open the Old Wooden Planks Texture 02 image, copy and paste it on top of the coins 3D layer, rename its layer to Ground, and go to 3D > New Mesh from Layer > Postcard.

3D Postcard

Step 2

Select the Current View tab, and choose the coin 3D layer’s name from the View menu.

Current View

Step 3

Select both 3D layers and merge them.

Select the Ground Mesh tab, change its X Rotation Angle to 90, and move it to the Ground Plane.

After you do so, increase the Y Position value very slightly, so to a value around 0.1, to avoid getting random lines when you render the scene.

Merge the 3D Layers

Step 4

With the Ground Mesh tab selected, click the Mesh icon at the top of the Properties panel, and uncheck the Cast Shadows box.

Reposition and scale the Ground mesh until it covers a good area around the text. After that, you can tile the Diffuse texture vertically if needed, or open the Diffuse texture file, and go to Image > Reveal All, to make sure that the scaling doesn’t affect the quality of the texture.

You don’t need to fill the whole document as we will crop it later on, but make sure to fill the area you want to have for the final outcome.

Adjust the Ground Texture

Step 5

Select the Ground material tab, remove the Opacity texture if there is one, and use these settings:

  • Specular: 210, 196, 164
  • Shine: 50%
Ground Material Settings

14. How to Generate a Bump Texture From a Diffuse One

Step 1

Click the Bump folder icon, and click Generate Bumps From Diffuse.

Generate Bumps From Diffuse

Step 2

Adjust the settings in the Generate Bump Map box as you like, and click OK.

Generate Bump Map

Step 3

This will create a more realistic effect.

Make sure to choose a final camera angle before you start adjusting the lighting of the scene.

Final Camera Angle

15. How to Adjust a 3D Scene’s Lighting and Render It

Step 1

Click the Infinite Light tab, and change its Intensity to 50% and its Shadow Softness to 30%.

Infinite Light

Step 2

Use the Move Tool to move the light around to an angle you like, or use the Coordinates values to do so.

Move the Light

Step 3

Select the Environment tab, click the IBL texture icon, and choose Replace Texture to open the Room image.

Environment

Step 4

Change the Intensity to 90%, and use the Move Tool to move the texture around until you like its effect.

Environment Settings

Step 5

Click the IBL texture icon, and choose Edit Texture to open the image file.

Add a Hue/Saturation adjustment layer to change the Saturation to -60, and save and close the file.

HueSaturation

Step 6

Go to 3D > Render 3D Layer. The rendering might take a while, but you can stop it any time by pressing the Esc key.

After the rendering is done, right-click the 3D layer and choose Convert to Smart Object to avoid making any accidental changes.

Render 3D Layer

16. How to Make Global Adjustments

Step 1

Add a Vibrance adjustment layer and change the Vibrance value to -5.

Step 2

Add a Selective Color adjustment layer, and use these settings:

Reds

  • Cyan: 7
  • Yellow: 10
  • Black: 10

Yellows

  • Magenta: 3
  • Yellow: -10
  • Black: 10
Selective Color

Neutrals

  • Cyan: 3
  • Yellow: -1
  • Black: 1

Blacks

  • Cyan: 3
  • Yellow: 5
  • Black: 15
Selective Color

Step 3

Add a Brightness/Contrast adjustment layer, change its Blend Mode to Luminosity, and set the Contrast value to 30.

BrightnessContrast

Step 4

Add a Curves adjustment layer, change its Blend Mode to Luminosity and its Opacity to 35%, and create a simple S-Curve to enhance the contrast some more.

Curves

Step 5

Add a Solid Color fill layer with the Fill Color Black, and change its Blend Mode to Soft Light and its Opacity to 43%.

Solid Color

Step 6

Select the layer’s mask thumbnail, pick the Brush Tool, set the Foreground Color to Black, and use a big soft round tip to paint over the text to create a quick vignette effect.

You can also decrease the mask’s Density in the Properties panel to get a subtler effect.

Vignette Effect

Step 7

Add a Color Lookup adjustment layer, and choose the 2Strip.look table from the 3DLUT File menu.

Change the layer’s Blend Mode to Soft Light and its Opacity to 30%.

Color Lookup

Step 8

Add another Color Lookup adjustment layer, and choose the Gold-Blue table from the Abstract menu.

Change the layer’s Blend Mode to Lighten and its Opacity to 50%.

Color Lookup

Step 9

Use the Crop Tool to get rid of all the extra areas you don’t need, and you can uncheck the Delete Cropped Pixels box in the Options bar if you want.

Crop the Image

Congratulations! You’re Done

In this tutorial, we used a bunch of shapes and shape settings, along with different text layers, to create coins.

Then, we converted the layers we created into 3D layers, adjusted their settings, and created their materials. After that, we instanced and positioned the coins to create the letters we needed for our text.

Finally, we adjusted the lighting, rendered the scene, and added some global adjustments to finish everything off.

Please feel free to leave your comments, suggestions, and outcomes below.

Final Result
View Tutorial: How to Create a Realistic Coin Text Effect in Adobe Photoshop

How to Use Sketch Libraries: Collaboration Made Easy

In this tutorial you’ll learn all about a brand new Sketch feature called “libraries”. Libraries were recently introduced, in version 47, and really enhance the way we work with assets and other team members.

Watch Screencast

 

Introducing Sketch Libraries

A Sketch library is essential a Sketch file with a bunch of symbols. Where libraries differ, is that the symbols within them become available from within the Sketch app without you needing to open the document they’re stored in. You can import your library assets into any Sketch document you like.

Open up Sketch 47 for the first time and you’ll see straight away that there’s a library available for you to use, under the Insert or the Symbol menu. The “iOS UI Design library” has a wide variety of assets you can place straight onto your artboard.

How to Create Your Own Sketch Library

To demonstrate this I’m going to create a library of color swatches. Firstly, we create a page, then on that page we place a few color swatches (rectangles of whatever colors we want). Using the Create Symbols option we name each one, beginning with color/ in order to group them in the symbols menu. 

This particular document is saved permanently in a suitable location, and is already effectively acting as a library of sorts. But now we need to add it to Sketch itself.

Go to Sketch > Preferences > Libraries and click Add Library. Then point to the file we need (our color file in this case) and watch as it becomes available in the list of libraries.

Whoomp There It Is
Whoomp! (There it is)

Now, we can access our color symbols from the Symbols menu where we see other libraries listed too.

Updating Symbols and Libraries

Importantly, at this point in the process, there now appears a warning at the bottom of our original colors file:

Any changes we make to the symbols within this file will reflect directly on the library and therefore any other files which make use of the library. If we do choose to make an update, we’ll be warned in other files which make use of the library (see top right of window):

Clicking Library Update Available will open a dialog showing exactly what changes have been made before you commit to using them.

Conclusion

Imagine the power libraries could give you and your design team. Consider the above situation and your own designs’ colors–altering one color swatch in your main branding library and watching it take effect across all your components. And this applies to all kinds of symbols too; typography symbols, icons, styles..brilliant!

Take a look at the screencast above for more details, and stay tuned for further Sketch updates and tricks.

View Tutorial: How to Use Sketch Libraries: Collaboration Made Easy

Make Your Go Programs Lightning Fast With Profiling

Go is often used for writing distributed systems, advanced data stores, and microservices. Performance is key in these domains. 

In this tutorial, you’ll learn how to profile your programs to make them lightning fast (utilize the CPU better) or feather light (use less memory). I will cover CPU and memory profiling, using the pprof (the Go profiler), visualizing the profiles, and even flame graphs.

Profiling is measuring the performance of your program in various dimensions. Go comes with great support for profiling and can profile the following dimensions out of the box:

  • a sampling of CPU time per function AND instruction
  • a sampling of all heap allocations
  • stack traces of all current goroutines
  • stack traces that led to the creation of new OS threads
  • stack traces that led to blocking on synchronization primitives
  • stack traces of holders of contended mutexes

You can even create custom profiles if you want. Go profiling involves creating a profile file and then analyzing it using the pprof go tool.

How to Create Profile Files

There are several ways to create a profile file.

Using “go test” to Generate Profile Files

The easiest way is to use go test. It has several flags that allow you to create profile files. Here is how to generate both a CPU profile file and a memory profile file for the test in the current directory: go test -cpuprofile cpu.prof -memprofile mem.prof -bench .

Download Live Profile Data From a Long-Running Service

If you want to profile a long-running web service, you can use the built-in HTTP interface for providing profile data. Add somewhere the following import statement:

import _ "net/http/pprof"

Now, you can download live profile data from the /debug/pprof/ URL. More info is available in the net/http/pprof package documentation.

Profiling in Code

You can also add direct profiling into your code for complete control. First you need to import runtime/pprof. CPU profiling is controlled by two calls:

  • pprof.StartCPUProfile()
  • pprof.StopCPUProfile()

Memory profiling is done by calling runtime.GC() followed by pprof.WriteHeapProfile().

All the profiling functions accept a file handle that you are responsible for opening and closing appropriately.

The Sample Program

To see the profiler in action, I’ll use a program that solves Project Euler’s Problem 8. The problem is: given a 1,000-digit number, find the 13 adjacent digits within this number that have the largest product. 

Here is a trivial solution that iterates over all the sequences of 13 digits, and for each such sequence it multiplies all 13 digits and returns the result. The largest result is stored and finally returned:

package trivial

import (
    "strings"
)

func calcProduct(series string) int64 {
	digits := make([]int64, len(series))
	for i, c := range series {
		digits[i] = int64(c) - 48
	}

	product := int64(1)
	for i := 0; i < len(digits); i++ {
		product *= digits[i]
	}

	return product
}

func FindLargestProduct(text string) int64 {
	text = strings.Replace(text, "\n", "", -1)
	largestProduct := int64(0)
	for i := 0; i < len(text); i++ {
		end := i + 13
		if end > len(text) {
			end = len(text)
		}
		series := text[i:end]
		result := calcProduct(series)
		if result > largestProduct {
			largestProduct = result
		}
	}

	return largestProduct
}

Later, after profiling, we will see some ways to improve the performance with another solution.

CPU Profiling

Let’s profile the CPU of our program. I’ll use the go test method using this test:

import (
    "testing"
)

const text = `
73167176531330624919225119674426574742355349194934
96983520312774506326239578318016984801869478851843
85861560789112949495459501737958331952853208805511
12540698747158523863050715693290963295227443043557
66896648950445244523161731856403098711121722383113
62229893423380308135336276614282806444486645238749
30358907296290491560440772390713810515859307960866
70172427121883998797908792274921901699720888093776
65727333001053367881220235421809751254540594752243
52584907711670556013604839586446706324415722155397
53697817977846174064955149290862569321978468622482
83972241375657056057490261407972968652414535100474
82166370484403199890008895243450658541227588666881
16427171479924442928230863465674813919123162824586
17866458359124566529476545682848912883142607690042
24219022671055626321111109370544217506941658960408
07198403850962455444362981230987879927244284909188
84580156166097919133875499200524063689912560717606
05886116467109405077541002256983155200055935729725
71636269561882670428252483600823257530420752963450
`

func TestFindLargestProduct(t *testing.T) {
	for i := 0; i < 100000; i++ {
		res := FindLargestProduct(text)
		expected := int64(23514624000)
		if res != expected {
			t.Errorf("Wrong!")
		}
	}
}

Note that I run the test 100,000 times because the go profiler is a sampling profiler that needs the code to actually spend some significant time (several milliseconds cumulative) on each line of code. Here is the command to prepare the profile:

go test -cpuprofile cpu.prof -bench .
ok _/github.com/the-gigi/project-euler/8/go/trivial	13.243s

It took a little over 13 seconds (for 100,000 iterations). Now, to view the profile, use the pprof go tool to get into the interactive prompt. There are many commands and options. The most basic command is topN; with the -cum option it shows the top N functions that took the most cumulative time to execute (so a function that takes very little time to execute, but is called many times, can be at the top). This is usually what I start with.

> go tool pprof cpu.prof
Type: cpu
Time: Oct 23, 2017 at 8:05am (PDT)
Duration: 13.22s, Total samples = 13.10s (99.06%)
Entering interactive mode (type "help" for commands)
(pprof) top5 -cum
Showing nodes accounting for 1.23s, 9.39% of 13.10s total
Dropped 76 nodes (cum <= 0.07s)
Showing top 5 nodes out of 53
 flat  flat%   sum%   cum   cum%
0.07s  0.53%  0.53%   10.64s 81.22%  FindLargestProduct
0      0%     0.53%   10.64s 81.22%  TestFindLargestProduct
0      0%     0.53%   10.64s 81.22%  testing.tRunner
1.07s  8.17%  8.70%   10.54s 80.46%  trivial.calcProduct
0.09s  0.69%  9.39%   9.47s  72.29%  runtime.makeslice

Let’s understand the output. Each row represents a function. I elided the path to each function due to space constraints, but it will show in the real output as the last column. 

Flat means the time (or percentage) spent within the function, and Cum stands for cumulative—the time spent within the function and all the functions it calls. In this case, testing.tRunner actually calls TestFindLargestProduct(), which calls FindLargestProduct(), but since virtually no time is spent there, the sampling profiler counts their flat time as 0.

Memory Profiling

Memory profiling is similar, except that you create a memory profile:

go test -memprofile mem.prof -bench .

PASS

ok      _/github.com/the-gigi/project-euler/8/go/trivial

You can analyze your memory usage using the same tool.

Using pprof to Optimize Your Program’s Speed

Let’s see what we can do to solve the problem faster. Looking at the profile, we see that calcProduct() takes 8.17% of the flat runtime, but makeSlice(), which is called from calcProduct(), is taking 72% (cumulative because it calls other functions). This gives a pretty good indication of what we need to optimize. What does the code do? For each sequence of 13 adjacent numbers, it allocates a slice:

func calcProduct(series string) int64 {
    digits := make([]int64, len(series))
    ... 

That’s almost 1,000 times per run, and we run 100,000 times. Memory allocations are slow. In this case, there is really no need to allocate a new slice every time. Actually, there is no need to allocate any slice at all. We can just scan the input array. 

The following code snippet shows how to compute the running product by simply dividing by the first digit of the previous sequence and multiplying by the cur digit. 

if cur == 1 {
	currProduct /= old
	continue
}

if old == 1 {
	currProduct *= cur
} else {
	currProduct = currProduct / old * cur
}

if currProduct > largestProduct {
	largestProduct = currProduct
}

Here is a short list of some of the algorithmic optimizations:

  • Computing a running product. Suppose we computed the product at index N… N+13 and call it P(N). Now we need to compute the product at index N+1..N+13. P(N+1) equals to P(N) except that the first number at index N is gone and we need to take into account the new number at index N+14T. This can be done by dividing the previous product by its first number and multiplying by the new number. 
  • Not computing any sequence of 13 numbers that contain 0 (the product will always be zero).
  • Avoiding division or multiplication by 1.

The complete program is here. There is some thorny logic to work around the zeros, but other than that it is pretty straightforward. The main thing is that we only allocate one array of 1000 bytes at the beginning, and we pass it by pointer (so no copy) to the  findLargestProductInSeries() function with a range of indexes.

package scan


func findLargestProductInSeries(digits *[1000]byte, 
                                start, end int) int64 {
    if (end - start)  < 13 {
        return -1
    }

    largestProduct := int64((*digits)[start])
    for i := 1; i < 13 ; i++ {
        d := int64((*digits)[start + i])
        if d == 1 {
            continue
        }
        largestProduct *= d
    }

    currProduct := largestProduct
    for ii := start + 13; ii < end; ii++ {
        old := int64((*digits)[ii-13])
        cur := int64((*digits)[ii])
        if old == cur {
            continue
        }

        if cur == 1 {
            currProduct /= old
            continue
        }

        if old == 1 {
            currProduct *= cur
        } else {
            currProduct = currProduct / old * cur
        }

        if currProduct > largestProduct {
            largestProduct = currProduct
        }
    }

    return largestProduct
}


func FindLargestProduct(text string) int64 {
    var digits [1000]byte
    digIndex := 0
    for _, c := range text {
        if c == 10 {
            continue
        }
        digits[digIndex] = byte(c) - 48
        digIndex++
    }

    start := -1
    end := -1
    findStart := true
    var largestProduct int64
    for ii := 0; ii < len(digits) - 13; ii++ {
        if findStart {
            if digits[ii] == 0 {
                continue
            } else {
                start = ii
                findStart = false
            }
        }

        if digits[ii] == 0 {
            end = ii
            result := findLargestProductInSeries(&digits, 
                                                 start, 
                                                 end)
            if result > largestProduct {
                largestProduct = result
            }
            findStart = true
        }
    }

    return largestProduct
}

The test is the same. Let’s see how we did with the profile:

> go test -cpuprofile cpu.prof -bench .
PASS
ok      _/github.com/the-gigi/project-euler/8/go/scan	0.816s

Right off the bat, we can see that the runtime dropped from more than 13 seconds to less than one second. That’s pretty good. Time to peek inside. Let’s use just top10, which sorts by flat time.

(pprof) top10
Showing nodes accounting for 560ms, 100% of 560ms total
flat  flat%   sum%     cum   cum%
290ms 51.79%  51.79%   290ms 51.79%  findLargestProductInSeries
250ms 44.64%  96.43%   540ms 96.43%  FindLargestProduct 
20ms  3.57%   100%     20ms  3.57%   runtime.usleep 
0     0%      100%     540ms 96.43%  TestFindLargestProduct 
0     0%      100%     20ms  3.57%   runtime.mstart 
0     0%      100%     20ms  3.57%   runtime.mstart1 
0     0%      100%     20ms  3.57%   runtime.sysmon 
0     0%      100%     540ms 96.43%  testing.tRunner 

This is great. Pretty much the entire runtime is spent inside our code. No memory allocations at all. We can dive deeper and look at the statement level with the list command:

(pprof) list FindLargestProduct
Total: 560ms
ROUTINE ======================== scan.FindLargestProduct
250ms      540ms (flat, cum) 96.43% of Total
 .          .     44:
 .          .     45:
 .          .     46:func FindLargestProduct(t string) int64 {
 .          .     47:    var digits [1000]byte
 .          .     48:  digIndex := 0
70ms       70ms   49:  for _, c := range text {
 .          .     50:    if c == 10 {
 .          .     51:      continue
 .          .     52:    }
 .          .     53:    digits[digIndex] = byte(c) - 48
10ms       10ms   54:    digIndex++
 .          .     55:  }
 .          .     56:
 .          .     57:  start := -1
 .          .     58:  end := -1
 .          .     59:  findStart := true
 .          .     60:  var largestProduct int64
 .          .     61:  for ii := 0; ii < len(digits)-13; ii++ {
10ms       10ms   62:    if findStart {
 .          .     63:      if digits[ii] == 0 {
 .          .     64:        continue
 .          .     65:      } else {
 .          .     66:        start = ii
 .          .     67:        findStart = false
 .          .     68:      }
 .          .     69:    }
 .          .     70:
70ms       70ms   71:    if digits[ii] == 0 {
 .          .     72:      end = ii
20ms      310ms   73:      result := f(&digits,start,end)
70ms       70ms   74:      if result > largestProduct {
 .          .     75:        largestProduct = result
 .          .     76:      }
 .          .     77:      findStart = true
 .          .     78:    }
 .          .     79:  }

This is pretty amazing. You get a statement by statement timing of all the important points. Note that the call on line 73 to function f() is actually a call to findLargestProductInSeries(), which I renamed in the profile due to space limitations. This call takes 20 ms. Maybe, by embedding the function code in place, we can save the function call (including allocating stack and copying arguments) and save those 20 ms. There may be other worthwhile optimizations that this view can help pinpoint.

Visualization

Looking at these text profiles can be difficult for large programs. Go gives you a lot of visualization options. You’ll need to install Graphviz for the next section.

The pprof tool can generate output in many formats. One of the easiest ways (svg output) is simply to type ‘web’ from the pprof interactive prompt, and your browser will display a nice graph with the hot path marked in pink.

Visualization

Flame Graphs

The built-in graphs are nice and helpful, but with large programs, even these graphs can be difficult to explore. One of the most popular tools for visualizing performance results is the flame graph. The pprof tool doesn’t support it out of the box yet, but you can play with flame graphs already using Uber’s go-torch tool. There is ongoing work to add built-in support for flame graphs to pprof.

Conclusion

Go is a systems programming language that is used to build high-performance distributed systems and data stores. Go comes with excellent support that keeps getting better for profiling your programs, analyzing their performance, and visualizing the results. 

There is a lot of emphasis by the Go team and the community on improving the tooling around performance. The full source code with three different algorithms can be found on GitHub.

View Tutorial: Make Your Go Programs Lightning Fast With Profiling