Dawn Pedersen. Color Theory Basics: The Traditional Color Wheel The traditional color wheel is used...

45
Color in Flash Dawn Pedersen

Transcript of Dawn Pedersen. Color Theory Basics: The Traditional Color Wheel The traditional color wheel is used...

  • Slide 1

Dawn Pedersen Slide 2 Color Theory Basics: The Traditional Color Wheel The traditional color wheel is used for paints and other pigments. Slide 3 Color Theory Basics: The Traditional Color Wheel Primary colors. Slide 4 Color Theory Basics: The Traditional Color Wheel Secondary colors: two primaries mixed together Slide 5 Color Theory Basics: The Traditional Color Wheel Tertiary color: a primary plus a neighboring secondary Slide 6 Color Theory Basics: Color Harmonies Complementary colors are two colors which sit opposite each other on the color wheel. Slide 7 Color Theory Basics: Color Harmonies Complementary colors are often used together in a composition to create excitement. Each color in the pair makes the other seem more vibrant. Slide 8 Color Theory Basics: Color Harmonies Analogous colors are those which sit next to each other on the color wheel. Slide 9 Color Theory Basics: Color Harmonies A triad is a group of three colors which are equally distant from each other on the color wheel. Slide 10 Color Theory Basics: Emotional Content Color temperature refers to whether a color feels warm or cool. Slide 11 Color Theory Basics: Emotional Content Red: passion, anger, stop, battle, love, blood Orange: creativity, invigoration, unique, energy Yellow: joy, intellect, caution, cowardice, youth Green: fertility, money, healing, success, growth Slide 12 Color Theory Basics: Emotional Content Blue: knowledge, tranquility, calm, peace, cool Purple: royalty, wisdom, spirituality, imagination White: perfection, purity, wedding, clean, virtue Black: power, elegance, formality, fear, negativity, death, evil, secrecy Slide 13 Flash Color Panel The Color Panel is available through the Window menu. Slide 14 Flash Color Panel: Basic Options From the Color Panel, you can assign color to either the Fill or Stroke. Click on the Pencil icon to edit the Stroke color. Click on the Paint Bucket icon to edit the Fill Color. You can select to use solid color or a gradient for either one. More on gradients later. Stroke Fill Slide 15 Flash Color Panel: Color Models Color values in Flash are typically described in one of two formulas: RGB or Hexadecimal. RGB Hexadecimal Slide 16 Flash Color Panel: RGB Color Model RGB is the color model used on monitors. It stands for Red, Green and Blue: the primary colors of light. Slide 17 Flash Color Panel: RGB Color Model In RGB, color is calculated as a combination of R, G and B in strengths of 0 to 255. The higher the number, the more that hue is contributing to the overall color. R: 0, G: 0, B: 0 = black R: 255, G: 255, B: 255 = white R: 255, G: 0, B: 0 = red R: 0, G: 255, B: 0 = green R: 0, G: 0, B: 255 = blue Almost 16.8 million colors in RGB. Slide 18 Flash Color Panel: Hexadecimal Color Model Hexadecimal is the color model used for the Web. In hexadecimal, color is also calculated as a combination of R, G and B, but can be written in only 6 digits beginning with a pound sign (#). The numbers go from 0-9, then a-f. Each primary is described in 2 places. #000000 = R: 00, G: 00, B: 00 = black #ffffff = white #ff0000 = red #00ff00 = green Slide 19 Flash Color Panel: Alpha Alpha refers to the opacity of a color. Opacity is the opposite of transparency. 100% Alpha is a completely solid color 50% Alpha is a half- transparent color. 0% Alpha is a completely invisible color. Slide 20 Flash Color Panel: Selecting a Color To select a color from the Color Panel, click on the color swatch for either Stroke or Fill. From the pop-up menu, you can select a color swatch. You can also select No Color. To pick a custom color, click on the color wheel. Slide 21 Flash Color Panel From the Color Picker, click on a hue in the rainbow box. Then move the slider up or down for a lighter or darker color. Then click OK. Slide 22 Flash Color Panel : Selecting a Color If you want to save your custom color for later use, create a new swatch. Click on the Color Panels menu icon. Select Add Swatch. The color will be added to the Swatches panel. Slide 23 Flash Swatches Panel The Swatches Panel is available through the Window menu. Slide 24 Flash Swatches Panel As seen earlier, the Swatches are also available by clicking on the color swatch for the Fill or Stroke color. Slide 25 Flash Swatches Panel: the Panel Menu You can change the swatches selection using the Swatches Panel menu. Slide 26 Flash Swatches Panel: the Panel Menu With Add Colors you can select a new color set from the built-in Flash color sets to be added to the current colors. With Replace Colors you can select a new color set to replace the current colors. Load Default Colors reverts the swatches to the default color set. Slide 27 Flash Swatches Panel: the Panel Menu With Save Colors you can create your own color set from the current collection of swatches. With Clear Colors you can clean out all the current swatches and start from scratch. Ignore Web 216. Its an outdated collection of web-safe colors. Slide 28 Flash Color Gradients Built-in gradients can be selected from the Swatches Panel. Custom gradients can be created and edited from the Color Panel. Slide 29 Flash Color Gradients A gradient is a transition from one color to another. It can also be a transition through many colors. Flash supports linear and radial gradients. Slide 30 Flash Color Gradients: Color Stops A color stop is a place on the gradient where a color is defined. The gradient transitions from color stop to color stop. Each color stop can be any RGB color, and can have a different Alpha value. Click on a color stop to change its values. Slide 31 Flash Color Gradients: Color Stops Click-and-drag horizontally on a color stop to change its position on the gradient. Click anywhere on the gradient bar to add a new color stop. Click-and-drag a color stop away from the gradient bar to delete it. Slide 32 Flash Color Gradients: Gradient Transform Tool The Gradient Transform Tool is in the Tools Panel. It may be hidden in the fly-out menu for the Free Transform Tool. The Gradient Transform Tool allows you to resize, rotate, and change the center point for a gradient. Slide 33 Flash Color Gradients: Gradient Transform Tool To transform a gradient, click on the gradient object with the Gradient Transform Tool. There are now three control points on the gradient: Rotate Scale Center Point Slide 34 Flash Color Gradients: Gradient Transform Tool To rotate a gradient within a shape, click and drag on the Rotate control. Slide 35 Flash Color Gradients: Gradient Transform Tool To resize a gradient within a shape, click and drag on the Scale control. Slide 36 Flash Color Gradients: Gradient Transform Tool To move the center point of a gradient within a shape, click and drag on the Center Point control. Slide 37 Flash Color Gradients: Overflow Once a gradient is redrawn using the Gradient Transform Tool, there may be left-over areas within the filled shape. Overflow on the Color Panel identifies what will fill the area beyond the gradient borders. Slide 38 Flash Color Gradients: Overflow Extend extends the outer colors beyond the gradient. Reflect reflects the gradient across the gradient edge. Repeat starts the gradient over in the same direction. Slide 39 Flash Kuler Panel The Kuler Panel is available under the Window > Extensions menu. Kuler is an online community for colors and inspiration, where you can explore, create, and share color themes. Slide 40 Flash Kuler Panel Browse and search thousands of tagged and rated themes on Kuler, and download edit or use. Create and save color themes, experiment with harmony rules, and then upload your theme to share it with the community. Click the Browse button to begin. Slide 41 Flash Kuler Panel: Browsing Click the Browse button to begin browsing the color themes on kuler.com. You can search for key words. You can sort by: Highest Rated Most Popular Etc. You can filter by how recently the theme was added. Slide 42 Flash Kuler Panel: Browsing Hover over a theme to view its rating, author, and date of creation. Click on a theme to select it. Click on the black triangle on the right of the theme to access its menu: Edit This Theme Add to Swatches Panel View Online in kuler. Slide 43 Flash Kuler Panel: Edit a Theme Once youve selected Edit This Theme, the Create window opens. You can do many things here. Slide 44 Flash Kuler Panel: Create a Theme In the Create window, you can edit many aspects of a color theme. Start by selecting a Harmony Rule. Experiment with moving the control points on the color wheel. Select a new Base Color. Directly input the RGB or hexadecimal value for any color. Slide 45 Flash Kuler Panel: Create a Theme Saving a color theme: Upload your new theme to kuler.adobe.com. Add the five theme colors to your Swatches panel. Save the theme. Access your saved themes via the Browse window.