Created examples of Graphics


Transparent Gif

Bar

Button

Banner

Single pixle transparent gif

A tiled background square

A border background





Transparent Gif
Transparent gif


Transparent GIFs are useful because they appear to blend in smoothly with the user's display, even if the user has set a background color that differs from that the developer expected. They do this by assigning one color to be transparent -- if the web browser supports transparency, that color will be replaced by the browser's background color, whatever it may be.

  • Only one color may be selected as the transparent color.
  • All parts of the image composed of the transparent color will not appear but the background will show through in its place.
  • GIF89a is the format that supports transparency.
  • Transparency works well on line art where there is a single color surrounding the part of the image desired.
  • Transparency does not work well with most photographic images because part of the desired area may contain the same color and because the surrounding area will not in general be exactly one color.
    Back Up


    Bar
    Bar example no. 1

    Bar example no. 2

    Bar example no. 3



    Create a new image with a white background size around 500 by 10 in 16,7 million colors. Select Paint Brush tool with options: Brush Type - Normal, Size - 100, Shape - Round, Paper Texture - Lava. Chose color you want to use. The color must be very light otherwise the technique will not work well. Now sweep across the image.To give the line a more striking look, apply a Image:Special Effects: Hot Wax Coating. The line is looking good, but it is a little blurry, so we need to apply the Image: Normal Filters:Sharpen. For the final step I used NVR's 3D BW Raised #1 Filter. I used standard setting, with a Border Width 0.
    Back Up


    Button
    Button example no. 1

    Button example no. 2

    Button example no. 3

    Button example no. 4



    I found that textured bevelled button is one of most popular effect for making buttons. If you would like your own texture for button start with new image, size around 150 by 40 pixels. Use your imagination, Line Tool, Airbrush and Paint Brushes. Apply all that randomly across the image. Try to make few lines near the edges otherwise your texture will look bright at the edges later. That image looks a bit harsh. Next step will smooth the image. You can use Images:Deformation: Motion Blur...or try any other effect. If texture is too light for your button Colors:Adjust:Brightness/Contrast will help you.

    Finally I use Instant Button #1 filter. You can find that filter for Paint Shop Pro at NVR Border Mania. You need to download that filter and unzip to Paint Shop Pro directory. Start PSP and select File/Preferences/General Program Preferences. In Plugin Filters area you need to locate folder where you filter files are, then click OK. You can find that filters after that in Image/Plug-in Filters, chose Instant Button #1 and your button is ready to use.

    Back Up


    Banner
    Link to Web-O-Crats Home Page

    Slovenia on the Internet



    I found that Banners are mostly used for advertising on "Internet Link Exchange", "Net-On's Banner Exchange" or "Commomwealth Network",.... Sizes for banners are different from 400 by 40 to 450 by 70, therefore file need to be between 7k to 10k.

    Create new image size 400 by 40 with any background. You need to use your imagination and you need to know what do you want to write or draw on that banner. I used textured background and Image:Resize to right size. If you want that your banner looks like button you can use "Button Filter" Instant Button #1. I used standard settings.

    Back Up


    Single pixle tansparent gif

    Current HTML have limitations and web designers must resort to all sorts of workarounds in order to have control over the layout of pages.Single Pixle GIF is probably the most significant. Use theSingle Pixel GIF Transparent GIF to control white space.

    This paragraph uses a Single Pixle GIF to create the indent at the beginning. By using a transparent, single pixel image, with HSPACE=X and VSPACE=Y arguments in the <IMG> tag, you can position the elements on your page where you want them. The examples below will give you an idea of the differences between width/height and hspace/vspace.

    This has 5 pixels of hspace on either side.

    This has 25 pixels of hspace on either side.

    This has a width of 5 pixels.

    This has a width of 25 pixels.

    This has a width of 25 pixels and a height of 5 pixels.

    Using hspace/vspace is cleaner, since it doesn't actually scale the image, and it gives you twice as many pixels for each unit you specify.

    Back Up


    A tiled background square

    If you want to see page with this background

    The first step is to obtain a graphic. Really neat backgrounds can be made from just about any natural pattern that repeats or any random jumble of identical objects, such as candy, seashells, whatever you like. I'll use a 96x96 pixel graphic. I work at this size since I feel it's large enough to keep the background from looking too tiled while keeping the file size (and download time) small.

    One note; if you want people to READ your page, rather than just admire your background, try to minimize the contrast and edges in your background and maximize the contrast between text and background. Smooth, low contrast backgrounds with type of very different value (that is, darkness or lightness) are much easier to read against. Your users will thank you.

    Finally, the tile is saved as a JPEG, which is acceptable for a background. In order to make the JPEG as small as possible I save at the lowest possible quality. This minimizes the time that a user has to wait for your background to download before they can read the text of your page. Don't forget they're not there to look at your background!

    Back Up


    A border background


    If you want to see page with this background

    I opened new image 1201x95 with white background. I used Paint Brushes with different colors and made colorful spots at left edge. You can use use also different filters but first you must select area and Colors:Increase Color Depth to 16 Million colors

    Another way:

    Open new image size 123 by 82. That will be your border, so you can decorate it or draw it however you like. Just fill the window to edges. Then Image:Rotate the image left for 90 degrees. Select the entire window Selections:Select All and copy Edit:Copy or with CTRL+C.

    Open new image size 600 by 123 and hit CTRL+E (to paste transparent selection). Now you need to put that smaller floating image at left edge.

    Back Up


    Page created by Aleksandra M Kavs as part of Week 3 Homework Assignment
    Back
    to Our Demonstration Links for Week 3


    This page hosted by Geocities Get your own Free Home Page