Useful Website building Tools: Difference between revisions

From SWCP Support Wiki
Jump to navigationJump to search
← Older edit
Jamii (talk | contribs)
Bureaucrats, Administrators
1,413 edits
 
(16 intermediate revisions by the same user not shown)
Line 11: Line 11:


# http://fbrushes.com - A large source of brushes, textures and patterns collected from a variety of sources.
# http://fbrushes.com - A large source of brushes, textures and patterns collected from a variety of sources.
# http://webtreats.mysitemyway.com - Textures, brushes, icons, and many other resources. Free items available for commercial as well as personal use. Other items for sale.
# http://www.obsidiandawn.com/ -  Excellent and original brushes and tutorials on graphic design. Her work is available for free for personal use (with attribution), and there is a small fee for commercial use.
# http://www.obsidiandawn.com/ -  Excellent and original brushes and tutorials on graphic design. Her work is available for free for personal use (with attribution), and there is a small fee for commercial use.
# http://www.cuttyfruty.com/enhtml/brushes.php - Interesting hand-written fonts by Jellyka Nerevan. Free for non-commercial use, small donation for commericial use.
# http://subtlepatterns.com/ - A nice collection of elegant textures that will make your website look sophisticated without dominating the design.
# http://subtlepatterns.com/ - A nice collection of elegant textures that will make your website look sophisticated without dominating the design.
# http://www.fatstrawberry.com/ - tileable texture with stronger graphical elements. Lots of fun.
===Templates, widgets, and other useful website items===
# http://www.xooplate.com - Very interesting Open Source graphics site.


===Advice on building a site===
===Advice on building a site===
Line 41: Line 35:
===Stock Photography===
===Stock Photography===
# http://pixabay.com/ - A great place to find beautiful, unencumbered photography. You can freely use any image from this website in digital and printed format, for personal and commercial use, without attribution requirement to the original author.
# http://pixabay.com/ - A great place to find beautiful, unencumbered photography. You can freely use any image from this website in digital and printed format, for personal and commercial use, without attribution requirement to the original author.
# https://unsplash.com/ - Unsplash - nice large photography
# http://gratisography.com/ - Gratisography, interesting and fun free pix. Nice source for whimsical pix.
# http://gratisography.com/ - Gratisography, interesting and fun free pix. Nice source for whimsical pix.
# http://www.imcreator.com/free - Gear towards web designers with pictures and icons.
# http://www.publicdomainpictures.net/ - Requires an account to download, but nice pictures.  
# http://pdphoto.org - A collection of interesting and useful photography from Jon Sullivan. Almost all work is in the public domain, free for commercial or personal use, but check any photos you choose. There are a few with non-commercial requirements..
# http://www.publicdomainpictures.net/ - Another excellent source of public domain work. Please note that no release forms were signed by models in the pictures.
# https://picjumbo.com/ - Picjumbo, lots of interesting depth of field shots, good categories.
# https://picjumbo.com/ - Picjumbo, lots of interesting depth of field shots, good categories.
# http://www.freestockphotos.biz/ - Lots of graphics as well as photography.
# http://www.public-domain-image.com/ - Another interesting PD site for photography.
# http://www.public-domain-image.com/ - Another interesting PD site for photography.
# http://negativespace.co/ - Negative Space - nice source of textures and ambiance  for backgrounds. Completely CC0 site.
# http://www.morguefile.com/archive - Photography for use by creatives in their own projects. (See Usage terms)
# http://www.morguefile.com/archive - Photography for use by creatives in their own projects. (See Usage terms)
# http://www.freedigitalphotos.net/ - Free stock photography for non-commercial use. Attribution required.
# http://kaboompics.com/ Kaboompics - nice site, wide variety of free photography.
# http://www.rgbstock.com/ - Photographers share images. Organized by collections. Free for use on websites.
# http://www.rgbstock.com/ - Photographers share images. Organized by collections. Free for use on websites.
# http://www.ancestryimages.com/ - Free archive of historical prints
# http://www.ancestryimages.com/ - Free archive of historical prints
Line 55: Line 48:
# http://www.lifeofpix.com/ - Life of Pix
# http://www.lifeofpix.com/ - Life of Pix
# http://nos.twnsnd.co/ New Old Stock - vintage photography free from licensing issues
# http://nos.twnsnd.co/ New Old Stock - vintage photography free from licensing issues
# http://www.stockvault.net/ - Stock Vault - Good source for  non-commerical use free photos and tutorials
# http://www.freeimages.com/ - Getty images free content site. Use with care, it often leads to premium content.


===Inspiration===
===Inspiration===
Line 62: Line 57:


===Other Free Assets & Tools===
===Other Free Assets & Tools===
I just ran across this. It seems like a social media graphics/fonts/templates sharing site: http://www.creattor.com/
[http://www.colorpicker.com/ The Colorpicker] website is great for finding that perfect color and getting it's RGB.
[http://www.colorpicker.com/ The Colorpicker] website is great for finding that perfect color and getting it's RGB.


[http://css3gen.com/ The CSS generator] can help you build buttons and gradients out of CSS3.
[http://css3gen.com/ The CSS generator] can help you build buttons and gradients out of CSS3.


==CSS Documentation==
==CSS Information==
#[http://www.impressivewebs.com/css-terms-definitions/ Definitions]
#[http://www.impressivewebs.com/css-terms-definitions/ Definitions]
#[https://css-tricks.com CSS Tricks - lots of useful articles on using CSS]
#[https://www.joshwcomeau.com Josh Comeau's blog about CSS and using React, very useful! ]

Latest revision as of 15:33, 5 May 2025

These are some things we've come across that are useful tools in building websites.

Browser compatibility

  1. Can I Use? - Great site for seeing if the CSS you're using is supported by a particular browser.

Patterns, photos, gradients, brushes, and more

There are many generous people out on the internet who like to show off their work and allow other people to build on things they've produced. It is important to carefully read the terms of use that are provided with any person's work. Many people are glad to have you use their source material provide it isn't for commercial work. Some really want attribution on your website if you use their source material. No-one wants you to take their work and say it's yours, or resell it as is for profit, but there are many generous folks who will let you use their work even in commerical ventures. If you have any question about how you're using tools from the internet, contact the owner and ask them how they feel about. Below are some of my favorite sites for finding interesting and helpful tools for producing web graphics.

Brushes, textures, patterns, & fonts

If you've never played with brushes in Photoshop, Painter, or the Gimp you're in for a treat. Brushes can add texture or graphical elements at any size and can take a plain uninteresting web site that next step into eye-catching.

  1. http://fbrushes.com - A large source of brushes, textures and patterns collected from a variety of sources.
  2. http://www.obsidiandawn.com/ - Excellent and original brushes and tutorials on graphic design. Her work is available for free for personal use (with attribution), and there is a small fee for commercial use.
  3. http://subtlepatterns.com/ - A nice collection of elegant textures that will make your website look sophisticated without dominating the design.

Advice on building a site

  1. http://www.smashingmagazine.com - Advice on design, CSS, Photoshop & Dreamweaver tutorials, and lots more.
  2. http://webdevelopersjournal.com - Javascript, Ecommerce, Web tools, this is a great ezine for all levels of web developers.
  3. http://www.photoshopsupport.com/ - Tutorials and links to stock photography.

Some great articles on logo design by Maggie Macnab

  1. http://www.smashingmagazine.com/2015/06/05/effective-logo-design-symbols-metaphors-intuition/ - Part 1 Symbols, Metaphors and Intuition
  2. http://www.smashingmagazine.com/2015/06/12/effective-logo-design-nature-pattern/ - Part 2 Nature & Patterns
  3. http://www.smashingmagazine.com/2012/11/15/organic-ambigram/ - The organic ambigram

Clipart

  1. http://www.clker.com/ - A huge collection of royalty free clipart.

Font Information

This is an example of font families available in most browsers.

Check out Google Fonts for a whole new way of looking at font handling.

Stock Photography

  1. http://pixabay.com/ - A great place to find beautiful, unencumbered photography. You can freely use any image from this website in digital and printed format, for personal and commercial use, without attribution requirement to the original author.
  2. https://unsplash.com/ - Unsplash - nice large photography
  3. http://gratisography.com/ - Gratisography, interesting and fun free pix. Nice source for whimsical pix.
  4. http://www.publicdomainpictures.net/ - Requires an account to download, but nice pictures.
  5. https://picjumbo.com/ - Picjumbo, lots of interesting depth of field shots, good categories.
  6. http://www.public-domain-image.com/ - Another interesting PD site for photography.
  7. http://negativespace.co/ - Negative Space - nice source of textures and ambiance for backgrounds. Completely CC0 site.
  8. http://www.morguefile.com/archive - Photography for use by creatives in their own projects. (See Usage terms)
  9. http://kaboompics.com/ Kaboompics - nice site, wide variety of free photography.
  10. http://www.rgbstock.com/ - Photographers share images. Organized by collections. Free for use on websites.
  11. http://www.ancestryimages.com/ - Free archive of historical prints
  12. http://StockSnap.io - StockSnap many free photos (CC licensing)
  13. http://www.lifeofpix.com/ - Life of Pix
  14. http://nos.twnsnd.co/ New Old Stock - vintage photography free from licensing issues
  15. http://www.stockvault.net/ - Stock Vault - Good source for non-commerical use free photos and tutorials
  16. http://www.freeimages.com/ - Getty images free content site. Use with care, it often leads to premium content.

Inspiration

One of the most interesting places on the Internet for emerging art trends is http://www.deviantart.com/, an online community of artists.

Another fun place to see the power of CSS is The CSS Zen Garden

Other Free Assets & Tools

The Colorpicker website is great for finding that perfect color and getting it's RGB.

The CSS generator can help you build buttons and gradients out of CSS3.

CSS Information

  1. Definitions
  2. CSS Tricks - lots of useful articles on using CSS
  3. Josh Comeau's blog about CSS and using React, very useful!
Retrieved from "https://wiki.swcp.com/w/index.php?title=Useful_Website_building_Tools&oldid=2179"