{"id":6160,"date":"2021-06-03T10:10:00","date_gmt":"2021-06-03T10:10:00","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=6160"},"modified":"2023-02-08T14:44:24","modified_gmt":"2023-02-08T14:44:24","slug":"4-shape-shape-and-pattern","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2021\/06\/03\/4-shape-shape-and-pattern\/","title":{"rendered":"Principles of Design | Shape and Pattern"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Artboard-1.png\" alt=\"\" class=\"wp-image-7089\" width=\"95\" height=\"19\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/shapesbanner-1-1024x341.jpg\" alt=\"\" class=\"wp-image-6847\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/shapesbanner-1-1024x341.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/shapesbanner-1-300x100.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/shapesbanner-1-768x256.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/shapesbanner-1-1536x512.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/shapesbanner-1-2048x683.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Shape is a formative element in design. Movements you have learned about like Art Deco and Bauhaus put major emphasis on shape and form, which inform how we use shape today. Although it often goes unnoticed, shape is everywhere, from your artboard to the basic shapes you start with in any design. While other vital elements such as color and typography might \u201cprettify\u201d a design and make it instantly recognizable, shapes serve less as attractive outcroppings than a bedrock of modern design. <\/p>\n\n\n\n<p>Shapes are so universal in our lives that they seem intuitive, but as a budding designer it\u2019s useful to understand how they <em>shape<\/em> the way an audience interprets any design.<\/p>\n\n\n\n<p><strong>By the end of this training you will:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Learn about different types of basic shapes&nbsp;<\/li>\n\n\n\n<li>Gain an introduction to basic shape psychology and its use in logos<\/li>\n\n\n\n<li>Gain hands-on practice using shapes as a foundation of visual hierarchy<\/li>\n\n\n\n<li>Attain familiarity with elements of Adobe Illustrator<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2D vs 3D Shapes<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-1-1024x512.png\" alt=\"\" class=\"wp-image-8633\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-1-1024x512.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-1-300x150.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-1-768x384.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-1-1536x768.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-1.png 1800w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>As designers, with few exceptions we are usually only working with 2D shapes; however, we might choose to mimic 3D shapes sometimes. Nevertheless, it is important to know the differences and aspects of both kinds of shapes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A 2D shape is flat and only has 2 dimensions: height and width. These are what you will use in industry standard software like Adobe Photoshop and Illustrator.<\/li>\n<\/ul>\n\n\n\n<p>3D shapes have 3 (!) dimensions, height, width, and length. 3D shapes are most things we see in real life. In design, 3D is often used for <a href=\"https:\/\/www.digitalartsonline.co.uk\/tutorials\/adobe-illustrator\/how-make-objects-look-3d-in-illustrator\/#15\">illustrative purposes<\/a> in programs like Adobe Illustrator, though 3D modeling programs like Blender are also useful.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Organic vs Geometric Shapes<\/h2>\n\n\n\n<p>Another way to categorize shapes is into organic vs geometric shapes.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Geometric:<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/geometric.png\" alt=\"\" class=\"wp-image-6168\" width=\"112\" height=\"112\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/geometric.png 262w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/geometric-150x150.png 150w\" sizes=\"auto, (max-width: 112px) 100vw, 112px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shapes you see in geometry class such as circles, triangles, squares, and so on. Basically, an imaginative ideal of shapes in that only tools like PS and AI can create such perfect shapes. That is to say, generally all geometric shapes are \u201cman-made\u201d (manufactured or designed) with the exception of crystals.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-2-1024x572.png\" alt=\"\" class=\"wp-image-8634\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-2-1024x572.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-2-300x168.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-2-768x429.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-2-1536x858.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-2.png 1636w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"762\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-3.png\" alt=\"\" class=\"wp-image-8635\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-3.png 669w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-3-263x300.png 263w\" sizes=\"auto, (max-width: 669px) 100vw, 669px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Organic:<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/organic.png\" alt=\"\" class=\"wp-image-6169\" width=\"113\" height=\"113\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/organic.png 263w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/organic-150x150.png 150w\" sizes=\"auto, (max-width: 113px) 100vw, 113px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201cNatural\u201d shapes with a flowing and curving appearance.<\/li>\n\n\n\n<li>Typically irregular and asymmetrical, blob-like.<\/li>\n\n\n\n<li>Associated with \u201cnatural\u201d items but still appear in design<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"929\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-4-1024x929.png\" alt=\"\" class=\"wp-image-8636\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-4-1024x929.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-4-300x272.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-4-768x697.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-4.png 1170w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><em>Natalia Pawlak\u2019s branding for Sisneypa ales<\/em><\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-5-1024x588.png\" alt=\"\" class=\"wp-image-8637\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-5-1024x588.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-5-300x172.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-5-768x441.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-5-1536x882.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-5-2048x1176.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><em><em><a href=\"https:\/\/spotify.design\/\">Spotify.design<\/a> features organic shapes on its landing page and throughout the site.<\/em><\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Shape Psychology<\/h2>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-background\" style=\"background-color:#fcf0ef\"><tbody><tr><td><strong>Organic shapes<\/strong><br><img decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/ooorganic.png\" alt=\"\" style=\"width: 100px\"><\/td><td>Organic shapes create a feeling of calm and natural flow. In defying perfect proportions, they also can have infinite meanings depending on their form.&nbsp;<\/td><td><\/td><\/tr><tr><td><strong>Geometric shapes<\/strong><br><img decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/geometricoo.png\" alt=\"\" style=\"width: 100px\"><\/td><td>Geometric shapes are rigid and are also useful in creating specific abstract representations of ideas.<\/td><td><br><\/td><\/tr><tr><td><strong>Squares\/rectangles<\/strong><br><img decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Asset-5.png\" alt=\"\" style=\"width: 100px\"><\/td><td>Most common shape in design. Generally suggests a contained composition and consequently, reliability, safety, security<\/td><td><\/td><\/tr><tr><td><strong>Circles<\/strong><br><img decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Asset-4.png\" alt=\"\" style=\"width: 100px\"><\/td><td>Very popular for icons. softer, milder, friendlier, inviting, relaxing, childlike, feminine<\/td><td><\/td><\/tr><tr><td><strong>Polygons<\/strong><br><img decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Asset-3.png\" alt=\"\" style=\"width: 100px\"><\/td><td>Not very often used in design but familiar in everyday life, complex<\/td><td><\/td><\/tr><tr><td><strong>Triangles<\/strong><br><img decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Asset-1-2.png\" alt=\"\" style=\"width: 100px\"><\/td><td>Idea of direction &amp; power<\/td><td><\/td><\/tr><tr><td><strong>Abstract shapes <\/strong><br><img decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Asset-2.png\" alt=\"\" style=\"width: 100px\"><\/td><td>(Combination of any of the above shapes): infinite possibilities. Ex: circle + square = a stable and friendly shape \ud83d\ude42<\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Remember:<\/strong><\/h3>\n\n\n\n<p>According to the tenets of <strong>Gestalt (German for \u201cshape\u201d!) theory<\/strong>, humans naturally perceive things as part of a whole. For example, if you use multiple similarly shaped elements in one design, the viewer will interpret them as part of a unified pattern or group. The more commonality a set of elements possess, the greater the degree of coherence &amp; unity in a given design.<\/p>\n\n\n\n<p>This is important to understand because the human eye works very hard to look for elements that point to an element being part of a group, such as similarities, continuation, proximity, and symmetry. With this, you can guide the viewer\u2019s eye around your composition in a certain order.<\/p>\n\n\n\n<p>One good example of the human eye working hard to see continuity can be seen in this logo that utilizes <strong>negative space<\/strong>. Almost like an inkblot, the shapes of the panda symbol are not enclosed as a \u2018single shape\u2019 yet in accordance with the Gestalt principle of continuity, we still perceive it as one discrete whole, filling in what is missing.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-6-2.jpeg\" alt=\"\" class=\"wp-image-8640\" width=\"613\" height=\"812\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-6-2.jpeg 435w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-6-2-227x300.jpeg 227w\" sizes=\"auto, (max-width: 613px) 100vw, 613px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Rob Pruitt, <em>Wild Thing, <\/em>2011.<\/p>\n\n\n\n<p>Another good example comes from modern abstract art, which manipulates our instinctual search for similarity. Notice how the first thing you see in this painting below is the sharp angles of the yellow triangles. Their dissimilarity to neighboring shapes overwhelms the composition and thus, your eye is drawn to them first. The yellow triangles are an <em>anomaly, <\/em>breaking the pattern of soft, flowing, cool colored shapes:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"863\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-7-863x1024.png\" alt=\"\" class=\"wp-image-8641\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-7-863x1024.png 863w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-7-253x300.png 253w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-7-768x911.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-7.png 966w\" sizes=\"auto, (max-width: 863px) 100vw, 863px\" \/><\/figure>\n<\/div>\n\n\n<p>Jessica Snow, <em>Worlds Rush In<\/em>, 2014<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Logos<\/strong><\/h2>\n\n\n\n<p><strong>Shape psychology<\/strong> can be found in virtually all areas of graphic design, but one classic and useful example is logos. Logos regularly utilize shapes to represent abstract versions of things, ideas, and brands. Shapes in logos can be used to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Symbolize different ideas.&nbsp;<\/li>\n\n\n\n<li>Create visual hierarchy (lead the eye around)<\/li>\n\n\n\n<li>Convey emotion and mood<\/li>\n\n\n\n<li>Create trust and professionalism<\/li>\n\n\n\n<li>Deliver a sense of depth in a 2D composition<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Squares &amp; Rectangles:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Extremely common, familiar; usually associated with stability, structure, and rationality. May give the impression of trust and authority.<\/li>\n\n\n\n<li>Sensibly, most banks and insurance companies use squares or rectangles in their logos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"114\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.35.41-AM.png\" alt=\"\" class=\"wp-image-6949\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"228\" height=\"222\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.35.58-AM.png\" alt=\"\" class=\"wp-image-6950\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Circles<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Welcoming, positive (\u2018feminine connotations\u2019)<\/li>\n\n\n\n<li>Sense of community or collaboration \u2014 representing the globe<\/li>\n\n\n\n<li>Sense of infinity<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"208\" height=\"188\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.36.27-AM.png\" alt=\"\" class=\"wp-image-6951\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"202\" height=\"206\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.36.46-AM.png\" alt=\"\" class=\"wp-image-6952\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Triangles<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Power, direction, purpose<\/li>\n\n\n\n<li>See: shipping or transportation companies<\/li>\n\n\n\n<li>Often seem edgy<\/li>\n\n\n\n<li>Simultaneously strong &amp; dynamic<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"117\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.37.45-AM-300x117.png\" alt=\"\" class=\"wp-image-6954\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.37.45-AM-300x117.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.37.45-AM.png 380w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"300\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.37.56-AM-262x300.png\" alt=\"\" class=\"wp-image-6956\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.37.56-AM-262x300.png 262w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Screen-Shot-2021-06-07-at-9.37.56-AM.png 276w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Combinations of Shapes in Logo<\/h4>\n\n\n\n<p>Some logos are more illustrative, or only type. Still, these elements together create an overall shape that lends itself to the brand\u2019s identity.&nbsp;A couple of examples:<\/p>\n\n\n\n<p><strong>Louis Vuitton<\/strong> = The triangular shapes of \u201cL\u201d and \u201cV\u201d create an edgy and energetic look that a luxury fashion house embodies. Yet, the overall composition fills a rectangular container &#8211; this gives the logo a classic, long-standing appeal.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"246\" height=\"300\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-8-2-246x300.png\" alt=\"\" class=\"wp-image-8645\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-8-2-246x300.png 246w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-8-2-840x1024.png 840w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-8-2-768x937.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-8-2-1259x1536.png 1259w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-8-2.png 1679w\" sizes=\"auto, (max-width: 246px) 100vw, 246px\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Hello Kitty<\/strong> = uses lots of different shapes, but overall has an oval shape that lends itself to a&nbsp; friendly, feminine, and approachable interpretation. The abundance of soft, round shapes helps to establish the iconic cute image of the brand.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"188\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-9-300x188.png\" alt=\"\" class=\"wp-image-8646\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-9-300x188.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-9-768x480.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-9.png 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Shapes &amp; Visual Hierarchy<\/strong><\/h2>\n\n\n\n<p>Shapes can also help with visual hierarchy!<\/p>\n\n\n\n<p>For example, triangles (arrows) create a sense of direction thanks to their conventional use in graphic and product design.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"769\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-10-1024x769.jpg\" alt=\"\" class=\"wp-image-8648\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-10-1024x769.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-10-300x225.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-10-768x577.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-10-1536x1153.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-10.jpg 1673w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Other shapes are primarily associated with certain purposes because of their conventional use in UI, like circles for buttons, and lines for closing or minimizing windows. Other shapes are hard to separate from their usage in everyday life such as hexagons and stop signs and should be used carefully.<\/p>\n\n\n\n<p>Another, less obvious way that shapes can <em>shape<\/em> visual hierarchy is when they contrast one another (such as in Jessica Snow\u2019s painting earlier in this KB). Going back to Gestalt theory, imagine a group of rectangles broken up by a triangle: the contrast will draw your eye in and you\u2019re more likely to look at the triangle first. Similarities and differences among design elements can be heightened or underlined by the strategic use of shapes.&nbsp;<\/p>\n\n\n\n<p>Some tips:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Be strategic with your use of shapes!<\/li>\n\n\n\n<li>Geometric shapes are very very widespread and often have popular meanings associated with them. This is not bad, especially in web design\/UX where users rely on familiar shapes as signposts, but keep this in mind, especially in print design. For example, a triangle pointing to the right might suggest progression, such as turning to the next page.<\/li>\n\n\n\n<li>Organic shapes are currently trending and can generate interest in a design<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Check Your Understanding<\/h1>\n\n\n\n<p>Now that you have learned about different kinds of shapes, shape psychology, and their role in visual hierarchy, you\u2019re now ready to move on to demonstrating your knowledge!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Level 1: Shapes &amp; Emotions<\/strong><\/h4>\n\n\n\n<p>Using pencil and paper or a program of your choice, sketch \/ construct 3 basic shapes for the following 3 moods. Please avoid drawing shapes with common symbolic meaning (e.g. a peace sign for the first bullet point). There\u2019s no one way to do this, but refer to the basics above for some guidance:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Free and at peace. This shape has just come back from vacation.<\/li>\n\n\n\n<li>Powerful and confident. This shape has just been promoted.<\/li>\n\n\n\n<li>Energetic and active. This shape just wants to go to the gym.<\/li>\n<\/ul>\n\n\n\n<p>Post your shapes on Basecamp for some quick feedback!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Level 2: Patterns and Shapes Practice<\/strong><\/h4>\n\n\n\n<p>Shapes don\u2019t always need to be the focus of a design! Sometimes they can be part of a dynamic background. Regardless, this part of the tutorial will teach you how to make a basic, modern pattern in AI as well as some basic kinds of shapes that you learned about earlier in this KB.&nbsp;<\/p>\n\n\n\n<p><strong>Step 1:<\/strong><\/p>\n\n\n\n<p>First, let\u2019s set up your Adobe Illustrator workspace. This may seem like a tedious or unnecessary step, but even if you\u2019re familiar with AI you\u2019ll thank yourself later for having everything within easy reach.<\/p>\n\n\n\n<p>For this activity, we\u2019re primarily going to be using a few different panels. Go to <strong>Windows<\/strong> and then one by one, select <strong>properties<\/strong>, <strong>pathfinder<\/strong>, <strong>swatches<\/strong>, and <strong>pattern options<\/strong>. Then click and drag these windows to the right side of your workspace. Although this step is technically optional, it\u2019ll afford you easy access to the settings we need.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"642\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-11-1024x642.png\" alt=\"\" class=\"wp-image-8649\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-11-1024x642.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-11-300x188.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-11-768x481.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-11.png 1436w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">(If you like the workspace, you can save it under Window &gt; Workspaces &gt; New Workspace \u2026 &gt; OK)<\/p>\n\n\n\n<p><strong>Step 2:<\/strong><\/p>\n\n\n\n<p>Next, let\u2019s set up your swatches. Swatches let you save your favorite colors and access them quickly while working. Pick four to five colors of your choice. ( If creating a color palette seems daunting, there are a number of online resources to help you with this, such as <a href=\"https:\/\/coolors.co\/generate\">Coolors<\/a>.)&nbsp;<\/p>\n\n\n\n<p>When you are satisfied with your color picks, return to your artboard and create a square by using the rectangle tool (M) on the main left panel and copy\/paste as many rectangles as you have color swatches (select rectangle with Direct Selection tool, ctrl+C\/ctrl+P). <\/p>\n\n\n\n<p class=\"has-text-align-center\"><\/p>\n\n\n\n<p>Now, select each square one by one and change the fill in the properties or swatches panel for each one of your squares to your palette colors. You can also give them a stroke; however, this color will also be added to the swatches. When you\u2019ve assigned each fill to each square, use the select tool to select all of the swatches at once and click on the tiny folder icon near the bottom of the swatches panel to use them in a new color group.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"893\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-13-2-1024x893.png\" alt=\"\" class=\"wp-image-8661\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-13-2-1024x893.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-13-2-300x262.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-13-2-768x670.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-13-2.png 1442w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"700\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-14-3.png\" alt=\"\" class=\"wp-image-8674\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-14-3.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-14-3-300x205.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-14-3-768x525.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-15-2-1024x769.png\" alt=\"\" class=\"wp-image-8663\" width=\"1024\" height=\"769\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-15-2-1024x769.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-15-2-300x225.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-15-2-768x576.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-15-2-1536x1153.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-15-2.png 1580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>You should now be able to see these swatches as part of a color group in your swatches panel. Feel free to edit these swatches at any time.&nbsp;<\/p>\n\n\n\n<p><strong>Step 3:<\/strong><\/p>\n\n\n\n<p>Now that you have set everything up, it\u2019s time to start making shapes and patterns!&nbsp;<\/p>\n\n\n\n<p>Let\u2019s start with creating a quick grid. You\u2019ve already created squares, so start your grid by creating a new square, this time inside your artboard with a transparent fill and a stroke color from your new swatch panel. Size and stroke are arbitrary right now.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"900\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-16-2.png\" alt=\"\" class=\"wp-image-8678\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-16-2.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-16-2-300x264.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-16-2-768x675.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Selecting the square, pull up your pattern options window from your workspace, and click the three lines in the upper right, select \u201cmake pattern\u201d.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"700\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-17-3.png\" alt=\"\" class=\"wp-image-8683\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-17-3.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-17-3-300x205.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-17-3-768x525.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>This will bring you into pattern editing mode. Here you can edit stroke width and other settings as you see fit. You can also give this pattern a name of your choosing. When you\u2019re done, click \u201cdone\u201d next to the checkmark in the gray bar. This will automatically add this pattern to your swatches panel.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"702\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-18-2.png\" alt=\"\" class=\"wp-image-8684\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-18-2.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-18-2-300x206.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-18-2-768x527.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>To add this pattern somewhere in your artboard, select the pattern in your swatches and create a rectangle. Your grid should be the fill for your rectangle. It may look a bit funky, though, so select your pattern and go to Object &gt; Transform &gt; Scale to scale it. This will bring up the scaling window. Feel free to experiment with percentages with the preview box checked, but make sure first that \u201ctransform objects\u201d is unchecked.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19-762x1024.png\" alt=\"\" class=\"wp-image-8685\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19-762x1024.png 762w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19-223x300.png 223w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19-768x1032.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19.png 1024w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><\/figure>\n<\/div>\n\n\n<p>When you\u2019re satisfied with how your pattern looks, click \u201cok\u201d to apply the changes. Ta-da, now you have your very own grid!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19.2-791x1024.png\" alt=\"\" class=\"wp-image-8686\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19.2-791x1024.png 791w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19.2-232x300.png 232w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19.2-768x994.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19.2-1187x1536.png 1187w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-19.2-1583x2048.png 1583w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Step 4:<\/strong><\/p>\n\n\n\n<p>Next, let\u2019s create some dots. Start by creating an ellipse by right-clicking on the rectangle option in the toolbar. As you drag creating the circle, hold shift to create a perfect circle. Fill it with a palette color of your choice.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"923\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-20-1-923x1024.png\" alt=\"\" class=\"wp-image-8687\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-20-1-923x1024.png 923w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-20-1-270x300.png 270w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-20-1-768x852.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-20-1.png 1024w\" sizes=\"auto, (max-width: 923px) 100vw, 923px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"882\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-21.png\" alt=\"\" class=\"wp-image-8689\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-21.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-21-300x258.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-21-768x662.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1005\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-22-1005x1024.png\" alt=\"\" class=\"wp-image-8690\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-22-1005x1024.png 1005w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-22-295x300.png 295w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-22-768x782.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-22.png 1024w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><\/figure>\n<\/div>\n\n\n<p>Now, just like before, go to pattern options and the three lines to click \u201cmake pattern\u201d. In this live preview mode, remember that changing width and height adjusts the space between the shapes. Again, when you\u2019re satisfied with how your pattern looks, click \u201cdone\u201d for it to appear in your swatches panel.&nbsp;<\/p>\n\n\n\n<p>Like before, create a rectangle and select the pattern swatch to fill it. Remember to scale the pattern again as you see fit.&nbsp;<\/p>\n\n\n\n<p><strong>Optional:<\/strong> If you\u2019d like to make the pattern less square and more dynamic, go to Object \u2192 Transform \u2192 Rotate and first, making sure that \u201ctransform objects\u201d is unchecked.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1005\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23-1005x1024.png\" alt=\"\" class=\"wp-image-8691\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23-1005x1024.png 1005w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23-295x300.png 295w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23-768x782.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23.png 1024w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><\/figure>\n<\/div>\n\n\n<p>I chose this rotation degree rather arbitrarily, but it ended up giving the pattern a lot more texture:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23.2-791x1024.png\" alt=\"\" class=\"wp-image-8692\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23.2-791x1024.png 791w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23.2-232x300.png 232w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23.2-768x994.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23.2-1187x1536.png 1187w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-23.2-1583x2048.png 1583w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><\/figure>\n<\/div>\n\n\n<p>Nice! You have created two stunning patterns, now what? By now, you might have guessed it \u2014 <strong>you can create a pattern with<\/strong> <strong>any shape.&nbsp;<\/strong><\/p>\n\n\n\n<p><strong>Step 5<\/strong><\/p>\n\n\n\n<p>Aside from patterns, let\u2019s run through some other basic shapes in AI. You know how to create rectangles and ellipses, but what about a triangle, a zig-zag, or a donut?<\/p>\n\n\n\n<p>To create a triangle, use the polygon tool (by right-clicking on the same shape tool used to make a rectangle or ellipse) and going to the transform panel, change the number of sides to 3.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-24-884x1024.png\" alt=\"\" class=\"wp-image-8694\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-24-884x1024.png 884w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-24-259x300.png 259w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-24-768x890.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-24.png 1024w\" sizes=\"auto, (max-width: 884px) 100vw, 884px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"544\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-25.png\" alt=\"\" class=\"wp-image-8695\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-25.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-25-300x159.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-25-768x408.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>For a zig-zag, first, use the line tool on the left panel to create a straight line. Select it, and go to Effect \u2192 Distort &amp; Transform \u2192 Zig-zag. In the zig-zag panel, feel free to play around with different options. Selecting \u201csmooth\u201d will yield more of a squiggle, whereas selecting \u201ccorner\u201d will yield more of a traditional zig-zag.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"991\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-27-991x1024.png\" alt=\"\" class=\"wp-image-8697\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-27-991x1024.png 991w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-27-290x300.png 290w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-27-768x794.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-27.png 1024w\" sizes=\"auto, (max-width: 991px) 100vw, 991px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"991\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-28-991x1024.png\" alt=\"\" class=\"wp-image-8698\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-28-991x1024.png 991w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-28-290x300.png 290w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-28-768x794.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-28.png 1024w\" sizes=\"auto, (max-width: 991px) 100vw, 991px\" \/><\/figure>\n<\/div>\n\n\n<p>Furthermore, adjusting the ridges per segment will affect how concentrated the zig-zags are.&nbsp;<\/p>\n\n\n\n<p>If you\u2019re feeling particularly zesty, you can even create a pattern from your zig-zag (!), using the same process as before. Voila!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"823\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-29-823x1024.png\" alt=\"\" class=\"wp-image-8699\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-29-823x1024.png 823w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-29-241x300.png 241w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-29-768x956.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/01\/KB-Graphic-29.png 1024w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left\">Lastly, let\u2019s employ the pathfinder tool to help us create a donut shape. Create a circle using a fill from your color palette. Copy it and paste it over your first circle in a different color. Resize it so that it is slightly smaller than your original circle. To center the circles, select both and use the alignment tools on the top of your screen to adjust.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-31.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"700\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-31.png\" alt=\"\" class=\"wp-image-8705\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-31.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-31-300x205.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-31-768x525.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Now, with both circles still selected, go to Window &gt; Pathfinder and under shape modes, click on the second icon, \u201cminus front\u201d.<\/p>\n\n\n\n<p>You now have a donut! Yay!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-32.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-32.png\" alt=\"\" class=\"wp-image-8706\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-32.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-32-300x138.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-32-768x353.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Lastly, you can make organic shapes yourself using the Pen Tool or Curvature Tool (pen tool but flows smoother).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-33.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"981\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-33.png\" alt=\"\" class=\"wp-image-8707\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-33.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-33-300x287.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2023\/02\/KB-Graphic-33-768x736.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Post screenshots on Basecamp for everyone to see!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Level 3: Shape Hierarchy<\/strong><\/h4>\n\n\n\n<p>Download and open <a href=\"https:\/\/utexas.box.com\/s\/0w6oimbvaws6kl8kfyjyu0juxong3yjo\">this<\/a> AI starter file.<\/p>\n\n\n\n<p>Organize the text into a coherent visual hierarchy using tips above using basic shapes. Aside from shapes, you are allowed to use the colors you selected for your palette in Level 2 and adjust text size. However, please do not use any other design elements such as font\/typography, more advanced shape manipulation, or inclusion of any other design assets. This design can be as simple or as complex as you like. <\/p>\n\n\n\n<p>Please export your result as a JPG and post it to Basecamp for feedback!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/11\/basic-training-last-steps-3-1024x341.png\" alt=\"\" class=\"wp-image-5650\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/11\/basic-training-last-steps-3-1024x341.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/11\/basic-training-last-steps-3-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/11\/basic-training-last-steps-3-768x256.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/11\/basic-training-last-steps-3-1536x512.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/11\/basic-training-last-steps-3-2048x683.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Shape is a formative element in design. Movements you have learned about like Art Deco and Bauhaus put major emphasis on shape and form, which inform how we use shape today. Although it often goes unnoticed, shape is everywhere, from &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2021\/06\/03\/4-shape-shape-and-pattern\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":753,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[200711,200721],"tags":[],"class_list":["post-6160","post","type-post","status-publish","format-standard","hentry","category-basic-trainings","category-design-fundamentals"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/6160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/753"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=6160"}],"version-history":[{"count":51,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/6160\/revisions"}],"predecessor-version":[{"id":8701,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/6160\/revisions\/8701"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=6160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=6160"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=6160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}