Affinity blog postings

Affinity Postings - Page 2

Earliest: March 20, 2009Latest: January 20, 2021Total: 42
February 22, 2017

OmniGraphic Margin Functionality

When you export a graphic in OmniGraphic, you can optionally add a margin to the image. This adds a small transparent margin around the image. This is useful if you include the graphic in an email and would like a small margin so the text doesn't cram up to the image.

Web Developers can always add a style class so that image floats on the page, but you don't always have that control in some applications.

Omni Export Dialog
OmniGraffle Export Dialog box

What about Affinity?

In Affinity Designer and Affinity Photo there is no option in the Export Persona or File->Export mode.

You can easily achieve this functionality in Affinity Designer and Affinity Photo. You simply create a style to add a transparent border around your object.

Create a Outer Shadow Effect:

  • Color: Black (Doesn?t really matter)
  • Opacity: 0%
  • Radius: 10 px (Or whatever size you want)
  • Offset: 0 px
Affinity Padding

You won't see anything when you apply this to an object, but when you switch to the Export Persona, you will see an extra border around the image. This is to show you that the extra space that you added.

Affinity Margin
In Export Persona mode there is an indicator that there's more to the image than meets the eye.

Designer Tip

Created a couple of Styles with different radius to make it easier when you want different size margins around your image.

February 15, 2017

Affinity Designer Calendar Template

I was putting together some calendar design in Affinity Designer for project planning. I couldn't find an easy way to create a grid calendar. I checked various Affinity Designer template sites and didn't see any 2017 Calendars that allowed customizations.

So, I decided to use some of the functionality in OmniGraffle Professional and design March and April 2017. I then imported the table into Affinity Designer and added some styles and grouping:

Affinity Calendar
Download the Affinity Designer Calendar Template.

If you have Affinity Designer, feel free to download my template file and customize it for any type of planning that you want to do.

February 8, 2017

Stitching Panoramas in Affinity Photo

One of the really nice things I like about Affinity Photo is how easy it to create Panoramas from a set of photos.

Take a look at a couple of photos that were generated from Affinity Photo:

Epcot Ball
Spaceship Earth at night

Crazy Parade
Patriot's Parade in Copley Square.

Creating Panoramas

The first thing to learn about making awesome Panoramic Photos is taking the proper photos. If you don't have a good selection, then your results won't be good.

Four things that I have learned:

  1. Make sure to take enough pictures that you want to use.
  2. Have a good overlap between shots
  3. Keep your camera steady with the horizon.
  4. Keep the light balance the same between shots.
  5. Avoid having moving objects such as cars and people in the shots.

Using Panoramic Functionality in Affinity Photo

It's super simple to generate Panoramic pictures:

Figure out which photos that you want to use in your Panoramic. I find it easier to create a folder on the desktop and put the photos that I want to use in there.

  • Open up Affinity Photo
  • Select ?New Panorama..." from the file menu
  • Click 'Add' and navigate to the Desktop and select all the photos that you want to use.
  • Render the image by clicking on 'Stitch Panorama'
  • Do a quick check and make sure the finish product looks good in the preview.
  • Click on the Crop icon, and in the top toolbar look for 'Crop to Opaque.' (It's on the far right of the toolbar.) This will give you the best crop for your image.
  • Use the Inpainting Brush to fix any gaps.

If you find that your cropping large areas of your photo, you need to learn the fundamental of taking good panoramic photos: keeping the horizon the same in all your shots.

Affinity Photo recommends to use a tripod to take panoramas, but that's not always easy to do. Once you learn how easy to create Panoramas in Affinity Photo you'll be thinking twice when taking pictures on your next vacation.

Why not just use iPhone Pano?

The key reason of using Affinity Photo over the built in Pano on the iPhone is that you have a lot more flexibility. You can modify the pictures before stitching them together, fix the horizon and much more.

February 1, 2017

Better Arrows in Affinity Designer

Affinity Designer doesn't include any line arrows by default. So, I created some using the arrow functionality in Skitch.

Cool Arrows

These are all curves types, which means that you easily adjust the shape and the colors. They should look good regardless of the image size. The only problem that I encountered is how Affinity Designer displays the preview of the two arrows that are point to the right a bit weird:

Arrow View

The arrows are there and correct. If you know a better way to make it look good in the Asset panel, let me know!

Download the Better Arrows Asset to install it in your Affinity Designer environment.

January 25, 2017

Affinity Designer Stamps

I created 9 different Stamp graphics to use with Affinity Designer. Whenever you need to Approve/Reject something you simply drag the graphic from the Asset panel to your image. These are 100% vector objects so you can resize, change the color and alignment to make it look good.

Download the Stamp Asset Group

Affinity Stamps

8 Easy Stamps included

  • Production
  • Development
  • Stable
  • QA Approve
  • Pass
  • Fail
  • Rejected
  • Awesome

Let me know if there any other stamp type that you would like to see. I?ll update the collection based on suggestions by the Internet community.

January 18, 2017

Pat Snyder Font Collection

In the early 1990's Pat Snyder created some cool Postscript Type 1 Fonts.

SnyderSpeed is a Type 1 Postscript font that offers a bold (all caps) typeface duplicating the spontaneous, hand-lettered, brush-stroke used by commercial artists and sign painters to create eye-catching copy for signs, banners, posters, window display cards etc.

OregonWet is a special effects Type 1 PostScript typeface combining the graphic effect of water/raindrops/tears surrounding or splashing near each character. It's a full font containing upper and lower case letters, numbers, most shifted-number symbols and punctuation.

If you have OregonWet (a graphic Type 1 Postscript typeface with the effect of water/raindrops/tears surrounding or splashing near each character), OregonDry is the identical font without the splash effect. It's also a full font with upper and lower case letters, numbers, most shifted-number symbols and punctuation. The fonts can be combined for creative effects for before and after messages. Each stands on its own for display or ad copy.

MarkerFeltThin gives messages urging immediacy a casual, personal touch by looking as if the copy was handwritten with a fine point, felt-tip marker. Use for eye-catching notices, ad display or to convey spontaneous, impulsive expression.

A Type 1 laser printer, upper and lower case font, MarkerFeltWide makes typed copy look like it's been spontaneously hand lettered. MarkerFeltWide gives messages urging immediacy a casual, personal touch by looking like it was made with a wide, felt-tip marker. Similar to MarkerFeltThin, but offering wider stroked letters.

These are the original fonts files:

These fonts might be useful in your Font collection to use when creating flyers or Web graphics in Affinity Designer.

Snyder Font Collection
Pat Snyder Font Collection from the 1990s.

You may find some other variations of these fonts online. The links above are the original PostScript Type 1 outline fonts and can still be installed on MacOS Sierra.

I like the MarkerFeltThin and MarkerFeltWide font types, they are a good substitute for Poetsen One and Bluberry Regular fonts.

Other Font's Copied Pat's Style

Someone posted on

jimtealiii June 24, 2011 - Fun fact: this is House Industries' Sign Painter font at 118%.
AVPerth October 12, 2014 - Also quite famously used in Mario Kart 64. Sign Painter - House Brush is also different in many areas, particularly P, R, U, and F. They share the same sign painter's brush DNA but other than that are independent designs.

Pat Snyder Today

Pat Snyder isn't working on font's anymore. He is a local artist in Coos Bay, Oregon. You can see some of his latest work on his website:

Note: These fonts are still considered shareware, I couldn't find any information that they have been made available in the public domain. Registration Information is included in the Zip file of each of the font packages.

Shareware Fees Helped!

Here's a quote from the MarketFelt package:

Since creating my first font SnyderSpeed Brush (11/91 v.1 upper case only), the encouragement of shareware fees and/or input from users, allowed me to update SnyderSpeed by adding lower case (1/92), plus create OregonWet (which made AOL's top November 91 download's list), OregonDry, MarkerFeltThin 2/92, and now MarkerFeltWide (4/92)

Little Bit Worse Quote
Creative use of the OrgonDry and OregonWet

January 11, 2017

Folder Icon Maker

Having custom folder icons makes searching for content a bit easier. I find it very useful as a top-level folder, so that in a quick glance you know the contents inside of the folder.

There are plenty of tools for Macintosh users to create custom folder icons. A popular custom icon application is Image2icon by Shiny Frog.

I thought it would be useful to have a template for Affinity Designer and Affinity Photo. I would have the ability to use all the cool tools in Affinity to make awesome icons.

Affinity Icon Maker

Download the Folder Icon Maker Template

I created a template for Affinity Designer and Affinity Photo:

Using the Template

The key thing to remember when using this template is to place your working image/graphic in the same group as the folder icon. In the attached file, there is a picture of 'Bates Hall' in the Boston Public Library. You can see that it in the Folder icon group:

Folder Group

If it's not in the proper group, then the layer clipping will not work properly and the image will take up the entire workspace.

January 4, 2017

Puzzle Template for Affinity Designer

Puzzles are a great effect to spice up any image. You can remove parts of the puzzle to add a special effect.

I put together an Affinity Designer Template using an old puzzle image that I had in my collection.

Puzzle Layer
Click to download the Puzzle Layer file.

How to Use this

Simply use the puzzle image as the top layer and add your image below it.

If the puzzle image is too small, it's a 512px image, simply duplicate the puzzle layer (Command + J) and then combine the corners. The puzzle pattern is seamless. So you can duplicate and expand any side.

You can change the Layer blending to produce different puzzle effect.

December 25, 2016

January 2017 Blog Schedule

Merry Christmas 2016!

There will be a slight change up to the Blogging schedule in January. Here?s my proposed January 2017 line up:

MondayDisneyTips and tricks about various rides and attractions around Walt Disney World
TuesdayGoogle Chrome TipsSome practical tips and tricks with the Chrome browser.
WednesdayAffinity TemplatesCreative design ideas for Affinity Designer or Affinity Photo.
ThursdayBostonBoston is a historical city, learn some background information on unique sites to visit.
FridayMacintoshVarious tips and tricks that I have learned about using the Macintosh. Every once in a while I'll profile some productive software or hardware that is very cool.
SaturdayGluten FreePersonal experiences of eating gluten free with a 5-year-old in New England.
SundayAnything GoesOpen topic! I usually find something interesting to post which, I believe, my audience would enjoy.

Framingham on Hiatus

I have decided to retire the Framingham content for a bit as I would like to do some additional research before posting any content. I would expect that regular Framingham posting to resume sometime in February.

December 9, 2016

Cheat Sheet Application

Cheat Sheet Icon

One of the nice things about the Macintosh applications is that developers will assign keyboard shortcuts to common applications. After performing certain actions, you begin to learn that using the short cuts is a quick way to get things done.

After a while you begin to learn some of the fundamental shortcuts that are in most applications:

q Quit Application
w Close Application Window
, Application Preferences
f Find
c Copy
v Paste

Apple has a macOS Human Interface Guideline that has specific recommended keyboard shortcuts that developers should use.

Application Shortcut Help

Learning application specific shortcuts can be tricky. One way is to pull down every menu and see what shortcuts are available. Some applications do list the menu and command shortcuts in their help section.

A really cool way is to use Cheat Sheet by Media Atelier. Here's how they describe how CheatSheet works:

Just hold the ⌘-Key a bit longer to get a list of all active short cuts of the current application. It's as simple as that.

Once installed, go into any application and hold the ⌘ key for a couple of seconds and a Window will pop up to show all the Menu shortcuts that are available:

B B Edit Cheat Sheet
CheatCheat view of BBEdit Shortcuts.

Once you let go of the ⌘ key the window goes away.

Note that this only shows Menu based tips. Some applications will have hotkeys, for example, Pixelmator has hotkeys to select various tools in the toolbar. For those you'll have to access the application specific help pages.

CheatSheet Tip

Did you know that you could print out the tips?

On the bottom of the CheatSheet window is a Cog icon, click on it and you'll see a Print option. You can print out a copy, or create a PDF cheatsheet.

Additional Shortcut Reference

There are tons of cool keyboard shortcut guides, these are very useful to print out and keep by your computer. Spending a few minutes learning the various keys can save you lots of time when your working on a project.

Here are some very cool Shortcut Guides that I have found.

  • Chrome Browser - Google has an extensive list of all the various keyboard shortcuts.
  • Pixelmator - Good PDF of all the possible keyboard shortcuts.
  • Affinity Designer - Cool reference layout from the company that makes Affinity Designer.