Now: Tutorial for Web and Software Design > Flash > Flash Articles > Flash Content
> Pictures for the Web [Bookmark it]
Pictures for the Web

There are many ways of getting pictures for your web page or Flash file, the most simple is to scan an image. You can also get images from the web as there are millions out there. This tutorials covers scanning and copying images from the web. These will be Bitmap images (pictures which are made of thousands of dots of colour), not Vector images, which are made up of mathematical co-ordinates.

Bitmap versus Vector

Flash can handle either type of picture. Bitmap images (such as Gif and Jpeg) are larger and less flexible that Vector based pictures. The advantage of Bitmaps is that they are easy to create or get on the Net. The disadvantage is that they are large (in file size) to download, so they slow down your web page or Flash movie. Vector images are tiny in comparison but are more difficult to create. Anything you draw in Flash is a Vector image. You can also create Vector images in Macromedia Freehand, Adobe Illustrator or CorelDraw. These are called Graphics Programs or Drawing Programs. You can create Bitmap images in Adobe PhotoShop.

Scanning

It is difficult to write a tutorial for scanning and saving pictures to the web as every scanner is different as is every image editor. Below is an explanation of what steps you need to follow. They are the same for every scanner and picture editing software, but of course the buttons and names for things may vary.

  1. Open Adobe Photoshop or similar image editing software.
  2. Place your photo in the scanner and close the lid. It is worth noting that you can put anything in a scanner including 3D objects. If something doesn't fit you can normally just pull the lid straight off a scanner.
  3. In Photoshop choose File > Import > TWAIN_32 (it may also say the name of the scanner).
  4. The scanner should preview your picture. If it does not, click the preview button.
  5. Place your cursor near the corner of the picture and drag your mouse diagonally across the picture to draw a box around the picture. The box may be adjusted with the handles on the sides and corners. This sets the area to be scanned.
  6. Adjust the color settings according to whether your image is color, grayscale, or black and white.
  7. Important: Set the resolution to 72dpi (dots per inch). Do not scan at any other resolution for the web. Increasing the resolution does not increase the visible quality of the picture as maximum screen resolution is 72dpi.
  8. Set the scale of the image. 100% equals the same size as the original picture, 50% equals half size. Remember for the web small is beautiful.
  9. There may be other tools to adjust contrast, brightness or other settings.
  10. When you have finished with all the settings click on the scan button. The scanned image will be placed into PhotoShop. If you cannot see the picture close the scanning software.

Note: If you are scanning to email a picture set the resolution to 72dpi, but if you are printing a picture set it to 150dpi.

Scanning from Printed Pictures

Scanning from printed pictures is never as good as photos because they are printed using dots and the dots show.

If you are scanning from a magazine or paper which is printed on both sides, the scanner usually picks up the print from the reverse side as well as the front. Placing something black behind the magazine page usually resolves this problem.

Scale

Scan small areas of objects at a very high scale such as 1000% or more (depends on the scanner) to create interesting textures. Use these images as backgrounds on web pages.

Saving your Picture for the web (or email)

You may wish to edit the picture before you save it. When you are ready to save there are two formats to choose for the web. Either Jpeg (JPG) or GIF. Jpeg is usually better for photos or pictures with textures and Gif is better for pictures with areas of flat colour such as text or logos. Use only these formats as they compress the file, which means that file size is small (not the picture). The more you compress a file the lower the quality but the faster it loads onto the web page. You need to make a compromise between loading time and picture quality. Compressing a file is also known as 'Optimizing'. Don't be fooled by the up beat jargon, optimizing a file reduces the quality! When you are ready to save do the following:

  1. Select File > Save for Web.
    If you do not have this option choose File > Save As and select either gif or jpeg.
  2. Choose one of the following settings:

    JPEG has a scale of 0 to 100% quality. The lower the number the lower the quality of the picture and the smaller the file size, which downloads faster. Don't be afraid to set a picture to 0. Good software, such as PhotoShop, will show you what the picture looks like at different settings and show the download time and file size.

    GIF has a scale of 2 to 256 colours. The lower the number of colours that you set the lower the quality and quicker the loading time.

Note: Small is beautiful on the web. Don't make images more than 20KB unless it is very important. If possible make them less than 10KB. 20KB takes about 5 - 8 seconds to load on a standard modem. It may not sound very much but what if you have a dozen images on the page?

Jargon: 10K and 10KB are the same thing - 10 Kilo Bytes.

Other Options: Progressive and Interlace

An option for both GIF's and JPEG's is to have a rough picture download before the whole file comes across. This gives your audience something to look at while they're waiting. They don't load any faster than regular images, but at least the viewer can quickly get an idea of what's coming. GIFs can be interlaced, which means that every other line gets drawn before the browser fills in the missing lines. Progressive JPEGs serve a similar function.

Other Options: Transparency

A GIF can have part of the picture invisible which lets the page background show through. You pick a colour in your GIF and have that colour become transparent when the image appears on a web page so the page's background shows through.

Note: In PhotoShop, if your original psd (PhotoShop Document) does not have anything transparent (before you go to File > Save for web) you cannot use this option.

Web Pictures

If you want to use a picture that you find on the web right click (Mac Ctrl click) and select save. Beware of copyright. It is always better to ask first. There are also free clip art and picture libraries on the Net. You can search on Google for images. Look for the image tab above the search box. I don't know if the Google images are copyrighted?

Getting Pictures into Flash

To get a picture into Flash simple copy and paste the drawing into Flash. Alternatively use File > Import, in the Flash program.

Note: It's ok to copy and paste into Flash, but never do this in a web page that you are creating. Always save the file and then insert (or import) the picture onto the page. A picture is not part of a page but is a link, the web page needs to know where the source file is. If you copy and paste there is no source file!

Have fun with your pictures!


[Bookmark][Print] [Close][To Top]
  • Prev Article-Flash:

  • Next Article-Flash:
  • Related Materias
    Effects on Animations
    Introduction to ActionScri
    Examples of ActionScript 2
    Spinning Wheels
    Working with Objects
    Attaching Movie Clips usin
    Graphics in Flash
    Snow Effect With Wind
    Introduction to Flash 8
    Rotating Objects in Flash
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial