In this blog post I’m going to show you how I used Photopea to annotate one of my photos. The workflow using Photopea is virtually identical to the way I annotate photos using Adobe Photoshop.
The original photo was edited using Apple Aperture (a discontinued photo editor) and Photoshop (for spot removal and sharpening). I could have attempted to edit the photo using Photopea but that wasn’t the point of my “Proof of concept” blog post.
Finished project
The first screen capture shows the finished project — I used it to reverse-engineer the steps that I took to create the annotated image and the settings I made along the way.
The “Layers” panel (located in the right sidebar) shows the finished project is compromised of seven layers, listed from bottom to top in the order they were created.
The “Background” layer is the photo itself. Go to File / Open… and navigate your computer to find a photo you would like to annotate.
View / Rulers
Before proceeding, it’s helpful to turn on “Rulers.” More about that later. In the Photopea menu bar, go to View and check Rulers.
Tech Tips: command-R (macOS) is a keyboard shortcut that can be used to toggle Rulers on/off.
The “View” menu also includes “Zoom In” and “Zoom Out” plus the associated keyboard shortcuts.
Press and hold the spacebar. Notice the arrow-shaped cursor turns into a hand that can be used to drag the canvas around the work space.
Post Update: View / Screen Mode > Fullscreen will scale up the Photopea window to fit the size of your computer screen. Fullscreen mode makes it much easier to work on fine details, especially when used in combination with the “Zoom Tool” and “Hand Tool”; the icon for both tools appears in the lower part of the left sidebar. Try it — you’ll like it! Uncheck “Fullscreen” in order to return to the desktop view. By the way, did you notice I added another guide line and Text layer for a follow-up blog post?
Text Tool settings: Title
The title is the first layer I added using the following selections: IBM Plex Sans (font type); SemiBold (font style); Size = 150 px; Color = Black; and “Aa” = Sharp.
Tech Tips: Text size is measured in pixels, not points. I’m not sure Photopea is calibrated correctly to convert points to pixels. Test it yourself using one of many online points-to-pixels calculators such as PT to PX Converter.
No matter, click the down arrow beside text “Size” and simply use the slider to select a text size that you like. You can also highlight the pixel size and type the exact number you prefer.
To begin adding text to your project, select the “Text Tool” (located in the left sidebar), click an insertion point on the photo and start typing. The default name for the new layer is “Text layer 1, 2, 3, etc.”
When you are finished, either delete the layer by clicking the “Cancel” button (X icon located near the right end of the Photopea menu bar) or save changes made to the layer by clicking the “Confirm” button (checkmark icon located to the right of the X) and the layer name changes so it is the same as the text you typed. In this case, I shortened the name of the layer to “Comet Darner dragonfly.”
With the layer selected, click on the “Move Tool” (left sidebar, at the top) and click-and-drag the text to reposition it exactly where you like.
Text Tool settings: Labels
Next I added a layer for “eye (1 of 2),” one of several labels for parts of the anatomy, using the following selections: IBM Plex Sans (font type); Regular (font style); Size = 100 px; Color = Black; and “Aa” = Sharp.
Tech Tips: The “Sharp” setting is used to avoid text with “jaggies,” that is text with saw tooth edges.
As an aid for aligning text, I created a blue guide line by clicking on the ruler along the top of the screen and dragging down to position the guide line on the photo. The guide line can be repositioned using the “Move Tool.”
Line Tool settings
The next layer I added is an arrow that points from the label to the anatomical part, in this case an eye. The settings I used for “Arrow 1” are shown in the following screen capture.
Tech Tips: Add a new vertical guide line for Arrow 1 by clicking on the ruler along the left side of the screen and dragging to the right to position the guide line on the photo. Right-click on the “Rectangle Tool” and select the “Line Tool.” I used shift-click-and-drag to draw a straight arrow that is aligned with the new blue guide line.
Add more layers
I followed the same steps described above to add a Text layer for “wing pads,” a new guide line for Arrow 2 and an arrow that points from the label to the anatomical part, and another Text layer for “prementum.”
Saving / Exporting
I saved the final image as a Photoshop document by selecting File / Save as PSD. The resulting PSD file can be reopened in Photopea in order to continue working on the project. Post Update: .psd files created by Photopea can be opened in Adobe Photoshop, although it is likely the font(s) you chose to use in Photopea are not available in Photoshop. Photoshop will prompt the user to resolve the problem.
I also saved the file as a PNG by selecting File / Export as.
What are the take-aways?
Open Photopea in a Web browser: www.photopea.com (For what it’s worth, I prefer “Google Chrome.”) Since Photopea is Web-based, it runs on desktop computers, laptop computers, tablets, and smart phones. Having said that, I think it would be challenging to annotate a photo with a tablet or phone unless those devices are used in combination with an external keyboard and mouse. Not impossible, but definitely challenging.
My dear friend Phil Wherry passed away too long ago. Phil was my tech guru for many years. I’m the type of person who suffers from “approach avoidance” — I like to know what will happen BEFORE I do something. One of the best bits of tech advice Phil shared with me is “Don’t be afraid to experiment and see what happens.” That’s exactly what I did when I used Photopea to annotate one of my photos and I encourage you to do likewise. Good luck!
Related Resources
Copyright © 2021 Walter Sanford. All rights reserved.
Like this:
Like Loading...
walter sanford's photoblog 