| Text Size: |
Site Design (Architecture, Coding, UI, etc.) >> Images / Graphics >>
Useful Image/Graphics Resources
"For people who make websites" - A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen in the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.
The extension is based on Tidy and OpenSP. Both algorithms were originally developed by the Web Consortium W3C. Both algorithms are embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.
The extension is based on Tidy and OpenSP. Both algorithms were originally developed by the Web Consortium W3C. Both algorithms are embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.
This project aims to create an archive of user contributed clip art that can be freely used.
Starting at the beginning, this reference explains everything you need to know about using core JavaScript. It assumes you have the following basic background: a general understanding of the Internet and the World Wide Web and a good working knowledge of HTML. An excellent resource.
Edit your images on the fly online with Splashup, a web-based image editor that integrates with Flickr, Facebook, and Picasa. Splashup offers up a surprising array of image editing tools, far beyond the usual crop of resize and contrast-- you can also edit multiple images, play with filters and layers, use a variety of brushes, and more. Splashup is one of the best image editors in a long line of image editors; i.e., Picnik, Pixoh, and Resizr, to name just a few.[Lifehacker Annotation]
This website will let you:
- Create an XML sitemap format that can be submitted to Google to help them crawl your website better.
- Create a Text sitemap to submit to Yahoo.
- Create a ROR sitemap, which is an independant XML format for any search engine.
- Generate an HTML site map to allow human visitors to easily navigate on your site.
Clearspring's free Launchpad widget builder lets you easily turn your website's content into a widget which site visitors can use to place your content on all the major social media sites (MySpace, FaceBook, Google, hi5, Live, Yahoo, Wordpress, Blogger, etc.). The service also provides tracking and analysis.
This site features online text and html changing, modifying, converting tools designed to save you time making web pages or preparing text for web publication. If you've ever needed to capitalize sentences or convert line breaks to <p> or <br /> then this site can save you needless manual labor. There are other useful tools as well, like the one to uncompress html to make it readable and the ones to uppercase or lowercase text. Basically, the most common tasks that someone who works in an office or does freelance web development might encounter. Most of the tools have been created using javascript so you should be able to change large amounts of text as the processing is done on your computer instead of being limited by a server script.
dTree is a free JavaScript tree menu. That is very simple to set up and use. You don't have to worry about adding pages to the tree in a specific order, which makes it ideal for generating a tree from a database.
webmaster toolkit offers this CSS Menu Generator to generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.
Amaya is an open source Web editor endorsed by the W3C. Browsing features are seamlessly integrated with the editing and remote access features in a uniform environment. This follows the original vision of the Web as a space for collaboration and not just a one-way publishing medium.
Amaya started as an HTML + CSS style sheets editor. Since that time it was extended to support XML and an increasing number of XML applications such as the XHTML family, MathML, and SVG. It allows all those vocabularies to be edited simultaneously in compound documents.
Amaya started as an HTML + CSS style sheets editor. Since that time it was extended to support XML and an increasing number of XML applications such as the XHTML family, MathML, and SVG. It allows all those vocabularies to be edited simultaneously in compound documents.
A very flexible unlimited-level, drop down JavaScript menu that uses UL/LI list data formatted with a CSS menu layout. It's powerful, lightweight and extremely easy to use!
CSS Tab Designer is unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required! Read a review.
This document guides you through the process of using JavaScript and the DOM to build a three-state toolbar that accurately and efficiently handles different button states (normal, highlighted, selected), and the interdependencies between them.
The Search Engine Friendly Layouts website has been created for both the webmaster and the search engine optimization specialist. The layouts on the site are all designed to be web standards-compliant, yet also search engine friendly. These layouts have all been created by Adam Senour, and he gives them to you at no cost whatsoever.
Open Source Web Design is a site to download free web design templates and share yours with others. We help make the internet a prettier place.
Some of us have a great eye for complementary colors and matches--and then some of us still don't understand why brown shoes and black pants are a bad idea. For anyone looking to set an image against a complementary background or find a color scheme, Whats Its Color (their grammar, not mine) is a free web app that can help. Upload an image and the site creates a palette page with a complementary background and a list of unique and dominant colors in your image. Photoshop and GIMP gurus might already know how to sift these kind of things already, but the visible color matching could be a boon for presentation slides or small design projects.
This tutorial will teach you all you need to know to be able to craft powerful time-saving regular expressions. It starts with the most basic concepts, so that you can follow this tutorial even if you know nothing at all about regular expressions yet. It will also explain how a regular expression engine works on the inside, and alert you at the consequences. This will help you to understand quickly why a particular regex does not do what you initially expected. It will save you lots of guesswork and head scratching when you need to write more complex regexes.
FastStone Capture is a powerful screen capture utility with built-in editing tools. It allows you to capture anything on the screen including windows, objects, menus, full screen, rectangular/freehand regions and scrolling windows/web pages. It sends captures to editor, file, clipboard, printer, email, Word/PowerPoint document or even your website. Editing tools include resizing, cropping, sharpening, annotating, applying effects, watermarks and many more. It saves captures in BMP, GIF, JPEG, PCX, PNG, TGA, TIFF and PDF formats. Additional features include a small handy capture panel that offers quick access to its capture tools and output options, global hotkeys, automatic filename generation, support for external editors, a color picker, a screen magnifier and a screen ruler.
An online picture editor, pikifx.com emphasizes special effects. You can use it to:
- Resize and Crop,
- Add creative effects,
- Add borders,
- Add creative text
Don't embarrass yourself by busting out the same tired stock clip art for your next Power Point tour de force. WPClipart has a pile of royalty free images to share.
The archive currently has 23,872 images, covering thousands of subjects. A significant portion of them are in lossless formats. The site is organized into categories, but if casual browsing fails to find you the perfect gem you've been searching for there is always keyword based searches. You can even download the entire collection as a single archive, making it easier to use offline. [Lifehacker Annotation]
The archive currently has 23,872 images, covering thousands of subjects. A significant portion of them are in lossless formats. The site is organized into categories, but if casual browsing fails to find you the perfect gem you've been searching for there is always keyword based searches. You can even download the entire collection as a single archive, making it easier to use offline. [Lifehacker Annotation]
If you need a logo but you're lacking the design chops to whip one up, score a free one at LogoInstant. LogoInstant is a design service that cranks out a new logo every day. The logos are completely free for both personal and commercial use and come in a layered Adobe Photoshop source file so you can edit the name or make more advanced changes.[LifeHacker Annotation]
LogoYes is a site offering a flash program to create logos. Just select your industry, a symbol, text, typography and colors for your logo. Once you finish, you can purchase a high-resolution file with your logo for only $69 or include a business card design based on the logo for an additional $30.
99designs helps you run a "design contest", where thousands of designers compete to create the best possible design to meet your needs. All you need is a clear idea of what you want designed and how much you're prepared to pay for it.
If you've been having trouble finding free or Creative Common-licensed photos for use in your projects, Sprixi filters out the fluff to help you find the images you really want.
One of the frustrations of searching for anything on the internet, let alone images, is imprecise search results. If you've ever searched for something and found something completely different—usually because the file name or the associated keywords were strangely or inappropriately applied—then you know what we're talking about.
Sprixi helps circumvent the strangeness of file names and misapplied keywords by letting users vote on whether or not an image is really what they were looking for. Search for "school bus", for example, and get some images of a micro-processor bus and you can flag them as not helpful to your search. Because thousands of users have come before you, analyzing the images, you won't often find misplaced images. Search results are divided into sorted and unsorted images, with the sorted images on top—sorted in this case means that users have verified that the images do in fact contain the thing you are looking for.
Sprixi currently pulls images from Flickr, OpenClipart.org, and from user uploads. Sprixi is a free service and requires no registration or login to use. [Lifehacker Annotation]
One of the frustrations of searching for anything on the internet, let alone images, is imprecise search results. If you've ever searched for something and found something completely different—usually because the file name or the associated keywords were strangely or inappropriately applied—then you know what we're talking about.
Sprixi helps circumvent the strangeness of file names and misapplied keywords by letting users vote on whether or not an image is really what they were looking for. Search for "school bus", for example, and get some images of a micro-processor bus and you can flag them as not helpful to your search. Because thousands of users have come before you, analyzing the images, you won't often find misplaced images. Search results are divided into sorted and unsorted images, with the sorted images on top—sorted in this case means that users have verified that the images do in fact contain the thing you are looking for.
Sprixi currently pulls images from Flickr, OpenClipart.org, and from user uploads. Sprixi is a free service and requires no registration or login to use. [Lifehacker Annotation]
Useful Resources
View all resources
Editor Favorites
- A List Apart
- HTML Validator Firefox Plugin
- Open Clip Art Library
- Core JavaScript Guide: Version 1.5
- Splashup
- XML Sitemaps Generator
- Clearspring Launchpad
- Text Fixer
Other Resources
- dTree
- CSS Menu Generator
- Amaya
- FreeStyle Menu
- CSS Tab Designer
- Create a multi-state image toolbar on your Web site with this JavaScript guide
- Search Engine Friendly Layouts
- Open Source Web Design (OSWD)
- Whats Its Color
- Regular Expression Tutorial: Learn How to Use and Get The Most out of Regular Expressions
- FastStone Capture
- PikiFX.com
- WPClipart
- LogoInstant
- LogoYes
- 99designs
- Sprixi
Links to Consider
There are quite a few good, free resources out there to help with your webmaster needs. Many are fully web-based. Some of the better ones I have come across include:
- iaza
iaza is an online tool to do image manipulations, including conversion from one format to another, enhancing attributes (contrast, brightness, sharpness, saturation, hue), adding basic effects (orientation, labeling, border, size), and adding exotic features (combining and transforming).
- Best4c (Best for chart)
Best4c (Best for chart) is a Web-based, online diagram tool that allows you to create, edit and share charts. Features include:- Offers you a way to create and share charts online
- Desktop application feel in a web-based diagramming solution
- Provides an interactive drawing and diagramming solution within all popular internet browsers (FireFox,IE,Opera,Safari)
- Exports diagram as a PDF or PNG format, and quick paste to Word, Excel, Powerpoint
- Creates many types of diagrams such as Flowcharts, Floor plans, Network diagrams, UML diagrams or any other simple drawing or diagram.
- Bradicon
Web app Bradicon is a super-simple tool to convert most of the major graphics formats - JPG, PNG, BMP, or GIF - into icon files.
- GifWorks
GifWorks is a free online GIF image editor -- nothing to download or install. Some of the things you can do with GifWorks: insert text, resize, crop, rotate, flip, replace or modify color, add transparency, add special effects and more.
- Gadwin PrintScreen
Want to create a screenshot suitable for saving or printing? Then just hit a key on your keyboard. There are several hotkey combos to choose from (PrintScreen is the default). Once you've chosen your favorite combo, head to the Destination tab and have the screen print out instantly, copy the capture to the clipboard, save it to a specific folder, or even send it through e-mail. You can perform full screen captures, or only capture a specific window.
- ICONlook
ICONlook offers a pretty handy interface for searching and downloading icon files, whether for replacing out-of-place icons on your system or adding some graphical polish to a site. The engine's reach is somewhat limited at this point, but it helpfully provides a link to the license type for each result, when known, and seems to lean toward free and Creative Commons sources to begin with. [Lifehacker annotation]
- Image Editing: Resize Images without Sacrificing Content with GIMP or Rsizr
Ever have to crop or resize a picture to fit it better on a web site but end up disappointed with the content you have to lose from the photo? Using a method called liquid rescaling, your pics can be rescaled while retaining almost all of the pertinent content, so you can get the best of both worlds—a smaller image that retains everything you want. If it still sounds a little unclear, check out the video to see this brilliant idea in action.
If you're a fan of the open source image editor GIMP, you can download and install the Liquid Rescale GIMP plug-in to get liquid rescaling results (after you install it by moving the downloaded files into your GIMP directory, you'll see the Liquid Rescale option under the Layer menu). If you don't feel like installing anything, you should try out the Rsizr webapp, which does the rescaling from the comfort of your browser. Both tools are a good deal slower than what you see in the very cool video above, and neither are implemented to the full extent of what you're seeing in the video, but the results are still promising. [Lifehacker annotation]
- Jing
Jing instantly captures and shares images and video...from your computer to anywhere. Simply select an area of your screen, capture it as an image or record it as a video, and then click Share. Jing conveniently places a URL to your content on your clipboard ready for you to paste the URL into any of your conversations. Your content is hosted on Screencast.com, for which we are providing a complimentary account to all participants during this project. Users have 200MB of space for storing screenshots and screencasts and 1 GB of bandwidth that renews monthly.
- Pearl Crescent Page Saver
Pearl Crescent Page Saver is an extension for Mozilla Firefox that lets you capture images of web pages. These images can be saved in PNG or JPEG format. Using Page Saver, you can capture an entire page or just the visible portion. Options let you control whether images are captured at full size (which is the default) or scaled down to a smaller size.
- LovelyCharts
If you’ve ever looked for an easy, intuitive online diagram creation tool, you know how hard it is to find one. LovelyCharts is a brand new application poised to become the default online drawing tool for amazing flowcharts, sitemaps and wireframes.
Like Gliffy, Flowchart.com, and AutoDesk’s experimental Draw project, the app enables you to create diagrams and more in your browser with drag-and-drop functionality. The main dif-ferentiator between LovelyCharts and other online services is that it actually makes your complex processes look incredibly good. Better yet, it’s completely free (there’s also a pro-fessional version, for €29 a year, which allows users to maintain and collaborate on as many diagrams as they wish and features full history management, sharing functionality and a noti-fication setup). [TechCrunch Annotation]
- SmartMorph
This fast, advanced-morphing program can morph one picture to another or make funny effects with one. It allows the user to resize and crop pictures to achieve the best results when morphing. The resulting animation can be computed and displayed in real time or saved to disk.
- Splashup
Edit your images on the fly online with Splashup, a web-based image editor that integrates with Flickr, Facebook, and Picasa. Splashup offers up a surprising array of image editing tools, far beyond the usual crop of resize and contrast— you can also edit multiple images, play with filters and layers, use a variety of brushes, and more. [Lifehacker Annotation]
- VectorMagic
Web site VectorMagic turns virtually any image into vector art that can be resized as much as you want without any nasty pixelation. The site is free and simple to use, but for a bit more detail check out their howto introductory video. Whether you are trying to perfect your scanned signature or you've got a logo or design you want to be able to resize indefinitely, VectorMagic will do the trick. [Hat Tip to Lifehacker]
- Wink
Wink is free Tutorial and Presentation creation software, primarily aimed at creating tutorials on how to use software (like a tutor for MS-Word/Excel etc). Using Wink you can capture screenshots, add explanations boxes, buttons, titles etc and generate a highly effective tutorial for your users. (Note: for a more professional alternative, but one with a somewhat steep price tag, check out Macromedia Captivate and/or Camtasia Studio.)
- WPClipart
Don't embarrass yourself by busting out the same tired stock clip art for your next Power Point tour de force. WPClipart has a pile of royalty free images to share.
The archive currently has 23,872 images, covering thousands of subjects. A significant portion of them are in lossless formats. The site is organized into categories, but if casual browsing fails to find you the perfect gem you've been searching for there is always keyword based searches. You can even download the entire collection as a single archive, making it easier to use offline. [Lifehacker Annotation]
- XnView
Freeware app XnView gives you incredible control over editing digital photographs in a lightweight package. Similar to IrfanView, XnView is fast and can import and export hundreds of image formats. It also features lossless rotate and crop, filters, color modifications, red-eye reduction, and slideshow view. Categorize images and easily access EXIF meta information. [Lifehacker annotation]
- Lightscreen Portable
Lightscreen Portable is an easy to use screenshot app packaged as a portable app so you can take pictures of the current in-use desktop wherever you go. You can place it on your USB flash drive, iPod, portable hard drive or a CD and use it on any computer, without leaving any personal information behind.
- BeFunky
Digital image effects web application BeFunky adds seriously impressive effects to any photograph—turning boring pictures into digital art in a couple of mouse clicks. Using BeFunky to add digital effects couldn't be easier—simply upload your files (or grab them from flickr, MySpace or Facebook), select your preferred effect from the list, and tweak the options to your liking. Once completed you can download your transformed photos without an account—a watermark is added, but it's below the image and could be easily removed with a quick crop. [Lifehacker Annotation]
- Aviary
Aviary is considered by many to be one of the best online image editors available. It used to be fee-based with a scaled-down free version but now the complete product is available for free use. Aviary competes with Adobe's online version of Photoshop which is also free, but requires you to pay if you go over their 2GB limit.
| Text Size: |
TrackBack URI
