Colour Lovers

Cool website all to do with the use of Colour

http://www.colourlovers.com/

Javascript Reflection for images

Create refletions for images on your website using this following links:

http://webdesigninfo.wordpress.com/2007/09/01/javascript-reflection-for-images/

http://cow.neondragon.net/stuff/reflection/

Website Translator

Cool website were you can translate a web pages content from a site:

http://babelfish.altavista.com/

Block Hover Effect

How to create the block hover effect in css for your website:

http://www.smileycat.com/miaow/archives/000230.php

Dotted lines in Photoshop

How to create a dotted line for use within a photoshop document:

http://www.photoshoplab.com/website-design-mockup-tips.html

Web 2.0 How to design

Great page about how to design for web 2.0

http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

Google Maps

Information for using a google map on a website

http://www.google.com/apis/maps/

An example of this in use includes:

http://www.lovesrestaurant.co.uk/

CSS cheatsheet

Good resource for css, explains most css properties

http://home.tampabay.rr.com/bmerkey/cheatsheet.htm

Page Curl in Photoshop

Tutorial for a page curl in Photoshop:

http://veerle.duoh.com/blog/comments/creating_a_page_curl_in_photoshop/

http://pstutorialsblog.com/83/page-curl-effect-tutorial/

Opensource design

Here are some opensource packages available for design work:

3d package: http://www.blender.org/
Image manipulation program: http://www.gimp.org/

Vector Flower - Illustrator Blend

Good tutorial for the blend tool in Illustrator

http://www.ndesign-studio.com/resources/tutorials/stylish-vector-flower/1/

Font website

A good source for fonts:

http://www.type.co.uk/

Free Fonts

Another great post from smashing magazine these are all free fonts available:

Some look very good for use on logos!

http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/

Logo Design

Cool links for Logo Design if you need the inspiration

http://www.designvitality.com/blog/2007/09/logo-design-tutorials/
http://logopond.com/
http://www.allgraphicdesign.com/logo.html
http://www.elogodesign.com/logo-design-tutorials/

Before and After Magazine

This site has some good pdf downloads regarding design, some free, some you need to subscribe

http://www.bamagazine.com/

Opensource Content Management with Joomla

This website offers a opensource content management system that can be used for websites

http://www.joomla.org/

Alternative Style Sheets

Good article from list apart showing how to link webpages to alternative css using a little Javascript:

http://www.alistapart.com/articles/alternate/

Creating backgrounds in Photoshop

To create a repeated diagonal text background within Photoshop, use the Offset tool:

Filet > Other > Offset

This should wrap the text around for a repeated effect

An example of this is the background used on this website:

http://www.size-online.co.uk/

CSS Horizontal Dropdown Menus

How to create a horizontal menu using only css and a little Javascipt:

http://www.alistapart.com/articles/horizdropdowns

CSS Image replacement

How to use an image for a heading but also get text underneath for search engines and readers:

http://www.smashingmagazine.com/2007/04/20/35-designers-x-5-questions/

Multiple Internet Explorer browsers

Use this to get multiple Internet Explorers on your PC!

http://tredosoft.com/Multiple_IE

50 inspirational websites for designers

http://www.aialex.com/2007/07/09/top-50-inspirational-websites-for-designers/

Google search box

Seems to be able to add a GOOGLE search box for a website

http://www.askdavetaylor.com/how_can_i_add_a_google_search_box_to_my_web_site.html

Add to Favorites code

Use the code within this webpage for an 'add to favorites' button on a website/webpage:

http://www.webdevelopersnotes.com/tips/html/creating_add_to_favorites_link_script.php3

Acronym html tag

Use the following tag as a way to describe an acronym within a web page

WWW

More information can be found at: http://www.w3schools.com/tags/tag_acronym.asp

Lightbox Image Viewer

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

http://www.huddletogether.com/projects/lightbox/

http://www.huddletogether.com/projects/lightbox2/

Other alternatives

http://www.blinklist.com/tag/lightbox/

Webdesign from Scratch

Great site for everything web design, from logos to usability, html and css:

http://www.webdesignfromscratch.com/

Some new resources

Smashing magazine:

http://www.smashingmagazine.com/

Top resource tips:

http://www.snap2objects.com/2007/06/06/85-killer-resources-every-designer-should-know

Template Sites

Good source for templates

http://www.templatetouch.co.uk/
http://www.templatemonster.com/

dwt body tag edit

Use this method to change the body tag for good css use:

Select the id="whatever" in the body tag, then go to Modify Menu -> templates -> Make Attribute editable.

In the dialog box, make sure id is the selected attribute, check the checkbox to make it editable, and fill in whatever other information is needed.

then on your child pages, choose Modify -> template properties, and you get a box that lets you enter some other value for the id attribute.

External links in css

Use the following code to indicate the difference between an external link and an internal link:

*Does not work in Internet Explorer 6 (I think) One for the future!

a[href^="http:"]{
selectors
}

a[href^="http:"]:visited{
selectors
}

a[href^="http:"]:hover{
selectors
}

a[href^="http:"]:active{
selectors
}

It can also be used for mailto:

a[href^="mailto:"]{
}

Best Web Gallery

Good resource for the best sites out there:

http://bestwebgallery.com/

Design Ideas

Things to remember for designs

diagonal stripes
dripping paint
folded corners
curled corners
silhouttes
badges
swirls in backgrounds
neon colours
list images
header images
worn edges/effects
image banners
styled buttons
cut edges
drop shadows
outside boundries
vertical text
multirow links
sunburts
teasers/visual signposts

Brushes and Swirls

A collection of different brushes for swirls etc for Photoshop and Illustrator:

http://www.easyelements.com/free-photoshop-brushes.html

Brands of the World

Good source for high resolution logos in eps format

http://www.brandsoftheworld.com/

CSS height and width bug fix

For bug in browsers on minimum width and height to allow for ie6

set the values in the css (same for width):

.css{height:200px; min-height:200px}

Goes out side the .css code:

html>body .css{height:auto}

same for width

Web page minimum width

Code used for setting the minimum width of a page:

min-width: 800px;
width:expression(documentElement.clientWidth < 800? "800px": "100%" );

ndesign studio

Really cool website and tutorials

http://www.ndesign-studio.com/

LoVe HAte CSS Links

Correct order for CSS links in the stylesheet

a:link { }
a:visited { }
a:hover { }
a:active { }

Photoshop Brushes and Fonts

Has some free fonts for use in Photoshop

http://www.dafont.com/top.php?page=2

Contains tutorials with some free brushes

http://www.kreative-studios.net/index.php/category/tutorials/

http://www.kreative-studios.net/index.php/2007/01/14/create-a-punkindie-cd-cover/

Talk Mania and Texture King

Good resource forum for tutorials on photoshop and web design

http://www.talk-mania.com/

Good resource for texture that can be used for brushes etc

http://www.textureking.com/

Depthcore and Shinybinary websites

www.depthcore.com

Good artwork and graphic design site

http://www.shinybinary.com

Really good photoshop and illustrator artwork

Paint.Net

New version of Paint

http://www.getpaint.net/index2.html

http://en.wikipedia.org/wiki/Paint.NET

Color Scheme 2

You can use this tool to see what colours to use on a site:

http://wellstyled.com/tools/colorscheme2/index-en.html

There main site also has articles on css and web design:

http://wellstyled.com/

More Website Design Resource Websites

http://www.designerstalk.com/forums/

http://websitetips.com/

http://htmlhelp.com/

http://tutorialoutpost.com/

CSS form editing

Sitepoint page for editing forms

http://www.sitepoint.com/article/style-web-forms-css

Dynamic Drive

Good resource for DHTML and CSS

http://www.dynamicdrive.com/

Tutorials for Photoshop, CSS, Flash

http://www.webdesign.org/

http://www.tutorialized.com/

http://www.teacherclick.com/flash8/index.htm

http://www.photoshoptower.com/

http://www.pixel2life.com/

Coding Forum

Coding forum for css/photoshop etc

http://www.codingforums.com/

Remove Background Photoshop techniques

Techniques to remove the background from images:

http://graphicssoft.about.com/od/photoshop/l/blrbps_3aleaf.htm

http://www.sitepoint.com/article/masking-techniques-photoshop

http://www.photoshopcafe.com/tutorials.htm

http://www.rnel.net/tutorials/Photoshop/Basic_Techniques/27

Notepad2

Alternative to notepad

http://www.flos-freeware.ch/notepad2.html

Adobe Accessibility

Contains a whitepaper on Accessible Flash

http://www.adobe.com/accessibility/

Banner ad sizes

These are the sizes and dimensions used for banners on websites

http://www.webdevelopersnotes.com/graphics/standard_animated_gif_banner_sizes.php3

w3 validator

Use this to validate css and html code for a website

http://validator.w3.org/

w3

The World Wide Web Consortium website

http://www.w3.org/

Access Keys

How BBC do it on their website, how browsers use the Access Keys

http://www.bbc.co.uk/accessibility/accesskeys/keys.shtml

Good source of information with links

http://en.wikipedia.org/wiki/Access_keys

The w3 recommendations

http://www.w3.org/TR/html4/interact/forms.html#h-17.11.2

Web design websites

Some good websites for web design and development

http://www.w3schools.com/
http://www.webdevelopersnotes.com/
http://www.digital-web.com/
http://microformats.org/

http://www.designtalkboard.com/

http://www.designmeltdown.com/

Search Engine Optimisation

http://www.seochat.com

http://www.linkpopularity.com

Magazine links

http://www.netmag.co.uk/

http://www.computerarts.co.uk/