Graphics Archive

10 Techniques for a Fantastic Footer

January 5th, 2010 126 Comments

A strong footer can leave your visitors with a lasting positive impression.

There are tons of creative ways to boost the cool factor of your footers by focusing on both form and function. Below you’ll find 10 simple ideas to inspire you towards footer greatness.

25 Awesome Tools for Choosing a Website Color Scheme

November 16th, 2009 113 Comments

As a designer, color management should be an integral part of your workflow. A website’s color scheme helps shape its identity and therefore should not be carelessly thrown together. Here are 25 online, desktop and iPhone applications to help you live and breathe color management no matter where you are.

50 Outstanding Free Design Textures

November 2nd, 2009 37 Comments

A few good textures can take a boring design and turn into something stunning. As a designer, you should seek to build a library of all kinds of textures to complement a range of styles. Here are 50 completely free and ready to download textures to get you started.

27 Inspiring Letterpress Posters

May 12th, 2009 7 Comments

There has been a rather sudden revival of letterpress artwork in the past few years. No matter how much technology advances or how fast our laser printers get, one can’t help but admire the texture and beauty of this medium.

This week, we want to show you some brilliant letterpress posters. Some of these are printed using handmade wooden reliefs, some using metal type, some even using photopolymer plates (the preferred medium for letterpress plates these days). Whichever medium is employed – all of them are most certainly breathtaking!

Best of 2008 – Graphic Design Tutorials

December 16th, 2008 23 Comments

As we arrive at the last month of yet another year, it’s time we revise and reflect on all the goodies this year had to offer. At the same time it’s great to practice the tips and lessons learnt for the years to come! We have brought together a series of what we feel are some of the best tutorials of 2008 from around the web.

We’re starting off with the most useful graphic design tutorials of the past year. In no particular order, read on to see 33 that have stood out in particular.

Creating Fading Site Dividers

December 8th, 2008 14 Comments

You might have seen these fading dividers/separators on various sites, which seem to fade both horizontally and vertically. Here is an example of what I mean:

They provide a great way to split content up, doing so in a subtle and non-intrusive manner. I would like to share a simple way to create these fading dividers using Photoshop.

RSS Feed Icons

May 15th, 2008 5 Comments

The RSS feed icon has become somewhat iconic in web design, and is arguably one of the most recognized symbols. This great article has a huge collection of RSS feed icons – from a photorealistic style as shown here, to small buttons to hand-drawn sketches.

Adding an RSS feed icon that stands out and looks different can be a great way to draw the reader’s attention to your subscription options. Have a browse through and see which ones fit the look of your site.

View the RSS Icons

Creating an iPhone Website Icon

January 17th, 2008 17 Comments

With the latest software update to the iPhone, it is now possible to add ‘WebClips’ to your home screen. This is essentially a quick bookmark to a website, complete with an icon. By default, the iPhone will take a tiny screenshot of the site to use as an icon – with a little work however, you can customize the icon used to make it look just as you’d like.

There are two simple steps to create an icon:

Create a 57x57px PNG file to use as the icon – pick something bold that well respresents your site
Name it ‘apple-touch-icon.png’ and place it in the root HTML folder of your site

The great thing is that the iPhone will automatically alter the WebClip icon to fit the style of the other icons, adding rounded corners and the glossy effect.

To apply the icon a different way, you can insert a <link> element similar to <link rel=”apple-touch-icon” href=”/customIcon.png”/> within the <head> element of the page.

If you notice a slight delay after clicking the ‘Add to Home Screen’ button on your iPhone it is simply that the icon is being downloaded. Give it a few seconds!

For the official guide, you can have a look at the Apple iPhone Dev Site.

Cross Browser Transparency

July 18th, 2007 2 Comments

There are many complicated methods to create transparency effects across the various browsers available (Firefox, Safari, Internet Explorer), but it can be simple to achieve this effect using a few CSS tricks. Albeit with a couple of limitations.

Transparency rules

Mozilla browsers can display transparency, using an effect specified through -moz-opacity: 0.5; where the value is between 0 (completely transparent) and 1 (opaque).

Internet Explorer uses a filter property to allow you to show transparency. It takes the form filter: alpha(opacity=50); where the opacity value is between 0 and 100.

Some other browsers (and future browsers) will conform to the CSS3 specification allowing the property opacity: 0.5; with the value between 0 or 1 as with the Mozilla effect.

The way to get this working in all browsers is simply a matter of using all three rules at the same time:

#transparent-area {
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
}

Limitations

The main problem with the above CSS code is that it is notoriously browser specific, and thus does not conform to valid CSS standards. This doesn’t stop it working correctly, but does mean that your CSS code won’t validate.

Also, as new browsers are released and updated you’ll need to alter the above. Hopefully as they adopt the CSS3 standard more strictly, simply using the opacity: 0.5; rule will suffice.