We need to create a logo for our make believe company.  Because there are a number of images with a Japanese theme in the photoshop6xfiles folder, we’re going to make a travel company called “Travel Japan.”  We’ll keep the logo simple, consisting of “Travel Japan” type,  a Rising Sun backdrop, and the Kimono Girl  image that we used earlier in the chapter.

The Travel Japan Logo

1. Create a new document in RGB mode with a transparent background that’s 350 pixels wide by 190 high.
   
   

2. We want to place the girl in the Kimono in the image so navigate your way to File/Place and browse for the kimono.ai image in the chapter007 folder.  {Click} OK and you’ll find the image “placed” in your document with a crosshair over it.  The image’s default size is perfect for our purposes so {Click} OK and it will rasterize.  The image’s Levels  are a bit off so select Image/Adjust/Auto Levels  to correct them. Place the girl off to the left hand side of the image for the time being.
   
   

3. Next we’ll place the Rising Sun in the image.  Use your Elliptical Shape  Tool to place a perfect circle in your image.  Its size should be just slightly larger than the kimono girl.  We want the Sun to appear to be rising on a misty morning so we’ll apply a Gradient Overlay to it.  {Double Click} on the circle’s Layer  to bring up the Layer Styles  dialog box.  Check the Gradient Overlay checkbox to apply it and access its options.  We want a linear Gradient at a –90 degree angle that moves from red to white.  Adjust the options and {Click} OK.
   
   

4. Next we want to add the text to the Image. Make sure the Foreground Color is black.  Select the Type Tool.  Enter “T”, font Verdana, style Bold, Size 90 pixels, Anti-Alias Crisp.  {Click} OK.  {Click} the Commit Current Edit button on the Options  Bar to finalize your work on the letter “T” and use the Type Tool  to create a letter “J” with the same settings as the “T”.
   
   

5. Add 2 new Type Layers .  Input “ravel” into the first and “apan” into the second.  The only difference between these text Layers and the last two is the size and tracking. Make the size 60 and the tracking -80.
   
   

6. Our next task is to modify the appearance of the “T” and the “J”.  Select the “T” Layer  and make the letter white.  {Double Click} on the Layer to access its Styles  options and give it a 3 pixel, black stroke  that originates from the center.  Do exactly the same for the letter “J” but in this case make its fill red instead of white.  Make sure that the red is the same as that of the red in your Rising Sun gradient.
   
   

7. For organization’s sake you might want to create a Layer  Set for the text elements.  Label it and give it a Set color.
   
   

8. Next we want to position the Text and the design elements.  Use the finished image displayed on the last page as a visual guide to “eyeball” the various elements into position.  You could, if you wanted to, use guides to precisely position the elements but in this case a slightly informal composition is what we are aiming for. 
   
   

9. Place the girl in the kimono on top of the sun disc.  Center her on the disc as best you can and place both elements in the left half of the Image Window . 
   
   

10. Make sure the “T” Layer  is sitting underneath the kimono girl and move it, in the Image Window , so it’s sitting beside her with her fan and hair slightly overlapping.
    
    

11. Place the letter “J” so it sits below and slightly to the right of the “T”.  Move the “J” Layer  above the “T” Layer so that the “J” overlaps the “T” in the Image Window .  We want the horizontal extension at the top of the “J” to sit symmetrically on top of the bottom of the “T”.  Again, use the image on the last page as a positioning reference.
    
    

12. Select the “apan” and “ravel” Layers  and position them beside their respective starting letters.  They should be centered, on the horizontal access, with the capital letters and the “l” in “ravel” should sit perfectly in line with the left vertical line in the letter “n”. 
    
    

13. Save the file as travelogo in Photoshop  format.
    
    

14. Select File/Save for Web.
    
    

15. Compress the image as a GIF with Adaptive for Palette, Diffusion for Dither, 256 for Colors.
    
    

16. You’ll notice that Photoshop  defaults to a White background behind our image.  This is the Matte  color.  To change the Matte color use the drop-down menu and select from None, Eyedropper Color, White, Black, and Other.  Other will give you the Color Picker .  You can use this to input the exact Hexadecimal value of your web page’s background to match it perfectly.
    
    

17. Check Transparency  to use the transparent properties of the Layer  to create a GIF with a transparent background.  Transparent backgrounds are useful for web pages with background patterns, images tiled together to add texture to a page.  Notice that the transparency grid reappears in the optimized version of the image.  For now, uncheck Transparency and make sure Matte  is set to White.  The optimized version should be just over 3K, making for a fast download.
    
    

18. Save the file.

Producing images for the Internet follows a particular process.  You produce the source images in RGB color and always keep an original version or copy of the source file in case of future modifications.   To prepare the file for the Internet you analyze the nature of the image.  If it’s made up of sharp edges and continuous color the GIF format is usually the preferred Compression  and file Type method.  If the image is a photograph or an image consisting of a multitude of colors with no or little pattern, JPEG is usually the preferred Compression and file Type method.

Having selected the method of Compression  you have to decide on an applicable color palette, usually Web, when using GIF Compression, and the minimum amount of colors you can use to produce an acceptable image and file size.  When using JPEG you have to decide how much Compression (Quality) you can apply to the image to produce an acceptable image and file size.

Finally, you can adjust the image size to reduce file size by {Clicking} on the Image Size Tab and inputting lower resolution values.  Place them in your HTML documents accordingly.