Basic Components

We will start our journey with a look into the basics of the interactions we have daily with our various technologies. It is imperative that we as digital artists and content creators hold ourselves responsible for understanding what the tools are using are comprised of, how they actually function and how we interface with them at a more professional and competent manner. We will cover hardware and software, as well as file compression and formats.

Computer hardware is any physical device used in or with your machine, whereas software is a collection of code installed onto your computer’s hard drive. For example, the computer monitor you are using to read this text and the mouse or trackpad you are using to navigate this web page is computer hardware. The Internet browser that allowed you to visit this course and the operating system that the browser is running on is considered software.

All software utilizes at least one hardware device to operate. For example, a video game, which is software, uses the computer processor (CPU), memory (RAM), hard drive, and video card to run. Word processing software uses the computer processor, memory, and hard drive to create and save documents.

In a computer, hardware is what makes a computer work. A CPU processes information and that information can be stored in RAM or on a hard drive. A sound card can provide sound to speakers and a video card can provide an image to a monitor. All of this is hardware.

On that same computer, software can be installed and allow a person to interact with the hardware. An operating system, like Windows or macOS, is software. It provides a graphical interface for people to use the computer and other software on the computer.

Can a computer run without software? In most situations, yes, a computer can run without software being installed. However, if an operating system or interpreter is not found on the computer, it either generates an error or doesn’t output any information. Installing programs onto the computer in addition to an operating system gives the computer additional capabilities. For example, Photoshop can be installed, allowing you to edit photos and create elaborate designs.

Can a computer run without hardware? This depends on the hardware. Most computers require at least a display, hard drive, memory, motherboard, processor, power supply, and video card to function properly. If any of these devices are missing or malfunctioning, an error is encountered, or the computer will not start.

Let’s look at a few of the core pieces of hardware that are essential to today’s computing.

MOTHERBOARD: Also called the Logic Board, the motherboard is a printed circuit board that is the foundation of a computer, located in the computer chassis or within a mobile device. It controls specific amounts of power to and allows communication for the CPU, RAM, and all other computer hardware components. It is the hub of all activity within a digital device.

MEMORY: Computer memory is a physical device inserted on the motherboard capable of storing information temporarily or permanently. Memory can be either volatile and non-volatile memory. Volatile memory is a memory that loses its contents when the computer or hardware device loses power. Computer RAM is an example of a volatile memory and is why if your computer freezes or reboots when working on a program, you lose anything that hasn’t been saved. Non-volatile memory, sometimes abbreviated as NVRAM, is a memory that keeps its contents even if the power is lost.

Memory is not disk storage! It is very common for new computer users to be confused by what parts in the computer are memory. Although both the hard drive and RAM are memory, it is more appropriate to refer to RAM as “memory” and a hard drive as “storage.”

When someone asks how much memory is in a computer or device, it is often between 1 GB and 16 GB of Random Access Memory (RAM) and several hundred gigabytes of even a terabyte of hard disk drive storage. In other words, you always have more hard drive space than RAM.

When a program such as Photoshop is open, it is loaded from your hard drive and placed into RAM, which allows it to communicate with the processor at higher speeds. Anything you save to your computer, such as a PSD file or JPEG, is sent to your hard drive for permanent storage. If Photoshop needs more space to operate, however, the CPU will direct it to a temporary scratch disk area on the actual hard drive, where it can pretend to be RAM. Pretty crazy.

HARD DRIVE: A hard disk drive is a non-volatile memory hardware device that permanently stores and retrieves data on a computer. They can be used to store any data, including pictures, music, videos, text documents, and any files created or downloaded. Also, hard drives store files for the operating system and software programs that run on the computer or device.

The information that is written on a hard drive is done via a complex magnetic process where bytes are assigned either a 0 or a 1 in elaborate sequences that eventually define certain instructions or elements. Reading this as binary data, the computer can understand what the data is on the hard drive and how to process or deliver it.

There are two main types of hard drives used in today’s computing – HHD and SSD. The traditional HHD (hard disk drive) uses a series of platters made of either aluminum, glass or ceramic materials that are coated in a magnetic substance. These platters aren’t far from the concept of the vinyl record or compact disc. They must spin at high speeds in order to be read or written to. That is why you may have heard horror stories about someone’s laptop being bumped or dropped while they were using it and a bunch of work was lost, due to the platter being scratched or nicked and rendered as unreadable.

SSDs are much more common today, especially with the widespread use of portable and personal devices. SSD stands for solid state drive, and the technology no longer depends on moving parts. This ends up being safer for computers that are being taken all over with their users (laptops, phones, tablets…) but they also deliver information at much greater speeds, making startups, program loading and app responsiveness significantly faster.

PROCESSOR (CPU): A computer’s CPU handles all instructions it receives from hardware and software running on the computer. It is often referred to as the brain of the computer. However, it is more appropriate to refer to software as the brain and the CPU as a very efficient calculator. A CPU is really good with numbers, but if it wasn’t for the software it wouldn’t know how to do anything else.

Many new computer users may improperly call their computer and sometimes their monitor the CPU. When referring to your computer or monitor, it is proper to refer to them as either the “computer” or “monitor” and not a CPU. The CPU is a chip located on the motherboard inside the computer.

In the CPU, the primary components are the ALU (Arithmetic Logic Unit) that performs mathematical, logical, and decision operations and the CU (Control Unit) that directs all of the processors operations.

Over the history of computer processors, the speed (clock speed) and capabilities of the processor have dramatically improved. For example, the first microprocessor was the Intel 4004 that was released November 15, 1971, and had 2,300 transistors and performed 60,000 operations per second. The Intel Core i7 processor has 731,000,000 transistors and performs around 100,000,000,000 instructions per second.

GRAPHICS CARD (and GPU): Also known as a video card, this unit is an internal board that interfaces with the motherboard which creates a picture on a digital display. Without a video card, you would not be able to see this page.

In the past, VGA or SVGA was the most popular connection used with computer monitors. Today, most flat panel displays use the DVI connector or HDMI connector.

The majority of cards available when this section was written include a GPU – a programmable logic chip (processor) specialized for display functions. The GPU renders images, animations and video for the computer’s screen. Although it is used for 2D data as well as for zooming and panning the screen, a GPU is essential for smooth decoding and rendering of 3D animations and video. The more sophisticated the GPU, the higher the resolution and the faster and smoother the motion in games and movies. GPUs on stand-alone cards include their own memory (RAM), allowing for even greater multitasking and speed with graphic operations.

Now on to software. Software is the package of data and instructions that the hardware in a computer or device need in order to operate. It is essentially code written by programmers using high-level programming languages which are then decoded into machine language with a compiler and/or an interpreter.  

Types of Software:
Applications – programmed to execute special functions beyond the basic computing functions of the computer itself. Think Microsoft Word, Adobe Premiere, Apple’s Logic, etc.

System Software – this directly operates computer hardware and allows the user and applications to perform extra tasks. The primary system softwares are operating systems, device drivers and utilities.

  • Operating systems (OS) are the base programming that run the computer or device and provide basic operations the user can take advantage of without extra application software, such as calendars, text editors, contact books, etc. But they also control how graphic are displayed, windows presented, what cursors look like, and so on.
  • Device drivers are software directly related to peripheral components. Each device you plug into your machine needs a driver to communicate to the OS how it should behave and what roles it can play. Think about a graphics tablet – the computer needs to have a driver installed in order to allow it to make its functions properly.
  • Utilities and plug-ins are software that extend the functions or capabilities of other preexisting software. These could be extra goodies for photo editors, third-party controls to tweak the way something looks or sounds, etc.

If you have ever wondered what it might be like getting into the software industry, have a look at this short piece on freelance iOS engineer, Danilo Compos, as he breaks down his process and approach to his work.

Most people connected to the modern age interact with a multitude of digital files all throughout the day, whether as a user or a contributor/creator. As soon as you look at your smartphone in the morning or turn on your computer at school or work, you see graphics, images, little files on your desktop, hear the ping of new email, and check out photos of what your friends had for dinner the night before. What we rarely ever think about is how each of those components had to go through some sort of processing and compression in order to perform their duty. What is surely more absent from our thoughts is that groups of artists and engineers and programmers had to gather in formal meetings in order to define the rules and regulations for each little file that we interact with, in order to maintain standards of consistency, optimal performance, the ability to share and use these files universally, and for other security and safety reasons.

Some files, however, are developed by private parties and packaged in a way in which they don’t want universal access, or only want the files to operate on specific OS. This can help keep certain trade secrets at bay, or simply manage the delivery of a product to a certain user group or paying customer. This is easily seen with the major OS developers, Microsoft and Apple, who work very hard in encoding their software in a way so that users of the other platform cannot access and install their goods.

When you are working on a project and get to a saving point, let’s look at what actually happens to that file behind the scenes. We will use a still image design as our example. You are using Photoshop to create a new banner for a website you’ve been working on. This design has several layers that make up the composite image: several photographs you have taken, some color gradients and graphic shapes, and several layers of type. Firstly, while you work on this before ever saving it, it is being stored on your RAM – remember, this is volitile, AKA temporary space, and if something happens like losing power, that’s when you lose your work. OK – so you decide it’s a good time to save your work and opt for saving it first as a Photoshop document, or PSD. Upon saving a file is when it actually makes its way permanently to your hard drive. This is a specific type of coded package that Adobe developers programmed so that only users who have (legally) purchased the software can access. This file format will take all of the data from your design and sort of disassemble it into tiny bits of instructions that ultimately describe the scene that you have built. There is little compression going on here, but plenty of metadata (data that describes data) defining colors, what’s on what layer, what layers are named, what fonts were used and in what style, etc. These file packages tend to be pretty large in file size, almost always too large to email. They also only speak with Photoshop, so if you tried to upload the .PSD banner to the website, it would not load because web readers have no idea how to handle it. But it’s a very important file to keep around on your hard drive, as you can always revisit it to make updates and changes.

But now you are ready to finalize your design and produce a file that is intended for the internet, and you save a version as a JPEG. This image format was created in the very early stages of digital computing and have only evolved slightly over time. This package takes all the information about layers and type and discards it. Then the code that described its visual arrangement is cut up, rearranged, condensed and simplified in a way that retains the instructions of displaying the image properly, but in a much smaller, manageable file. It also has some metadata such as the dimensions, watermark or copyright info, and color space, as well as a code formatting that is intended for a widespread group of software/readers to interpret and display it properly. There is an intense amount of mind-boggling mathematics involved in this compression, and it ends up being very efficient.

This is generally the process that all files will go through, whether it is audio, video, vector, word files or game packages. This short film about video compression by Tech Quickie does a great job of demonstrating the process.

Let’s take a look at some of the common file formats we as digital artists work with on a regular basis, and make sure we understand which ones to use at the right time.

FILE TYPES

Let’s take a look at some of the common file formats we as digital artists work with on a regular basis, and make sure we understand which ones to use at the right time.

Image files:
GIF – Up to 256 colors (8-bit); doesn’t support layers; supports transparency; supports frame animation. Best used with text, line art and simple logos.
JPEG – Millions of colors; no layer support; no transparency support; lossy compression at low quality can produce block artifacts. Best used for photography and images/designs with color variation and detail in use on screens, not print. 
PNG – Millions of colors; no layer support; transparency is supported; lossless compression helps maintain quality presentation. Best used on images with large blocks of color and for display on the web, not print.
TIFF – Millions of colors; support for layers; support for transparency (via alpha channel); lossy or lossless compression available. Best image format for print delivery. Not compatible for video graphics or web display.
SVG – Scalable Vector Graphic; maintains vector flexibility; does not support layers; does support transparency. Best used for website display.
PDF – Can retain both pixel and vector information; very versatile in delivery; interactive properties. Ideal for electronic delivery as well as print.

Video Files:
H264 – Most commonly used format for the recording, compression, and distribution of video content. It supports resolutions up to 4096×2304, including 4K Ultra High Definition.
AVI –
Intended for Windows Media Player; has some issues with variations in bitrate; doesn’t support metadata for aspect ratio.

MPEG4 – Quicktime product; supports streaming; variable compression bitrate; advanced audio coding; no digital rights management (DRM).
M4V – Quicktime product; intended for use with Apple and Playstation portables but has a broad spectrum of delivery among players and platforms; great compression; supports HD formats; can have DRM.
FLV – Adobe Flash video; was the dominant video and animation standard for web-based delivery; seeing it’s decline in today’s popularity as H264 and HTML5 become a more reliable standard.

The email address for the instructor of this course is: