Design Tools
There are several different tools for creating images and graphics. Some tools may have different functions or are better for certain types of design than others. Knowing the end goals for a project can help you decide which tool is best for the job.
The Adobe Creative Cloud is available to all UNCW students and some Faculty and Staff. To set up your Adobe access, go here.
- Adobe Express - A free online platform for quick graphics creation. Adobe Express offers a quick and easy way to make documents, design graphics, edit videos, and convert files.
- Canva - A free online platform for quick graphics creation. Like Adobe Express, Canva is dedicated to quick drag-and-drop creation of a variety of graphics and documents. Some elements and video options are limited to premium subscriptions.
- Photoshop - Adobe Photoshop is a comprehensive image creation and editing tool. An industry standard software, Photoshop is utilized for everything from photo editing to digital painting. It can also be used to design documents and flyers. Photoshop is best used for raster graphics.
- Illustrator - Adobe Illustrator is a design cool dedicated to working with vector graphics. Despite its name, Illustrator is not always the easiest tool for digital illustration and painting. Illustrator is industry standard for creating original logos, flyers, and large format printed items such as posters or billboards.
Image File Types
- Vector Graphics are made from mathematical pathways to scale to small or large sizes without a loss of information.
- Raster Graphics are more common and are made up of pixels, which can lead to blurry or lossy expansion/compression.
| Type | File format | MIME type | File extension(s) | Summary |
|---|---|---|---|---|
| GIF | Graphics Interchange Format | image/gif |
.gif |
Good choice for simple images and animations. Prefer PNG for lossless and indexed still images, and consider WebP, AVIF or APNG for animation sequences. Supported: Chrome, Edge, Firefox, IE, Opera, Safari. |
| JPEG | Joint Photographic Expert Group image | image/jpeg |
.jpg, .jpeg, .jfif, .pjpeg, .pjp |
Good choice for lossy compression of still images (currently the most popular). Prefer PNG when more precise reproduction of the image is required, or WebP/AVIF if both better reproduction and higher compression are required. |
| PNG | Portable Network Graphics | image/png |
.png |
PNG is preferred over JPEG for more precise reproduction of source images, or when transparency is needed. WebP/AVIF provide even better compression and reproduction, but browser support is more limited. |
| SVG | Scalable Vector Graphics | image/svg+xml |
.svg |
Vector image format; ideal for user interface elements, icons, diagrams, etc., that must be drawn accurately at different sizes. Support: Chrome, Edge, Firefox, IE, Opera, Safari. |
| WebP | Web Picture format | image/webp |
.webp |
Excellent choice for both images and animated images. WebP offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc. AVIF offers slightly better compression, but is not quite as well-supported in browsers and does not support progressive rendering. Support: Chrome, Edge, Firefox, Opera, Safari |
The following list includes image formats that appear on the web, but which should be avoided for web content (generally this is because either they do not have wide browser support, or because there are better alternatives).
Adobe Express
Coming Soon!
Canva Tutorial
Coming Soon!
Adobe Photoshop Tutorial
Coming Soon!
Adobe Illustrator Tutorial
Coming Soon!