home *** CD-ROM | disk | FTP | other *** search
/ Chip 2003 November / Chip_2003-11_cd2.bin / ruzne / painter / PAINTE~2.cab / _D1DB7C14155B41D78B8B22BC67197AD2 < prev    next >
Text File  |  2003-03-24  |  15KB  |  277 lines
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2.   <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  4.     <meta name="GENERATOR" content="Quadralay WebWorks Publisher Professional Edition 6.0.7" />
  5.     <meta name="TEMPLATEBASE" content="Painter 8 Template" />
  6.     <meta name="LASTUPDATED" content="03/24/03 17:17:05" />
  7. <meta name="keywords" content="Web, transparent, backgrounds, , Backgrounds, transparent, GIFs, , GIF, file, format, transparent, Web, creating, animated, GIFs, , Animations, GIF, file, format, , GIF, file, format, animated, Color, reducing, number, , Web, reducing, number, of, colors" />
  8.     <title>Creating GIF Files  </title>
  9.     <link rel="StyleSheet" href="document.css" type="text/css" media="screen" />
  10.   </head>
  11.  
  12.   <body>
  13.     <script type="text/javascript" language="JavaScript">
  14.      <!--
  15.       function  WWHUpdateFavorite(ParamHREF)
  16.       {
  17.         if ((parent != null) &&
  18.             (parent.WWHelpFrameSet != null))
  19.         {
  20.           parent.WWHelpFrameSet.fUpdateFavorite(ParamHREF);
  21.         }
  22.       }
  23.  
  24.       function  WWHSyncTOC(ParamHREF)
  25.       {
  26.         if ((parent != null) &&
  27.             (parent.WWHelpFrameSet != null))
  28.         {
  29.           parent.WWHelpFrameSet.fSyncTOC(ParamHREF);
  30.         }
  31.       }
  32.  
  33.       function  WWHShowPopup(ParamContext,
  34.                              ParamLink,
  35.                              ParamEvent)
  36.       {
  37.         if ((parent != null) &&
  38.             (parent.WWHelpFrameSet != null))
  39.         {
  40.           parent.WWHelpFrameSet.fShowPopup(ParamContext, ParamLink, ParamEvent);
  41.         }
  42.       }
  43.  
  44.       function  WWHHidePopup()
  45.       {
  46.         if ((parent != null) &&
  47.             (parent.WWHelpFrameSet != null))
  48.         {
  49.           parent.WWHelpFrameSet.fHidePopup();
  50.         }
  51.       }
  52.  
  53.       function  WWHClickedPopup(ParamContext,
  54.                                 ParamLink)
  55.       {
  56.         if ((parent != null) &&
  57.             (parent.WWHelpFrameSet != null))
  58.         {
  59.           location.href = parent.WWHelpFrameSet.fClickedPopup(ParamContext, ParamLink);
  60.         }
  61.       }
  62.      // -->
  63.     </script>
  64.  
  65.     <script type="text/javascript" language="JavaScript">
  66.      <!--
  67.       var  WWHelpHREF = location.href;
  68.  
  69.  
  70.       WWHUpdateFavorite(WWHelpHREF);
  71.      // -->
  72.     </script>
  73. <a name="pagetop">    
  74.     <table border="0">
  75.       <tr>
  76.         <td width="23">
  77. <a href="21-Web8.html">
  78.       <img alt="Previous Document" border="0" src="images/prev.gif" width="23" height="21" />
  79.     </a>
  80.         </td>
  81.         <td width="23">
  82. <a href="21-Web10.html">
  83.       <img alt="Next Document" border="0" src="images/next.gif" width="23" height="21" />
  84.     </a>
  85.         </td>
  86.       </tr>
  87.     </table>
  88.    </a>
  89.  
  90. <table border="0">
  91.       <tr width="400"></tr>
  92.       <tr width="400"></tr>
  93.       <tr width="400"></tr>
  94.       <tr width="400"></tr>
  95.       <tr width="400"></tr>
  96.       <tr width="400"></tr>
  97.       <tr>
  98.         <td width="40"></td>
  99.         <td width="400">
  100. <li class="Bulleted"><a href="21-Web9.html#1008832">Creating GIF Files</a></li><br/>
  101.  
  102. <li class="Bulleted"><a href="21-Web9.html#1008851">Creating Transparent GIFs</a></li><br/>
  103.  
  104. <li class="Bulleted"><a href="21-Web9.html#999899">Creating Animated GIFs</a></li><br/>
  105.  
  106. <li class="Bulleted"><a href="21-Web9.html#1008861">Reducing the Number of Colors </a></li><br/>
  107. </td>
  108.       </tr>
  109.     </table>
  110.  
  111.   <blockquote>
  112.         <h2 id="1008832" class="Heading1">
  113.   <a name="1008832"> </a>Creating GIF Files
  114. </h2>
  115.  
  116.  
  117.  
  118. <h3 id="1008851" class="Heading2">
  119.   <a name="1008851"> </a>Creating Transparent GIFs
  120. </h3>
  121.  
  122. <p id="999851" class="Body">
  123.   <a name="999851"> </a>The ability to define transparent areas in a GIF file is used everywhere on the Web today. If designed correctly, GIFs with transparent areas are very effective when displayed over background colors or tiles.
  124. </p>
  125. <p id="1001324" class="AnchorGraphic">
  126.   <a name="1001324"> </a><div align="left"><img src="images/21-Weba10.jpg" height="163" width="216" border="0" hspace="0" vspace="0" />
  127. </div>
  128. </p>
  129. <p id="1001325" class="Caption">
  130.   <a name="1001325"> </a><i>A transparent GIF (the airplane) is displayed over a blue background image.
  131. </i></p>
  132. <p id="999860" class="Body">
  133.   <a name="999860"> </a>With the increasing use of Cascading Style Sheets (CSS), Dynamic HTML (DHTML), and layers, there are even more possibilities for using transparency to your advantage. 
  134. </p>
  135. <p id="999864" class="Body">
  136.   <a name="999864"> </a>In Corel     Painter, the method of defining transparency during GIF export is to define the transparent areas based on the current selection. When your image contains layers, you will often want the edges of the floating elements to define the transparent areas. For more information about layers, refer to <a href="14-Layers2.html#1003215">"Using Layers and Layer Masks"</a>. 
  137. </p>
  138. <p id="1005884" class="Body">
  139.   <a name="1005884"> </a>When saving to the GIF file format, you can reduce the number of colors, which translates into smaller files. For more information about reducing the number of colors, refer to <a href="21-Web9.html#1008861">"Reducing the Number of Colors"</a>. 
  140. </p>
  141. <p id="1005901" class="Body">
  142.   <a name="1005901"> </a>For information about other options available for saving GIF files, refer to <a href="03-Basics5.html#999738">"Saving GIF Files"</a>. 
  143. </p>
  144. <h5 id="999866" class="ToDoHead">
  145.   <a name="999866"> </a>To create a transparent GIF from a layer or group of layers
  146. </h5>
  147. <ol type="1">
  148.   <li class="SmartList1" value="1"><a name="999867"> </a>To output transparency in a GIF, you need an active selection. Select a layer or group of layers. </li>
  149.   <li class="SmartList1" value="2"><a name="999871"> </a>On the Layers palette, click the palette menu arrow and choose Drop and Select. </li>
  150. <p id="999872" class="ToDoBody">
  151.   <a name="999872"> </a>The layers are merged with the canvas and a selection containing the contents of the dropped layers is made. 
  152. </p>
  153.   <li class="SmartList1" value="3"><a name="1005906"> </a>Choose <span style="color: #000000;  font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">File menu > Save As</span>. </li>
  154.   <li class="SmartList1" value="4"><a name="1005913"> </a>In the Save dialog box, choose the GIF file format, specify a location and filename, and click Save. </li>
  155.   <li class="SmartList1" value="5"><a name="999876"> </a>In the Save As GIF Options dialog box, enable the Output Transparency check box to make the selected area the only part of the canvas displayed on your Web page.</li>
  156.   <li class="SmartList1" value="6"><a name="1005827"> </a>Enable one of the following options:</li>
  157. </ol>
  158.   <ul>
  159.     <li class="Bulleted2"><a name="999877"> </a><span style="color: #000000;  font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Background is WWW Gray</span> sets the transparent color to 75% gray (the default background color of the Netscape Navigator browser).</li>
  160.     <li class="Bulleted2"><a name="999878"> </a><span style="color: #000000;  font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Background is BG Color</span> sets the transparent color to the secondary color on the Colors palette. Note that this setting does not refer to the HTML page's background color.</li>
  161.   </ul>
  162. <ol type="1">
  163.   <li class="SmartList1" value="7"><a name="999882"> </a>In the Preview window, verify that the selected area is correctly masked and that the transparent area is correctly positioned. Transparent areas are designated with a grid.</li>
  164. <p id="1005846" class="ToDoBody">
  165.   <a name="1005846"> </a>If necessary, drag in the Preview window to view all parts of the image.
  166. </p>
  167.   <li class="SmartList1" value="8"><a name="1002807"> </a>Choose one of the following imaging methods:</li>
  168. </ol>
  169.   <ul>
  170.     <li class="Bulleted2"><a name="1002810"> </a><span style="color: #000000;  font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Quantize to Nearest Color</span> causes Corel     Painter to look at each pixel and pick the nearest color. This is useful when the image you are saving has broad areas of a single color. </li>
  171.     <li class="Bulleted2"><a name="999891"> </a><span style="color: #000000;  font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Dither Colors</span> causes Corel     Painter to apply a stippled effect to the colors chosen to generate a more accurate, less banded result. Unfortunately, Dither Colors can reduce the effectiveness of GIF file compression. </li>
  172.   </ul>
  173. <table border="0" width="90%" cellpadding="5" cellspacing="0">
  174.   <tr valign="top">
  175.     <td>
  176.       <img src="images/nicon.gif" alt="Note" width="16" height="16" />
  177.     </td>
  178.   </tr>
  179. </table><ul>
  180.   <li class="SmartList1"><a name="1011478"> </a>The RIFF format contains data about your image that is lost when you convert it to GIF or JPEG. If you want to edit the file later, save a RIFF copy before saving to the GIF or JPEG file format.</li>
  181. </ul>
  182. <h3 id="999899" class="Heading2">
  183.   <a name="999899"> </a>Creating Animated GIFs
  184. </h3>
  185.  
  186. <p id="999903" class="Body">
  187.   <a name="999903"> </a>Corel     Painter can open a QuickTime movie, which can be painted on, then saved as an animated GIF. Additionally, you can create a new movie or animation from scratch in Corel     Painter and save it as an animated GIF, QuickTime, or Audio/Video Interleaved (AVI) movie. 
  188. </p>
  189. <p id="1005775" class="Body">
  190.   <a name="1005775"> </a>For information about creating movies, refer to <a href="23-Video5.html#1005663">"Creating a Movie"</a>. For information about creating and exporting animated GIFs, refer to <a href="23-Video11.html#1000016">"Animations for the World Wide Web"</a>. 
  191. </p>
  192. <h3 id="1008861" class="Heading2">
  193.   <a name="1008861"> </a>Reducing the Number of Colors 
  194. </h3>
  195.  
  196. <p id="1008862" class="Body">
  197.   <a name="1008862"> </a>Web designers are always seeking a careful balance when creating graphics for the Web. Artwork and imagery must be as rich and vibrant as possible while remaining small and easily downloadable. 
  198. </p>
  199. <p id="1008863" class="Body">
  200.   <a name="1008863"> </a>One way of keeping an image's file size small is to reduce the number of colors used to create that graphic element. Reducing the number of colors used reduces file size and, therefore, download time. 
  201. </p>
  202. <p id="1008864" class="Body">
  203.   <a name="1008864"> </a>A Web artist may end up saving multiple versions (varying in the number of colors used) of the same graphic element. These versions must then be placed on a page, loaded to the page, and viewed to determine if the quantity of colors used is acceptable. This whole process can be time- consuming and confusing. 
  204. </p>
  205. <p id="1008868" class="Body">
  206.   <a name="1008868"> </a>In Corel     Painter, you can make this decision during the process of saving the image to GIF format, by using the Preview window on the GIF Save As dialog. 
  207. </p>
  208. <h5 id="1008869" class="ToDoHead">
  209.   <a name="1008869"> </a>To visually reduce the number of colors
  210. </h5>
  211. <ol type="1">
  212.   <li class="SmartList1" value="1"><a name="1008870"> </a>Choose <span style="color: #000000;  font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">File menu > Save As</span> and name your image file. </li>
  213.   <li class="SmartList1" value="2"><a name="1008871"> </a>Choose the GIF file format, and click Save.</li>
  214.   <li class="SmartList1" value="3"><a name="1008878"> </a>Click OK to dismiss the layer warning, if displayed. </li>
  215.   <li class="SmartList1" value="4"><a name="1008880"> </a>In the Save As GIF Options dialog box, in the Number of Colors area, choose 256 colors. </li>
  216. <p id="1008881" class="ToDoBody">
  217.   <a name="1008881"> </a>In the preview window, the image appears in 256 colors.
  218. </p>
  219.   <li class="SmartList1" value="5"><a name="1008882"> </a>Change the number of colors to 128.</li>
  220. <p id="1008883" class="ToDoBody">
  221.   <a name="1008883"> </a>In the preview window, the image appears in 128 colors. 
  222. </p>
  223.   <li class="SmartList1" value="6"><a name="1008884"> </a>Continue reducing the number of colors in the graphic until you find the minimum number of colors necessary for adequate display on your Web page.</li>
  224.   <li class="SmartList1" value="7"><a name="1008885"> </a>Choose Quantize to Nearest Color if you want Corel     Painter to look at each pixel and pick the nearest color. Choose Dither Colors if you want Corel     Painter to apply a pattern to the colors chosen to generate a more accurate, less banded result. </li>
  225. <p id="1008914" class="ToDoBody">
  226.   <a name="1008914"> </a>You can now either save the graphic element to place on the web page or return to Corel     Painter to work on the design and color balance.
  227. </p>
  228. </ol>
  229. <table border="0" width="90%" cellpadding="5" cellspacing="0">
  230.   <tr valign="top">
  231.     <td>
  232.       <img src="images/nicon.gif" alt="Note" width="16" height="16" />
  233.     </td>
  234.   </tr>
  235. </table><ul>
  236.   <li class="SmartList1"><a name="1011486"> </a>The RIFF format contains data about your image that is lost when you convert it to GIF. If you want to edit the file later, save a RIFF copy before you generate a GIF version. </li>
  237. </ul>
  238.   </blockquote>
  239.  
  240.  
  241. <table border="0">
  242.       <tr>
  243.         <td width="23">
  244. <a href="21-Web8.html">
  245.       <img alt="Previous Document" border="0" src="images/prev.gif" width="23" height="21" />
  246.     </a>
  247.         </td>
  248.         <td width="23">
  249. <a href="21-Web10.html">
  250.       <img alt="Next Document" border="0" src="images/next.gif" width="23" height="21" />
  251.     </a>
  252.         </td>
  253.       <td width="23" >
  254.           <a href="#pagetop">
  255.             <img SRC="images/BtnBacktoTop.gif" ALT="Back to Top" border="0" height="21" width="23" />
  256.           </a>
  257.       </td>
  258.       </tr>
  259.     </table>
  260.  
  261.    <div id="WWHelpPopupDIV" style="position: absolute ; z-index: 1 ; visibility: hidden ; top: 0px ; left: 0px">
  262.     <script type="text/javascript" language="JavaScript">
  263.      <!--
  264.       if ((parent != null) &&
  265.           (parent.WWHelpFrameSet != null))
  266.       {
  267.         if (document.all != null)  // Non-Netscape browser
  268.         {
  269.           document.writeln(parent.WWHelpFrameSet.mPopup.fFormat("Popup"));
  270.         }
  271.       }
  272.      // -->
  273.     </script>
  274.    </div>
  275.   </body>
  276. </html>
  277.