| Assignment | go to page | 1– | 2– | 3 | 4-webguide | Page Three | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Two-Dimensional Design | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Color Theory/ Web page design | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Create your Color Diagrams | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| You will be creating four more pages of diagrams. Here I will describe what the diagrams should include. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| create the Second page of your website. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| First | You can use your first page as a template. Simply change the title to Color Relativity. Then go to the file menu at the top and choose SAVE AS. Name this new page exactly the way you did in the link—yourinitials,color,2.html. (no comas.) Your previous page will remain in your site file with its own name. Now you can change everything on the page but you may want to keep the links list so that a visitor can move between pages following the same process on each page. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Page Two Diagram | Your second page will contain three 15 step gradations. The gradations will blend one color with white (tint) and then with black (shade). I | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1. | In your table, make a black cell on one end and a white cell on the other. Choose a primary color and place it in the middle. Then create an even blend mixing the color with a percentage of black toward the black side and white toward the white side. You can't add white so you will have to simulate it by reducing the amount of color by increments. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 2. | Do the same with a secondary color. And again with a tertiary color. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Page Three Diagram | Your third page will contain several diagrams which demonstrate color relativity and simultaneous and successive contrast. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1. | Make two diagrams that make one color look like two different colors. Use different colors in each. Format any way you like. An example: |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Label your diagrams to tell us what you are doing. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 2. | Make two diagrams that make two different colors look similar. (more similar) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Page Four Diagram | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1. | Create two illustrations that show how color can create the illusion of space. Arrange squares one on top of another to create the illusion of a tunnel or a deep space inside the largest square. Use the theory that cool colors recede and warm colors advance. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 2. | Then create two more illustrations that reverse the space so that the center of the squares appears to project toward the viewer. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 3. | Create a diagram that makes a cool color look warmer by contrasting it will cooler colors . Use stripes. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 4. | Create a diagram that makes a warm color look cooler by contrasting it will warmer colors . Use stripes. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Page Five Diagram | To simulate the look of transparent overlapping colors, return to Adobe Illlustrator to create an image that will be saved in the jpeg format. This image will then be placed into your web page in the same way that any image or photograph would be added to a webpage. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1. | In Illustrator, draw at least eight overlapping shapes using the rectangle tool or the elipse tool or the pen tool, or the pencil tool. Fill each shape with a different color. Do not use any stroke color. Select all the shapes and then go to pathfinder and choose divide. Then, where ever two or more shapes overlap, try to fill the area of the overlap with a color that would correspond to the mixture of the two or three colors that overlap. Once you have completed the illustration, go to file>save for the web. Under settings you should choose jpeg medium. Then save; name your image and save it to the desktop. | ![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 2. | Back on your page 5 web page, place your cursor in the cell where you want to locate the illustration. Then go to the common tab tools and click on image. Find your illustration on the desktop when the open window comes up. Select it and click on open. A warning box will ask you to copy the image into the root folder, which you should do. Then the image will appear int the table. You can then scale it to the size the you want. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| I think that's it for now. Let me know if you run into any problems with my instructions. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||