Yin Yang

Graphic Design

Daoist Yin Yang

Yin Yang is a symbol often associated with Daoism (Taoism), the Yin Yang symbol represents a unity of correlating opposites. This is often a slightly hard concept for the western mind to comprehend straight off the bat. We tend to think of opposites as opposing each other and being diametric in that opposition; good and evil, black and white, order and chaos. Yin Yang is more subtle though, well at least in my interpretation, it represents the whole of a given phenomena, and that inside the whole their exists two forces that are distinct from one another in nature, though are balanced by each other. These two forces flow into each other, and are also contained by the whole. There is a duality between the forces, but it is a complimentary one.

The black and white Yin Yang symbol, is perhaps a little misleading and leads us into absolute thinking, which is not the nature of the Dao, but then again perhaps it is. So, whilst holding to the idea that to explain the Dao is not to understand the Dao, I will move on from this position of ignorance to just explain how to create the Yin Yang shape.

The Shape of Yin Yang

The underlying shape of the Yin Yang symbol is that of a circle, the circle is divided into two even halves, instead of a straight line making the divide, the divide is curved. I hesitate to call it a sine curve, because I will probably have to back that up with some equation. Instead I will just describe it as a curve that is the result of including two more circles that are aligned centrally, and are each half the size of the outer circle. This description turns out to be more useful when constructing the shape as well.

When designing the Yin Yang shape, in the strict interpretation, there is a further outer ring (the whole), I will keep with tradition here, but you will often see the symbol designed without it.

When I design I prefer to use digital criteria, as opposed to the more analog style of positioning, the Yin Yang shape is actually quite good a demonstration of this style. Aesthetics come in when you wish to show that the forces are in fact not pure elements, and instead contain a number of similar elements.

So, the steps I will show will make use of the dialogs as much as possible and reduce the need to position stuff using your eyes.

The GNU Image Manipulation Program (GIMP)

I will be using the GIMP (pronounced with a silent G, so Imp) to produce the Yin Yang symbol, but I am sure most image manipulation programs will have a similar flow to them.

The techniques used here can be used for a multitude of design tasks, so if you don't know how to create this shape it is worthwhile going through the tutorial step by step.

I am using GIMP Version 2.4.4, your mileage may vary (ymmv), if you are using another version.

Yin Yang Step by Step

I will first describe the step and then if appropriate show a screen shot. I will tend to use a zoom of 25%, to cut down on the download, to keep the page readable.

File -> New -> Width : 800px -- Height : 800px
Create a new image, and set the width and height to the same value (if you use something other than 800 x 800 then you will have to calculate the figure for yourself at various points).
Add Three New Layers
Create Three new layers, label one Yin, one Yang, and the other whole. You should now have four layers, one for the background and the three you have just created.
Select three colors -> Fill each of the three layers
Fill each layer you have just created with an appropriate colour, the selection is up to you but choosing distinct colours may make it easier to see the effect.
Filters -> Map -> Map Object -> Sphere * 3
On each of the coloured layers, map a sphere object, turn off the lighting (no light), and set the background to transparent. Each of the three layers should now contain a sphere (circle) of the same size and centered on the layer (and image), the spheres (circle) are 400 x 400, with a top row of 199, and a bottom row of 599.
Layer -> Transparency -> Alpha to Selection
Select -> Save to Channel
Select -> Invert
Select -> Save to Channel
Select -> Invert
Select -> Shrink Selection by 14px
Select -> Save to Channel
Select one of the circle layers, and alpha to selection, this should give you a selection that contains all the circles size. The operations above are useful to get right, they are used in many elements of design work. Basically, the trick is to create a number of channels that we can then use as masks. They help in allowing use to maintain the shape, whilst applying effects, and to create the cutouts. Label the channels appropriately and you will it easier to follow later.
Channel Dialog -> Right Click Whole Channel -> Channel to Selection
Right Click Inner Channel -> Subtract from Selection
Select -> Save to Channel
Select -> Invert
Select -> Save to Channel
Here we make a whole ring, which is the whole selection minus the internal. The inverse of this ring is also taken. Have a play with the various channels you have created, but do take note that you have to select a layer when you want to make a change to the image, the channels are themselves editable. You need to be comfortable with channels for the next step.
Channel Dialog -> Right Click Whole Ring Inverse -> Channel to Selection
Layer Dialog -> Select Whole Layer
Edit -> Clear
The channel is used to bring back the selection, which we use to cut out the whole. The Yin layer should now be visible.
Channel Dialog -> Right Click Internal -> Channel to Selection
Select -> Inverse
Select -> Channel to Selection
Layer Dialog -> Select Yin
Edit -> Clear
Layer Dialog -> Select Yang
Edit -> Clear
Now we cut the Yin the Yang to fit the whole ring. The Ring is 14 pixels in size, so the Yin and Yang tops are now 199 + 14 = 213px and the bottoms are 599 - 14 = 585px. The diameter of the Yin and Yang circles are now 400 - 28px = 372px which is confirmed with 585 - 213 = 372px. There is not much to see at this step, expect perhaps to zoom up and have a look at the point Yin meets the rim, in a later step we might make that join a little more blended. Another channel has crept in that could have been created earlier, label it as Internal Inverse.
Layers Dialog -> Select Yin
Layers Dialog -> Duplicate (Yin copy)
Layers Dialog -> Select Yang
Layers Dialog -> Duplicate (Yang copy)
Layer -> Scale Layer -> 50% height 50% width
Layers Dialog -> Select Yin copy
Layer -> Scale Layer -> 50% height 50% width
Yin and Yang layers are copied and the copies are reduced in size by a ½ (half). The circles should remained centered in the image.
Layer Dialog -> Select Yin Layer
Layer -> Layer Boundary Size -> 50% width (100% height)
Layer Dialog -> Select Yang Layer
Layer -> Layer Boundary Size -> 50% width (100% height) -> Move Layer Full Left
The Yin and Yang can now be cut in half, using the layer boundary size. technique. The Yin layer is on the left and the Yang on the right, so you need to move the Yang layer full left to keep the right section. Break the linked width and height values prior to making the change (and select percent).
Ruler -> Move Guide to 213px row
Ruler -> Move Guide to 585px (587px) row
Layer Dialog -> Select Yin copy Layer
Move Tool -> Layer -> Move Yin copy to Snap to Top Guide
Layer Dialog -> Select Yang copy Layer
Layer Dialog -> Move Yang copy above Yin Layer
Move Tool -> Layer -> Move Yang Copy to Snap to Bottom Guide
This is a by eye type of procedure - it seems that the map to object filter may have created a circle a little larger than 800 / 2 = 400px in diameter, so zoom up and make sure the guides match the highest and lowest points of the Whole Ring. Also make sure snap to guide is on in the View menu if you are going to use the mouse. I tend to use the cursor keys to move the layers, if you have a really steady hand then the mouse will work, but you don't want to move in the horizontal only in the vertical. Pay attention to the center of the symbol, you want to create a smooth join there. Play with layers until you are happy with the effect. Turning the visibility of the guides off and on may help as well. The Yin Yang basic shape should now be visible.
Layer Dialog -> Duplicate Yin and Yang copy layers
Layer -> Scale copy#1 layers to 25%
Layer -> Layer to Image Size both copy#1 layers
Flip Tool -> -> Select Vertical -> Flip copy#1 layers on the vertical
Layer Dialog -> Move Yang copy#1 layer above Yin copy layer
The small Yin in Yang and Yang in Yin circles are created, scaled to ¼ (quarter), layers sized to image and then flipped in the vertical, adjust to show. And that is the Yin Yang image. There is a final step though, which is to combine the layers to segment Yin and Yang as actual shapes, this then allows us to apply more effects, especially moulding ones.
Layer Dialog -> Select Yin layer -> Layer -> Alpha to Selection
Select -> Save Channel (Yin0)
Layer Dialog -> Select Yin copy layer -> Layer -> Alpha to Selection
Select -> Save Channel (Yin1)
Layer Dialog -> Select Yang copy layer -> Layer -> Alpha to Selection
Select > Save Channel (Yang1)
Channel Dialog -> Channel to Selection Yin0
Channel Dialog -> Add to Selection Yin1
Channel Dialog -> Subtract from Selection Yang1
Select -> Save Channel (Yin)
Layer Dialog -> Select Yang layer -> Layer -> Alpha to Selection
Select -> Save Channel (Yin0)
Channel Dialog -> Channel to Selection Yang0
Channel Dialog -> Add to Selection Yang1
Channel Dialog -> Subtract from Selection Yin1
Select -> Save Channel (Yang)
Layer Dialog -> Select Yin Copy layer and move it above Yin layer -> Merge Down
Layer Dialog -> Select Yang Copy Layer and move it above Yang layer -> Merge Down
Channel Dialog -> Yin -> Channel to Selection
Select -> Inverse
Layer Dialog -> Select Yin layer
Edit -> Clear
Channel Dialog -> Yang -> Channel to Selection
Select -> Inverse
Layer Dialog -> Select Yang layer
Edit -> Clear
Phew, well it took me a lot longer to type it then to do it. This type of technique is useful to have a firm grip on; you can use it many places. It is sort of a constructive solid geometry style of shape making; used in environments such as povray. The Yin and Yang symbol is now ready to have effects, added to it. You have a number of channels already made, you might wish to keep the inverse of Yin and Yang that you created. The final results of the image, layers and channel dialogs are shown below.

Conclusion

I added a background color, then I went to town on the various layers and channels, duplicating, and creating various effects, until I had the logo you should see at the top of the page and just below. Unfortunately, most of the actions taken read a little like step 13, so I decided to leave them out and not muddle the tutorial.

Yin Yang Logo

Depending upon comments, I might add the techniques used to create this final version as a separate tutorial. The technique (moulding) is also something that can be used across the board.

The tutorial starts off quite gentle and then gathers speed, that was intentional on my behalf, you may wish to go over the more involved steps a few times until they are second nature. Whilst it is quite relaxing building the Yin Yang shape the real value is in understanding the techniques so they can be applied to a wide variety of art working tasks.

Add a Comment - Concept Visor - CyberVisor

Bookmark and then activate Concept Visor to comment on this page, or any other page on the web. The Concept Visor will also allow you to view comments made on the page.

Concept Visor

Links

If you have found this site useful please consider linking to it @ http://www.poisedsolutions.com/yinyang/

Social BookMarks

Site Designed & Developed by Poised Solutions

If you wish to discuss hiring Poised Solutions for an information technology project please get in contact
or visit the main PoisedSolutions IT Consultancy Website.