We will be using the Photopea Photo editing software for all of the projects in this book. You can work with Photopea directly in your web browser by clicking on the link below: (https://www.photopea.com).

You also have the option to download and install Photopea to your Desktop. (recommended)

Now that we understand the benefits and technical requirements using Photopea, we can setup up an account, in addition, we can install it on the desktop. (Neither option is required, you can start working on a new document immediately).

1. To setup an account for Photopea, go to (https://www.photopea.com) select Account, choose free version, and login with your email, (see Figure 1.1).
2. Next, select which platform you prefer to sign-in with. I chose my Gmail email account to sign-up, and started working directly in my web browser.

Figure 1.1 – Setting up an Account

So, in the previous steps, we created an account on Photopea, and understand that we can work and access it from the browser, as well as open and work on our projects from any computer with our registered account.

Next, we will learn how to install it to work on a desktop computer. This will enable to use Photopea with more power, faster response, and less delays, since we’re not totally dependent on a browser to operate it; but we still need to be connected to the internet to run the software.

To access Photopea from your desktop, do the following:

1. Open Google Chrome and type (https://www.photopea.com/).
2. The Photopea app will load in the web browser.
3. Click on More at the top of the Photopea Menu bar and select Install Photopea.
4. Once Photopea is installed, it will create a shortcut icon on your desktop screen.
5. Right-click on the Photopea shortcut icon and choose, Pin to Start, or Pin to Taskbar. This makes it is easy to access Photopea and begin working..

Figure 1.2 – Install Photopea on the Desktop

6. If you need to Uninstall Photopea, type in the google chrome apps link in your browser: (chrome://apps/).
7. You will see all of the Chrome apps installed. Right-click over Photopea and select Uninstall:

Figure 1.3 – Uninstall Photopea

Now that we’ve installed Photopea to the desktop, and learned how to Uninstall It; we can move on to the next section.

The free version of Photopea has pop-up ads, but a recent update allows you to hide them in Google Chrome Extensions called, Remove Ads from Photopea. The free version includes most features and 0.5 GB of cloud storage. That’s great news for new users to get started risk-free and good for experienced users on a budget.

To remove ads from Photopea, do the following:

1. Open GOOGLE Chrome and type in https://chromewebstore.google.com/.
2. Type Photopea in the Search extensions and themes bar, and select the Remove Ads from Photopea extension.
3. Next, click on the Add to Chrome button, located on the right side. (see Figure 1.4):

Figure 1.4 – Add the Remove Ads from Photopea Extension

Important note

The remove ads feature only works in the Free Version. If you pay for the Premium version, you have to go back in the Chrome Extensions to Disable it. Otherwise, the Premium Version will act buggy and not display right. This is because the Premium version has a built in extension that removes the ads already.

The premium version is $5/month with 5GB cloud storage, comes with no ads, quick email support, saves more of the steps you made working in the document (in the history tab), and now includes the new AI Selection Feature that we will cover in Chapter 15, Tips, Tricks, and Best Practices.

Important note

The History Tab allows you to revisit and recover an original action you made.

I will be sticking with the free version of Photopea for a couple of reasons.

1. I can hide the Ads in the Google Chrome Extensions. Go to the top right of the Google Chrome Browser, click on the 3 small dots, scroll halfway down, select Extensions, Photopea, Remove the Ads and Hide the ads on Photopea). (see Figure 1.5).

Figure 1.5 – Remove or Disable the Remove Ads from Photopea Extension

2. I will use my personal external hard drives along with the free Google cloud drive to back up my files.

Next, we will take a look at Raster and Vector Images, how they differ, and will learn to choose the best format for working on projects and jobs.

Raster and Vector are the two most common formats used for image editing, logo design, graphic art, animation, printing, and so on. Each format has key distinctions that are important to know before starting a project.

Looking into Raster

Raster files are created from tiny individual rectangular color dots called Pixels. The more pixels you have, the better the quality and details you can add to an image or digital painting. Specific file types such as PSD, JPEG, PNG, BMP, and so on, can handle a lesser or greater number of pixels. View the pixel examples below, see Figure 1.6:

Figure 1.6 – Pixels

Raster images can achieve complex renderings that look natural, soft-blended, multi-colored gradations; and also, mid-tones, lights, and shadows. They are also great for photography and digital painting, and for blending colors. Programs like Photopea, Photoshop, Gimp, and Affinity Photo are ideal for creating and editing raster work.

One of the limitations of raster files is that it is difficult to enlarge images; or scale them down as that might cause them to lose quality or become pixelated. The larger you set up your document and resolution, the larger the file size becomes, and will require more computing power to work, that may cause your computer to run slower. I will explain the importance of DPI or Dots Per Inch in relation to file size, pixels, printing and viewing the quality of documents later on

Looking into Vector

Vector images are made up of paths created by individual nodes using mathematical formulas. Nodes are seen in lines, curves, or points (as wireframes) to make individual vector shapes with or without color. Below is an example of nodes and wireframes. See Figure 1.7:

Figure 1.7 – Vector Nodes

Vector images and graphics can be infinitely scaled up or down, they are usually smaller file sizes than hi-res raster files; and are best for spot colors, logos, technical drawings, 3D, 2D animation, specialty printing, embroidery, color separations, and CAD drawing. Some popular vector file formats are AI, EPS, PDF, CDR, SVG, AD or the file initials of a vector program not listed.

Vector images are capable of mimicking some rendering detailed work with highlights, shadows, and blending with limitations compared to raster rendering, and would require a lot more effort and time to simulate a close interpretation of a raster image. In order for Vector images to display correctly on the web, they need to be exported into a raster format. Popular programs like Adobe Illustrator, Corel Draw, Affinity Designer, and Inkscape are great for vector-based projects.

Should you use Raster or Vector for your project?

Keep the things we went over about Raster and Vector formats in mind to help make the best decision on choosing when to work in a vector or raster image. If you need infinite scaling use vector, if you need complex, detailed subtle gradations and shadows, choose raster. You can also export vector images into raster programs and add complex raster rendering, and you can open raster files in vector programs to add vector elements.

You can see Raster versus Vector examples in Figure 1.8. Notice how fuzzy and pixelated a low-quality raster image is on the far left:

Figure 1.8 – Raster versus Vector (Far left, Raster low resolution) (Vector on far right)

In closing, we learned the difference between Raster and Vector images, when you should work in one format over the other, scaling up, scaling down, and image quality.

We will cover RGB and CMYK color modes in the upcoming section.

Working in Photopea or any Vector or Raster program, you should be familiar with the two common color modes Red, Green, Blue (RGB) and Cayan, Magenta, Yellow, Black (CMYK). Photopea has four color profiles but we will only use two color modes, (Photoshop, Affinity Photo and others have even more color modes.) Both have distinctive differences and roles for viewing, mixing, and printing colors. Being up to speed with both modes will reduce surprising unwanted results, costly printouts, and other issues that can occur.

You can change the document from RGB to CMYK by simply clicking on the Image menu, Mode, and choose CMYK or RGB, see Figure 1.9:

Figure 1.9 – RBG Color and CMYK Color

Let’s go over the differences between RGB and CMYK.

RGB

RGB is used for displaying web pages, videos, social media images and graphics elements. RGB stands for Red, Green, and Blue, and produces millions of colors by using light that can display up to 16.7 million colors on computers, TVs, smart phones, and any screen device through additive mixing. This is done by displaying red, green and blue bulbs at various intensities similar to the human eye color receptors called cones. The color white is displayed when all three colors are at full saturation, whilst 0 intensity will result in black.

CMYK

CMYK stands for Cyan, Magenta, Yellow, and Black. CMYK can print around 16,000 colors. All 4 colors can be mixed to create black. In the past, most printing companies required you to export your files as CMYK. The commercial printers would print products like business cards, stationary, booklets, posters, T-shirts, any advertisements for printing, and packaging through subtractive mixing.

There are times when you may have to enlarge the document dimensions to fit on T-Shirts, Banners, Large Posters, etc. some files may become larger than initially created. CMYK also carries more data than vector spot colors.

In today’s technology, commercial printing is less reliant on the CMYK process. Nowadays, printers, are equipped with 10+ different color cartridges, and some can even print the color white. Many of my creative friends that work in the field have been recommended not to convert their files to CMYK, let the print operators decide on if a conversion to CMYK is needed. It’s best to work and create your documents in RGB; if you need to convert it to CMYK, it’s best to Export as CMYK.

Let’s look at the example of the female character side by side. The document on the let is an RGB file. The Image on the right is CMYK. If you look closely, the image on the right has more vibrant colors (as it should, being an RGB file). The image on the right has a washed out dull looking blue (as it should being a CMYK format), see Figure 1.10:

Figure 1.10 – Comparing an RBG Document vs a CMYK Document

Now let’s take a look at the Color Range in the Color Picker example. The Color Picker on the left shows all the colors available from the yellow we sampled. Once you click on the CMYK gamut, you see this greyed out shape on the color picker. This is showing colors unavailable in CMYK, see Figure 1.11:

Figure 1.11 – The Colors available in RGB vs CMYK in the Color Picker

That will cover the basics on RGB vs CMYK.

In closing, we have covered the differences between RGB vs CMYK color modes, gained a better understanding of the capabilities of each format, and when you need to setup each mode for printing vs viewing images on your computers, and smart phone devices.

In this chapter we covered how to setup a user account and properly install software, the difference between the free version and paid subscription, learned the difference between raster and vector images, and also how RGB colors differ from CMYK, and how resolution quality can affect the way images display on monitors, and print out quality from printers.

In the next chapter we will learn how to set-up documents, different document types, sizes, templates, using guidelines, and artboards.