Tropical and botanical design is one of the most popular trends in the industry right now. Let’s find out why below!
Trend Watch: Floral, Tropical, & Botanical Design
There is nothing more cathartic than nature. It has a serene, calming effect that is both enjoyable and soothing.
For creatives, nature is one of our biggest inspirations. Not only do we tend to capture the beauty of the natural world around us, but we can also bring the same calm feeling we experience to the observer.
Today we’ll take a look at one of the most popular trends to hit the industry: floral, botanical, and tropical design. Let’s take a look at its key features and a few of our favorite resources!
What We Love About This Trend
Designers everywhere love this trend! Here are just a few of its key features:
Vibrant colors. Green is the color of vitality, wealth, and nature. And this natural trend instantly freshens up any design with a joyful, vibrant look. Try out bold, vibrant colors for an instant happy design.
Stunning leaves and flowers. Areca Palms, Split-Leaf Philodendrons, and Banana Leaves are a few of the most popular plants seen in tropical designs, while floral designs usually stick with blooming roses and daises. Integrate both into your work for a fresh, minimalist-friendly alternative.
Inspiring seasonal themes. You can couple your designs with a fun seasonal theme. Try out a summer sunset idea for a beautiful color palette!
Fun Floral & Tropical-Themed Lessons
Do you love this trend too? Check out these tutorials for more inspiration. Learn how to incorporate beautiful botanical leaves and flowers into your work.
Let’s start with this stunning tropical background. You can drape it around you as a lovely fabric design or incorporate it into a website header. And since it’s a vector file, you’ll be able to enjoy the natural watercolor appearance with a completely lossless design!
Spell out your favorite quotes with this awesome floral alphabet. This amazing collage of letters includes gray and pink flowers made into a decorative font. Download it today to create inspiring messages and more.
Summer-themed flyers are one of the hottest ways to show off your love for the tropics. This design incorporates a mixture of botanical leaves with a vibrant green color palette that your party-goers will definitely love. Enjoy high-quality graphics on a pristine 4×6 inch template.
Need a few floral elements to complete your work? Then try out this pretty pack of abstract floral patterns. Inspired by a warm summer theme, this pack contains four total patterns available in several standard formats.
This classy invite set is simply divine! It’s inspired by traditional tropical leaves and incorporates a few into the design. Included in this set is a massive pack of dazzling invites, RSVP cards, and so much more!
Or celebrate your love for the tropics with an inspiring, chic logo. A perfect companion to any luxury brand, this logo template is simple and easy to use. It’s available in 100% vector format and can be easily adapted to any business with the help of Adobe Illustrator.
Sometimes a toolkit of the essentials is just what you need to kick-start a new project. Try out this watercolor and elements toolkit for a fun alternative to design burnout. Enjoy 75 custom shapes, 90 watercolor brushes, and 12 unique styles of patterns.
If this is the year you’ve ignited your passion for writing, then consider a calming botanical-themed magazine template. Designed with a crisp, clean appearance, this template offers two industry sizes all wrapped up in a 40-page InDesign document.
A stunning business card always leaves a great first impression! This stylish package offers an attractive wild flower theme with plenty of room for your contact details. Download it today for a fun, professional alternative.
Weddings are a time for love and fresh, lively flowers! So check out this vintage floral invitation set, perfect for the next bride to be. Aside from a phenomenal collection of colorful invites, you’ll also get access to this stylish black set! Make your invites pop with super pretty flowers!
There’s no better way to stand out than with a creative resume. This professional suite includes not only an elegant resume, but an accompanying letterhead template as well. You’ll love the fresh botanical accents like palm leaves and a cute office plant!
Every designer should have at least one pack of flower assets. This amazing pack of floral clipart includes 20 PNG files of individual flowers and six flower combinations. They’re ideal for wedding invites, handmade crafts, and scrapbooking projects.
If minimalism is your forte, consider a delightful foliage pattern. This tropical leaf design features hand-drawn patterns that are organic-looking and simple. Use it for a package design or to help your interior spaces shine!
This cool effect is achieved in just a few moments with the help of a Photoshop action. Floral Faces lets you transform your face into a beautiful tropical garden by working with premade colors and layout orientations. You’ll love this effect!
Invite your friends to a fun luau with this striking summer flyer. Featuring a creative guitar design covered in tropical flowers, this flyer comes available in two standard sizes. Switch out the details for your own, and even get access to free fonts!
Green isn’t the only color you’re stuck with for the tropical/botanical trend. This floral breeze Photoshop action applies colorful flowers to your photos with just a few steps. Choose from four different flower types to freshen up your portraits.
Photoshop brushes take the work out of creating certain shapes and textures by hand. This massive pack contains 75 high-resolution watercolor brushes with wonderful styles to choose from. Enjoy 60 impressive flowers with helpful extras like wreaths and garlands.
You can, of course, go full on glam with this rose and flowers text effect. A Photoshop action that does all the work for you, this action transforms your text with just one click. It’s super easy to use, so beginners to Photoshop will love the simple process!
working on your Illustrator skills? Then complete your designs with a
vibrant island illustration like the one below. Featuring two palm
trees, an energetic ocean, and a beaming sun in the background, this 100% vector illustration is perfect for brochures and more.
Lastly, we have this delightful spring flyer great for any tropical-themed party. Featuring jungle leaves and an exotic flowers pattern, this template also offers a creative double exposure effect. Enjoy a neat twist on the botanical theme and download it today!
Show Us Your Designs!
If you’re as fond of the tropical and floral trend as we are, show us your work! Post a result showing us how you work with the tropical/botanical theme, and let us know your favorite styles in the comments below.
Save the texture file to a folder you can easily come back to, and install the font files on your system. Then you’re ready to start designing your flyer.
1. How to Create a Color Palette for Your Flyer
Open up InDesign and go to File > New > Document.
Make sure the Intent is set to Print and uncheck the Facing Pages box. Set the Width of the page to 8.5 in and Height to 11 in.
Keep the Margins to their default value, and add a Bleed of 0.25 in to all edges of the page. Then click OK.
Expand the Layers panel (Window > Layers) and double-click on the Layer 1 name to open the Options window. Rename the layer Background and click OK.
Choose New Layer from the panel’s drop-down menu (accessible at the top-right corner), and rename this second layer Shadows. Click OK.
Create a further three new layers in this order: Eggs, Typography, and finally Texture at the top of the sequence.
Then lock all layers except Background at the bottom.
Expand the Swatches panel (Window > Color > Swatches), and select New Color Swatch from the panel’s drop-down menu.
Name this new swatch Sky Blue, and set the Type to Process and the Mode to CMYK. Then adjust the percentage levels below to C=62 M=4 Y=13 K=0.
Repeat the process, building up a palette of 17 CMYK swatches in total:
Mink: C=33 M=33 Y=44 K=14
Orange: C=0 M=68 Y=75 K=0
Lime: C=19 M=10 Y=81 K=1
Pink: C=0 M=51 Y=20 K=0
Mustard: C=3 M=13 Y=93 K=0
Blush: C=3 M=27 Y=25 K=0
Chocolate: C=33 M=70 Y=92 K=40
Yolk Yellow: C=3 M=36 Y=92 K=0
Tomato: C=0 M=93 Y=83 K=0
Pea Green: C=68 M=0 Y=88 K=0
Burnt Red: C=0 M=85 Y=94 K=0
Sage: C=58 M=17 Y=50 K=2
Green: C=58 M=17 Y=85 K=2
Pink White: C=0 M=5 Y=0 K=0
Slate: C=65 M=50 Y=44 K=36
Brown Black: C=52 M=53 Y=56 K=52
With the Background layer still unlocked, take the Rectangle Tool (M) and drag across the whole page, extending the shape up to the edge of the bleed on all sides.
From the Swatches panel, set the Fill Color to Slate.
2. How to Create Colorful Easter Eggs for Your Flyer
For this stage, we’ll need to move over to Illustrator for a moment. Minimize but don’t close your InDesign window, and open up Illustrator.
Go to File > New, and create a new document at any size.
Take the Arc Tool (from the Line Segment Tool pop-out menu), and draw a rough ‘C’-shaped curve onto the page. Try to make the lower part of the curve more generous than the top, to mimic the shape of a half-egg.
Right-Click > Copy the curved line and Edit > Paste it. Right-Click on the copy and Transform > Reflect.
In the Reflect window, check Vertical to flip the curve and click OK to exit.
Then position the curve perfectly against the original, to create a whole egg shape. Select both curves and Right-Click > Join to unite the lines into a single vector shape.
Then Copy the egg shape, and minimize Illustrator.
Head back to your InDesign document and lock the Background layer. Unlock the layer above, Eggs.
Edit > Paste to drop the egg vector directly onto the page. Holding Shift while you resize it, scale it to a width of around 1.77 in (visible in the Controls panel running along the top of your workspace), and position it in the top-left corner of the page.
From the Swatches panel, change the Fill Color of the egg to Sky Blue.
Expand the Stroke panel (Window > Stroke). With the egg selected, set the Width of the stroke to 0.75 pt and choose Dashed from the Type drop-down menu. This will add a little bit of texture to the edge of the shape, softening it.
From the Stroke panel, set the Stroke Color of the egg to Sky Blue to match the fill.
Edit > Copy, Edit > Paste the egg shape, moving the copy over to the right of the original. Adjust the Fill and Stroke Color to Mink.
Paste two more eggs, moving them over to the right, creating a row of four eggs in total. Tweak the spacing and position to ensure they are evenly spaced.
Set the Fill and Stroke Color of the third egg to Orange, and the fourth to Yolk Yellow.
Select all four eggs, and Right-Click > Copy, and Paste.
Position the four copies in a row below the first, adjusting the color of each, from left to right, to Lime, Pink, Mustard, and Sky Blue.
Repeat, creating a third row, set in Blush, Chocolate, Yolk Yellow, and Tomato.
Paste in a final row, setting the colors to Pea Green, Burnt Red, Sage, and Green.
3. How to Format Retro-Inspired Typography on Your Flyer
Lock the Eggs layer and unlock the layer above, Typography.
Take the Type Tool (T), and drag to create a text frame over the top of the egg shape in the top-left corner of the page.
Type in ‘e’, and from the Character panel (Window > Type & Tables > Character), set the Font to Compass Rose CPC Bold, Size 140 pt.
From the Swatches panel, set the Font Color to Pink White.
Select the text frame and Right-Click > Copy, and Paste.
Edit the text to read ‘a’, and position it over the top of the second egg along.
Paste another copy of the text frame, adjusting the text to ‘s’, and placing it over the top of the third egg in the row.
Select all three text frames and Copy and Paste.
Move over the second row of eggs, adjusting the letters to read ‘t’, ‘e’, and ‘r’.
Then Paste another row of text frames onto the third row, shifting them to the right, with the pale pink egg blank. Edit the text to read ‘e’, ‘g’, and ‘g’.
And Paste another sequence of frames over the top of the final row, adding an extra text frame, and changing the text to read ‘h’, ‘u’, ‘n’, and ‘t’.
Use the Type Tool (T) to create another text frame over the top of the egg in the top-right of the flyer.
Type in the day, date, and time of the event, and set the Font to Compass Rose CPC Bold, Size 23 pt.
Set the text to Align Center from the Controls panel at the top, and adjust the Font Color to Brown Black.
You can separate lines of text, such as the time shown here, by highlighting a line and increasing the Leading (line-spacing) in the Character panel.
Click on the Superscript button in the Controls panel to make the ‘st’ or ‘nd’ of a date smaller, as shown below.
Copy and Paste the date text frame, moving it over the blank blue egg below. Adjust the text to read the location of your event, and tweak the Font Size so that the text is large and legible.
You can also add another text frame, perhaps listing the price of the event, over the top of the pale pink egg on the third row.
4. How to Add Collage Effects and Vintage Texture to Your Flyer
Lock the Typography layer and unlock the Shadows layer. Zoom in on the top-left corner of the flyer, and switch to the Pen Tool (P).
We’re going to create a collage-style vintage effect behind each egg, which will give the shapes a rough cut-out pale shadow. Trace very roughly around the perimeter of the blue egg…
… taking it around the whole shape and meeting at the beginning.
Set the Stroke Color of the shadow to [None] and the Fill to Pink White.
Repeat the process for the next egg, looping a rough shadow around the shape and setting the Fill to Pink White.
Do the same for the third egg along, too, and the fourth as well.
Copy and Paste the shadows, moving them behind each egg. Vary the scale and position of them slightly to add variation.
Lock the Shadows layer and unlock the top layer, Texture.
Take the Rectangle Frame Tool (F) and drag over the top of the whole flyer. Go to File > Place, and choose the PNG version of ‘Texture-8’ in the vintage textures pack you downloaded earlier. Click Open, and allow the texture to fill the whole image frame.
Click on the texture image frame and head up to Object > Effects > Transparency. Set the Mode to Screen and click OK.
Select the image frame and Edit > Copy, Edit > Paste in Place.
With the copy of the frame selected, head back to Object > Effects > Transparency, and pull down the Opacity to 45%, before clicking OK.
Your flyer artwork is finished—great job! All that’s left to do now is export it as a PDF ready for printing.
5. How to Export Your Flyer for Print
First, make sure to File > Save all of your hard work. Then go to File > Export. Name your file, and choose Adobe PDF (Print) from the Format drop-down menu. Then click Save.
In the Export Adobe PDF window that opens, choose [Press Quality] from the Preset menu at the top.
Click on Marks and Bleeds in the window’s left-hand menu.
Check All Printer’s Marks and Use Document Bleed Settings.
Then click Export to create your PDF.
Conclusion: Your Finished Flyer
Your PDF file is ready to send off for professional printing—great job! All you need to do now is post it up on noticeboards and spread the word about your fun Easter event.
In this tutorial, we’ve covered several techniques for creating print designs in InDesign, including how to set up a flyer layout and format typography. We’ve also looked at how to use fonts, textures, and colors to bring a vintage, mid-century vibe to your design.
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.
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
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”.
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.
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 Awarenessstates 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.
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.
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.
Deuteranopia: when there are no working green cone cells, causing reds to appear as brownish-yellow
and greens as beige.
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:
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.
Tritanopia: when the person’s blue cone cells are missing, causing blue to appear
green and yellow violet or light grey.
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.
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.
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.
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.
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.
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.
Adobe Photoshop: the same color proofs are included within Photoshop (View > Proof Setup), helping you identify and correct the final result.
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.
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).
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.
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.
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 brightnesslevels until they start standing out.
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.
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).
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 monochromaticcolor scheme with a grayscale one consisting of only blacks, grays, and whites, but they’re actually two completely different things.
According to Wikipedia, a monochromaticcolor 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.
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.
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.
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:
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
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 AnchorPoint 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”.
Now, we will add the holes for the monstera leaf. For that, we will use the Eraser Tool (Shift-E). To set theoptions, 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.
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.
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.
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.
2. How to Create the Pattern
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.
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.
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.
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!
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!
I’m a freelance illustrator from Indonesia, mostly illustrating for children’s books or culture-themed projects.
Limas Palembang: The Traditional House of The Palembang
work is mostly about Indonesian culture,
in this case the culture of Palembang during the Indonesian colonial era. I focus on its
current architectures, clothing and hierarchy.
Nesia in Pambelang
illustrations, the artists that influence me the most are Norman Rockwell,
and the airy paintings of Degas and Mikhail Zichy. I always look for a
style that is somehow timeless, so I took inspirations from mostly
the Romanticism era.
Toronto-based artist Janice Sung has a lovely way of capturing faces that you simply won’t forget. Check out her extraordinary work below.
I am an illustrator based in Toronto. Most of my work is done digitally but I also play around with watercolor as well.
My will to learn and improve is what gives me the drive to
paint every single day.
I try to find inspiration from everything and everyone around me. I
am mostly inspired by people, nature, and the beauty found in everyday
Tropical Bitties Series
I look up to a new artist almost every week but I would definitely
say my biggest inspiration growing up as a young artist would be Audrey
Kawasaki. The way she draws girls in such a sensual and elegant way
is something I always strive for in my own paintings.
As for style, I take great interest in graphic
design and abstract art as well.
Illustrator and graphic designer extraordinaire Mario McMeans mixes his unique point of view with his clean graphic style. Check out his super dope vector work below.
My name is Mario McMeans, otherwise known as ‚Supahmariostyle.’ I’m a
Graphic Designer, horror junkie, and all around connoisseur of
Hueston Branding and Design
Every project has a story
tell. It’s up to you as the designer to be receptive to that
message, whatever it is. That’s kind of the approach I’ve been taking
lately with all my projects.
Currently, I’m teamed up with other amazing talents of this collective
we call ‚The Design Room’ where the talent owns the rights to their
work and not the company.
Iron Horse Industries
There are so many artists that have given me inspiration
for many different reasons. I have to start things off with Tasso Art because if it wasn’t for his illustrations I would’ve never touched Illustrator at all. Next, Chris Do, founder of ‚Blind’, really
helped me to understand the business side of design.
There’s my friend
Jarmon Maxie aka King Maxie Animation, and lastly, this free-spirited artist that’s always keeping me
on my toes, the world knows her as Melody Nieves.
Black greatness and epic celestial goodness are a just a few of the words I’d use to describe the work of designer and artist Kaylan Michael. Check out her brilliant manipulations below.
I’m a self-taught visual artist and graphic designer based in Montreal Canada. Highly passionate and all about art and design, I enjoy everything from
fashion, interior and graphic design, extending to photography and video
My work explores themes of spirituality and femininity with
an African touch.
The inspiration behind my work is basically my life. I share a
little bit of my pain, scars, growth and visions through each of my pieces and hope that it inspires people.
Patterns on Mug
Being originally from Africa, I look up to African art and afro
futuristic art styles. I love patterns, colors and designs that represent
I love the fact that
each person can see different things in one piece of art and relate to
it. Some artists I look up to are: Jean-Michel Basquiat, Frida Kahlo,
Gustav Klimt, and a New York based artist Kehinde Wiley. I love the energy behind their work, it truly inspires me.
Celebrate Diversity! Send Us Your Favorite Artists!
Help us find more incredible artists from different backgrounds to share with our audience! Tweet me your recommendations at MelloNieves or use the hashtags #artforall and #tutsplusdesign on Twitter and Instagram. You never know, we may just feature you in our next article!
like to extend a warm thank you to all the artists who participated in
this feature. Feel free to see more of their work in the links below:
I’ve always wanted to do a photo manipulation with one of my own pictures. And after ten years of working with Photoshop, I finally did it!
My general love for space inspired this piece. I once created this painting with a similar vibe, so I decided to use it as inspiration to help guide me towards a fun result.
Plan out your photo shoot ahead of time with what you would like to wear and which way you’ll be facing. I never really liked pictures of myself in profile, so I wanted to see how I could make it happen.
For this shoot, I used my Samsung NX3000 mirrorless camera. It has a super helpful LCD screen that allows me to see myself in the shot. Feel free to use your phone to take selfies or ask a friend for help. Just make sure there’s enough lighting!
Take several photos to get the best shot possible. I usually stick to my safe place for selfies, but if you learn your angles for picture taking and try to take risks, it can actually empower you and lead to awesome results!
Need more help with photography? Check out these articles:
You can really build a photo manipulation from scratch just using a general concept and a few free stocks! Keep in mind this was initially made out of fun, so feel free to add more details to your own self-portraits.
Let’s get started!
2. How to Manipulate Your Own Photo
I’m giving you free rein to do as you please with my photo. I promise I won’t take anything personally, so take advantage of using it like any other stock.
This photo has already been edited to boost up the clarity and hair (and to save my precious ego). But I’ll show you how I made the hair more voluminous for more style.
I knew I wanted to create a massive, stylish bun, but I didn’t have enough hair to fill it out naturally. Instead, I’ll take advantage of the Liquify Tool for amazing, glamorous results!
If you’re working on your own photo, skip this step or add the edits you prefer.
Use a combination of the Bloat Tool (B) and the Forward Warp Tool (W) to stretch the hair. Increase the Brush Size to make sure it’s wide enough to stretch out the structure of the bun.
Continue playing with the bun size until it’s about the size of my head.
Hair stylists often pull the underside of the hair out for a fluffier look.
So let’s do the same!
Use the Forward Warp Tool (W) again to pull the bottom side of the hair to the right. Balance the shape out for a full, natural appearance, or go crazy for a fabulous result!
Now on to the manipulation!
3. How to Add the Other Stocks
Create a New Document in Photoshop. My final document comes in at 1262 x 1410 pixels.
Square-like compositions are usually great for Instagram and more!
Fill the background layer with black using the Paint Bucket Tool (B). Then Copy and Paste the edited stock onto the canvas. Position it towards the center.
Let’s remove the background from my photo!
Add a Layer Mask to the stock. Select it then paint black onto the mask to remove the background using a Hard Round Brush (set to 100% Hardness for a crisp, clean line).
Use the Free Transform Tool (Control-T) to decrease the size of the photo. Position it so that it’s floating in the center of the black space.
Continue modifying the shape of the mask.
Remove the majority of the lower outfit and clean up all the edges around the hair and body.
Remember the reference from before? I’m going for the same „bust portrait” vibe. An abstract shape like this will help us float the portrait in space more effectively.
Right-click the Layer Mask and select Apply Mask.
Now let’s add the rest of our stocks, starting with the planets.
Extract Mars, Earth, and the Moon from their photos. Using the tool of your choice (here I used the Elliptical Marquee Tool (M)), select the planet and then Copy and Paste each one onto New Layers.
Arrange the layers as shown below. Make sure that Mars is on a layer beneath the main stock so that it’s situated behind me. This will create a sense of depth of field.
4. How to Create the Galaxy Look
Now for some stars!
Copy and Paste the Milky Way stock onto a New Layer above the black background.
Add a Layer Mask, and then use a Soft Round Brush to mask away the edges with black.
Let’s add more depth to the space background.
Create a New Layer and Right-click to set it as a Clipping Mask to the Milky Way layer. Use a Soft Round Brush (0% Hardness, 60-100% Opacity) to paint dark blue #081a40 and black onto the clipped layer. Create shading similar to the result above.
Set the Layer Blend Mode to Multiply, and then lower the Opacity to 70%.
Here’s the result so far.
Clip another New Layer to the same Milky Way stock.
Add some subtle lighting to the scene.
Use a Soft Round Brush (0% Hardness, 10-30% Opacity) to paint light blue #a8b7e3 onto the left side of the canvas.
Set the Layer Blend Mode to Hard Light and lower the Opacity to 30%.
Let’s work on the main stock again.
Feel free to retouch your photo as far as you need to for this step.
Here I added a little more light to my face, neck, and body, by using a Hard Round Brush (80-100% Hardness, 10-25% Opacity) and a light tan #efd2b7 color. Adjust the Layer Opacity as needed.
We can recolor the main stock with a few Adjustment Layers.
Start with Levels.
Go to Layer > New Adjustment Layer > Levels. Add the following values for the RGB, Red, and Blue Channels. Then Right-click to set it as a Clipping Mask to my picture.
RGB: 0, 0.90, 196; Output: 17, 210
Red: 0, 0.92, 255; Output: 0, 191
Blue: 0, 1, 179; Output: 35, 192
Here is the result, along with the layer setup.
Apply more contrast and warmth to the photo.
Above the previous levels layer, Clip a NewAdjustment Layer of Curves to the stock.
Adjust the curves for the RGB, Red, Green, and Blue Channels like the ones below.
You’re doing great, keep going!
Let’s add some stars to the subject.
Copy and Paste the original Milky Way stock on a New Layer above the last one. Set it as a Clipping Mask to the main stock and use the Free Transform Tool (Control-T) to rotate the image counter-clockwise.
Position the stars so that they cover me completely.
Then set the Layer Blend Mode to Difference, adjusting the Opacity to 70%. Follow up with a Layer Mask to mask away the stars on the face and body with a Soft Round Brush.
We’ll clip one last New Layer to the main stock. This layer will be used for more shadow.
Use a Soft Round Brush (50-70% Opacity) to paint an orange color #f3a279
on the right side of the hair and body. I’m following the light source
from the original photo, so all our shading will coincide with it.
Then set the Layer Blend Mode to Subtract and lower the Opacity to 50%. Refine the shadow even more with a quick Layer Mask.
We still need to adjust the shading and coloring of the planets.
Let’s begin with planet Earth.
As before, set a New Layer as a Clipping Mask to the planet layer. Use a Soft Round Brush (0% Hardness, 60-80% Opacity) to paint dark blue #080e1b onto the right side of the planet.
Set this layer to Color Burn.
Follow up with another Clipped New Layer above it. This time, use a deep red color #120500 to paint more shadow.
Now shade Mars.
Clip two New Layers to the Mars planet. Use a Soft Round Brush to paint deep red #1a010d shadow on the first layer, and purple #14051b on the second.
Before we move on to shading the moon, let’s tweak the colors of the scene first.
Add two New Adjustment Layers above the Earth layer. Do not clip these.
Here’s the setup below for clarification.
Start with a New Adjustment Layer of Color Lookup.
Set the 3DLUT File to:
Fuji F125 Kodak 2395
Then set the Layer Blend Mode to Hue.
Boost the colors with a New Adjustment Layer of Levels.
Adjust the values for the RGB Channel to the following:
Input: 0, 1, 211
Output: 0, 255
Now for the moon!
Clip a New Layer to the moon. Use a Soft Round Brush (0% Hardness, 50% Opacity) to paint soft black color for some shadow. Follow the upward direction of the arrow shown below.
5. How to Finish the Manipulation
Here is how the manipulation looks so far:
Next, we’ll need to figure out the last few elements of this piece.
If you’re working on your own photo, feel free to follow your own natural inclinations for lighting, colors, and detailing.
Pump up the lighting for more intensity!
Create a New Layer above all the rest. Set it to Overlay.
Use a Soft Round Brush (0% Hardness, 60-90% Opacity) to paint white all over the scene for more light. Add a Layer Mask to refine it if needed.
Orbital rings aren’t actually real, but they’ll add another cool element to this manipulation.
Use the Ellipse Tool (U) to create two 2 pixel white orbital rings. Rasterize the shape layers and Merge them together.
With the merged layer selected („Rings”), go to Filter > Blur > Gaussian Blur, setting the Radius to 15 pixels. Lower the Layer Opacity to 60% and remove any unwanted areas with a Layer Mask.
Let’s add our last stock.
Make several extractions from the brighter sections of this Galaxy stock. I used the Rectangular Marquee Tool (M) to grab different sections of stars and stardust. Copy and Paste them onto New Layers positioned around the composition.
Set the first two (Earth and hair sections) to Hard Light and the second two (star sections) to Pin Light. Adjust the Opacity as desired and use Layer Masks to remove unwanted areas with a Soft Round Brush.
This next step will require a bunch of Adjustment Layers.
I know, you’re ready to finish, right? Let’s try to run through them as quickly as possible.
Add a New Adjustment Layer of Color Lookup.
Set the 3DLUT File to
Next, add a New Adjustment Layer of Levels.
Add the following values to the RGB, Red, and Blue Channels.
RGB: 27, 0.94, 240; Output: 20, 255
Red: 0, 1.11, 204; Output: 0, 255
Blue: 29, 1.38, 226; Output: 51, 224
Fill a New Layer with neon green #76ff39. Lower the Opacity to 10% and set the BlendMode to Divide.
Keep going! You’re doing so well!
Add a New Adjustment Layer of Color Balance. Adjust the values for the Shadows, Midtones, and Highlights to the following ones shown for a much bluer tone. Then set the Blend Mode to Hue.
Next, add a New Adjustment Layer of Gradient Map.
Select the Red, Blue, and Yellow preset, and lower the Opacity to 10%.
The last New Adjustment Layer we’ll use is Photo Filter.
Set the Filter to Violet and the Density to 52%.
Now that we have the colors all set, we just need to do some light maintenance on the composition itself.
Take this opportunity to clean up any harsh edges or blend them with more shadows using a Soft Round Brush. Use the Brush Tool (B) to paint these areas, and hold the Alt key to select the colors you need from the composition.
On a New Layer set to Overlay, use a combination of violet #c6a2d0 and white to paint highlights onto the hair and planets. Keep the bright spots in line with our current lighting setup.
Clean highlights are also an important part of this composition. On a New Layer, paint white highlights around the planets, body, and face. Make sure each planet gets a highlight on the upper left side.
Continue painting any areas you would like to sharpen for more appeal, and don’t forget to add more white dots for stars wherever you’d like!
You might notice a slight blur to the final piece. I achieved this with a quick Tilt-Shift Filter, but you can opt to leave it out instead.
that you’ve finished your work of art, hang it on the wall! Check
out how your self-portrait would look using this awesome Frame Mockup from Envato Elements.
Check out the final result below!
All Done! Great Job!
You can create amazing photo manipulations using your very own photos. Take your time and have fun conjuring up fantasy compositions from scratch!
I hope you enjoyed this tutorial. How’d you do? Share your comments and results below.
For more photo manipulation tutorials like this one, check out these links:
this tutorial, you will learn how to draw a candy monster cartoon
character in Adobe Illustrator.
There are plenty of techniques used
throughout the entire tutorial, from textures to small details, a new
Blend Art Brush, masking techniques, reverse spine blending options, and even a 3D effect. Not to mention the colorful candy and jelly
worms that are fun to draw.
By the end of the tutorial, you will have
the skills to draw other cartoon characters in future projects. Let’s
Launch Illustrator and
go to File
> New to
open a blank document. Type a name for your file, set up the
dimensions, and then select Pixels as the Units and RGB as the Color
Make sure that Align
New Objects to Pixel Grid is
go to Edit
> Preferences > General and
set the Keyboard
Increment to 1
while there, go to Units to
make sure they are set as in the following image. I usually work with
these settings, and they will help you throughout the drawing process.
to Create the Body of the Monster
the Ellipse Tool (L) and draw a 192 x 339 px ellipse on your artboard
(1). Switch to the Direct Selection Tool (A) and use it to select
only the right and left points; then move them outwards to make the
ellipse rounder (2). Now, select only the bottom point and drag the
handles to make them longer (3).
a few extra adjustments to get the shape from the image below and
fill it with light blue. This will be the “body shape”.
to Create the Eyes of the Monster
two shapes like the ones in the following image as the eyes and give them a 1
pt light blue Stroke. They don’t have to be perfectly rounded.
only the left eye and go to Effect > 3D > Extrude & Bevel.
Change the settings as indicated and hit OK. As a result, you will get
the outer contour of the eye.
the right eye and go to Effect
> 3D > Extrude & Bevel again. The settings are the same except for the rotation coordinates
and the light, which you have to move from the upper right side
(default) to the upper left side.
Zoom in on the eyes and draw the eyeballs inside the 3D contours, making sure
not to cover the shading and highlights created by the 3D effect (1).
Fill the eyeball shapes with the radial gradient shown (2), and you
can see the result in the image below (3).
the Ellipse Tool (L) to draw a small 18 x 19 px ellipse as the iris
for the right eye. Select light brown as the fill color; then go to Effect > Stylize > Inner Glow and apply the settings shown (1).
grab the Pencil Tool (N) and draw a random star-like path over the
iris (2). Use the Ink Spatter 1 Scatter Brush from the Brush
Libraries Menu > Artistic > Artistic_Ink and reduce the Stroke
Weight to 0.1 pt. Set the Blending Mode to Multiply (3).
the iris shape and Copy and Paste in Place (Shift-Control-V) in order
to make a copy of it in front of everything. Remove all existing
appearances. Now, select the stroked path along with the copy of the
iris and go to Object > Clipping Mask > Make (Control-7) (4).
a 7 x 7 px black circle in the center of the iris as the pupil (1).
add a sparkle, draw a small circle in the upper right side filled
with a basic white to black radial gradient (2), and then set the Blending Mode to Screen (3).
the iris, the stroked path, the pupil, and the sparkle, and make copies
of them for the left eye.
(Control-G) all the shapes that make up each eye to keep things
organized in the Layers panel.
the left eye contour, go to Effect > Stylize > Drop Shadow, and
apply this effect twice using the settings shown.
select the right eye contour and apply the two Drop Shadow effects.
The settings are the same as above, except for the X Offset, which is
negative this time.
to Create the Mouth of the Monster
the Pen Tool (P) and draw a big mouth shape for all that candy, and fill it with a dark burgundy red (1). While this shape stays
selected, go to Effect > Stylize > Drop Shadow and apply the
settings shown (2) to obtain the blue bottom lip. Apply the Drop
Shadow effect again, using the other settings shown (3) to obtain the
the mouth shape still selected, apply the third Drop Shadow effect to
obtain a thin highlight line above the upper lip (1).
the Drop Shadow effect for the last time to obtain the highlight line
under the bottom lip (2).
the mouth and Copy and Paste
in Front (Control-F)
to make a copy of it. Remove the four Drop Shadow effects and just
keep the dark red fill color (1). Draw a similar but smaller shape at
the top of the mouth and fill it with a lighter shade (2).
select both shapes and go to Object > Blend > Blend Options.
Choose 20 Specified Steps, hit OK, and then go back to Object >
Blend > Make (Alt-Control-B) (3).
take the Pen Tool (P) and draw four paths on the lips (1). Give them
a 1 pt white Stroke and use the Black Blend Art Brush 100×3 (info
below). Set the Blending Mode to Overlay for all four (2).
the Colorization of the brush is set to Tints, when you select white
as the stroke color, the brush becomes white as well, despite its
name. The same thing happens with any other color.
to Create the Tongue of the Monster
the Pen Tool (P) to draw a shape like the one in the following image as the
back piece of the tongue (1). Continue with the front piece and fill
it with red (2).
a path through the middle of the back piece and move it behind the
front piece of the tongue (1). Give it a 1 pt Stroke using the color
indicated and select Width Profile 2 in the Stroke panel.
the path still selected, go to Effect > Stylize > Outer Glow
and apply the settings shown. Reduce the Opacity to 75%, but only for
the Stroke attribute, and you can see the result below (2).
draw a path through the middle of the front piece of the tongue (1). Give
it a 1 pt Stroke using the color indicated and select Width
Profile 2 again. Set this Stroke attribute to 75% Opacity.
the path still selected, go to Effect > Stylize > Outer Glow and apply the settings shown (2).
to Create the Teeth of the Monster
the Pen Tool (P) and draw the shapes of the four top teeth filled
with beige (1). Next, draw a similar but smaller shape above each
tooth filled with cream (2) and finally, four smaller shapes filled
with white (3).
select the three shapes that make up the first tooth and go to Object
> Blend > Blend Options. Choose 10 Specified Steps and hit OK, and then go back to Object > Blend > Make (Alt-Control-B).
Repeat the same thing for the other three teeth (4).
the technique explained above and create the four bottom teeth.
(Control-G) the four top teeth and apply the Drop Shadow effect to
create a shadow. Do the same thing for the bottom teeth.
the two pieces of the tongue and apply the Drop Shadow effect using
the settings shown.
finally time for a mask. Select the mouth shape and then Copy and Paste in Place (Shift-Control-V) to make a copy of it in front of
everything. Remove all existing appearances (1).
select this copy of the mouth along with the top teeth, the bottom
teeth, and the tongue, and go to Object > Clipping Mask > Make
(Control-7). You can see the result in the image below (2).
to Add Texture on the Monster’s Body
the Pencil Tool (N) and draw a random path on the body of the monster, and then send it behind the eyes and the mouth (1). Give it a 1 pt white Stroke using the Ink Drop Scatter Brush from the Brush Libraries Menu
> Artistic > Artistic_Ink (2).
the Stroke attribute stays selected in the Appearance panel, go to Effect > Blur > Gaussian Blur and apply a Radius of 2.5 px. Set
the Blending Mode to Overlay and reduce the Opacity to 20% (3).
the path still selected, add a New Stroke in the Appearance panel
above the first. Use the Ink Drop Scatter Brush again, but open the Stroke Options window and switch the Scatter settings. This will make
the dark spots not overlap with the white spots from the previous
a 2.5 px Gaussian Blur again; then set the Blending Mode to Overlay
and reduce the Opacity to 50% (2).
your spots go over the edge of the body, simply use the Direct
Selection Tool (A) to modify the path or create a mask.
to Add Shading on the Monster’s Body
the Pen Tool (P) to draw a curved path at the top of the head. Give
it a 10 pt blue Stroke and choose Width Profile 6 from the Stroke
draw a curved path at the bottom of the body. Give it a 15 pt blue Stroke and use Width Profile 6 again (2). Apply a 12 px Gaussian
Blur for both of them (3).
the body shape and then Copy and Paste in Place (Shift-Control-V) to
make a copy of it in front of everything. Remove all existing
appearances. Now, select the two curved paths along with the copy of
the body and go to Object > Clipping Mask > Make (Control-7).
to Create the Arms of the Monster
the Pen Tool (P) to draw the shapes of the arms as shown in the following
image (1). Next, draw two smaller shapes on the inside filled with a
darker shade of blue (2).
the two shapes that make up one of the arms and Blend them using 20
Specified Steps. Do the same thing for the other arm (3).
two curved paths on the arms and apply the two strokes using the Ink
Drop Scatter Brush as you did earlier for the body. Position the
paths so the spots fall on the arms (1).
a copy in front for each arm shape and use them to mask the stroked
the Line Segment Tool (\), click on your artboard, and choose 100 px
as the Length and 0 degrees as the Angle. This will generate the
green horizontal line. Use the Line Segment Tool (\) again, and this
time choose 5 px in Length and 90 degrees as the Angle to generate
the small blue vertical line. While both lines stay selected, press Vertical Align Center and Horizontal Align Right in the Align panel
the two lines as guides and draw a sharp triangle (2). While this
triangle stays selected, go to Object > Path > Offset Path and
apply an Offset of -2 px to obtain a smaller one inside (3).
both triangles with black, but set the Opacity of the bigger one to 0%
(4). Blend them using 15 Specified Steps, and the brush is ready to be
the blend group obtained in the previous step into the Brushes panel
and choose New Art Brush. Type Tapered Blend Art Brush 100×5 as the
name and choose Tints as the Colorization Method. Hit OK, and you’ll
find the new brush right next to the Black Blend Art Brush 100×3 in
the Brushes panel.
to Create the Feet of the Monster
the shape of the right foot with the Pen Tool (P) and fill it with
blue (1). Continue with a smaller shape above, filled with a lighter
shade of blue (2), and with the smallest shape at the top filled with
a darker shade of blue (3).
these three shapes using 15 Specified Steps, and you can see the
result below (4).
the Pen Tool (P) to draw a path at the bottom of the foot, and give it
a 5 pt Stroke using black and Width Profile 6. Apply a 5 px
Gaussian Blur and set the Blending Mode to Overlay.
two short paths at the top of the foot and give them a 1 pt azure
blue Stroke using the Tapered Blend Art Brush 100×5 that you saved earlier (1).
a copy of the foot shape in front and set it to stroke-none and
fill-none. Use this copy to mask the last three stroked paths (2).
You can see the result below (3).
to Create the Claws of the Monster
three triangle-like shapes as the claws and fill them with dark
orange (1). Next, draw a similar but smaller shape on each claw, filled with a pale shade of orange (2).
the two shapes that make up one of the claws and Blend them using 10
Specified Steps. Repeat the same thing for the other two claws (3).
the top edge of the claws and draw three paths with the Pen Tool (P).
Give them a 2 pt Stroke and use Width Profile 6. Send these paths
behind the claws in the Layers panel.
the Direct Selection Tool (A) to select only the bigger claw shapes
from the blend groups and then Copy and Paste in Place
(Shift-Control-V) to make copies of them. Move the copies behind the
claws in the Layers panel. Keep the same fill color and just apply
the Drop Shadow effect to create the shadows (1).
Copy and Paste in Place (Shift-Control-V) the bigger foot shape, and set
the copy to stroke-none and fill-none. Use it to mask the three
copies of the claws with the shadow applied to them (2). As a result, the shadow that falls outside the foot area will not be visible (3).
the Pen Tool (P) to draw a path on each claw and give them a 0.5 pt white Stroke using the Tapered Blend Art Brush. Also apply a 1 px Gaussian
base (thicker part) of the brush should be at the top of the claws, and the tip of the brush should be at the bottom. If not, open the Stroke Options window and check the Flip Along option.
this point, the right foot is ready, and you can Group (Control-G) all
the shapes that compose it to keep things organized in the Layers panel.
the right foot stays selected, go to Object > Transform >
Reflect. Check Vertical and hit Copy to obtain the left foot. All you
have to do is to move it into place and make small adjustments if needed.
on the right arm of the monster and use the same technique to create
the claws (1-3).
only the bigger claw shapes from the blend groups, and then Copy and Paste in Place (Shift-Control-V) to make copies of them. Move these
copies behind the claws in the Layers panel, and choose brown as the
fill color. Use the Direct Selection Tool (A) to select only the top
anchor points of these shapes (without the tip) and move them inwards
a little with the help of the arrow keys on your keyboard (4). You
can see the result below (5).
right arm’s claws are ready now, and you can Group (Control-G) all the
shapes. Reflect this group to obtain the claws for the left arm.
to Create the Horns of the Monster
the technique explained earlier for the arm claws to create the horn
on the right side of the head (1-4).
add some shine, use the Pen Tool (P) to draw a path on the horn (5).
Give it a 1 pt white Stroke and use the Tapered Blend Art Brush. Also
apply a 2 px Gaussian Blur (6).
the previous step again, and create a smaller version of the horn next
to the first one (1). Now, take the Pen Tool (P) and draw a shape
like the one in the next image at the base of the horns (2).
add some details, draw a few short paths on the blue shape. First,
select a 2 pt blue Stroke and use the Tapered Blend Art Brush. Add a New Stroke above, select a 0.25 pt gray Stroke, and use the Tapered
Blend Art Brush again (3). You can see the result below (4).
this point, the right horns are ready, and you can Group (Control-G)
all the shapes. Reflect this group to obtain the horns on the left
side and move them into place.
to Add Extra Details on the Monster’s Body
the Pen Tool (P) and draw a few triangle-like shapes at the bottom of
the body filled with the linear gradient shown at a 90 degrees Angle
(1). Continue with the pieces of fur at the top of the head, and use
the same gradient but change the Angle to -90 degrees (2).
draw two fur pieces on the sides of the head and a few smaller ones
on the arms. Use the gradient shown to fill all of them. The darker
shade of the gradient should be at the tip of these fur shapes, so adjust the angle accordingly.
the Ellipse Tool (L) to draw a bunch of ellipses of different sizes
on the body. Fill all of them with blue. Add a New Fill above and use
the same color; then apply a 4 px Gaussian Blur.
the Pen Tool (P) or the Ellipse Tool (L) to draw a few tiny shapes
under the eyes as the freckles. They don’t have to be perfectly
the body, the arms, and the feet, and then Copy and Paste in
Place (Shift-Control-V) to make copies of them. Remove all existing
appearances (1) and then press Unite in the Pathfinder panel to merge
them into a single shape (2).
the body shape; then go to Effect > Stylize > Drop Shadow and
apply the settings shown (1).
the shape that you obtained in the previous step, set it to
stroke-none and fill-none, and move it right in front of the body in
the Layers panel. Now, select the body along with this shape and go
to Object > Clipping Mask > Make (Control-7) (2). As a result,
the shadow around the monster that falls on the white background will
not be visible (3).
to Create the Colorful Candy
the Ellipse Tool (L) and draw a 35 x 35 px circle filled with the
radial gradient shown (1). Switch to the Pen Tool (P) and draw four
shapes as shown in the image below. All four shapes have a white fill
color, but set the Opacity for the bigger ones to 0% (2).
the pair of shapes on the upper left side and Blend them using 15
Specified Steps. Set the resulting blend group to Blending Mode Soft
the other two shapes on the bottom right side; then set the Blending
Mode to Soft Light and reduce the Opacity to 75% (3).
orange candy is ready, and you can Group (Control-G) all the shapes.
Make a copy of the group; then select only the circle and replace the
orange gradient with the green radial gradient shown.
the same thing to obtain the pink candy, the chocolate candy, and the
time to arrange the candy inside the monster’s mouth. First, arrange
the orange candy in the desired place; then select only the orange
circle and apply the Drop Shadow effect.
the pink candy on the right side and apply the Drop Shadow effect
again to the pink circle. Continue to arrange the rest of the candy or as many as
you want. You can also scale them up or down, and don’t forget to add
you are done, select all the pieces of candy and move them behind the
teeth but in front of the tongue in the Layers panel under the
to Create the Jelly Worms
the Pen Tool (P) to draw a wavy path between the colorful candy and
one on the right side of the mouth. Give them a 10 pt Stroke using
the color of your choice.
a small 10 x 10 px circle on your artboard. Go to Object >
Transform > Move, type 170 px in the Horizontal field, and hit Copy to obtain the second circle. The fill colors are not important at this moment—just make sure they are different.
the two circles stay selected, go to Object > Blend > Blend
Options and choose 18 Specified Steps. Hit OK and then go back to Object > Blend > Make (Alt-Control-B).
make a copy of the blend group from the previous step because you
have worms to create. Now, select the blue path along with one of
the blend groups and go to Object > Blend > Replace Spine (1).
Use the other blend group for the green path and do the same thing.
You can see the result below (2).
Zoom in on the mouth and use the Direct Selection Tool (A) to select each
circle at the end of the blended worms and replace the fill colors
(1). You can choose other colors as well.
the Pen Tool (P) or the Pencil Tool (N) to draw slightly curved paths
on the yellow/green worm. Give them a 0.5 pt black Stroke and select
the Width Profile 1 in the Stroke panel. Set the Blending Mode to Overlay and reduce the Opacity to 75%; then Group (Control-G) all of
the same thing for the pink/blue worm.
add shine, draw a path on the yellow/green jelly worm following its
shape (1). Give it a 1 pt white Stroke and use the Tapered Blend Art
Brush (2). With this path still selected, duplicate the existing
Stroke attribute in the Appearance panel, but open the Stroke Options
window and check the Flip Along option (3). Set the Blending Mode to Overlay (4).
a similar path on the pink/blue jelly worm and apply the same
settings to make it glossy as well.
only the blended yellow/green worm (without the lines and the
highlight), and then Copy and Paste in Back (Control-B) to make a copy of
it and expand it (Object > Expand). Apply
the Drop Shadow effect to the resulting group using the settings shown (1). Repeat the same
thing for the other jelly worm.
time to mask the yellow/green jelly worm, and for that, you need a
copy of the mouth shape. Bring the copy in front of everything by
going to Object > Arrange > Bring to Front (Shift-Control-])
and set it to stroke-none and fill-none.
Now, select all the shapes
that make up the yellow/green worm, along with the copy of the mouth, and go to Object > Clipping Mask > Make (Control-7) (2). The
result is not quite what we want, so you need to distort the mask
shape a little to reveal the front end of the worm (3).
to Add the Final Elements
create a stick for the orange candy. Draw a rectangle-like shape, slightly rounded at the ends and filled with a very light gray (1). Continue
with a similar but smaller shape on the stick filled with white (2)
and finally, draw a small ellipse at the end filled with gray as the
add the shadow, draw another rectangle-like shape under the stick
filled with a linear white to black gradient. Set the Opacity to 0%
for the white slider to make it transparent, and after that, apply a 1.5 px Gaussian Blur (4).
can also add smaller versions of the chocolate and caramel candy on
the tongue and then apply the Drop Shadow effect to the circles.
last thing is the saliva, and it’s easy to make. Use the Pen Tool (P) to draw a shape between the top teeth, as shown in the next image. Select
light blue as the fill color; then set the Blending Mode to Screen
and reduce the Opacity to 30% (1).
a small, droplet-like shape at the bottom, filled with pale blue; then
set the Blending Mode to Screen and reduce the Opacity to 40% (2). Group (Control-G) these two shapes and apply the Drop Shadow effect
using the settings shown (3).
can add more saliva using the same technique, but draw different shapes to
make it more realistic.
big guy is done now.
is the final image of the candy monster. He is quite cute, right?
had a lot of fun creating this cartoon character, and I hope the
tutorial was fun for you as well. If you decide to recreate it,
please share an image because I would love to see it.
you have the knowledge to create other cute characters, so be creative
and keep drawing!
In the following steps, you will learn how to create a promotion vector badge in Adobe Illustrator.
For starters, you will learn how to set up a simple grid. Next, using basic tools and some aligning techniques, you will learn how to create a set of concentric circles. Moving on, you will learn how to create a stylized ribbon and how to easily bend it using some Warp effects. Finally, you will learn how to add some text on a path and a subtle texture for the entire design.
For more inspiration on how to adjust or improve your final badge, you can find plenty of resources at GraphicRiver.
1. How to Create a New Document and Set Up Grid
Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 850 in the width and height boxes, and then click that More Settings button. Select RGB for the Color Mode, set the Raster Effects to Screen (72 ppi), and then click Create Document.
Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). You will need a grid every 5 px, so simply go to Edit > Preferences > Guides & Grid, and enter 5 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid—it will make your work easier, and keep in mind that you can easily enable or disable it using the Control-„ keyboard shortcut.
You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Don’t forget to set the unit of measurement to pixels from Edit > Preferences > Units. All these options will significantly increase your work speed.
2. How to Create a Set of Concentric Circles
Pick the Ellipse Tool (L) and focus on your Toolbar. Remove the color from the stroke and then select the fill and set its color to R=73 G=35 B=84. Move to your artboard and create a 300 px grid—the grid and the Snap to Grid should make it easier.
Make sure that your shape stays selected and open the Align panel (Window > Align). Simply click the Horizontal Align Center and Vertical Align Center buttons to bring your selection to the center of the artboard.
Make sure that your shape is still selected and go to Effect > Distort & Transform > Zig Zag. Enter the attributes shown below and click OK.
Using the Ellipse Tool (L), create a 260 px circle. Fill this new shape with R=228 G=242 B=255 and center it.
Using the Ellipse Tool (L), create a 240 px circle. Fill this new shape with R=73 G=35 B=84 and center it.
Using the Ellipse Tool (L), create a 220 px circle. Fill this new shape with R=228 G=242 B=255 and center it.
Using the Ellipse Tool (L), create a 150 px circle. Fill this new shape with R=73 G=35 B=84 and center it.
Using the Ellipse Tool (L), create a 130 px circle. Fill this new shape with R=228 G=242 B=255 and center it.
Using the Ellipse Tool (L), create a 110 px circle. Fill this new shape with R=73 G=35 B=84 and center it.
3. How to Create the Ribbon
Using the Rectangle Tool (M), create a 310 x 70 px shape and fill it with R=228 G=242 B=255. Center this new shape, make sure that it stays selected, and focus on the Appearance panel (Window > Appearance).
Select the stroke and set its color to R=73 G=35 B=84, and then open that Stroke fly-out panel. Set the Weight to 10 px and don’t forget to check that Round Join button.
Using the Rectangle Tool (M), create an 80 x 70 px shape and fill it with R=198 G=212 B=255. Place this new shape as shown in the first image, make sure that it stays selected, and focus on the Appearance panel. Select the stroke and set its color to R=73 G=35 B=84, and then open that Stroke fly-out panel. Set the Weight to 10 px and don’t forget to check that Round Join button.
Make sure that this rectangle stays selected and pick the Add Anchor Point Tool (+). Use a simple click to add a new anchor point as shown in the second image.
Make sure that the rectangle made in the previous step is still selected and pick the Direct Selection Tool (A). First, select the top-right anchor point and drag it 30 px to the left, and then select the middle-left anchor point and drag it 30 px to the right. In the end, your shape should look like in the second image.
Pick the Pen Tool (P) and create a simple shape as shown in the following image. Fill it with R=73 G=35 B=84 and add a 10 px stroke of a similar color. Don’t forget to check the Round Join button for the stroke, and then lower the Opacity of your entire selection to 30%.
Using the Pen Tool (P), create a simple triangle as shown in the following image. Fill it with R=73 G=35 B=84 and add a 10 px stroke of a similar color. Don’t forget to check the Round Join button for this stroke.
Select the three shapes highlighted in the first image and Group them (Control-G). Make sure that your group is selected and go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image and then click OK.
Using the Pen Tool (P), create the two triangle shapes shown in the following images. Fill both shapes with a random yellow, for now.
Select the bottom yellow shape and focus on the Appearance panel. Replace the fill color with R=73 G=35 B=84 and add a 10 px stroke with a similar color. Remember to check the Round Join button for this stroke and then select the entire path (simply click that „Path” piece of text from the Appearance panel). First, lower the Opacity to 30% and then go to Effect > Warp > Arc Lower. Enter the attributes shown below and click OK.
Move to the top yellow shape and apply the same Appearance attributes, but replace the Arc Lower effect with the Arc Upper effect shown in the second image.
Select your 310 x 70 px rectangle and bring it to front using the Shift-Control-] keyboard shortcut.
Pick the Pen Tool (P) and create the tiny horizontal paths shown in the second image. Add a 10 px stroke for these new paths, set its color to R=73 G=35 B=84, and don’t forget to check that Round Join button.
4. How to Add Some Text
Pick the Type Tool (T) and open the Character panel (Window > Type > Character). Select the Insaniburger font, set the size to 30 px, and increase the tracking to 22.
Simply click on your artboard and add the „PROMOTION” piece of text. Place it as shown in the following image and set the color to R=73 G=35 B=84.
Select all the shapes highlighted in the first image, Group them (Control-G), and then go to Effect > Warp > Flag. Enter the attributes shown below and click OK.
Pick the Ellipse Tool (L) and create a 200 px circle. Fill this new shape with a random yellow and center it.
Make sure that this new shape stays selected, pick the Type on a Path Tool, and simply click on the edge of your selected shape. This will allow you to add text along your path.
Add the „BEST DEALS” piece of text, set the color to R=73 G=35 B=84 and focus on the Character panel. Select the Insaniburger font, and set the size to 22 px and the tracking to 0. Next, you need to adjust the position of your text. Switch to the Direct Selection Tool (A) and simply drag that middle bracket from the outside to the inside of your circle. This should move your text inside the circle. Use that same bracket to move your text along the path as shown in the following image.
Pick the Ellipse Tool (L) and create a 170 px circle. Fill this new shape with a random yellow and center it.
Make sure that your yellow circle stays selected, pick the Type on a Path Tool, and simply click on the edge of your selection.
Add the „SPECIAL OFFER” piece of text, set the color to R=73 G=35 B=84, and focus on the Character panel. Apply the attributes shown in the following image and use that bracket to move your text along the path as shown below.
5. How to Create the Background and Add a Subtle Texture
Pick the Rectangle Tool (M) and create an 860 px square. Fill this new shape with R=228 G=242 B=255, send it to back using the Shift-Control-[ keyboard shortcut, and don’t forget to center it.
As a kid, I used to spend my nights
watching The X-Files and wondering if there truly is something else in the universe, something that might change the way we think but most importantly
help us see our place within it.
Whether it’s little green men or grey ones,
our imagination has always run wild creating stories that might or might not be
true, so today we’re going to try and gather some evidence by creating our very
own alien abduction illustration. Of course, we’re going to do all of that
using our creative imagination and a few shapes and tools found in Adobe Illustrator.
That being said, go pour some magic bean
juice in that special agent mug, and let’s get started!
Assuming you already have Illustrator up
and running in the background, bring it up and let’s set up a New Document (File > New or Control-N)
for our project using the following settings:
of Artboards: 1
And from the Advanced tab:
Effects: Screen (72ppi)
Preview Mode: Default
2. How to Set Up a Custom Grid
Even though today’s project is not an icon-based one, we’ll still want to create the illustration using a pixel-perfect
workflow, so let’s set up a nice little grid so that we can have full control
over our shapes.
Go to the Edit > Preferences > Guides & Grid submenu, and adjust
the following settings:
Once we’ve set up our custom grid, all we
need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu (that’s if you’re using an
older version of Illustrator).
Now, if you’re new to
the whole “pixel-perfect workflow”, I strongly recommend you go through my How
to Create Pixel-Perfect Artwork tutorial, which will help you widen your
technical skills in no time.
3. How to Set Up the Layers
Once we’ve finished setting up our project
file, it would be a good idea to structure our document using a couple of
layers, since this way we can maintain a steady workflow by focusing on one
section of the illustration at a time.
That being said, bring up the Layers panel, and create a total of four
layers, which we will rename as follows:
2: main composition
layer 4: hud overlay
Quick tip: I’ve colored all of my layers using the same
green value, since it’s the easiest one to view when used to highlight your
selected shapes (whether they’re closed or open paths).
4. How to Create
As soon as we’ve
layered our document, we can start working on the project by creating the dark
background, so make sure you position yourself on the first layer, and let’s
jump straight into it.
Create a 920 x 680 px rectangle,
which we will color using #2C2D2D and then center align to the underlying Artboard
using the Align panel’s Horizontal and Vertical Align Center options.
Lock the current layer using the Layers panel, and then move on up to the next one (that would be the second one)
where we’ll gradually build our composition.
5. How to Create
the Cellar Entrance
background in place, we can start working on our surreal composition, and we
will do so by creating the cellar entrance where the person behind the camera
lens is documenting the close encounter.
Create a 280 x 536 px rectangle
(#656868), which we will center align to the underlying Artboard and then turn
into a subtle light curtain by applying a Linear gradient to it. Use the same #656868 hex value for both color stops, making
sure to set the left one’s Opacity
Add the cellar’s entrance using a 280
x 396 px rectangle (#868989) which we will position on top of the one that
we’ve just created, center aligning it to the underlying one’s top edge.
Adjust the smaller rectangle, by individually
selecting its bottom anchor points using the Direct Selection Tool (A), and then pushing them to the inside by 20 px using the Move tool (right click > Transform > Move > Horizontal > +/- 20 px depending on which side you start with).
Zoom in on the document, and then start working
on the entrance’s sill by creating a 240
x 16 px rectangle (#6A6D6D), which we will position below the previously
Add another shorter 248 x 4 px rectangle which we will color using #515454, and then
position as seen in the reference image.
Select the Pen
Tool (P), and using #2C2D2D as your Fill
color draw the little wood cracks using the reference image as your main guide.
Take your time, and once you’re done, select and group them all together using
the Control-G keyboard shortcut,
doing the same for all of the current section’s composing shapes.
Create the stairs using a 240 x 28 px rectangle for the top one, followed by a 256 x 28 px one for the center one and
an even larger 272 x 28 px one for
the bottom one. Color all three shapes using #515454, making sure to vertically
stack them 8 px from
Give each stair a subtle highlight using three 2 px tall rectangles, which we will
color using #6A6D6D and then center align to their top edges.
Add the hard shadows using three curved
segments, which we will color using #2C2D2D and then position onto the larger
rectangles’ bottom edges as seen in the reference image.
As we did with the sill, take a couple of moments and draw a few cracks on each stair, using #2C2D2D as your Fill color. Take your time, and once you’re done, select and
individually group (Control-G) each
stair with its corresponding details, doing the same for the entire set afterwards.
6. How to Create
As soon as we’ve
finished working on the stairs, we can focus on adding details to the
background framed by our cellar’s entrance, and we will do so by creating little stars.
Using a couple of 4 x 4 px circles
(#B1B5B5), gradually populate the night sky, making sure to select and group all
of them together afterwards using the Control-G
7. How to Create
With the stars in
place, we can start developing our composition by building some of the farm
utilities, the first one on our list being the windmill.
Create the main shape for the windmill using a 72 x 248 px rectangle with a 4
px thick Stroke (#2C2D2D) with a Round Join, which we will position
on the lower side of the entrance, as seen in the reference image.
Adjust the shape that we’ve just created, by adding a new anchor point to the center of its top
edge using the Add Anchor Point Tool (+) and then removing its corner ones using the Delete Anchor Point Tool (-).
Add the drop pipe assembly using a 248
px tall 4 px thick Stroke line (#2C2D2D), which we will
center align to the windmill’s body.
Add the horizontal structure beams using two 4 px thick Stroke lines
(#2C2D2D), which we will position onto the mill’s larger body as seen in the
Draw the diagonal beams using a couple of slightly thinner 2 px Stroke lines (#2C2D2D), which we
will position between the horizontal ones that we’ve just created. Take your
time, and once you’re done, select and group all of the body’s composing shapes
together using the Control-G
Start working on the windmill’s head by creating a 16 x 16 px circle with a 1 px thick Stroke (#2C2D2D), which we will center
align to the larger body’s tip.
Create a 24 x 24 px circle
with a 2 px thick Stroke (#2C2D2D), followed by a slightly larger 48 x 48 px one (#2C2D2D), both of which we will center align to the previously created shape.
Add the vertical and horizontal detail lines using two 2 px thick Strokes (#2C2D2D), which we will center align to the head’s smaller
Create the vertical pair of blades using two 8 x 28 px rectangles (#2C2D2D), which we will adjust by
individually selecting and pushing their inner-facing anchor points to the
inside by 2 px using
the Move tool (right click > Transform > Move > Horizontal > +/- 2 px depending
on which side you start with). Once you’re done, group (Control-G) and position the resulting shapes on the head’s
Add the remaining blades using three copies (Control-C > Control-F) of the ones that we’ve just grouped,
which we will adjust using the Rotate tool
(right click > Transform > Rotate
> 90º for the horizontal ones and 45º
for the diagonal ones). Once you’re done, select and group (Control-G) all of the head’s composing
shapes, doing the same for the entire windmill afterwards.
8. How to Create
the Phone Pole
As soon as you’ve
finished building the windmill, we can move a few pixels to the right and start
working on the phone pole.
Create the pole’s main body using a 4 x 108 px rectangle, which we will
color using #2C2D2D and then position onto the right side of the cellar’s sill
as seen in the reference image.
Using a couple of #2C2D2D colored rectangles, gradually add the remaining
sections to the pole, making sure to select and group them all together
afterwards using the Control-G
Add the phone line using a 48 x
12 px ellipse with a 2 px thick Stroke (#2C2D2D), which we will adjust
by removing its top half by selecting its top anchor point using the Direct Selection Tool (A) and then
removing it by pressing Delete. Once
you’re done, position the resulting shape onto the pole’s horizontal section,
making sure to select and group (Control-G)
all of its composing shapes before moving on to the next section.
9. How to Create
the Flying Saucer
With the phone
pole in place, we can finally start working on the scarier section of our
composition, where we will get to create the imposing flying saucer.
We’re going to start by quickly drawing the floating cow that’s being
abducted using #2C2D2D as our Fill color,
positioning the resulting shape as seen in the reference image.
Create the main shape for the saucer’s upper section using an 80 x 40 px ellipse, which we will color
using #515454 and then position 42 px from the upper edge of the cellar’s entrance.
Add the hard shadow using a 200 x 64 px ellipse (#2C2D2D), which we will position 8 px from the upper edge of the
shape that we’ve just created. Mask the larger shape using a copy (Control-C) of the one from underneath
(highlighted with red) which we will paste in front (Control-F) and then right
click > Make Clipping Mask, making sure to select and group (Control-G) the two together afterwards.
Start working on the saucer’s lower body by creating a 200 x
64 px rectangle, which we will color using #6A6D6D and then position at a
distance of 12 px from the top edge
of the previous section.
Add the bottom section using a darker 200 x 56 px ellipse (#2C2D2D), which we will center align to the lower
edge of the shape that we’ve just created.
Create the circular insertion using a 12 x 8 px ellipse (#2C2D2D), which we will position as seen in the
reference image. Once you have the shape in place, select and group (Control-G) all of the lower body’s
composing shapes before moving on to the next step.
Create the main shape for the tractor beam using an 80 x 12 px ellipse, which we will color using #6A6D6D and then
position as seen in the reference image.
Add an 80 x 8 px rectangle (#6A6D6D) to
the lower half of the ellipse that we’ve just created, making sure to adjust
the new shape by individually selecting and pushing its bottom anchor points to
the inside by 8 px using
the Move tool (right click > Transform > Move > Horizontal > +/- 8 px depending
on which side you start with).
Create the tractor beam’s lower section using a 64 x 12 px ellipse (#515454), on top of which we will add a smaller 48 x 6 px one (#2C2D2D), positioning
the two on the bottom edge of the shape that we’ve just created. Once you
have the ellipses in place, select and group (Control-G) all of the current section’s composing shapes, doing the
same for the entire saucer afterwards.
Create the actual beam pulling the cow from the ground using a 32 x 296 px rectangle (#B1B5B5), which
we will position onto the lower half of the darker ellipse and then adjust by
selecting and pushing its bottom-left anchor point to the outside by 36 px (right click > Transform > Move > Horizontal > -36 px).
Create the upper section of the beam using a 64 x 2 px ellipse (#B1B5B5), which we will adjust by removing its
right half, positioning the resulting shape onto the taller shape. Then, select
the two and combine them into a single larger shape using Pathfinder’s Make Compound
Turn the beam into a gradient using #B1B5B5 for both of its color stops, making sure to set the left one’s Opacity to 0%. Once you’re done, select and group both the flying saucer and
the beam using the Control-G
Add the smaller saucers using two 48 x 2 px rectangles (#B1B5B5) with a 1 px right corner Radius, which we will turn into gradients following the same
process used for the beam, making sure to leave the Angle set to 0º.
Position the resulting shapes as seen in the reference image, making sure to
group (Control-G) them together
before moving on to the next step.
10. How to Create the Fence
As you can see, our composition is gradually taking shape, so let’s continue working on it by creating the two fence
Create the left section of the fence using a
couple of #2C2D2D coloredrectangles,
which we will position and adjust as seen in the reference image. Take your
time, and once you’re done, select and group (Control-G) all of the shapes together before moving on to the next
Create the right section using a copy (Control-C > Control-F) of the one that we’ve just finished
working on, which we will vertically reflect (right click > Transform > Reflect > Vertical) and then
position on the opposite side of the cellar’s entrance.
Once you’re done working on
the fence, we can select and group (Control-G)
all of the composition’s shapes framed by the cellar’s entrance, masking them
afterwards using a copy (Control-C > Control-F)
of the underlying shape by right
clicking > Make Clipping Mask.
11. How to Create
Since at this
point our composition is pretty much done, we can add the central piece of our
illustration, the little grey man.
Create the alien’s main body using a 28 x 12 px rectangle (#2C2D2D), which we will adjust by setting the Radius of its top corners to 8 px, positioning the resulting shape
in the center of the entrance’s sill.
Add the neck section using two 8 x 16 px ellipses (highlighted with
red), which we will horizontally distribute 4 px from one another, adjusting them by selecting and removing
their top and outer anchor points. Unite the resulting paths into a single
larger shape by pressing Control-J
twice, setting its color to #2C2D2D.
Create the head using a 40 x 40 px circle (#2C2D2D), which we will adjust by selecting and
pushing its bottom anchor point to the outside by 8 px using the Move tool (right click > Transform > Move > Vertical > 8 px).
Give the resulting shape a subtle highlight, which we will color using #515454.
Separate the arms from his body using two 2 x 2 px squares (#868989) with a 1 px top corner Radius,
which we will position at a distance of 4
px from the torso’s sides. Once you’re done, select and group (Control-G) all of its composing shapes
together, before moving on to the next section.
Add the shadows cast by the little grey man’s head onto the stairs
using a 56 x 158 px ellipse (#2C2D2D)
with a 64% Opacity as your base
shape, gradually adding 8 px to each new copy (Control-C > Control-F) and masking them using a copy of the corresponding
stair’s fill shape. Once you’re done, select and group (Control-G) all of the current layer’s
composing shapes before moving on to the next one.
12. How to Create
As soon as we’ve
finished working on our composition, we can start adding some visual effects to
it. So, assuming you’ve positioned yourself on the next layer (that would be
the third one), let’s do just that by applying some subtle textures.
Make the illustration look as if it was shot on film, by adding a
couple of 920 x 2 px rectangles (#FFFFFF),
which we will vertically stack 2 px from
one another. Once you’re done, group (Control-G)
and then center align the shapes to the underlying Artboard, making sure to
lower their Opacity to 6%.
Give the illustration some noise by creating a 920 x 680 px rectangle (#2C2D2D), which
we will turn into a texture by going over to Effect > Photoshop Effects > Texture > Grain, where we
will set the Intensity to 40, the Contrast to 50, and the Grain Type to Stippled.
Set the resulting texture’s Opacity to 12%, changing
its Blending Mode from Normal to Lighten.
13. How to Create the HUD
Once we’ve finished adding the textures, all we need to do in order to
finish our illustration is create the little camera HUD. That being said, move
on up to the fourth and last layer, and let’s wrap things up!
Start by creating the framing guides using four 76 x 52 px rectangles with a 4 px thick Stroke (#868989), which we will position at a distance of 28 px from the Artboard’s corners and
then adjust by individually selecting and removing their inner-facing anchor
Zoom in on the Artboard’s bottom-left corner, and create the battery
level indicator using a 30 x 16 px rectangle
with a 4 px thick Stroke (#D8D8D8) for its main body. Add
the levels using three 4 x 8 px rectangles
(#D8D8D8) horizontally spaced 2 px from one another, followed by the nose using a 6 x 8 px rectangle (#D8D8D8). Once you’re done, select and group (Control-G) all its composing shapes
together, positioning them as seen in the reference image.
Add the recording state using a 16
x 16 px circle (#F26A46), which we will position at a distance of 12 px from the top-right framing guide. Add the “REC” text (#F26A46) in front of it using a font of your choice.
Finish off the HUD, and with it the project itself, by adding the elapsed
time indicator to the bottom framing guide, making sure to select and group (Control-G) all of its composing shapes
together before hitting that save button.
There you have it, fellow conspiracy theory lovers, an in-depth step-by-step tutorial on how to
create an alien abduction illustration.
I hope you’ve
managed to keep up with each and every step, and most importantly learned
something new and useful along the way.
That being said, I’m looking forward to seeing your final result, and if
you have any questions, feel free to post them in the comments section and I’ll
get back to you as soon as I can!
Designed for optimal legibility, the Kiona font features crisp lines and clean edges. Take advantage of its four different font weights, developed after very different personalities. Are you feeling strong or edgy? Try out this font!
Show off your feisty side with the Selfish script font. Introducing a brand new handwritten font with incredible charm, the Selfish font is clean and fluid. It’s perfect for branding, home ware, and more—you’ll love this stylish font!
Design a luxury brand with the Sustans Typeface. Featuring stylish, handwritten letters, this typeface is sophisticated and multipurpose. Create compelling designs that are sure to arouse interest in your work! Give it a try!
You are unique. So find a font that matches your individual style. Ornacle is a font for innovators and risk takers. Enjoy its futuristic style designed with clever geometric elements to help you stand out. Shine with this creative typeface!
Hey darlings! Add a little sweetness to your work with this joyful typeface. Handwritten with brilliant brush details, this font also includes darling swashes and ligatures to match! Download it today to get access to unique OpenType stylistic alternates.
Fiesta Color is a gorgeous decorative typeface created with Fontself Maker. It features a trendy, geometric style with wonderful abstract elements exploding with color. Use it on postcards, invitations, or fashionable tote bags.
You can achieve the same beautiful swoops of traditional calligraphic handwriting with modern typefaces. And the stunning Flitte script is a perfect example! Use it for wedding invitations, t-shirts, and so much more!
Celebrate your favorite memories with the festive Tehika font. A hand-drawn script font with well-spaced letters, this font is simply magical. Attach it to the company’s Christmas card or apply a beautiful signature to any bare stationery. Try it out!
that authentic handcrafted feel with the lovely Contaur typeface.
Designed for stationery, logos, and so much more, this font is a mixture
of tall and short elegant letters. It’s the perfect companion to any
Quirky and futuristic, the Auro font is a sleek, decorative typeface. Use it for headers and posters as a unique way to highlight your brand. Included in this download are a complete set of letters, numbers, and punctuation for you to enjoy.
Step into the future with the Teratur typeface. A modern font family with clean, minimal details, this typeface is inspired by classic sci-fi font types. Just toggle the caps lock to enjoy alternate letters. You’ll love this font!
Need something simple and multipurpose? Then try the Mellifret semi-bold script font. A great addition to any book cover or logo, this font is simple yet sporty. Included along with this three font pack deal are amazing swashes to help decorate your designs.
Utilizing the newest OpenType technology, the Heady Rough typeface is wild and energetic. Experiment with this versatile hand brushed style for impeccable designs that are hard to miss. Included are three fonts compatible with Photoshop CC 2017.1.1 or later.
A little grunge never hurt anyone! So begin your next adventure with this rustic, hand-painted brush font. By utilizing high-resolution brush stroke images, this font achieves hyper-realistic details with an authentic grunge finish. Download it now!
The Sacred Bridge Family is old-fashioned and dignified. Create that instant elegant feel with beautiful decorative letters designed after traditional letterpress styles. So what will you get? An awesome collection of 10 retro fonts with alternate glyphs, and multilingual support. Try it out!
Zembood features all the characteristics of an amazing vintage font. Add it to your modern apparel line for an edgy look in only a matter of seconds. With bold letters and fine grunge details, this font features a versatile style you’ll definitely want.
a smile to someone’s face with this set of pretty Bambi fonts. Great
for inspirational quotes, posters, and more, this calm brush font is
smooth and tranquil. Enjoy the bouncy baseline and curvy letters today!
Need a steampunk font for epic retro designs? Then try out the Starship typeface! Brilliantly charismatic, this font features a strong serif typeface with bold vintage letters. Download eight font files complete with regular, grunge, and inline styles.
This list features exciting
resources for the avid designer
familiar with type design. For
additional help with your font needs, enlist the skills of a talented
professional by choosing one of the amazing designers from Envato Studio.
with loads of fonts available at your fingertips, chances are we’ve
missed a few to add to your personal collection. Be sure to browse Envato Market and Envato Elements for more resources, and let us know your favorites in the comments below!
Agregator najlepszych postów o designie, webdesignie, cssie i Internecie