Clipart: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(33 intermediate revisions by 3 users not shown)
Line 1: Line 1:
= Definition ==
== Definition ==


Clip art, in the graphic arts, refers to pre-made images used to illustrate any medium. Clip art is divided into two different data types represented by many different [[graphics file format]]s: bitmap and vector art. Clip art vendors may provide images of just one type or both. (Wikipedia)
Clip art, in the graphic arts, refers to pre-made images used to illustrate any medium. Clip art is divided into two different data types represented by many different [[graphics file format]]s: bitmap and vector art. Clip art vendors may provide images of just one type or both. (Wikipedia)
This article is also part of the [[Flash]] tutorials.


== Formats used in repositories ==
== Formats used in repositories ==
Line 19: Line 21:


* Illustrator *.ai file (rarely)
* Illustrator *.ai file (rarely)
== Importing clipart to Flash ==
Most often, clipart is distributed in *.wmf format (Windows Meta File format) or the more recent *.emf (Windows extended ...). Flash can handle this format. It also can handle:
* Illustrator *.ai format,
* Enhanced Windows Metafile *.emf (handles curves better than WMF)
* Freehand,
* Flash *.swf
* Autocad *.dxf.
It can not handle:
* [[SVG]]
* EPS (to verify)
To import, either copy/paste it from an open application or use ''File->Import'', either to stage or to library.
If you own Adobe Illustrator, first import to Illustrator, then select, copy and paste the Clipart from Illustrator to Flash. Illustrator can handle many formats, SVG and EPS for example.
Since most open source clipart is in SVG ([http://www.openclipart.org/ OpenClipArt] which Adobe Flash can't import, I suggest sending angry e-mail to Adobes. They do have the technology and it would be a matter of hours to implement this feature. In the meantime use one of the many opensource convertors or the free [http://inkscape.org/ Inkscape] SVG drawing program and then either save to *.wmf or *.emf. You probably will loose some drawing elements.
If you only need to recover shapes (as opposed to a full vector graphics structure): Select an object in a drawing program (such as Inksapce), then '''copy it'''. In Flash, you then can use ''Edit->Paste Special'' and select '''Picture''' (Metafile). This will paste the drawing as a group of shapes that you then can explode.... no lines.
== Using Fonts as ClipArt ==
In many graphic tools you can select a font with pictures, e.g. WebDings.
In Flash
* Use text tool
* In the properties panel, set the character size to something big, e.g. 200pt
* Select a "....dings" font, e.g. ''Webdings''.
* Type a letter
* Break it apart
* Then menu ''Modify->Unition''
Under Windows,
* select programs->Accessories->System Tools->Character tables. Explore a table.
* If you like a "letter art", then select and copy/paste to InkScape, Flash, google sketchup or any other tool that can handle text.
See [[webdings and wingdings]] for pictures of these fonts.
== Emoji ==
According to [https://en.wikipedia.org/wiki/Emoji Wikipedia], '''Emoji''' (Japanese: 絵文字, <small>English:</small> /ɪˈmoʊdʒiː/ ''ih-MOH-jee''; <small>Japanese:</small> [emodʑi]; singular ''emoji'', plural ''emoji'' or ''emojis'') are ideograms and smileys used in electronic messages and web pages. Some examples of emoji are 😃, 🧘🏻‍♂️, 🌍, 🍞, 🚗, 📞,  🎉, ♥️, and 🏁. Emoji(s) exist in various genres, including facial expressions, common objects, places and types of weather, and animals. They are much like emoticons, but emoji are pictures rather than typographic approximations; the term "emoji" in the strict sense refers to such pictures which can be represented as encoded characters, but it is sometimes applied to messaging stickers by extension.
Strictly speaking are standardized Unicode characters. For some, e.g. faces, variants do exist. Also, according to Wikipedia, the exact appearance of emoji is not prescribed but varies between fonts, in the same way that normal typefaces can display letters differently. Emoji caracters are standardized, e.g. as of Nov 2020 in [https://www.unicode.org/reports/tr51/tr51-18.html Unicode Technical Standard #51 version 13] .
Free emoji directories:
* [https://twemoji.twitter.com/ Twemoji] from Twitter (requires technical skills, i.e. pulling a GitHub archive): SVG and PNG format
* [https://openmoji.org/ OpenMoji.org] (as of Nov 2020, supports version 13): SVG and PNG format
* [https://github.com/googlefonts/noto-emoji Noto Emoji] fonts from Google (requires technical skills, pulling a GitHub archive): SVG and PNG
To find the code for an Emoji, use for example [https://openmoji.org/ OpenMoji.org] or [https://decodeunicode.org/en/search/search decodeunicode.org].


== Clipart repositories ==
== Clipart repositories ==
Line 24: Line 75:
We are mostly interested in vector formats.
We are mostly interested in vector formats.
Alternatively, you may also search through other applications you installed on your computer, e.g. Office products like Word and Powerpoint and the Open Office equivalent.
Alternatively, you may also search through other applications you installed on your computer, e.g. Office products like Word and Powerpoint and the Open Office equivalent.
=== Indexes and serach engines ===
It is extremly difficult to find good free clipart sites. Best bet is really the [http://www.openclipart.org/ Open Clip Art Library], but then may have to transform SVG into another vector format, e.g. if you work with Flash.
* [https://search.creativecommons.org/ Creative commons search]. Mostly raster images
* [https://www.google.com/advanced_image_search Google image search]. Mostly raster images, but you can select file type, e.g. SVG


=== In SVG Format ===
=== In SVG Format ===


[[SVG]] became the most standard format in the open source community. Many commercial programs can import SVG, but some like [[Flash]] can not. In this case use you can for instance:
[[SVG]] became the most standard format in the open source community. SVG also is part of [[HTML5]]. Many commercial programs can import SVG, but some like [[Flash]] or [[Stitch Era embroidery software]] can not. In this case use you can for instance import to Illustrator or Corel Draw, then either copy/paste to the other application or import the proprietary format (e.g. *.ai)
* Import to Illustrator, then paste to Flash
* Of open with Inkscape (free) and export as *.ai, then import to Flash (didn't work for me)


* [http://www.openclipart.org/ Open Clip Art Library] (SVG and PNG).
List of repositories
* [http://www.openclipart.org/ Open Clip Art Library] (SVG and PNG). This was the largest site in the world and was integrated with InkScape. In 2019, the site went down, but it appears in Jan 2020 that it is back up, although without a useful interface at the time of writing. See the next item
* [https://freesvg.org/ FreeSVG] (includes most of the openclipart library, 2011)
* [https://freesvgclipart.com/ FreeSVGClipArt] (includes parts of the openclipart library)
* [http://thenounproject.com/ The Noun project] (sign-up required)
* [http://commons.uncyclomedia.org/wiki/Category:Openclipart Files from the Openclipart library]
* [http://commons.uncyclomedia.org/wiki/Category:Openclipart Files from the Openclipart library]
* [http://commons.wikimedia.org/wiki/Category:Nuvola_SVG_icons Nuvola SVG icons]
* [https://publicdomainvectors.org/ Public domain vectors]


=== Windows Meta File ===
=== Windows Meta File Repositories ===


; Free
; Free
* [http://www.free-clip-art.com/ Free Clip Art]
* [http://www.free-clip-art.com/ free-clip-art.com]


; Commercial
; Commercial
* [http://www.graphicsfactory.com/ Graphicsfactory]
* [http://www.graphicsfactory.com/ Graphicsfactory]
* [http://www.prodraw.net/cartoon/ Prodraw] (some free bitmaps)


=== Bitmaps only ===
=== EPS File Repositories ===
(Encapsulated PostScript)


* [http://www.garcya.us/blog/free-vector-graphics/ Web Design Blog]
* [http://www.vecteezy.com/ vecteezy] (stupid name, cool vectors)
=== AI (Illustrator Repositories ===
* [http://www.vecteezy.com/ vecteezy] (stupid name, cool vectors). The ones I tried give you a zip with EPS/AI/JPEG inside.
* [http://rj-graffix.com/clipart.html Rick Johnson/Graffix] Clip art for technical Illustrators. Some free isometric building blocks.
=== Bitmaps only repositories===
* [http://commons.wikimedia.org/wiki/Nuvola Nuvola icons], see also [http://commons.wikimedia.org/wiki/Commons:Project_Nuvola_2.0+ Project Nuvola 2.0+]
* [http://www.school-clip-art.com/ School Clip Art] (only bitmaps)
* [http://www.school-clip-art.com/ School Clip Art] (only bitmaps)
* [http://www.inki.com/clipart/textlist.php Inki's Clipart]
* [http://www.clipproject.info/ Clip Project]
* [http://www.wpclipart.com/index.html Wp Clipart]
* [http://www.best-of-clipart.com/ Best of Clipart] (needs registration)


== Other Links ==
== Other Links ==
Line 60: Line 137:


* [http://en.wikipedia.org/wiki/Open_Clip_Art_Library Open Clip Art Library] (Wikipedia entry)
* [http://en.wikipedia.org/wiki/Open_Clip_Art_Library Open Clip Art Library] (Wikipedia entry)


=== Software ===
=== Software ===
Line 70: Line 146:


; Free online tools
; Free online tools
* [http://www.fileformat.info/convert/image/svg2raster.htm] SVG to JPEG/PNG/TIFF at fileformat.info
* [http://www.fileformat.info/convert/image/svg2raster.htm SVG to JPEG/PNG/TIFF] at fileformat.info


; Free Vector editors
; Free Vector editors
* [http://en.wikipedia.org/wiki/Inkscape Inkscape]
* [http://en.wikipedia.org/wiki/Inkscape Inkscape]
* [http://en.wikipedia.org/wiki/OpenOffice.org_Draw OpenOffice Draw]
* [http://en.wikipedia.org/wiki/OpenOffice.org_Draw OpenOffice Draw]
[[Category: Tutorials]]
[[Category: Multimedia]]
[[Category: Flash]]
[[Category: Assets]]

Latest revision as of 22:18, 24 November 2020

Definition

Clip art, in the graphic arts, refers to pre-made images used to illustrate any medium. Clip art is divided into two different data types represented by many different graphics file formats: bitmap and vector art. Clip art vendors may provide images of just one type or both. (Wikipedia)

This article is also part of the Flash tutorials.

Formats used in repositories

The most common bitmap formats for clipart distributed on the web is *.jpg, *.png, and *.fig. But one may also find *.bmp (for smaller things), or TIFF and TGA.

Most common vector formats are:

  • Adobe's EPS (Encapsulated PostScript), also the related PDF format.
  • Microsoft WMF (Windows Metafile) and its variants
    • EMF - Enhanced Metafile)
    • WMZ - Compressed Windows Metafile
    • EMZ - Compressed Windows Enhanced Metafile
  • SVG (in the open source community)
  • Illustrator *.ai file (rarely)

Importing clipart to Flash

Most often, clipart is distributed in *.wmf format (Windows Meta File format) or the more recent *.emf (Windows extended ...). Flash can handle this format. It also can handle:

  • Illustrator *.ai format,
  • Enhanced Windows Metafile *.emf (handles curves better than WMF)
  • Freehand,
  • Flash *.swf
  • Autocad *.dxf.

It can not handle:

  • SVG
  • EPS (to verify)

To import, either copy/paste it from an open application or use File->Import, either to stage or to library.

If you own Adobe Illustrator, first import to Illustrator, then select, copy and paste the Clipart from Illustrator to Flash. Illustrator can handle many formats, SVG and EPS for example.

Since most open source clipart is in SVG (OpenClipArt which Adobe Flash can't import, I suggest sending angry e-mail to Adobes. They do have the technology and it would be a matter of hours to implement this feature. In the meantime use one of the many opensource convertors or the free Inkscape SVG drawing program and then either save to *.wmf or *.emf. You probably will loose some drawing elements.

If you only need to recover shapes (as opposed to a full vector graphics structure): Select an object in a drawing program (such as Inksapce), then copy it. In Flash, you then can use Edit->Paste Special and select Picture (Metafile). This will paste the drawing as a group of shapes that you then can explode.... no lines.

Using Fonts as ClipArt

In many graphic tools you can select a font with pictures, e.g. WebDings.

In Flash

  • Use text tool
  • In the properties panel, set the character size to something big, e.g. 200pt
  • Select a "....dings" font, e.g. Webdings.
  • Type a letter
  • Break it apart
  • Then menu Modify->Unition

Under Windows,

  • select programs->Accessories->System Tools->Character tables. Explore a table.
  • If you like a "letter art", then select and copy/paste to InkScape, Flash, google sketchup or any other tool that can handle text.

See webdings and wingdings for pictures of these fonts.

Emoji

According to Wikipedia, Emoji (Japanese: 絵文字, English: /ɪˈmoʊdʒiː/ ih-MOH-jee; Japanese: [emodʑi]; singular emoji, plural emoji or emojis) are ideograms and smileys used in electronic messages and web pages. Some examples of emoji are 😃, 🧘🏻‍♂️, 🌍, 🍞, 🚗, 📞, 🎉, ♥️, and 🏁. Emoji(s) exist in various genres, including facial expressions, common objects, places and types of weather, and animals. They are much like emoticons, but emoji are pictures rather than typographic approximations; the term "emoji" in the strict sense refers to such pictures which can be represented as encoded characters, but it is sometimes applied to messaging stickers by extension.

Strictly speaking are standardized Unicode characters. For some, e.g. faces, variants do exist. Also, according to Wikipedia, the exact appearance of emoji is not prescribed but varies between fonts, in the same way that normal typefaces can display letters differently. Emoji caracters are standardized, e.g. as of Nov 2020 in Unicode Technical Standard #51 version 13 .

Free emoji directories:

  • Twemoji from Twitter (requires technical skills, i.e. pulling a GitHub archive): SVG and PNG format
  • OpenMoji.org (as of Nov 2020, supports version 13): SVG and PNG format
  • Noto Emoji fonts from Google (requires technical skills, pulling a GitHub archive): SVG and PNG

To find the code for an Emoji, use for example OpenMoji.org or decodeunicode.org.

Clipart repositories

We are mostly interested in vector formats. Alternatively, you may also search through other applications you installed on your computer, e.g. Office products like Word and Powerpoint and the Open Office equivalent.

Indexes and serach engines

It is extremly difficult to find good free clipart sites. Best bet is really the Open Clip Art Library, but then may have to transform SVG into another vector format, e.g. if you work with Flash.

In SVG Format

SVG became the most standard format in the open source community. SVG also is part of HTML5. Many commercial programs can import SVG, but some like Flash or Stitch Era embroidery software can not. In this case use you can for instance import to Illustrator or Corel Draw, then either copy/paste to the other application or import the proprietary format (e.g. *.ai)

List of repositories

Windows Meta File Repositories

Free
Commercial

EPS File Repositories

(Encapsulated PostScript)

AI (Illustrator Repositories

  • vecteezy (stupid name, cool vectors). The ones I tried give you a zip with EPS/AI/JPEG inside.
  • Rick Johnson/Graffix Clip art for technical Illustrators. Some free isometric building blocks.

Bitmaps only repositories

Other Links

File formats

General

Software

Most graphics vector graphics editors can import/export various formats.

Free online tools
Free Vector editors
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Clipart&oldid=74691"