homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
Banner that cycles/Fades through multiple images
guerillaSEO




msg:4400511
 2:13 pm on Dec 22, 2011 (gmt 0)

Hi Guys,

I'm a complete ignorant when it comes to anything to do with web graphic design.. What I do know is that I want to create a banner for my website.

I want it to cycle through 5 or so images with a fade effect like you would find in say an online slideshow, I then want my websites title to lay over said images.

I'm guessing i'll need to make a high quality gif or somthing of the like.

I have photoshop installed, but as I mentioned before, I'm not exactly competent.

Thanks for any help!

Luke.

 

rocknbil




msg:4400557
 5:05 pm on Dec 22, 2011 (gmt 0)

1. Graphics editor (GIMP is free) - you can use any image format (.jpg, .gif, .png)
2. A little knowledge of HTML
3. A little knowledge of CSS
4. Even less knowledge of Javascript

Create all your images at the same size and include them in a page. You can use any image editor, all you need to do is size them at 700 pixels wide or so (not much larger than that.)

The most simple slide show solution: look at some of the jQuery (javascript) slide shows. Include the jQuery library in your document and try one of them.

They are very easy to understand and all of them have examples. Most of them use absolute positioning, which basically means it constructs the slide show in "layers." The layers are assigned by the CSS property z-index, where the higest number is the "topmost layer"

z-index:1000

z-index: 5000

Then you just position your heading layer on top of the slide show.

Marshall




msg:4400600
 6:32 pm on Dec 22, 2011 (gmt 0)

Check Hot Scripts [hotscripts.com] for free banner and slideshow scrips.

Marshall

thecoalman




msg:4403011
 8:00 pm on Jan 2, 2012 (gmt 0)

I'm guessing i'll need to make a high quality gif or somthing of the like.


You can use an animated .gif and avoid all the CSS, JS etc but it's not something I'd recommend. The file size is going to be much larger and if you wanted to do a fade effect absolutely huge. If the images are photo type image then the quality suffers too. If you want to try it here's some basic directions.

You'd create your images then save as .gif, not hugely important at this point but the following conversions should have little impact on them and you can allow the the photo software to control final quality. Import into some video software like that will allow you to export custom sized video using lossless format, Video Studio used to allow this and has fee 30 day trial last I checked. Set a transition between each image. Set the last image the same as the first and halve their display times.

Export the video using lossless format like uncompressed AVI and Import into Virtualdub which will allow you to export animated gif.

There's better ways to go about this but this is easiest method I can think of. You can do it all in Virtualdub but that's a bit of learning curve. Ultimately your best bet is to avoid it altogether because of the file sizes.

As far as image formats go you can break them down for what the use is:

gif pro's: great for anything that does not need a lot of color, has sharp edges you want to maintain like text, and large areas of the same color. For example screen shots of web pages like this one. You'll keep the edges of the text as sharp as the original and get much smaller file size than even .jpg. Gif also supports animation and transparency. They are lossless and can be opened and resaved without any effect on quality assuming you do not screw up the color pallette.

Cons: Only 256 colors and not very good for photo type images and when used with photo type images the file sizes balloon to much larger ones than using .jpg. The transparency is either fully transparent or not, you may have in the past seen icons with white fringe on dark background? That's because the icon was designed for light colored background.

jpg pros: Great for photo type images and can produce very small file sizes for them. The quality is adjustable. Higher quality gives you larger file sizes, lower quality gives you smaller file sizes.

jpg cons: Only good for photo type images. :P They are lossy images so opening and resaving them will result in resampling. You image will suffer if you do this a lot especially along edges of sharply contrasting color.

Png pros: Great for photos or any type of content really, the format is lossless. One really nice feature about .png is alpha transparency. The color can be transparent in the full sense of the word allowing colors behind the image to partially or fully bleed through. Why that is important is because with gif's you have to match the fringe of the image to the background, change your background and all your images are worthless. Not so when using .png with alpha transparency.

png cons: Larger files than .jpg for photo type images but that is the price you pay for lossless images. Overall they are not huge and most certainly the format of the future unless something else comes along.

DarkNinja




msg:4406834
 5:17 pm on Jan 14, 2012 (gmt 0)

You can use PNGCRUSH to reduce the size of your lossless PNG's. Wikipedia has a decent entry on PNGCRUSH.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved