1 / 45

Color in Flash

Color in Flash. Dawn Pedersen. Color Theory Basics: The Traditional Color Wheel. The traditional color wheel is used for paints and other pigments. . Color Theory Basics: The Traditional Color Wheel. Primary colors . Color Theory Basics: The Traditional Color Wheel.

beth
Download Presentation

Color in Flash

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Color in Flash Dawn Pedersen

  2. Color Theory Basics: The Traditional Color Wheel • The traditional color wheel is used for paints and other pigments.

  3. Color Theory Basics: The Traditional Color Wheel • Primary colors.

  4. Color Theory Basics: The Traditional Color Wheel • Secondary colors: two primaries mixed together

  5. Color Theory Basics: The Traditional Color Wheel • Tertiary color: a primary plus a neighboring secondary

  6. Color Theory Basics: Color Harmonies • Complementary colors are two colors which sit opposite each other on the color wheel.

  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.

  8. Color Theory Basics: Color Harmonies • Analogous colors are those which sit next to each other on the color wheel.

  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.

  10. Color Theory Basics: Emotional Content • Color temperature refers to whether a color “feels” warm or cool.

  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

  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

  13. Flash Color Panel • The Color Panel is available through the Window menu.

  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 theStroke 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

  15. Flash Color Panel: Color Models • Color values in Flash are typically described in one of two formulas: RGB or Hexadecimal. RGB Hexadecimal

  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.

  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 thathue 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.

  18. Flash Color Panel:Hexadecimal Color Model • Hexadecimalis 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

  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.

  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 colorswatch. • You can also select NoColor. • To pick a custom color,click on the color wheel.

  21. Flash Color Panel • From the Color Picker, click on a hue in the rainbow box. • Then move theslider up or downfor a lighter ordarker color. • Then click OK.

  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 Panel’smenu icon. • Select Add Swatch. • The color will be added to theSwatches panel.

  23. Flash Swatches Panel • The Swatches Panel is available through the Window menu.

  24. Flash Swatches Panel • As seen earlier, the Swatches are also available by clicking on the color swatch for the Fill or Stroke color.

  25. Flash Swatches Panel: the Panel Menu • You can change the swatches selection using the Swatches Panel menu.

  26. Flash Swatches Panel: the Panel Menu • With Add Colors… you can selecta new color set from the built-inFlash color sets to be added to thecurrent colors. • With Replace Colors… you can select a new color set to replace thecurrent colors. • Load Default Colors reverts theswatches to the default color set.

  27. Flash Swatches Panel: the Panel Menu • With Save Colors… you can create your own color set from the currentcollection of swatches. • With Clear Colors… you can cleanout all the current swatches andstart from scratch. • Ignore Web 216. It’s an outdatedcollection of “web-safe” colors.

  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.

  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.

  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 adifferent Alpha value. • Click on a color stop to change its values.

  31. Flash Color Gradients: Color Stops • Click-and-drag horizontally on a color stop to change itsposition on the gradient. • Click anywhere on the gradient bar to add a newcolor stop. • Click-and-drag a color stopaway from the gradient barto delete it.

  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.

  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

  34. Flash Color Gradients: Gradient Transform Tool • To rotate a gradient within a shape, click and drag on the Rotate control.

  35. Flash Color Gradients: Gradient Transform Tool • To resize a gradient within a shape, click and drag on the Scale control.

  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.

  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.

  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.

  39. Flash Kuler Panel • The Kuler Panel is available under the Window > Extensions menu. • Kuler is an online community forcolors and inspiration, where youcan explore, create, and sharecolor themes.

  40. Flash Kuler Panel • Browse and search thousands oftagged and rated themes on Kuler, and download edit or use. • Create and save color themes, experiment with harmony rules,and then upload your theme toshare it with the community. • Click the Browse button to begin.

  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 thetheme was added.

  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.

  43. Flash Kuler Panel:Edit a Theme • Once you’ve selected Edit This Theme, the Create window opens. • You can do many things here.

  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.

  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 yourSwatches panel. • Save the theme. • Access your saved themes via the Browse window.

More Related