Archive for the ‘Photopea’ Category

Thanks, Photopea!

June 24, 2022

According to The Verge …

Adobe has started testing a free-to-use version of Photoshop on the web and plans to open the service up to everyone as a way to introduce more users to the app. Source Credit: Adobe plans to make Photoshop on the web free to everyone, by Jacob Kastrenakes.

Way to go Photopea — looks like you might have helped to nudge Adobe out of its complacency!

Related Resources

Copyright © 2022 Walter Sanford. All rights reserved.

Determining final instar the Cham way

December 14, 2021

Did you notice I added a new text label to the annotated image of an exuvia from a Comet Darner dragonfly (Anax longipes) featured in my last two blog posts? I added the label in order to make the connection between this image and related ideas discussed in two other relatively recent blog posts (See Related Resources, below).

Remember that all dragonflies and damselflies have a 10-segmented abdomen, numbered from front to back. “S4” stands for abdominal segment four.

Counting odonate abdominal segments can be challenging sometimes. A good strategy to avoid mis-numbering is to begin counting abdominal segments from S10 (located toward the posterior end of larvae (nymphs)/exuviae) and work toward the thorax.

Final instar, the Cham way

There is a simpler way to estimate final instar than calculating instar equivalent.

Larvae in the final stage can be recognized by the length of the wing buds which cover the fourth abdominal segment. Source Credit: Field Guide to the larvae and exuviae of British Dragonflies, by Steve Cham, p. 30.

Look at the preceding annotated image. Notice the tips of the wing pads reach the fourth abdominal segment (S4), indicating the dragonfly larva that emerged from this exuvia had reached final instar. And that leads to the other idea I mentioned at the outset of this blog post.

Every odonate exuvia is a cast skin of the larva at F-0, the final instar, before it emerges to become an adult.

Turns out that’s another nugget of gold paraphrased from Steve Cham’s beautiful little book.

Post Update

The beauty of the Cham way of determining final instar is it’s simplicity. That’s the upside. The downside is there’s no way to determine the actual instar when it isn’t F-0.

For example, the following composite image shows dorsal views of a Common Green Darner (Anax junius) nymph (larva) and exuvia. As expected, the exuvia is F-0 because its wing pads cover S4. On the other hand, the nymph is F-? because its wing pads only reach S2.

Image used with written permission from Freda van den Broek.

Photo Credit: Both specimens (shown above) were collected by Freda van den Broek. The nymph was collected on 06 April 2020 from the Milwaukee River in Ozaukee County, Wisconsin USA, photographed, and released unharmed. The exuvia was collected from Ozaukee County too.

Related Resources

Copyright © 2021 Walter Sanford. All rights reserved.

Proof of concept, revisited

December 10, 2021

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.

Proof of concept

December 7, 2021

Can Photopea be used to annotate photographs? Yes!

Do the results look as good as photos of the same subject that were annotated using Adobe Photoshop? You be the judge.

Comet Darner (Anax longipes) | exuvia (lateral)

In my opinion the results are of comparable quality and that’s saying a lot considering this is my first attempt at using Photopea to annotate a photo.

As expected, the workflow flowed slowly since this was the first time I used many of the tools featured in Photopea.

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. I also saved the file as a PNG by selecting File / Export as.

The Backstory

The preceding photo shows an exuvia from a Comet Darner dragonfly (Anax longipes) that was collected by Stanley Caveney on 19 July 2021 from a pond at MeadowWoods in West Elgin, Ontario, Canada. Sincere thanks to Stan for kindly sharing this beautiful specimen!

Related Resource: Learn Photopea

Copyright © 2021 Walter Sanford. All rights reserved.

How to estimate instar using Photopea

December 3, 2021

In two recent blog posts (see Related Resources, below), I showed how Adobe Photoshop can be used to make measurements that enable you to estimate the instar of odonate larvae (nymphs).

The process works well, that is, as long as you have Photoshop. Does that mean you’re out of luck if you don’t? In a word, no.

Photopea” is a free alternative to Adobe Photoshop. Photopea is a Web-based clone of Photoshop — Photopea doesn’t do everything Photoshop does but it can be used to make measurements on photos using a workflow similar to the one I described in detail in a blog post entitled “How to estimate instar.”

Practical example using Photopea

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.

In order to make this tutorial as simple as possible I went to the Photopea menu bar, navigated to File / New… and created the default blank white canvas, shown below. Note: You should go to File / Open… and navigate to a photo of an odonate larva.

Use the Photopea “Ruler Tool” to measure the length (in pixels) of two line segments: HwL (Hind wing Length); and HW (Head Width). If you don’t know how to measure “HwL” and “HW” then please refer to “How to estimate instar” for detailed, step-by-step instructions.

Right-click on the Eyedropper Tool — located in the left sidebar of the main window, as shown below — and select the Ruler Tool.

Click and drag line segment HwL, such as the sample line shown below. Record the length of the line, in pixels. Click the “Clear” button (optional) and repeat the same process for line segment HW (not shown).

Do the math to calculate instar equivalent and voilà, the result is a number that can be used to estimate instar based upon Ken Tennessen’s average instar equivalents. Again, please refer to “How to estimate instar” for detailed, step-by-step instructions.

Related Resources

Copyright © 2021 Walter Sanford. All rights reserved.

“Tech Tips” Tuesday

November 30, 2021

In this blog post I’m going to show you how I add special characters to some of my annotated images, such as the pictograph for “male,” shown below.

Photo used with written permission from Michael Powell.

I’ll show you how to do it on my older Apple 24″ iMac desktop computer (Early 2009), then I’ll show you (in more detail) how to do the same thing on my newer Apple 13″ MacBook Air laptop computer (M1, 2020).

macOS Yosemite (Version 10.10.5)

Open “System Preferences” and select “Keyboard.” Click on the tab labeled “Keyboard” and check the box for “Show Keyboard & Character Viewers in menu bar.”

As you might expect, a new icon will appear in the menu bar, located on the right side of the screen. When you click on the icon you should see three (3) options (listed from top-to-bottom): Show Character Viewer; Show Keyboard Viewer; and Open Keyboard Preferences… Select “Character Viewer” and navigate to Pictographs. (The last option takes you back the same screen that is shown above.)

macOS Monterey (Version 12.0.1)

After I was unable to figure out how to make the same setting on my MacBook Air, I referred to the “macOS User Guide” that is a built-in feature of the computer. A screenshot of the guide is shown below.

Open “System Preferences” and select “Keyboard.” Click on the tab labeled “Input Sources” and check the box for “Show Input menu in menu bar.”

A new icon will appear in the menu bar, located on the right side of the screen. When you click on the icon you should see the three (3) options shown below. Select the first option, “Show Emoji & Symbols.”

A new window will open on-screen. Navigate to Pictographs. Some sample Pictographs are shown below, including the female and male symbols (fifth row from the top).

Practical example using Photoshop

Here’s an example of part of my workflow to annotate a photograph using Adobe Photoshop.

Open a photo file in Photoshop. Select the “Text Tool” and create a new layer called “male symbol.” Click on the image to add an insertion point, then click on the “Show…” icon in the computer menu bar and select “Show Emoji & Symbols.” Navigate to “Pictographs” and select the “male sign.” You should see a list of “Font Variations.” I always use “Arial Bold.” Double-click on the icon and it should appear on the photo. ♂ Use the “Move Tool” to, well, move the symbol wherever you like on the image.

Photopea

I stumbled across an application recently called “Photopea” that is a free alternative to Adobe Photoshop. Photopea is a Web-based clone of Photoshop — Photopea doesn’t do everything Photoshop does but it could be used to annotate photos using a workflow similar to the one I just described. Look for one or more Photopea-related blog posts in the near future.

Related Resources

Copyright © 2021 Walter Sanford. All rights reserved.


%d bloggers like this: