Infect The System

Your source for everything web

Archive for the ‘Web Design’ Category

Create a Large Web 2.0 Download Button

Have you been noticing those large download buttons popping up everywhere over the last year or so? I sure have, they are really eye catching and in your face. It’s next to impossible to ignore them, and they get the point accross.

I just recently started adding some these buttons to my site to increase downloads, and I think it’s working so far! Anyway, after I designed mine I decided to to write a tutorial blog about it, and give away the resulting file that I create.

Here is the final result that we will create in this tutorial:

download-button-final (more…)

  • 0 Comments
  • Filed under: Web Design
  • Top 5 Best CSS Organizational Tips

    icon-cssBeing a web designer, with a possible light case of ADD, i noticed that in the past I had used a different organizational method for my css files on almost every website I built. Hell, in some cases there was no organization what-so-ever.

    As is often the case when you repeat a task over and over, I got better at organizing my files to make them easier for me to build and edit. I am going to share some of my organizational tips with you here today, and hopefully they will save you some time in the long run. (more…)

  • 4 Comments
  • Filed under: CSS, Web Design
  • 6 FREE Web 2.0 Badges with PSD Source Files

    After yet another long break I’m back to give away even more free stuff!

    This time I have 6 FREE Web 2.0 style badges up for grabs. But wait, why bother only giving you PNG files when I could give you the original source PSD files so you have full control over these badges. (more…)

    Web 2.0 Gradient Buttons

    Need some Web 2.0 style buttons? So did I, so I made a few different versions for the redesign of my website ITS Net Services. I only ended up using 1 of them, so I figured I might as well give the rest away.

    They all come in 1 Photoshop file and include all the buttons separated in their own folders.
    (more…)

    20 Free CSS Containers

    I’m back again with more FREE CSS Containers to download. Unlike my previous set of FREE Content Boxes, these boxes were designed to be able to stretch as wide as need be. Simply adjust the size of the container css value to the width you need, or remove it completely to have it auto adjust its width. I have also remade the original boxes in this auto stretch way.
    (more…)

    How To Prepare for a Web Design

    Sometimes preparing for a web design is the most time consuming AND the most important. There are so many ideas floating around, that you better be quick to catch them while they are fresh. I have compiled a list of some of the most important processes when preparing for a web design.
    (more…)

  • 3 Comments
  • Filed under: Web Design
  • FREE CSS Content Boxes

    I have created a selection of FREE to download CSS Content Boxes. These were designed to be used for side bar areas, but if you know your photoshop decently enough you can easily modify the headers to stretch as wide as you need. These CSS Content Boxes are all 100% XHTML & CSS Validated.

    Black Content Box

    DOWNLOAD

     

    Blue Content Box

    DOWNLOAD

    Free CSS Content Box :: Black   Free CSS Content Box :: Blue

       
         

    Green Content Box

    DOWNLOAD

     

    Pink Content Box

    DOWNLOAD

    Free CSS Content Box :: Green   Free CSS Content Box :: Pink
         
         

    Purple Content Box

    DOWNLOAD

     

    Orange Content Box

    DOWNLOAD

    Free CSS Content Box :: Purple   Free CSS Content Box :: Orange
         

    Colors, Color Palettes, and Patterns

    As a designer I often find myself using many of the same colors over and over. That’s not to say they aren’t a wide range of colors, but they are used more often than other colors. The amount of colors available to us designers is just about limit-less, so why do many of us find ourselves in the same position of repeatedly using the same colors?

    The answer is we become comfortable with what works for us. And when I find myself once again using comfortable colors, I go to my extensive vault of links to help myself out of a rut.

    So please enjoy my collection of links to websites with colors, color palettes and patterns. As always this list will be continually updated.

    Last Updated 1-11-08


    Kuler

    Brought to you be Adobe, this online color tool is basically a social color palette website. Quickly create harmonious color themes online. Explore, create and share color themes.


    Colour Lovers

    COLOURloversTM is a resource that monitors and influences color trends. COLOURlovers gives the people who use color – whether for ad campaigns, product design, or in architectural specification – a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.


    Color Hunters

    Create and find color palettes made from images


    Color Palette Generator

    Pretty much self explanatory


    Web 2.0 Color Palette

    Organised into 3 distinct colour groups – neutrals, muted tones and bold colours, you may recognize a few of the shades from some of your favourite Web2.0 sites.


    Squidfingers

    This is just a site with tons of free patterns to download. I wouldn’t say these are Web 2.0 style patterns, but they are pretty good, and you just might be able to find some uses for them.


    GenoPal

    This link points to the free online application, but there is a more full and robust version that can be purchased and installed on your computer. GenoPal always proposes colors that are eye-pleasing. GenoPal colors are based on how your eye explores color – they are naturally harmonious.


    Mayang

    A site with mostly textures. Not the best textures in the world, but they are free and you just might find some use for them somewhere.


  • 1 Comment
  • Filed under: Web Design
  • The best free icons on the web

    Everyone loves icons right? Right! So I have put together a list of some of my favorite and some of the best icon sites I have managed to find on the internet, along with a few examples each of the site has to offer..

    If you have any other great links to add to the list, just go ahead and leave a comment with the link.

    This page will be updated regularly
    Last Updated 1-14-08


    H-T-D

    email.png galaxy.png sample_clock.png

    This site is one of my newest discoveries and has some of the best looking, highest quality icons I have seen. I don’t even know what to call the website because half of it is in another language of some sort, but I will take full advantage of all it has to offer, and I suggest you do to.


    FREE ICONS WEB

    Server Icons IE Icon Calendare Icon

    Free Icons Web has quite an impressive selection of truly high quality icons. Most of the icons are not full sets, but mini sets with particular themes in mind. The icons I show above are just small samples of very different sets available for free.


    Sweetie

    Sweetie Cute & Clear Icons
    Sweetie Web Communication Icons

    Some small and clean icons to use for your various web development projects.


    DESKTOP LAND

    Money Icons Car Icon Network Icon

    A very random selection of high quality and not as high quality icons. It’s not an all in one icon website, but you just may find the perfect icon you have been looking for.


    WEB 2.0 BADGES

    Web 2.0 Badge Web 2.0 Badge Web 2.0 Badge

    A Web 2.0 badge generator. Select from many different badges, add your text, and download. Simple as that.


    DESIGNER FOLIO

    Web 2.0 Badge Web 2.0 Badge Web 2.0 Badge

    A selection of a few good looking Web 2.0 badges available for download.


    Great Free CSS Tools & Sites

    The web, such a bountiful source of free information. The really is no limit to the amount of information you can stumble upon and consume, and completely free no less!

    After years and years of being a web designer, I have gathered quite a collection of links to websites that offer me unlimited amounts of css tips, tricks, and free downloads. I have decided to share my list with the rest of you. I hope you enjoy them, as much as I do.

    This page will be updated regularly

    Last Updated 1/25/08



    Dynamic Drive

    An amazing archive of numerous free css based scripts, menus, layouts and much much more. Some of my personal favorites are the ones that are inside the Dynamic category.

    Dynamic Drive


    Layout Gala

    Free CSS layouts to download

    Layout Gala


    LightWindow

    Of all the LightBox scripts, I think this is so far my favorite. It supports video, flash, external websites, forms, inline content (divs) and of course images. And it also looks amazing as well. Definitely a highly recommended script.

    Light Window


    ShadowBox

    I really like this lightbox script. It might be in contest for my favorite lightbox script with the LightWindow one above. Best thing about this one though, is that its html will validate, which lets face it is increasingly important these day.

    ShadowBox


    Lightview

    This is yet another script that can be used to overlay image on top of the current pag. It is very similar to Lightbox, Thickbox, and Greybox.

    Before I get to the bad stuff, I will talk about the good parts about the script. The interface is quite nice looking, with white rounded corners and borders. The animation effect is also quite smooth and nice to look at.

    However, I have tested this script on both IE6, and FF2 and I must say that it works better on IE6. On Firefox the animation is a little bit jittery, and gives a very strange effect outside of the borders. It almost looks like a magnifying glass is being put over the outside edge for a quick second, but after the animation is over, it looks great!. I suspect this is a bug that will be worked out in the near future. So defintely don’t hesitate to try this script out for yourself!

    Lightview


    Facebox

    Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

    Facebox


    Lightbox

    Lightbox is a very simple script that can be used to overlay an image on top of the current page to keep users from being linked to other pages. It is an exceptionally clean way to show off your pictures, designs, and more.

    Lightbox Script


    Thick Box

    Another version of the Lightbox script. This version adds support for more than just images, you can include iFrames, div’s and many other text based pieces of content.

    Thick Box


    Greybox

    Yet another version of the Lightbox script. This one is probably one of the most well rounded versions I have seen. You can display external pages in the pop ups, and the gallery setup is just plain beautiful.

    Greybox gallery script


    MultiBox

    This is one of the best incarnations of the Lightbox scripts I have seen so far. I am very impressed with this one, and suggest trying it out. Lightbox that supports images, flash, video, mp3s, html.

    MultBox


    HighSlide

    Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.

    HighSlide



    DHTML Goodies

    DHTML Goodies has a high quality assortment of CSS / DHTML / AJAX scripts all available to download for free.

    DHTML Goodies, Free CSS, DHTML, AJAX scripts


    CSS Gradients

    Think you need images to have gradients in your designs? So did I, at least I used to until a friend of mine told me about this website.

    CSS Gradients