verizon 2D Emoji Learner Guide User Guide

verizon 2D Emoji Learner Guide

Product Information

The Emoji Learner Guide is a tool that allows users to create their own emojis using vector graphics. Vector graphic illustrations can create a wide variety of images and emojis. The tool provides various shapes and drawing tools to help users designtheir emojis.

Specifications

• Tool: Vectra graphic design tools
• Website: https://vectr.com/

Product Usage Instructions

Explore

1. Open Vectr graphic design tools found at https://vectr.com/. Practice using each one.
2. Refer to the Vectr Reference Chart to understand the functions of each tool.

Create an Emoji

3. In Vectr, select “New File” at the top right of the program window.
4. Select the “Ellipse” tool from the left tool column and draw an ellipse in the blank workspace.
5. Add color to the ellipse using Vectr’s Colorpicker. Select “Background” to open the color options. Use the hue slider on the right side of the Colorpicker to choose your base color, and use the color panel on the left for the tone of the hue.
6. Use the drawing tools to create features on your emoji.
7. Make several models of your ideas by right-clicking on the larger ellipse and selecting “Duplicate” to create copies. Change some of the features to create different looks.

Choose Your Favorite Emoji
Use the decision matrix provided to evaluate and choose your favorite emoji based on facial features, colors, and its ability to convey the chosen emotion.

FAQ (Frequently Asked Questions)

1. Q: Where can I access Vectr graphic design tools?
   A: Vectr graphic design tools can be accessed at https://vectr.com/.

2. Q: What are vector graphic illustrations?
   A: Vector graphic illustrations are two-dimensional (2D) illustrations created using polygons and other shapes. They can create a wide variety of images and emojis.

3. Q: How do I add color to my emoji?
   A: To add color to your emoji, use Vectr’s Colorpicker. Select “Background” to open the color options, then choose your base color using the hue slider and adjust the tone using the color panel.

Emoji
Learner Guide

• Have you ever wondered where new emojis come from? In this activity, you will work like a graphic designer to use your creativity and critical thinking skills to create your own emoji.
• You will use polygons and other shapes to create two-dimensional (2D) illustrations called vector graphics. Vector graphic illustrations can create a wide variety of images and  emojis.
• Watch the Emoji Design video to find out more about how a graphic designer uses vector graphics.

Explore

• Open Vectr graphic design tools found at https://vectr.com/. Practice using each one. The below Vectr Reference Chart describes their functions.

colors from the center toward the outside of the shape creating a circular blending effect.|

• After you have successfully tried each tool on the Vectr Reference Chart, think about the type of emoji you want to create with Vectr. To inspire you, notice how the placement of the eyes, eyebrows, and mouth on some of these popular emojis help convey a feeling or emotion.

• In Vectr, select New File at the top right of the program window.
• Select ellipse in the left tool column then draw an ellipse in the blank workspace. Your ellipse will appear in the workspace.
• Add color to the ellipse using Vectr’s Colorpicker. Select “color” in “Background” to open. Use the hue slider, on the right side of the Colorpicker, to select your base color choice, then use the color panel on the left for the tone of the hue you selected.
• Use the drawing tools to create features on your emoji.
• Make several models of your ideas. Right click on the larger ellipse and select duplicate to create a copy of the shape. Change a few of the features to get different looks. Try to be unique!
• Which emoji is your favorite?
  Use this decision matrix to help you decide which emoji you like the best.

Can I explain to another person how the emoji design portrays the chosen emotion?| | |

Create

Make It Your Own

• Now that you have an emoji, make it your own by modifying some of its colors. To do that, it will help to understand a bit more about how computers represent color.
  Digital artists use RGB colors. RGB stands for red, green, blue. All the colors of light that you see on a computer screen are combinations of different amounts of red, green, and blue light. The thing that makes each color unique is the intensity, or the amount of red, green, and blue light that is in its mix.

A Perfect Match

• Next you will use color to make changes to your emoji to make it look like you. A range of colors can be created by combining different colors. Notice in the chart how mixing red, green and blue light produces other colors.
• Using different intensities of color is what makes different shades of color. Numbers that range from 0 to 255 describe the different intensities of red, green, or blue for each color. Zero means that there is none of that color present and 255 means that the color is present at its highest intensity.

Colors always have the same value order: red, green, blue.

| 0, 61, 165| This series represents a color that is mostly blue

The color editor on Vectr can make it tricky to find the tone that matches your shade of skin. When looking for a specific color, graphic designers turn to the Pantone Guide. This is the industry standard for describing a color.

• Use the Pantone Guide, available at https://www.pantone.com/color-finder to find the color that matches your skin.
• A large color sample will appear. To the right of it you will see its RGB series.
• 11. To the right of the color sample is the RGB series of the color intensities for your skin tone.

Write the numbers in the RGB series that matches your skin tone.

• Go back to your Vectr page and select the ellipse you used to create the main part of your emoji.
• In order to insert the rgb series you want, you need to enter its red value, green value, blue value, and alpha value manually into Colorpicker’s dropdown menu. Alpha means opacity and its value can either be a 0, for completely transparent, or a 1 for opaque. Use an opaque value of 1 for your emoji. For example, if your skin tone’s RBG series is 196, 162, 138, then you would enter “rgba(196,162,138,1).”

Vectr will automatically convert your rgba number into what is known as a hexadecimal number, or hex for short.-

• Extension Challenge: The Story of Bits and Bytes
• Hexadecimal numbers start with a pound sign (or hashtag) and are followed by six letters or numbers. The first two digits refer to red, the next two to green and the last two are blue. Hexadecimal numbers use the base 16 number system. Learn more about this in the extension activity The Story of Bits and Bytes.
• Try changing other features on your emoji, such as the eyes, smile, hair, glasses, etc. to look like you.
• Evaluate your emoji using the decision matrix chart.

Can you explain to another person how the emoji design portrays the chosen emotion?|

Real World Connection

• The Design Process using this flow of ideas:
• A graphic designer would use this step to first ask a question.
  •  What was the question you had to address for this activity?
• A graphic designer would explore creating designs with different tools.
  •  What graphic design program did you explore?
• Making models of design ideas is a large part of a graphic designer’s work.
  • What did you learn from making each model?
• A graphic designer evaluates whether the models that she/he created follow the requests the client made. A graphic designer might also speak with colleagues to get input on a design to make sure it conveys the correct information.
  • What helped you to decide which of your emojis was the best model?
• When a graphic designer shares their best model with the person who requested the design, this gives them a chance to explain how they created the model.
  • How did you share and explain your emoji?

Your Next Move

1. List three things that your emoji could be used for:
2. What could you do to get other people to start using your emoji?

Extension: The Story of Bits and Bytes

• Have you ever wondered how an electronic device stores data? Or how a picture can be saved on a phone or music be played on a mobile device? How are images, sound, video, and other forms of data translated into the digital world? This is all done by translating electricity to 1’s and 0’s.

On Again, Off Again

• Electronic devices use tiny electronic components called transistors to store data. These transistors can hold electric signals and can be one of two states: ON or OFF. If the signal is
• ON, the value of that transistor is 1; if it is OFF, its value is 0. Computers store and process data all through 1’s and 0’s in a system called the binary number system.

Why do you think this system is called binary?

1. Look at these on off switches. Do you see how they display zeros and ones?
2. Name some devices which have 1s and 0s on their on off switch.
   Seeing Double

• Because this system has only two possible values, 1 or 0, it is called the binary number system. This system is different than the number system we use every day, called the decimal number system, which utilizes 10 digits to represent all numbers (0-9).
• But how can a computer store so much information using just 1s and 0s?
  We call every value of 1 or 0 a bit, which is short for binary digit. One bit can only store two possible values, a 1 or a 0. Bits can only store one of two values, a 1 or a 0.

| 1 bit| Resulting Binary
---|---|---
Numbers
Possible Bit Combinations| 0| 0
1| 1

Figure 1. Data in a Bit

• If you put two bits together, then you should get 2 x 2 = 4 (or 22) possible combinations, as shown below:

| 2 bits| Resulting Binary Numbers
---|---|---
Possible Bit Combinations| 0| 0| 00
1| 01
1| 0| 10
1| 11

Figure 2. Data in Two Bits

• Can you guess how many values you can store with 3 bits? 2 x 2 x 2?

Complete the chart.

| 3 bits| Resulting Binary
---|---|---
Numbers
Possible Bit Combinations| 0| 0| 0|
1|
1| 0|
1|
1| 0| 0|
1|
1| 0|
1|
Learner Guide | 13

Computers use a combination of bits allowing for more values to be stored.

• Even though the bit is the smallest unit of data storage, the most common unit of storage in modern computers is a collection of 8 bits, called a byte. These 8 bits can store 2x2x2x2x2x2x2x2 combinations of data, which computes to 256 values.

A byte has 256 values in it. How does this number relate to the Pantone Guide?
Hint:
values begin counting with zero, not one, so there would be 256 values if you counted from 0 to 255.

Hexa-what?

• Computer system designers and programmers would have a difficult time if they had to use the series of 1′ and 0’s of binary code, also called machine language, to work with computers. Instead, they use the hexadecimal numbers that provide a more human-friendly representation of binary-coded values. In the hexadecimal number system, each hexadecimal digit represents four binary digits. Let’s compare the hexadecimal number system to the decimal number system. The hexadecimal system uses a base 16 number system. Hexadecimal uses decimal numbers 1 through 9 and then uses letters A through F. Here is how it compares to decimal.
• Since 8 goes into 16 evenly, hexadecimals could serve as a shortcut for writing in binary. Here is a comparison of 32 decimal written in several forms.

You can see how it would be much easier to use hex as a shortcut. This is especially true when you get to more complicated processes, such as writing code for computers.

Extension: Decode Unicode

Pop Ups

• Have you ever received a message with an emoji that you would really like to use, but you do not see it on your emoji menu? Try using the emoji’s shortcode. Shortcodes are codes used to aid emoji insertion using a keyboard. For example, if while sending a message you type 🙂 on a messaging app, a ? will automatically appear, if that app uses short codes.
• Computers store letters and symbols and other characters by assigning a unique number to each. When computers first became widely used, these numbers were assigned using many different systems. This became too confusing because many times the systems used completely different numbers to mean the same thing. To make it all easier to understand, the industry adopted a single standard called Unicode.

Good Character

• Each platform has its own preference for the characters used in the shortcode format. A common character choice is a colon placed before and after the word.
• Across several different platforms, “:grin:” is the shortcode for a smiley face.

1. Apple and Google are two of the platforms that recognize the grin shortcode. What other platforms do you see that use the grin emoji?
2. Get on a messaging platform and try typing in different words that you think might be a shortcode. Which shortcodes did you find?

References

• Vectr - Free Online Vector Graphics Editor
• pantone.com/color-finder

Read User Manual Online (PDF format)

Read User Manual Online (PDF format)  >>

Download This Manual (PDF format)

Download this manual  >>