Useful Website building Tools: Difference between revisions

From SWCP Support Wiki
Jump to navigationJump to search
 
(One intermediate revision by the same user not shown)
Line 57: 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!