Setting the Stage: Photoshop, Affinity, and Atomic Habits
In this article, I’m going over a little bit of my history with Photoshop and the process that I’m currently in with learning the Affinity Design Suite and using AI as an assistant to help me learn and to pull it all together. So, we’ll be covering a few different topics all in one article, but they’re all tied together, I promise. This is also a nod to James Clear, who wrote Atomic Habits, which is a book I am currently reading for the second time and it’s helped me immensely in my web development career—or I should say, as a solo web developer, among other things.
The Initial Shock: Photoshop vs. Affinity UI
To start with, I used Photoshop to create web graphics. I know you’re not supposed to do that technically, and Illustrator is better for it, but I never took the time to learn Illustrator other than a few generic things. I got used to Photoshop and created my web graphics there.
When I first started using Affinity, there were three separate apps. Everything kind of looked the same as Photoshop, but not really. In Affinity, everything was colored instead of being just white icons. It seemed that Affinity had almost all of the same tools, but they were in different places, so I had a hard time finding them. I got the upgraded version of Affinity. There was not a subscription fee; there was a price-for-life license, and I bought it. It wasn’t very long after that they made the whole Affinity suite a single application and put all those tools under one hood. That made the whole process even more complicated for me to learn, but that’s just my luck.
Baptism by Fire: Tracing the FireWithFire.ai Logo
A computer crash wiped out everything I had on my desktop, and I didn’t have any online backups of my FireWithFire.ai logo. That crash forced me to figure out a way to convert an old screenshot of the logo and finally do it the right way by creating an SVG. I had to manually trace it.
I had very little experience with vector software, and on top of that, Affinity had just merged their three apps into one. Instead of switching between standalone programs, you now switch between different workspaces called Personas within the same app. Alongside learning how to correctly create an SVG, I had to learn this new integrated Persona interface. I didn’t really have a choice. I could have easily created a PNG version in Photoshop, but since I was at this fork in the road, I chose to do it the right way and learn the process, which wasn’t easy.
I used AI to help me learn the interface, and while it was clunky, it got the job done for FireWithFire. Luckily, that logo has very straight lines, so I didn’t have to mess with curves. I started out using my XP-Pen drawing tablet just because that’s what the AI suggested for tracing graphics. While trying to place exact anchor points, I noticed a stylus offset where the cursor didn’t match the pen tip on the glass. During the calibration process, I realized I didn’t even need the XP-Pen; I could just use my mouse. Once I switched to my standard mouse cursor, things started going a lot faster. The AI never even suggested that simpler approach. I just figured it out during the process, and that’s how you learn sometimes.
Working Smarter: A New Font for DaymonH.com
After going through that mind-bending experience tracing the FireWithFire.ai logo, I wasn’t trying to repeat that anytime soon. At the time of writing this article, I manage three websites: FireWithFire.ai, daymonh.com, and Buckeye Web Development (BWD). After finishing the FireWithFire SVG logo—which I’m very happy with—I moved on to daymonh.com.
Originally, I made that logo using a generic online builder suggested by my host. It was a nice logo, but those quick builders rarely provide a scalable SVG version unless you pay a premium. I used to just make my own raster logos in Photoshop, but using an SVG for a website makes a lot more sense. It loads faster and provides a graphic that scales infinitely with ultra-sharp lines for real-world print like business cards, t-shirts, and merch.
With that in mind, I refused to manually trace the daymonh.com logo. Since it was just a text-based design, I went to Google Fonts, found a very similar style, and kept the process simple. I opened up the Vector Persona in Affinity and typed out the text. Resizing the artboard gave me some problems because the workflow is fundamentally different from Photoshop. In Photoshop, you work with pixel graphics and can just use the crop tool for a quick fix. Affinity doesn’t work like that; you have to manage vector boundaries. I finally figured out that you can avoid manually cropping those extra canvas margins by simply changing the export setting to “Selection without background.” That snapped the boundaries perfectly and gave me a highly usable SVG logo for daymonh.com.
The BWD Logo: Manual Tracing and Vector Tricks
My oldest website, buckeyewebdevelopment.com (BWD), had a text-based logo that I whipped up years ago. I couldn’t remember where I made it, and it wasn’t a standard font I could easily find online, so I was stuck having to retrace it. I put it off for a while, but it was inevitable. Unlike the other two sites, I’ve done actual online marketing with BWD, so I couldn’t just willy-nilly switch the branding. I rolled up my sleeves and got to work.
This time, I knew I didn’t need the XP-Pen, which was a relief. I tried to find an easier workflow than the unoptimal, AI-suggested method I used for FireWithFire. I’ve learned that you have to be in the driver’s seat when working with AI—you have to steer the AI, don’t let it steer you. Knowing that made this attempt a whole lot easier.
Through trial and error, I tested a few AI suggestions that led me down a rabbit hole of online tools promising to automatically convert PNGs into perfect vectors, but none of them worked very well. I was back to manual tracing. I started by removing the background using the Flood Select Tool to get the marching ants selection. Then, I used the Refine Selection tool to soften the edges. The real magic happened when I used the Corner Tool and Smooth Nodes to straighten out the paths. It only barely rounded the sharp corners of the image, and you could only see that slight rounding when zoomed way in.
I also learned a hard lesson about how layers work in Affinity. I had a template layer that I didn’t want to export, but I needed it visible for reference. Because Affinity ties child-layer visibility directly to the parent group differently than Photoshop does, clicking the eyeball icon on the main group hid everything inside it. I ended up having to pull my active layer completely out of the group and place it on top to fix the visibility issue.
During this tracing process, I discovered my color swatches by accident. I already knew that hitting Control + D deselects your active image, but I decided to see what would happen if I just pressed the ‘D’ key alone. It swapped my fill color swatch, which was a handy revelation since I needed to create white and black versions of the main logo, alongside green and white versions for the site icon.
While creating that site icon, I realized it needed a circular background to look right in browser tabs and social media profiles. I learned how to use the Ellipse tool and properly center my logo glyph inside the shape. The SVG circle icon looked perfect in Affinity and in an online viewer. However, I ran into a technical problem I hadn’t thought about. I set the SVG as my site’s favicon, and while it uploaded successfully, I forgot that SVGs are code-based vector files, not flat raster images. When browsers render a site bookmark or tab icon, they handle SVG transparency differently. Instead of the transparent areas blending into the browser tab’s natural color like a WebP or PNG would, the SVG background defaulted to white. I ended up with a solid white square containing a circle. It was a real “duh!” moment for me. I found it amusing but was definitely taken aback by my own silly oversight.
AI in the Driver’s Seat: Troubleshooting with Google Desktop
I’m not going to make any apologies for using AI to work on my websites. I don’t take the lazy route and have AI build everything for me, but I’ve realized that using these tools is just how things are done now. It helps immensely as long as I am steering the AI instead of letting the AI steer me.
I usually use Chrome as my development browser, which has a feature that lets you put Gemini right in the sidebar. It’s incredibly useful because Gemini can see the active webpage, allowing you to ask questions and pick its brain on layout issues. The problem is that when working locally in Affinity, the browser sidebar can’t see my desktop workspace. I was constantly stopping my workflow to take manual screenshots, opening a separate browser tab, and pasting them into the Gemini website just so the AI could understand my UI questions.
I eventually figured out that Google has a desktop app with Gemini built-in that allows you to share your screen or specific application windows. That was a game changer. It’s not perfectly seamless because it doesn’t analyze your screen in real-time—you still have to send a screenshot capture—but the button is right there in your workflow. Wherever you get stuck, you just click, send the visual context, and Google figures it out. It relies on the standard Gemini model rather than Gemini Pro right now, but it’s still incredibly helpful. Having an assistant that could actually see my Affinity interface made the learning process a lot faster. If the AI gave me bad advice, I could show it exactly why it was wrong. Good stuff.
Closing Thoughts
Through all of this frustration, I’m finding that I am actually starting to enjoy using Affinity. I’m looking forward to tackling the next graphic problem with this software.
I’ve been reading the book Atomic Habits, and it’s amazing how many daily tasks tie directly into those principles. Starting with zero knowledge of Affinity—other than knowing it was supposed to work somewhat like Photoshop—I used AI to help me learn the interface and find the tools I needed. I tackled it just 1% at a time. Through this process, I learned a little bit more about steering AI, navigating Affinity’s interface, and understanding how code-based SVGs actually function on the web. Those are all 1% newbie steps. But as the author James Clear says in Atomic Habits, “Results are a lagging measure of your habits.”
Right now, my habits are working a little bit with Affinity here, working with AI there, and learning just a little bit at a time while creating graphics in different formats for different purposes.
To finalize my thought on the 1% rule: I may still be a noob with working with AI and using Affinity for my graphics needs, but each one of those 1 percents add up. I am likely 5% better now than I was when I started this transition. Moving from Photoshop to Affinity and learning how to make AI improve my workflow—instead of letting it dictate my workflow—proves I’m getting better. I’m getting better all the time. 1% at a time.
