Archiwum kategorii: Web Tools

Trend Watch: Floral, Tropical, and Botanical Design

Post pobrano z: Trend Watch: Floral, Tropical, and Botanical Design

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!

Prosto Brochure
Prosto Tropical Brochure

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.

20 Amazing Botanical-Themed Design Assets

Can’t get enough sunshine? Download these premium resources from Envato Market and Envato Elements to aid in your nature-inspired designs.

Dive into this high-quality collection of incredible assets, from botanical backgrounds to print templates and more!

Tropical Background

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!

Tropical Background

The Floral Alphabet

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.

The Floral Alphabet

Tropical Summer Flyer

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.

Tropical Summer Flyer

Abstract Floral Seamless Pattern

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.

Abstract Floral Seamless Pattern

Classy Tropical Invitation

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!

Classy Tropical Invitation

Tropical Palm Logo Template

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.

Tropical Palm Logo Template

Watercolor & Elements Toolkit

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.

Watercolor  Elements Toolkit

Botanical Magazine Template

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.

Botanical Magazine Template

Wild Flower Business Card Template

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.

Wild Flower Business Card Template

Vintage Floral Wedding Invitation

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!

Vintage Floral Wedding Invitation

Botanical Resume & Letterhead Template

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!

Botanical Resume  Letterhead Template

Sepia Flowers Pack

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.

Sepia Flowers Pack

Tropical Foliage Pattern

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!

Tropical Foliage Pattern

Floral Faces – Photoshop Action

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!

Floral Faces - Photoshop Action

Summer Unplugged Flyer

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!

Summer Unplugged Flyer

Floral Breeze Photoshop Action

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.

Floral Breeze Photoshop Action

75 Photoshop Brushes Watercolor Collection

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.

75 Photoshop Brushes Watercolor Collection

Rose Flowers Gold Text Effect

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!

Rose Flowers Gold Text Effect

Tropical Island Illustration

Still
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.

Tropical Island Illustration

Spring Flyer Template

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!

Spring Flyer

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.

This has been a collection of tutorials and premium resources perfect for the avid designer. For more trendy botanical design assets, check out Envato Market and Envato Elements. Happy Designing!

How to Create an Easter Egg Flyer in Adobe InDesign

Post pobrano z: How to Create an Easter Egg Flyer in Adobe InDesign

Final product image
What You’ll Be Creating

Celebrate the Easter weekend with this cheerful flyer design. Inspired by mid-century style, this would make a lovely promotional flyer for an Easter egg hunt or other spring-themed event.

We’ll put together the flyer layout in Adobe InDesign, and dip into Illustrator to create our egg graphics. This is a simple design that would be a great introduction to print design for beginners.

If you’re looking for an instant flyer fix, these easy-to-edit flyer templates on GraphicRiver and Envato Elements might fit the bill. Make sure to take a look!

Let’s get started!

What You’ll Need to Create Your Flyer

As well as access to InDesign and Illustrator, you’ll also need to download the following image and font files:

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

Step 1

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.

new document

Step 2

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. 

layer options

Then lock all layers except Background at the bottom. 

layers panel

Step 3

Expand the Swatches panel (Window > Color > Swatches), and select New Color Swatch from the panel’s drop-down menu. 

new color swatch

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.

sky blue swatch

Step 4

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
brown black swatch

Step 5

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.

background layer

2. How to Create Colorful Easter Eggs for Your Flyer

Step 1

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. 

arc tool

Step 2

Right-Click > Copy the curved line and Edit > Paste it. Right-Click on the copy and Transform > Reflect.

reflect

In the Reflect window, check Vertical to flip the curve and click OK to exit.

reflect

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.

join

Step 3

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.

egg shape

From the Swatches panel, change the Fill Color of the egg to Sky Blue.

sky blue egg

Step 4

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.

stroke dashed

Step 5

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

mink swatch

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. 

yolk yellow swatch

Step 6

Select all four eggs, and Right-Click > Copy, and Paste.

copied eggs

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. 

second row

Repeat, creating a third row, set in Blush, Chocolate, Yolk Yellow, and Tomato.

third row

Paste in a final row, setting the colors to Pea Green, Burnt Red, Sage, and Green.

flyer with eggs

3. How to Format Retro-Inspired Typography on Your Flyer

Step 1

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.

compass rose

From the Swatches panel, set the Font Color to Pink White. 

pink white text

Step 2

Select the text frame and Right-Click > Copy, and Paste

copy

Edit the text to read ‘a’, and position it over the top of the second egg along. 

pasted frame

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. 

text frame

Step 3

Select all three text frames and Copy and Paste

copy

Move over the second row of eggs, adjusting the letters to read ‘t’, ‘e’, and ‘r’.

text frames

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’.

text frames

Step 4

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. 

leading

Click on the Superscript button in the Controls panel to make the ‘st’ or ‘nd’ of a date smaller, as shown below. 

superscript

Step 5

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. 

location text

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. 

entry fee

4. How to Add Collage Effects and Vintage Texture to Your Flyer

Step 1

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…

pen tool

… taking it around the whole shape and meeting at the beginning. 

shadows layer

Step 2

Set the Stroke Color of the shadow to [None] and the Fill to Pink White. 

pen tool

Repeat the process for the next egg, looping a rough shadow around the shape and setting the Fill to Pink White.

pink white

Do the same for the third egg along, too, and the fourth as well.

pen tool

Step 3

Copy and Paste the shadows, moving them behind each egg. Vary the scale and position of them slightly to add variation. 

shadows
shadows

Step 4

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. 

texture

Step 5

Click on the texture image frame and head up to Object > Effects > Transparency. Set the Mode to Screen and click OK

screen

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

screen

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

Step 1

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. 

press quality

Step 2

Click on Marks and Bleeds in the window’s left-hand menu.

Check All Printer’s Marks and Use Document Bleed Settings.

export pdf

Then click Export to create your PDF. 

pdf exported

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. 

If you’re looking for more help with flyers, these easy-to-edit flyer templates on GraphicRiver and Envato Elements will suit a wide range of occasions and look fantastic too!

easter flyer

Creating Graphic Design and Illustration for Color Blind People

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

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

1. What Is Color? A Brief Definition

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

According to
Google, the noun color is defined as:

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

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

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

light dispersion example

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

2. How Do Our Eyes „See” Color?

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

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

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

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

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

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

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

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

3. What Is Color Blindness?

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

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

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

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

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

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

4. What Are the
Different Types of Color Blindness?

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

4.1. Red-Green Color Blindness

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

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

4.2. Blue-Yellow Color Blindness

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

Depending on the case, we can have:

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

4.3. Complete Color Blindness

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

example of monochromacy

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

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

ishihara plate example

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

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

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

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

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

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

6.1 Online Color Blindness Simulators

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

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

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

example of toptal color blind filter

6.2. Local Color Blindness Simulators

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

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

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

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

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

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

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

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

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

8.1. What Colors Work Best?

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

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

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

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

example of color combinations to avoid

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

8.2. How Can You Fix Bad Color Combinations?

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

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

Use a Different Hue

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

example of bad color combination within an illustration

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

example of increasing the saturation with no result

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

adjusting an illustration using a different hue value

Aim for High Contrast

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

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

adjusting a bad color combination using high contrast

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

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

Separate Your Shapes Using Outlines

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

adjusting bad color combinations using outlines

Add or Remove Colors

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

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

adjusting bad color combinations by adding colors

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

Adhere to a Monochromatic Color Scheme

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

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

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

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

adjusting bad color combinations using monochromatic schemes

Go Grayscale

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

adjusting a bad color combination using a grayscale scheme

Add Texture

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

adjusting a bad color combination using texture

Conclusion

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

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

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

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

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

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

Final product image
What You’ll Be Creating

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

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

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

1. How to Create the Monstera Leaf

Step 1

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

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

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

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

how to create the main shape of the monstera leaf

Step 2

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

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

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

continue creating the main shape of the monstera leaf

Step 3

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

how to create the side vein

Step 4

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

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

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

how to create other veins

Step 5

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

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

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

how to create other monstera leaves

2. How to Create the Pattern

Step 1

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

forming the pattern base

Step 2

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

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

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

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

how to create the pattern

Step 3

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

how to create the background

Step 4

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

placing the pattern on the background

Conclusion

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

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

final image

Art for All: Celebrate Diversity in Design—Volume 5

Post pobrano z: Art for All: Celebrate Diversity in Design—Volume 5

Welcome back to our Diversity in Design series on Envato Tuts+. Discover four talented artists with inspiring styles you’ll love.

4 Artists You Should Know: Diversity in Design

Celebrate
the work of these extraordinary artists. Each with their own unique
background, they draw inspiration from their culture and surroundings to
create phenomenal designs.

Antonio Reinhard

The hidden stories of Indonesia come alive in the beautiful illustrations of artist Antonio Reinhard’s work. Check out his alluring style
below.

See more in his portfolio.

Nesia in Pambelang

I’m a freelance illustrator from Indonesia, mostly illustrating for children’s books or culture-themed projects.

Nesia in Pambelang by Antonio Reinhard
Nesia in Pambelang

Limas Palembang: The Traditional House of The Palembang

My
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.

Limas Palembang The Traditional House of The Palembang by Antonio Reinhard
Limas Palembang: The Traditional House of The Palembang

Nesia in Pambelang

Nesia in Pambelang by Antonio Reinhard
Nesia in Pambelang

Colonial Times

For these
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.

Colonial Times by Antonio Reinhard
Colonial Times

Janice Sung

Toronto-based artist Janice Sung has a lovely way of capturing faces that you simply won’t forget. Check out her extraordinary work below.

See more in her portfolio.

Tropical Bitties Series

I am an illustrator based in Toronto. Most of my work is done digitally but I also play around with watercolor as well.

Tropical Bitties Series by Janice Sung
Tropical Bitties Series

China Girl

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
life.

China Girl by Janice Sung
China Girl

Tropical Bitties Series

Tropical Bitties Series by Janice Sung
Tropical Bitties Series

Thank You

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.

Thank You by Janice Sung
Thank You

Mario McMeans

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.

See more in his portfolio.

iHeart Vector

My name is Mario McMeans, otherwise known as ‚Supahmariostyle.’ I’m a
Graphic Designer, horror junkie, and all around connoisseur of
paternal witticisms.

iHeart Vector by Mario McMeans
iHeart Vector

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.

Hueston Branding and Design by Mario McMeans
Hueston Branding and Design

Dre Dynasty

Dre Dynasty by Mario Mcmeans
Dre Dynasty

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.

Iron Horse Industries by Mario McMeans
Iron Horse Industries

Kaylan M

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.

See more in her portfolio.

Stay – Cover Art

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
editing.

Stay - Cover Art by Kaylan Michael
Stay – Cover Art

Infinity

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.

Infinity by Kaylan Michael
Infinity

Patterns on Mug

Patterns on Mug by Kaylan Michael
Patterns on Mug

The Dreamer

Being originally from Africa, I look up to African art and afro
futuristic art styles. I love patterns, colors and designs that represent
my roots.

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.

The Dreamer by Kaylan Michael
The Dreamer

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!

I’d
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:

How to Create a Galaxy-Inspired Self-Portrait Photo Manipulation in Adobe Photoshop

Post pobrano z: How to Create a Galaxy-Inspired Self-Portrait Photo Manipulation in Adobe Photoshop

Final product image
What You’ll Be Creating

You can turn your selfies into cool digital art! And working with your own portraits is a fun way to learn more about Adobe Photoshop.

Today, you’ll learn how to create this galaxy manipulation using one of my own photos and a few free stocks from Pixabay.

Get inspired! Find more incredible stocks and assets for your manipulations on Envato Market.

Tutorial Assets

The following assets were used in the production of this tutorial.

1. How to Take Photos for Manipulations

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.

Inspiration for galaxy manipulation
This painting is from one of my tutorials! Check it out here: How to fix color errors in Photoshop.

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!

Samsung NX3000

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!

Test shots for manipulation
We’ll be using photo #2 for this manipulation

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.

Galaxy reference

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.

Open My Picture or yours in Photoshop.

Next, go to Filter > Liquify.

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.

Use Liquify for hair volume

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!

Gif before and after
Here’s the before and after.

Now on to the manipulation!

3. How to Add the Other Stocks

Step 1

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.

Add the background and photo

Step 2

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).

Remove the background

Step 3

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.

Continue masking the photo

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.

Step 4

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.

Add the planets

4. How to Create the Galaxy Look

Step 1

Now for some stars!

Mask away the milky way
  1. Copy and Paste the Milky Way stock onto a New Layer above the black background.
  2. Add a Layer Mask, and then use a Soft Round Brush to mask away the edges with black.

Step 2

Let’s add more depth to the space background.

Shade the milky way
  1. 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.
  2. Set the Layer Blend Mode to Multiply, and then lower the Opacity to 70%.

Here’s the result so far.

Result after shading

Step 3

Clip another New Layer to the same Milky Way stock.

Add some subtle lighting to the scene.

Paint some light
  1. Use a Soft Round Brush (0% Hardness, 10-30% Opacity) to paint light blue #a8b7e3 onto the left side of the canvas.
  2. Set the Layer Blend Mode to Hard Light and lower the Opacity to 30%.

Step 4

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.

Add some light to the face and body

Step 5

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
Add a levels adjustment

Here is the result, along with the layer setup.

Result after levels

Step 6

Apply more contrast and warmth to the photo.

Above the previous levels layer, Clip a New Adjustment Layer of Curves to the stock.

Adjust the curves for the RGB, Red, Green, and Blue Channels like the ones below.

Add a curves adjustment

Step 7

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.

Add more stars
  1. Position the stars so that they cover me completely.
  2. 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.

Paint shadow
  1. 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.
  2. Then set the Layer Blend Mode to Subtract and lower the Opacity to 50%. Refine the shadow even more with a quick Layer Mask.

Step 8

We still need to adjust the shading and coloring of the planets.

Let’s begin with planet Earth.

Paint shadow on earth
  1. 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. 
  2. Set this layer to Color Burn. 
  3. Follow up with another Clipped New Layer above it. This time, use a deep red color #120500 to paint more shadow.

Step 9

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.

Paint shadow on mars

Step 10

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.

Layer setup

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.

Add a color lookup adjustment

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
Add a levels adjustment

Step 11

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.

Paint shadow on the moon

5. How to Finish the Manipulation

Almost there!

Here is how the manipulation looks so far:

Result 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.

Step 1

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.

Paint light with overlay

Step 2

Orbital rings aren’t actually real, but they’ll add another cool element to this manipulation.

Create two orbital rings
  1. Use the Ellipse Tool (U) to create two 2 pixel white orbital rings. Rasterize the shape layers and Merge them together.
  2. 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.

Step 3

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.

Add more stars to the composition

Step 4

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

  • FuturisticBleak.3DL
Add a color lookup layer

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
Add a levels adjustment layer

Step 5

Fill a New Layer with neon green #76ff39. Lower the Opacity to 10% and set the Blend Mode to Divide.

Add a neon green fill

Step 6

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.

Add a color balance adjustment

Next, add a New Adjustment Layer of Gradient Map.

Select the Red, Blue, and Yellow preset, and lower the Opacity to 10%.

Add a gradient map adjustment

The last New Adjustment Layer we’ll use is Photo Filter.

Set the Filter to Violet and the Density to 52%.

Add a photo filter

Step 7

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.

Add highlights to the scene with overlay

Step 8

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!

Paint white highlights

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.

Now
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.

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:

Galaxy Photo Manipulation Photoshop Tutorial by Melody Nieves

How to Create a Candy Monster Character in Adobe Illustrator

Post pobrano z: How to Create a Candy Monster Character in Adobe Illustrator

Final product image
What You’ll Be Creating

In
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
start!

If
you are hungry for more cartoon characters or cartoon styles in
general, make sure to go over to GraphicRiver and you’ll surely find
what you are looking for there. 

1. How
to Open a New Document 

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
Mode
.
Make sure that
Align
New Objects to Pixel Grid
is
not checked.

Next,
go to
Edit
> Preferences > General
and
set the
Keyboard
Increment
to
1
px
and
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.

how to open a new illustrator document

2. How
to Create the Body of the Monster

Step
1

Take
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).

how to draw the body of the monster

Step
2

Make
a few extra adjustments to get the shape from the image below and
fill it with light blue. This will be the “body shape”.

how to color the body of the monster

3. How
to Create the Eyes of the Monster

Step
1

Draw
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.

Select
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.

how to create the left eye contour of the monster

Step
2

Select
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.

how to create the right eye contour of the monster

Step
3

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).

how to draw the eyeballs of the monster

Step
4

Use
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).

Next,
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).

Select
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).

how to create the iris of the monster

Step
5

Draw
a 7 x 7 px black circle in the center of the iris as the pupil (1).

To
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).

how to draw the pupil of the monster

Step
6

Select
the iris, the stroked path, the pupil, and the sparkle, and make copies
of them for the left eye.

Group
(Control-G)
all the shapes that make up each eye to keep things
organized in the Layers panel.

how to create the left iris and pupil of the monster

Step
7

Select
the left eye contour, go to Effect > Stylize > Drop Shadow, and
apply this effect twice using the settings shown.

how to add shadow around the monsters left eye

Step
8

Now,
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.

how to add shadow around the monsters right eye

4. How
to Create the Mouth of the Monster

Step
1

Take
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
upper lip.

how to create the mouth and lips of the monster

Step
2

With
the mouth shape still selected, apply the third Drop Shadow effect to
obtain a thin highlight line above the upper lip (1).

Apply
the Drop Shadow effect for the last time to obtain the highlight line
under the bottom lip (2).

how to add highlight around the monsters lips

Step
3

Select
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).

Now,
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).

how to create depth in the mouth of the monster

Step
4

Next,
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).

I
have an entire tutorial dedicated to
Blend
Art Brushes
and
how useful they are. I use them in my drawings all the time. You can
find out how to create and save the
Black
Blend Art Brush 100×3
that
we are using today in
How
to Create a Set of Multi-Use Blend Brushes in Adobe Illustrator
.

Since
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.

how to add shine on the monsters lips

5. How
to Create the Tongue of the Monster

Step
1

Use
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).

how to draw the tongue of the monster

Step
2

Draw
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.

With
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).

how to add detail on back tongue of the monster

Step
3

Next,
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.

With
the path still selected, go to Effect > Stylize > Outer Glow
and apply the settings shown (2).

how to add detail on front tongue of the monster

6. How
to Create the Teeth of the Monster

Step
1

Grab
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).

Now,
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).

how to create the top teeth of the monster

Step
2

Follow
the technique explained above and create the four bottom teeth.

how to create the bottom teeth of the monster

Step
3

Group
(Control-G)
the four top teeth and apply the Drop Shadow effect to
create a shadow. Do the same thing for the bottom teeth.

how to add shadow to the monsters teeth

Step
4

Select
the two pieces of the tongue and apply the Drop Shadow effect using
the settings shown.

how to add shadow to the monsters tongue

Step
5

It’s
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).

Now,
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).

how to mask the teeth and tongue of the monster

7. How
to Add Texture on the Monster’s Body

Step
1

Grab
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).

While
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).

how to add light spots on the monsters body

Step
2

With
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
step (1).

Apply
a 2.5 px Gaussian Blur again; then set the Blending Mode to Overlay
and reduce the Opacity to 50% (2).

If
your spots go over the edge of the body, simply use the Direct
Selection Tool (A)
to modify the path or create a mask.

how to add dark spots on the monsters body

8. How
to Add Shading on the Monster’s Body

Step
1

Use
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
panel (1).

Next,
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).

how to add shading on the monsters body

Step
2

Select
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).

how to mask shading on the monsters body

9. How
to Create the Arms of the Monster

Step
1

Use
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).

Select
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).

how to draw the arms of the monster

Step
2

Draw
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).

Make
a copy in front for each arm shape and use them to mask the stroked
paths (2).

how to add texture on the monsters arms

10. How
to Create a Tapered Blend Art Brush

Step
1

Earlier in the tutorial, you used the Black Blend Art Brush 100×3 from How
to Create a Set of Multi-Use Blend Brushes
.
Now, let’s create a new Blend Art Brush that is not featured in that
tutorial but definitely should be.

Grab
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
(1).

Use
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).

Fill
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
saved (5).

how to create a new tapered blend art brush

Step
2

Drag
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.

how to save a new tapered blend art brush

11. How
to Create the Feet of the Monster

Step
1

Draw
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).

Blend
these three shapes using 15 Specified Steps, and you can see the
result below (4).

how to draw the foot of the monster

Step
2

Use
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.

how to add shading on the monsters foot

Step
3

Draw
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).

Make
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).

how to add details on the monsters foot

12. How
to Create the Claws of the Monster

Step
1

Draw
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).

Select
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).

how to draw the foot claws of the monster

Step
2

Follow
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.

how to add shadow at the base of the foot claws

Step
3

Use
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).

how to add shadow under monsters claws

Step
4

Use
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
Blur
.

The
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.

how to highlight the foot claws of the monster

Step
5

At
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.

While
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.

how to create the left foot of the monster

Step
6

Focus
on the right arm of the monster and use the same technique to create
the claws (1-3).

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 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).

how to create the right arm claws of the monster

Step
7

The
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.

how to create the left arm claws of the monster

13. How
to Create the Horns of the Monster

Step
1

Use
the technique explained earlier for the arm claws to create the horn
on the right side of the head (1-4).

To
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).

how to draw the big right horn of the monster

Step
2

Follow
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).

To
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).

how to draw the skin around the horns of the monster

Step
3

At
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.

how to create the left horns of the monster

14. How
to Add Extra Details on the Monster’s Body

Step
1

Take
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).

how to add top and bottom fur on the monster

Step
2

Next,
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.

how to add extra fur on the monster

Step
3

Use
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.

how to add blue spots on monsters body

Step
4

Use
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
round.

how to add freckles under the monsters eyes

Step
5

Select
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).

how to create a mask shape for the monster

Step
6

Select
the body shape; then go to Effect > Stylize > Drop Shadow and
apply the settings shown (1).

Select
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).

how to add shadow on arms and feet of the monster

15. How
to Create the Colorful Candy

Step
1

Grab
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).

Select
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
Light
.

Blend
the other two shapes on the bottom right side; then set the Blending
Mode
to Soft Light and reduce the Opacity to 75% (3).

how to draw the orange candy

Step
2

The
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.

Do
the same thing to obtain the pink candy, the chocolate candy, and the
caramel candy.

how to create colorful candy

Step
3

It’s
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.

Arrange
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
the shadow.

After
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
existing mask.

how to arrange candy inside monsters mouth

16. How
to Create the Jelly Worms

Step
1

Use
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.

how to draw the jelly worm paths inside monsters mouth

Step
2

Draw
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.

While
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).

how to create a blend group

Step
3

First,
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).

how to create the jelly worms

Step
4

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.

Use
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
them (2).

Repeat
the same thing for the pink/blue worm.

how to recolor and add details on jelly worms

Step
5

To
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).

Draw
a similar path on the pink/blue jelly worm and apply the same
settings to make it glossy as well.

how to add shine on jelly worms

Step
6

Select
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.

It’s
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).

how to add shadow and mask the jelly worm

17. How
to Add the Final Elements

Step
1

Let’s
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
hole (3).

To
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).

how to draw the orange candy stick

Step
2

You
can also add smaller versions of the chocolate and caramel candy on
the tongue and then apply the Drop Shadow effect to the circles.

how to add extra candy inside monsters mouth

Step
3

The
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).

Draw
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).

You
can add more saliva using the same technique, but draw different shapes to
make it more realistic.

how to draw saliva inside monsters mouth

Step
4

This
big guy is done now.

candy monster cartoon character

Congratulations!
You’re Done!

Here
is the final image of the candy monster. He is quite cute, right?

I
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.

Now
you have the knowledge to create other cute characters, so be creative
and keep drawing!

final image of candy monster cartoon character

How to Create a Promotion Vector Badge in Adobe Illustrator

Post pobrano z: How to Create a Promotion Vector Badge in Adobe Illustrator

Final product image
What You’ll Be Creating

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 can learn more about Illustrator’s grid system in this short tutorial from Andrei Stefan: Understanding Adobe Illustrator’s Grid System.

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.

setup grid

2. How to Create a Set of Concentric Circles

Step 1

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.

ellipse tool

Step 2

Make sure that your shape is still selected and go to Effect > Distort & Transform > Zig Zag. Enter the attributes shown below and click OK.

zig zag

Step 3

Using the Ellipse Tool (L), create a 260 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 4

Using the Ellipse Tool (L), create a 240 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

Step 5

Using the Ellipse Tool (L), create a 220 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 6

Using the Ellipse Tool (L), create a 150 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

Step 7

Using the Ellipse Tool (L), create a 130 px circle. Fill this new shape with R=228 G=242 B=255 and center it.

circle

Step 8

Using the Ellipse Tool (L), create a 110 px circle. Fill this new shape with R=73 G=35 B=84 and center it.

circle

3. How to Create the Ribbon

Step 1

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.

rectangle tool

Step 2

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.

add anchor point

Step 3

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.

direct selection tool

Step 4

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%.

appearance panel

Step 5

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.

round join

Step 6

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.

group

Step 7

Using the Pen Tool (P), create the two triangle shapes shown in the following images. Fill both shapes with a random yellow, for now.

triangles

Step 8

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.

opacity

Step 9

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.

round cap

4. How to Add Some Text

Step 1

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.

type tool

Step 2

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.

warp flag

Step 3

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.

type on path

Step 4

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.

type on path

5. How to Create the Background and Add a Subtle Texture

Step 1

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.

background

Step 2

Finally, let’s add a subtle texture. Download this set of Grunge Abstract Backgrounds from Envato Elements and drag the first image inside your document.

Resize it a little, make sure that it covers your entire artboard, and then change its Blending Mode to Soft Light.

texture

Congratulations! You’re Done!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to improve your design.

final product

How to Create an Alien Abduction Illustration

Post pobrano z: How to Create an Alien Abduction Illustration

Final product image
What You’ll Be Creating

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!

Oh, and don’t forget
you can always expand your project by heading over to GraphicRiver where you’ll
find a great selection of alien-themed vector assets.

1. How to Set Up a New Project File

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:

  • Number
    of Artboards:
    1
  • Width:
    920
    px
  • Height:
    680
    px
  • Units:
    Pixels

And from the Advanced tab:

  • Color
    Mode:
    RGB
  • Raster
    Effects:
    Screen (72ppi)
  • Preview Mode: Default
setting up a new document

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.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust
the following settings:

  • Gridline
    every:
    1 px
  • Subdivisions: 1
setting up a custom grid

Quick tip: you can learn more
about grids by reading this in-depth piece on How Illustrator’s Grid System Works.

Step 2

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:

  • layer
    1:
    background
  • layer
    2:
    main composition
  • layer
    3:
    texture
  • layer 4: hud overlay
setting up the layers

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
the Background

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.

Step 1

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.

creating the background

Step 2

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.

locking the background layer

5. How to Create
the Cellar Entrance

With the
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.

Step 1

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
to 0%.

creating the light curtain

Step 2

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.

creating the entrance for the cellar

Step 3

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).

adjusting the shape of the entrance

Step 4

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
adjusted shape.

adding the sill to the cellar entrance

Step 5

Add another shorter 248 x 4 px rectangle which we will color using #515454, and then
position as seen in the reference image.

adding the bottom section to the sill

Step 6

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.

adding the wood cracks to the sill

Step 7

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
one another.

creating the stairs

Step 8

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.

adding the highlights to the stairs

Step 9

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.

adding the shadows to the stairs

Step 10

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.

adding the cracks to the stairs

6. How to Create
the Stars

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
keyboard shortcut.

adding the stars

7. How to Create
the Windmill

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.

Step 1

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.

creating the main shape for the body of the windmill

Step 2

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 (-).

adjusting the shape of the body of the windmill

Step 3

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.

adding the drop pipe to the windmill

Step 4

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
reference image.

adding the horizontal beams to the windmill

Step 5

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
keyboard shortcut.

adding the diagonal beams to the windmill

Step 6

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.

creating the main shape for the head of the windmill

Step 7

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.

adding the thicker circles to the head of the windmill

Step 8

Add the vertical and horizontal detail lines using two 2 px thick Strokes (#2C2D2D), which we will center align to the head’s smaller
circle.

adding the center beams to the head of the windmill

Step 9

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
smaller circle.

creating the vertical windmill blades

Step 10

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.

adding the remaining windmill blades

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. 

Step 1

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.

creating the body of the phone poll

Step 2

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
keyboard shortcut.

adding details to the phone poll

Step 3

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.

adding the line to the phone poll

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.

Step 1

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.

drawing the floating cow

Step 2

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.

creating the upper section of the saucer

Step 3

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.

adding the hard shadow to the upper section of the saucer

Step 4

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.

creating the main body of the saucer

Step 5

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.

creating the bottom section of the saucer

Step 6

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.

adding the circular insertion to the saucer

Step 7

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.

creating the base section of the tractor beam

Step 8

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).

creating the center section of the tractor beam

Step 9

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.

creating the bottom section of the tractor beam

Step 10

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).

creating the tractor beam ray

Step 11

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
Shape
option.

adding the upper section to the tractor beam ray

Step 12

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
keyboard shortcut.

adding a gradient to the tractor beam ray

Step 13

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 .
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.

creating the smaller saucers

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
sections.

Step 1

Create the left section of the fence using a
couple of #2C2D2D colored rectangles,
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
step.

creating the left fence section

Step 2

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.

creating the right fence section

Step 3

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
.

masking the main composition

11. How to Create
the Alien

Since at this
point our composition is pretty much done, we can add the central piece of our
illustration, the little grey man.

Step 1

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.

creating the torso of the alien

Step 2

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.

creating the neck of the alien

Step 3

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).

creating the head of the alien

Step 4

Give the resulting shape a subtle highlight, which we will color using #515454.

adding the highlight to the head of the alien

Step 5

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.

finishing off the alien

Step 6

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.

casting the shadows onto the stairs

12. How to Create
the Textures

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.

Step 1

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%.

adding the horizontal texture lines

Step 2

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.

adding the grain texture

Step 3

Set the resulting texture’s Opacity to 12%, changing
its Blending Mode from Normal to Lighten.

adjusting the grain texture

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!

Step 1

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
point.

creating the hud framing guides

Step 2

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.

creating the battery

Step 3

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.

adding the recording state

Step 4

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.

finishing off the illustration

Great Job!

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!

finished project preview

18 Best New Fonts for 2018

Post pobrano z: 18 Best New Fonts for 2018

Get the best new fonts of 2018! Create inspiring designs with beautiful typography.

The Best New Fonts for 2018

Each font carries its own magic. Some are sturdy and professional, while others may be dainty or relaxed. Find the right font for your work with this quick selection below!

Featuring the latest font types to hit Envato Market and Envato Elements, we bring you 18 amazing typefaces for all your creative projects.

Enjoy effortless script types with elegant swoops and futuristic letters. Create awesome designs with these incredible fonts!

Need more help? Get quality advice from our experts at Envato Studio.

Learn More About Fonts

New to fonts and typefaces? Check out these great lessons to learn more:

Kiona Font

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!

Kiona Font

Selfish Script

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!

Selfish Script

Sustans Typeface

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!

Sustans Typeface

Ornacle Font

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!

Ornacle Font

Darling Harbour

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.

Darling Harbour

Fiesta Color Font

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.

Fiesta Color Font

Flitte Script

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!

Flitte Script

Tehika Script

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!

Tehika Script

Contaur Typeface

Create
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
beauty-related project!

Contaur Typeface

Auro Font

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.

Auro Font

Teratur Typeface

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!

Teratur Typeface

Mellifret Script 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.

Mellifret Script Font

Heady Rough Typeface

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.

Heady Rough Typeface

Crude Font

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!

Crude Font

Sacred Bridge Family

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!

Sacred Bridge Family

Zembood Typeface

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.

Zembood Typeface

Bambi Fonts

Bring
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!

Bambi Fonts

Starship Typeface

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.

Starship Typeface

Conclusion

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.

And
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!