Wszystkie wpisy, których autorem jest admin

Web Tools

Creating Graphic Design and Illustration for Color Blind People

Post pobrano z: Creating Graphic Design and Illustration for Color Blind People

Color blindness is a vision deficiency that affects a large number of people around the world. Whether we know it or not, we as designers have a great impact on their daily lives through the work that we create and put out all around us. That being the case, I believe that we should take a few moments and explore some simple yet effective solutions that could help improve their situation and thus the quality of their lives.

1. What Is Color? A Brief Definition

Before we can
completely understand what color blindness is, we should first take a couple of
moments and talk about color, what it is, and how it behaves.

According to
Google, the noun color is defined as:

“the property possessed by an object
of producing different sensations on the eye as a result of the way it reflects
or emits light”.

Now, light itself
is made out of multiple colors that have different wavelengths, where red is
the longest one that humans can see, while violet is the shortest.

We know this since in 1666 Sir Isaac Newton put together a little experiment in which he
took a beam of white sunlight and passed it through a glass prism. What he
observed must have been incredible at that moment since the prism split the
beam into a band of seven composing colors which he called the “spectrum”. The
order of these colors from the lower end of the spectrum is violet (V), indigo (I), blue (B), green (G), yellow (Y), orange (O),
and red (R)—which we now call ROYGBIV.

light dispersion example

Quick tip: you can see Newton’s prism experiment in action by
heading over to MITK12Videos’
YouTube channel where they give you an in-depth explanation of the cause of the light dispersion phenomenon.

2. How Do Our Eyes „See” Color?

Depending on its physical
properties (light absorption, emission spectra, etc.), an object can
individually reflect or absorb these seven colors more or less, giving it the
property that we call color.

So when we say we
see a specific color, we actually see the amount of color reflected by the
surface of an object when it’s being hit by a light source. When an object
reflects all the wavelengths, we see it as being white; when it absorbs them
all, it is black.

We’re able to visualize these properties due to the millions of
light-sensitive cells found within our retinas, which process the light into
nerve impulses and then pass them to the cortex of the brain via the optic
nerve.

These cells come
in two different shapes: rods and cones. The rods are highly concentrated around the edge of the retina
(somewhere around 90 million cells for humans), and transmit mostly black and
white information due to the fact that they contain a single photopigment,
being the ones that help us adjust to a darker environment.

The cones, on the other hand, are
concentrated in the middle of the retina (4.5–6 million cells), and are able
to capture three different wavelengths: S
(short), M (medium), and L (long).

Short cones are
usually referred to as “blue” due to the fact that they provide color
information for that specific wavelength of light. Medium cones are referred to
as “green”, while long ones are known as “red”.

Normal color
vision uses all three types of light cones (red, green, and blue), and is known as trichromacy.

In fact, the RGB color
space that we work and interact with on a daily basis is created around our trichromatic vision determined by
these three types of cones, where each and every image is built using a combination of just three colors.

3. What Is Color Blindness?

We now have a
basic idea of what color is, but what is color blindness?

Well, many people think that being color blind means you see the world in black and white, but that’s not actually true.

As the online version of the Medical Dictionary points out, color blindness is:

“an abnormal
condition characterized by the inability to clearly distinguish different
colors of the spectrum”.

A person that is color blind is usually born with this condition, which is
determined by a faulty gene found within the X chromosome. According to the American Academy of Ophthalmology, „color blindness can occur when one or more of the color cone cells are absent, non functioning, or detect a different color than normal”.

Colour Blind Awareness states that the condition affects approximately 1 in every 12 men (8%) and 1 in every 200 women around the world.

4. What Are the
Different Types of Color Blindness?

As we learned a few moments ago, our eyes have three types of cone cells. Depending on which
of them is affected, a person can suffer from one of three conditions:

4.1. Red-Green Color Blindness

According to the National Eye Institute (NEI), the most common type of color blindness is due to „the loss or limited function of the red cone (known as protan) or green cone (deutran) photopigments” that depending on their severity can lead to:

  • Protanomaly: when the person’s red cone photopigment is abnormal, causing red, orange, and yellow colors to appear greener.
example for protanomaly
  • Protanopia: when there are no working red cone cells, causing red to appear as black, and certain shades of orange, yellow, and green to appear as yellow.
example for protanopia
  • Deuteranomaly: when the person’s green
    cone photopigment is abnormal, causing yellow and green to appear redder, making
    it difficult to tell violet apart from blue.
example for deuteranomaly
  • Deuteranopia: when there are no working green cone cells, causing reds to appear as brownish-yellow
    and greens as beige.
example for deuteranopia

4.2. Blue-Yellow Color Blindness

Compared to red-green color blindness, blue-yellow color blindness is rarer, and it appears when the blue cone photopigments are either missing or have limited function.

Depending on the case, we can have:

  • Tritanomaly:
    when the person’s blue cone cells have limited function, causing blue to appear
    greener and making it difficult to tell yellow and red apart from pink.
example for tritanomaly
  • Tritanopia: when the person’s blue cone cells are missing, causing blue to appear
    green and yellow violet or light grey.
example for tritanopia

4.3. Complete Color Blindness

For those who don’t experience any color at all, they suffer from what is called monochromacy, which is when they see the world in shades of grey ranging from black to white.

example of monochromacy

5. How Do You Know If You’re Color Blind?

If you want to make sure that your eyes are functioning correctly, you should always go visit an optometrist, who will apply a simple color perception test called the „Ishihara Color Test”. The name comes from its creator Dr. Shinobu Ishihara, who in 1917 published a simple yet ingenious method of determining if a person is color blind or not using colored plates (ishihara plates). Each plate contains multiple dots that vary in color and size and are displayed within a circular pattern, forming a number at the center.

ishihara plate example

If you can distinguish the number correctly then it means you have normal color vision. If you’re having problems seeing the shape of the numbers, then you might be suffering from one of the color blindness types that we talked about a few moments ago.

If you don’t really want to go to an eye doctor just yet, you can take the test online using any of the following sites:

6. How Can You See What a Color Blind Person Sees?

As a designer and visual creative, you must understand that your work will need to be visible not only to people with normal vision but also to those that suffer from one type of color blindness.

The first step to finding a solution to the problem is understanding how it manifests itself, by trying to see what a color blind person would see.

Luckily, there are a couple of solutions out there that allow you to take a normal image and apply filters to it in order to get an idea of what a certain vision deficiency would look like.

6.1 Online Color Blindness Simulators

If you’re dealing with regular images, these color blindness simulators can quickly generate a picture of what a person suffering from a specific condition would see:

  • Coblis by Colorblindness.com is probably the most exhaustive solution out there since it generates images for all types of color blindness.
example of coblis color simulator
  • Vischeck is a simpler generator that gives you the ability to preview a side-by-side picture of both the original and the simulated color vision deficiency.
example of vischeck color simulator

If you’re a web designer and want to see what your project would look like for a person suffering from color blindness, Toptal has put together a smart little Color Blind Filter that takes any website and converts it using one of the four available filters.

example of toptal color blind filter

6.2. Local Color Blindness Simulators

Since uploading your project to the web and then comparing the images back and forward can be a little time-consuming, there are a couple of software solutions out there that can help you achieve the same result faster.

  • Adobe Illustrator: if you didn’t know, Illustrator actually comes with two color proofs (Protanopia and Deuteranopia) within its View menu (View > Proof Setup), that help you quickly see what your project would look like when viewed by a color blind person.
example of color blindness filter within adobe illustrator
  • Adobe Photoshop: the same color proofs are included within Photoshop (View > Proof Setup), helping you identify and correct the final result.
example of color blindness filter within adobe photoshop
  • Stark is a free plugin created for Sketch that helps you select from eight color profiles and preview your design as a color blind person.
  • Color Oracle is another free color blindness simulator developed by Bernie Jenny that can be installed and used on Windows, Mac, and Linux and was created to work independent of the creative software that you’re using.

7. How Does Color Blindness Affect the Quality of One’s Life?

Even though for color blind people the world around them seems „normal”, since most of the time that’s the only way they’ve experienced it, the reality is that they usually face difficulties in what we think of as being simple, everyday tasks. From cooking food to driving a car or choosing what clothes to wear, what they see does affect their reactions and behavior, directly influencing their life.

Imagine that you would like to drive a car, but can never tell if the traffic lights are green or red without knowing the position of each of the three states. Or maybe you would like to cook a nice piece of meat that you bought from the local market, but you can’t tell if it’s rare or well done.

Also, think of all the creative jobs out there that you would love to do but could never apply for since you can’t really see what everybody else is seeing.

These are just a couple of the situations that a color blind person has to deal with on a daily basis, so why not try and learn how we can help them even just a little bit by following some of the simple solutions presented below.

8. How Can You Adjust Your Designs and Illustrations for the Color Blind?

So at this point, we know what color blindness is and have a basic idea what it can look like, which means that we can now talk about finding and implementing solutions meant to adjust our projects for people affected by these vision deficiencies.

8.1. What Colors Work Best?

The first thing that we need to ask ourselves when working on a project (whether it’s an existing or new one) is what color combinations work best. And the answer is that we really don’t have a generalized list, since it all depends on the Saturation and Brightness levels used for each and every color.

What we do know is that there is a set of color combinations that should be avoided, since it might be hard for a color blind person to tell them apart:

  • red and green
  • red and brown
  • red and orange
  • red and violet
  • red and black
  • green and brown
  • green and orange
  • light green and yellow
  • blue and green
  • blue and purple
  • blue and yellow

The problem usually arises when a design is based on colors that have close hue, saturation, or brightness levels, making them seem like shades of the same color.

example of color combinations to avoid

So our goal is not to create a color scheme that is clearly identifiable by a person suffering from color blindness, but to make it possible for them to distinguish one color from another, even though they might not be sure what that color is.

8.2. How Can You Fix Bad Color Combinations?

The first step to fixing a bad color combination is noticing it. This is where the color simulation tools come in handy, since you can quickly observe if you have indistinguishable overlapping sections or elements that are either identical or simply not visible, by going through the different available filters.

Depending on the type of creative project that you’re working on, whether it’s an illustration, a mobile app, or a type of graphical data representation (bar chart, line chart, or pie chart), you can use the following suggestions to adjust the final result for those suffering from this condition.

Use a Different Hue

If you take a look at this illustration of a classic Game Boy, you might notice that when using a Deuteranopia filter, the upper section of the device looks as if it has a cutout since the hue of the background and that of the screen are really close in terms of saturation (57.83% for the red hue and 42.96% for the green one).

example of bad color combination within an illustration

We could adjust the saturation of the screen section in order to increase the hue’s intensity, but as you can see, in this particular situation that won’t help as much as we’d like.

example of increasing the saturation with no result

What we want to do is adjust the hue of the background from red to purple, which as you can see will create a clear separation between the two sections.

adjusting an illustration using a different hue value

Aim for High Contrast

We’ve fixed the background problem, but as you can see, some sections of the console (such as the front and the side) are really hard to distinguish, since they use the same hue value (0%), and similar brightness levels (92.94% for the front and 86.67% for the side). The same thing can be said about the d-pad button, where the cross-section uses a 45.88% brightness level while the center dot uses a similar 40.78% value.

When this happens, you can quickly address the situation by selecting the respective shapes and adjusting their saturation and/or brightness levels until they start standing out.

adjusting a bad color combination using high contrast

The general rule would be to use as few tints and shades as possible, and have the artwork stand out, using high contrast whenever you can.

Since in real life the console’s shell is made out of white plastic, it seems fair to use a few tints and shades if we want to represent it more accurately, but if the project allows, you can always achieve higher contrast by using different hues.

Separate Your Shapes Using Outlines

If you tried some of the previous solutions but couldn’t get the desired result, you can sometimes isolate the different sections of a badly colored composition using thick, dark outlines. In the case of our Game Boy, we could turn some of its shapes into outlines and add new ones to those that support them, thus giving us a more defined result.

adjusting bad color combinations using outlines

Add or Remove Colors

Adding or removing colors can make or break a design, especially one viewed by a person that can’t distinguish all of them. If we take a look at the outlined version of our console, you might have noticed that the circular buttons are now blending in with their outlines.

We can easily fix this by introducing two new hues (a light yellow and blue) as long as we know what colors can be seen by a person suffering from a specific vision deficiency (in our case, Deuteranopia).

adjusting bad color combinations by adding colors

In other situations, you might find that removing colors will improve the overall design since sometimes simpler is better.

Adhere to a Monochromatic Color Scheme

Sometimes colors might prove to be your biggest enemy, especially when dealing with a vision deficiency such as Deuteranopia, so it might be a good idea to reduce your palette to a monochromatic color scheme.

Often, people confuse a monochromatic color scheme with a grayscale one consisting of only blacks, grays, and whites, but they’re actually two completely different things. 

According to Wikipedia, a monochromatic color scheme is derived from „a single base hue and extended using its shades, tones, and tints”.

As you can see below, by adhering to a monochromatic scheme, you can eliminate the whole rigorous color matching process, and focus on just one hue from which you can create shades and tints using different saturation and brightness levels.

adjusting bad color combinations using monochromatic schemes

Go Grayscale

Another solution to avoiding color completely is to go fully grayscale. By doing so, you eliminate almost all of the above steps, which means you can focus on the artwork itself.

adjusting a bad color combination using a grayscale scheme

Add Texture

One last method of making sure your design is clearly understandable by those suffering from vision deficiency is that of adding texture. Whether it’s grain, horizontal lines, or any other type, texture can easily separate and highlight a specific section of an image, helping you break any color boundary.

adjusting a bad color combination using texture

Conclusion

Whether we realize it or not, color blindness is a condition that affects a large number of people out there, making their daily lives harder by limiting the things they can see and understand through the filter of color.

Luckily, as we’ve seen, there are several things that we as designers can do in order to improve the quality of their life, thus making things a little easier one step at a time.

I really hope that this article has opened your eyes to an area of design that is often overlooked, and managed to teach you a few key notions that you can implement in future projects.

That being said, you can further expand your knowledge on color by checking out these awesome articles:

CSS

Creating a Vue.js Serverless Checkout Form: Setup and Testing

Dodaj komentarz

Post pobrano z: Creating a Vue.js Serverless Checkout Form: Setup and Testing

There comes a time in any young app’s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we’ll go over how to set up a serverless function, make it talk to the Stripe API, and connect it to a checkout form that is setup as a Vue application. This may sound daunting, but it’s actually pretty straightforward! Let’s dig in.

Vue shop

Article Series:

  1. Setup and Testing (This Post)
  2. Stripe Function and Hosting (Coming Soon)
  3. Application and Checkout Component (Coming Soon)
  4. Configure the Checkout Component (Coming Soon)

What is Serverless?

We’ve covered serverless concepts before but, in case you haven’t read that article, let’s talk for a minute about what we mean by „serverless” because it’s a bit of a misnomer.

The promise of serverless is to spend less time setting up and maintaining a server. You’re essentially letting the service handle maintenance and scaling for you, and you boil what you need down to functions that run certain code when a request is made. For this reason, people may refer to this as FaaS. This is really useful because you pay for what you use, rather than a large container that you might not need in its entirety. You also primarily hunker down and focus just on the code you need to run instead of babysitting a server, which really appeals to a lot of people who’d like to get up and running quickly.

But FaaS isn’t always the right tool for the job. It’s really useful for small executions but, if you have processes that might hold up resources or a ton of computation, being able to communicate with a server as you normally do might be more efficient.

What we’re going to make is a perfect use case for going serverless. Stripe checkouts are pretty seamless to integrate on both the client and server side, but we do actually need to execute some logic on the server, so we’ll use Azure to help us with this. The portal and Github integration are pretty quick to manipulate, as long as you know where to go. So by all means, let’s make it happen!

Sign up for Stripe

First, we’ll create a Stripe account. We verify our new account via email and then we’ll head over to the API section, where we can retrieve two keys. You’ll note that we’re in test mode right now, which is good! We’ll keep it like that for testing, and unveil the testing key token to use while we set up the application.

Once you’re signed in, go to the API section of your dashboard to retrieve your key.

Stripe testing dashboard
The Stripe API screen

You may also want to add a phone number to your account for 2 factor auth as well.

Setting up Our Serverless Function in the Azure Portal

First, we’ll head over to the portal, (or if you don’t already have an account, you can sign up for a free trial here) and select New > Serverless Function

New Function
Setting up a new Servless Function in Azure

When we click on the Serverless Function app, we’ll be taken to a panel that asks for details to help with the setup. As you can see in the screenshot above, it will autofill most of the fields just from the app name, but let’s go over some of these options quickly:

  • Add in a unique name
  • A Resource Group (if you don’t already have one, create one)
  • I use the Windows OS because the Linux is still in preview, so Windows will be more stable
  • I use the Consumption Plan because this is the one that will have payments that scale with the use, and it will also scale automatically. The other option, App Service Plan, is good for people who prefer everything to be a bit more manual.
  • Choose a location that is close to your customer base, or a midpoint between two customer bases
  • Choose a storage, or create one as I’ve done
  • I’ll also check Pin to Dashboard because I want to be able to retrieve my function quickly later
New function settings

This will bring you back to the main portal dashboard and let you know that your function is deploying. Once it’s done, it take you to a main screen that has all of your options. From here, we’ll want to create our function, and it will be an HTTP trigger.

We’ll select Functions under our function name, and you’ll see a little table with a plus that says “New Function”:

New Function in the Portal

Once we click here, we have a few options on what we can create. We’ll pick HTTP Trigger:

Choose HTTP Trigger

We’ll be able to select the language (pick „JavaScript”) and then „Create”:

Pick the Language and Create

The Default Testing Function

From here, we’re given a default testing function which helps us see how this all works. If we open all of these panels and hit the Run button, we’ll see the output in logs.

The initial testing output
Running the function in a test environment

Here’s the code we were given:

module.exports = function(context, req) {
  context.log('JavaScript HTTP trigger function processed a request.');

  if (req.query.name || (req.body && req.body.name)) {
    context.res = {
      // status: 200, /* Defaults to 200 */
      body: 'Hello ' + (req.query.name || req.body.name)
    };
  } else {
    context.res = {
      status: 400,
      body: 'Please pass a name on the query string or in the request body'
    };
  }
  context.done();
};

You’ll see here that we’re passing in the context. That allows us to log, which will be shown in the lowest panel below. In the Test panel on the right, we can pass in a request body that can be used to test our application. When it runs, we see the output with a 200 status and know that everything is working. We also have a context.log for the case that it gives us a 400 error. If you’d like to play around with a serverless function and see it in action for yourself, you can create one with a free trial account.

Next Up…

Now that we have the base of our serverless function, let’s set up what we’ll need to communicate with Stripe! More to come in the next post in this series.

Article Series:

  1. Setup and Testing (This Post)
  2. Stripe Function and Hosting (Coming Soon)
  3. Application and Checkout Component (Coming Soon)
  4. Configure the Checkout Component (Coming Soon)

Creating a Vue.js Serverless Checkout Form: Setup and Testing is a post from CSS-Tricks

Web Tools

Quick Tip: How to Create a Monstera Leaf Pattern in Adobe Illustrator

Post pobrano z: Quick Tip: How to Create a Monstera Leaf Pattern in Adobe Illustrator

Final product image
What You’ll Be Creating

This tutorial is very easy and quick. However, despite its brevity and simplicity, you will still be able to add a few important skills to your designer’s arsenal. We will use the option Object > Pattern > Make, which will automatically create a pattern for you.

If you are in a mood to create more patterns, then check out GraphicRiver. There you can find many images that you can use to create your new patterns.

So grab a cup of coffee, and let’s start!

1. How to Create the Monstera Leaf

Step 1

Create a New Document (File > New) with 850 px Width and 850 px Height.

We will start by creating the main image of the pattern, which will be the leaf. For that, take the Ellipse Tool (L) and create a green ellipse. Rotate the ellipse slightly to the left. Now select it, right-click the mouse, and select Transform > Reflect. This will bring up the Reflect dialogue window, where you should enter Axis Vertical, Angle 90 degrees, and press Copy. Move the copy of the oval to the right, as shown in the image below.

After that, while keeping the two shapes selected, go to the Pathfinder panel (Window > Pathfinder) and press the Unite button, and you will get one shape from these two ovals. You will now get a heart-like shape, which will be the base of our leaf.

As you can see, the bottom of this shape is round, and we don’t want that. So, to get a sharp bottom point, hit the Direct Selection Tool (A) and select the bottom anchor point. Then look up, right over your artboard, and a bit on the left side. There you can find the Anchor Point options, where you want to select “Convert selected anchor points to corner”. After that, select the top anchor point using the same Direct Selection Tool (A), and select “Convert selected anchor points to smooth”.

how to create the main shape of the monstera leaf

Step 2

Now, we will add the holes for the monstera leaf. For that, we will use the Eraser Tool (Shift-E). To set the options, double-click on the Eraser Tool and enter Angle 0 degrees, Roundness 100%, Size around 10 pt (depends on how big your leaf is), and then hit OK. Now you can start to drag the Eraser Tool from the inside to the outside. Don’t do it straight from the center, but rather more from the sides. Remember to do this on both sides of the oval. The erased lines don’t have to be exactly symmetrical, as that will give us a more realistic look.

We will add a few holes to the leaf, which are also typical for a monstera’s leaves. Remember, you don’t have to worry if something you have done does not satisfy you, because you can always hit Control-Z to Undo. 

Now we have the base of our leaf. As you go through the tutorial, you’ll see how we will modify this leaf, so it will become even more realistic.

continue creating the main shape of the monstera leaf

Step 3

In this step, we will create the veins. Using the Ellipse Tool (L), create a dark green, thin, horizontally aligned ellipse. Then select the Direct Selection Tool (A) and slide the top and bottom anchor points up. This will be one of the veins that we will use for our leaf later on. As it is not needed right now, set it aside.

how to create the side vein

Step 4

In this step, we will continue to create veins. Using the Ellipse Tool (L), draw a dark green, thin, vertical ellipse and place it in the middle of the leaf. This is the primary vein of the leaf.

Now, take the vein created in the previous step, and place it on the left side of the primary vein. Make a few copies of the vein (Control-C, Control-V) and place them on the left side of the leaf. If necessary, you can make some of them slightly smaller or bigger, to make the size more appropriate for the base of the leaf.

After that, select all the veins on the left side, and again right-click your mouse, select Transform > Reflect, select Axis Vertical, Angle 90 degrees, and press Copy. Move the vein copies to the right.

how to create other veins

Step 5

Make a copy of the leaf and make it a little darker. Did you know that you can change the position of the holes in the new leaf? As you remember, these holes are not separate shapes that we added, but erased parts of the leaf shape. To change their positions, we need to use a special mode of the image.

So double-click on the main shape of the leaf. Your image will be in isolated mode. Being in this mode, you can move the holes of the leaf. Be sure you select the side of the hole to be able to move it, do not click in the middle of the hole. When you finish the modifications, double-click on the artboard to exit the isolated mode.

Now group the leaf (the light and dark one should be grouped separately), (right-click > Group), make a few copies of them, rotate them in different directions, and resize them as you want.

how to create other monstera leaves

2. How to Create the Pattern

Step 1

Place the leaves in a similar way to the image below. This will be the base of our pattern. If you have large gaps between the larger leaves, you can fill them up with small ones. To do that, create some more copies of the leaves, and rotate them in different directions.

forming the pattern base

Step 2

Select the set of leaves you’ve created. Now, go to Object > Pattern > Make. Your illustration will appear in a special isolated mode, which will give you a preview of your final pattern. A new dialogue window will appear, which is called Pattern Options. Play around with the options to get a result which satisfies you.

Here you can choose the Tile Type (Grid, Brick by Row, etc.). The Width and Height will be given to you automatically, so don’t change anything here. Be sure to check Move Tile with Art. You can also play around with the Overlap and Copies here. Make sure you have checked Dim Copies to: 50% (it allows you to see the boundaries), and Show Tile Edge.

In this mode, you can also freely modify the pattern by moving the leaves, deleting or resizing them, and changing the color or making other copies of the leaves. When you like the pattern, hit the Done button on the top left side of the window. Now the pattern is saved in the buffer of your AI. To make sure the pattern is saved, take a look at the Swatches panel (Window > Swatches). As soon as your pattern is saved, you can delete all of the leaves from your artboard.

Select the pattern and in the Swatches panel for the fill color, grab the Rectangle Tool (M) and click on the artboard. Enter Height and Width 850 px, and press OK. As a result, you will get your seamless pattern to be in a square shape.

how to create the pattern

Step 3

As our created pattern has a transparent background, or it doesn’t have a background at all, you can add any background color you want without changing the pattern. Using the Rectangle Tool (M), create a beige square with Height and Width of 850 px. As I said before, you can add any background color you want, but here I chose a pretty beige color.

how to create the background

Step 4

Place the background behind the pattern (Control-X, Control-B).
Finally, we need to align the background and pattern to the artboard. To
do this, open the Align panel (Window > Align). Set Align To:
Align to Artboard (open the fly-out menu and go to Show Options if you
don’t see the Align To:), make sure that your pattern and background are selected, and
click the Horizontal Align Center and Vertical Align Center buttons. And
we are done!

placing the pattern on the background

Conclusion

You did a great job! I hope it was clear and easy for you. Now you are ready to create any seamless patterns you want. You can use other objects also, and by repeating the second part of the tutorial, you can create amazing seamless patterns.

I really like the look of all the monstera leaves, which give our final image a beautiful look. I think it looks a little bit like a tablecloth, a scrapbooking background, or even a piece of clothing! As you can see, a seamless pattern can be used for many things, which will hopefully put you in a mood to create more!

final image