Affinity blog postings

Affinity Postings

Earliest: March 20, 2009Latest: August 12, 2017Total: 35

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.

December 2, 2016

Affinity Designer Backgrounds

One of the things that you can't easily do in Affinity Designer is to add an image as a background pattern. Especially if you have a small seamless image (96 x 96) and you want to make a repeating pattern.

Example:

Background Example

OmniGraffle Professional

Lucky for me, I have OmniGraffle Professional 5.4.4. It turns out that complements very well with Affinity Designer. Using OmniGraffle I am able to create a Shape Tool and add a background image and title it. I can even scale the background repeating image so that it looks the way that I want.

First I created a shape, for that I used 568px x 266px Rectangle. I then open up the Inspector and select the Image Style. I then drag/drop an image into the placeholder. Then I select the title icon to the left of the image upload. Then I play around with the scale and opacity slider to make it look good.

Once I am satisfied that the pattern looks the way I want, I then select the shape and Copy it.

Omni Affinity
OmniGraffle has some great shape configurations.

I then switch over to Affinity Designer and Paste the shape. The Shape appears on its own layer as a vector curve object. Now I can do lots of cool things with that object.

Background Styles

The first thing I decided to do was create a bunch of background styles, so that I would have a library to choose from whenever I needed it. I thought it would be cool to have a category of seamless background images.

Using a small selection of background images that I had from Open Door, I was able to generate 13 background styles. Now I have a nice selection of styles to use whenever I want.

Affinity Designer Bacground

I don't know that this is the best way to create background images, but it suits my needs and it was very easy to implement.

Download the Affinity Designer Style!

If you have Affinity Designer, you can add these to your collection. Note: these images are low quality and may not look good in print.

Download my Affinity Designer Background Style.

To install this:

  • Download the "Backgrounds.afstyles.zip" file and unzip it.
  • Open up Affinity Designer.
  • Select the Style Tab
  • Click on the Panel Preferences and select 'Import Styles category'
  • Find the unzip file
  • Enjoy!

October 21, 2016

Arrows in Affinity Designer

Affinity Designer Logo

On October 6, 2016, Serif announced the latest update to Affinity Designer. This is the first major update since October, 2014.

Affinity Designer is the perfect application for anyone wanting to have more control over their graphics. It's a pretty powerful tool that will certainly take time to explore and learn.

Brief Description:

Affinity Designer is the fastest, smoothest, most precise vector graphic design software available. Whether you?re working on graphics for marketing materials, websites, icons, UI design or just like creating cool concept art, Affinity Designer will revolutionize how you work.

In short: If you do any work with marketing materials, websites, icons, UI design - Affinity Designer will take your creativity to the next level.

I have been using Pixelmator for a long time. I can see that the two applications seem to have strengths in various functionality. For example, anytime that I want to touch up a photo, I would use Pixelmator as the "Auto Enhance Color Adjuster" is perfect for that. But if I am looking to add a new header or put together a flyer, then Affinity Designer is the perfect tool.

Getting Decent Line Arrows in Affinity Designer

There is no decent arrow functionality in Affinity Designer. There is a double sided arrow shape tool, but that's just for design purposes. It doesn't work too well when you want to highlight a feature.

In a future update, I would like to see some decent arrow head capability with line objects. I use arrows to point to screenshot functionality. I would like to use Designer to tell a story of why some functionality isn't working properly. One possible solution would be to use Skitch to add arrows to images and then use Affinity Designer to build a storyboard.

There is a better way. I am taking advantage of the new Assets section in Affinity Designer 1.5. I set up a bunch of arrows types that I can instantly use whenever I want.

Affinity Assets

These are vector shapes, which means that once I drag and drop the arrow object to a file, I can ungroup and then manipulate the arrow to anyway that I see fit.

I have set up different arrow directions, so that I can just drag and drop the arrow where I want it to work. I expect to add additional arrows when I need to. I got the above arrows from https://openclipart.org/. There re some great arrow collections over on creativegraphic.com and InkyDeals.

Reminder: That when you add objects to the Assets section, you should group vectors together. I ran into issues when I was dragging arrows over and the arrowhead would be a separate asset from the line. This is because Designer is treating each object as a separate Asset. Simply select both vector objects and group them. Then drag it to the subcategory that you want. When you drag them out of the Asset section you can ungroup them and then make the arrow do whatever you want.

Download the Asset

Got Affinity Designer? You can download my 'QA Asset' category. This includes the browser badges and the arrows.

Initial Impression

I am very happy that I finally have a vector application. Over the years I have accumulated lots of EPS files and I haven't had a decent application to properly read these files. I like the fact that I can use the same brushes that I had in Pixelmator in Affinity Designer, especially the "Torn Paper Brushes," which I use frequently.

Brush Pallet
Affinity Designer Brush Pallet on the left, and Pixelmator Pallet on the right.

I am looking forward to learning a lot more about the capabilities of Affinity Designer. Their training on Vimeo is very helpful in understanding how the application works. They a video tutorial on the fundamentals of every bit of their application.

July 29, 2016

Apple Keyboard with Numeric Keypad

Macintosh Keyboard

Apple currently manufactures two kinds of keyboards - a wireless version and a wired version. I have had the chance to use both for about a year and here's my thoughts on them.

Wireless Keyboard

I was very excited that Apple came out with a wireless version as it makes it easy to move the keyboard around. The wireless keyboard and mouse are a nice addition to the USB real estate. On my iMac, I only have 4 USB slots, so it's nice knowing that my mouse and keyboard isn't going to use up my USB slots.

The nice thing about the wireless keyboard is that it's very easy to move it out of the way when I am not using the computer. The bad part is that it needs a battery and about once a month I need to replace the battery. Not a big deal since I do keep a spare set of AA batteries so that I don't encounter any downtime.

Wired Keyboard

The wired version is very handy at work. I find that I use the 'Home' and 'End' buttons frequently in Chrome. They are great when navigating large web pages.

Recently I discovered that I could use Keyboard Mastro to assign actions to some of the F keys that I don't use in any of my applications. Keyboard Mastro also lets me assign actions to the numerical keys, which I don't use at all.

I am not concern about the USB slots at work since I don't really have any external devices.

Recommendation

I think the wired keyboard is the way to go. Using Keyboard Mastro, and some AppleScript knowledge, I can be much more productive with the Wired Keyboard.

Since I have a 10 slot USB hub at home, I am no longer worried about the keyboard using up a USB slot.

There's no problem with moving the keyboard around when I don't use it, the USB cable is long enough for me to move it out of the way for anything that I want.

I have pulled out my old Macally iceKey Slim USB Keyboard for a few times that I wanted to use the extended keyboard. As much as I like the Apple Keyboard with Numeric Keypad, I can't justify spending $49 when the Macally keyboard works perfectly fine.

July 10, 2016

Location Base Smart Albums in iPhoto

This weekend, I was backing up some of my old photos/videos from iPhoto to SmugMug. I was doing this because we recently signed up for the Basic plan and wanted an off-site location to backup our photos and videos. The Unlimited Photo uploads is a great plan.

It's been a while since I used iPhoto, and the location feature is very cool. You can easily create Smart Albums based on locations. This makes it easy to upload a group of photos that I took in a certain location, such as Boston, Ballet or visiting Davis Farmland.

Setting up Location Base Smart Albums.

  • Open up iPhoto.
  • Under Library select Places.
  • You should see a map with red points marking where photos are available. On the bottom of the window you see two options, Smart Album and 'Show Photos' these will show all photos for any point visible on the screen. Use the Zoom and Move tool to adjust the map the way you want.
  • Click on 'Smart Album' to create a smart Album from your map view.

Smart Albumsi Photo

Once you set this up when use choose the 'Open' dialog in Chrome/Firefox, click on Photos in the sidebar, then iPhotos and you'll see your new Smart Album, making it super easy to access a large group of similar photos.

The 'Location' feature and the 'Smart Album' by Location was removed in Apple Photos. Not exactly sure why it seems like a cool feature to have.

July 1, 2016

BetterTouchTool

BetterTouchTool is a must have tool for anyone that has an Apple Keyboard with Numeric Keyboard (MB110LL/B). Finally you can can make use of the F13,F14,F15,F16,F17,F18 and F19 keys!

BetterTouchTool is a keyboard replacement tool, it allows you to re-assign functionalities to different keyboards and mouse actions. This is great when you have a keyboard that has unused keys.

The BetterTouchTool has a lot of configurable options. For example, you can now assign the 'Paste' function to the F15 key, no more Command-V in any application! You can even change the 'Home' button to be an actual browser home button. How cool is that!

Better Touch Tool

If your a Web Developer you can assign the the F16 (Or any F Key) to open FireFox WebConsole and Chrome Developer Tools - depending which application is currently active. Now you don't have to remember the different keyboard shortcuts when your debugging a page.

There's all sorts of configuration that you can do with the Magic Mouse, Trackpads, Drawings, and Siri Remote. There's lots of possibilities to spread your trigger actions.

BetterTouchTool has a built in Screen Capture functionality with an image editor. It's pretty good. My only complaint is how the arrow get drawn on the image. When you select the arrow in the top menu the arrow automatically appears in the middle of the image. The user then you have to move it to where you want. I do like that the arrow has a better curve style than what's in Skitch and MonoSnap. The magnifying glass tool is pretty cool.

BTT Screencapture
Screen Capture with the Magnifying tool.

I configured BetterTouchTool so that when I "Move Mouse to Bottom Right Corner," the computer acts as if I did a Command-Shift-4. After I selected the capture area, I then can edit in BetterTouchTool. Once done editing, I have multiple options: I can save to a file, upload to my imgur.com account, create a new email with attachment, copy to clipboard and so much more!

Logitech Mx518

I have been trying to get BetterTouchTool to work with my Logitech Mx518 mouse with very little success. There are three buttons that are on the top of the mouse that I would like to use. There is a "Volume Up, Volume Down" and some "Power" button.

I installed the latest Logitech Gaming Software, which has the latest drivers, but BetterTouchTool still doesn't recognize the buttons when I try to assign a Trigger action.

Logitech Mouse Panel

It turns out that you can actions to the mouse using the Logitech Gaming Software. While not as fancy as the BetterTouchTool, it still has some basic actions that make it worth while. There is a work around and that's to use the keyboard assignment and then use BetterTouchTool's Keyboard Shortcut tab to further configure it.

There is some discussion on the Logitech Forum about configuring the device to work with third party apps: MX Master Logitech Options SW Feature.

Overall view of BetterTouchTool

While I am disappointed that I can't easily configure my Logitech Mouse, I am excited that I have five new keys on my keyboard. Now my hands can move to the other side of the keyboard more often.

BetterTouchTool use to be free, but it's now a very active application and Andreas Hegenberg, the Developer, has changed it to a "Pay what you want." The current minimum bid is $4.50. I highly recommend at least covering the cost of a a couple cold beers, as an appreciation for all his hard work.

Google has a updated table of the Cost of Living in Munich. You can see how much Domestic Beer, Cappuccino is.

I did try out BetterTouchTool and will certainly be purchasing it.

May 28, 2016

Chromebook vs MacBook

This past week Matt Novak posted an article on Gizmodo on, "Why I bought a Chromebook Instead of a Mac." Apparently Matt was a long time Macintosh user that switch to Chromebook because it was cheaper than getting a new MacBook.

Couple of quotes from the article:

"When all was said and done, even the cheapest Mac laptop was going to set me back about $1,300 after taxes and AppleCare. And the siren song of a computer under $200 was calling my name."

Later on he writes...

"I rarely have to edit video and my photo manipulation needs are minimal. So when I walk down to the coffee shop to work, what the hell do I need doing that can't be done on a Chromebook? Nothing is the answer."

Why even bother with a Chromebook? He should have just gotten a Kindle and a Bluetooth keyboard for a lot less than the $200.

Should Apple be Worried?

Apple isn't a bit worried about the "cheaper" laptop trends. Steve Jobs actually address this issue back in 2003 at the closing statements at MacWorld:

These are very challenging times across the whole economy - particularly in our industry.
Our competitors are laying off thousands of people and there is certainly a cause for despair if you believe that the personal computer is basically something that you spreadsheets and word processes on and HTML terminal for the internet
if that all you think it is then there is cause for despair.
That not what we think.
We think different.
WE believe that the personal computer is undergoing a rapid evolution at the center of our digital lives.
We have never been more excited about this stuff.
We are investing
We are going to innovate through this downturn
like the product you see here today and more coming.
and when this thing turns around, we are going to be in a great place....

Hear him on a recent SoundCloud posting:

In addition, this issue was addressed many years earlier. In 1996, when Network computers were all the rage in Silicon Valley. There was a lot of talk about how some engineers were going to feel about doing their work on the "cheaper computers."

When putting together this post, I was looking for a great quote about it. I can't seem to find it. When I do, I'll be sure to update this post.

The net/net is that the MacBook offers a lot of functionality than the cheaper computers. If your going to depend on the cheaper computers, your not getting the full use of the applications.

March 16, 2016

Evernote Web Clipper

The internet is filled with all sorts of very useful information. Unfortunately, most people don't have the time to read every bit of useful article that they found or they don't want to be sitting at their computer reading when they could be watching a funny YouTube video. Wouldn't it be easier to just save the documents and read them when you have time.

Thankfully there is a way to do that.

Evernote Web Clipper

Use Evernote Web Clipper to save online articles to read when you're offline. You can create a notebook for interesting articles that you would like to read when you're offline. To enable the online feature you need to subscribe to the Plus plan, which cost $24.99 a year. This is well worth the cost, I justify it as a price of standard technology book. You have the ability to keep learning all year long.

Evernote Web University

After you download and install the Evernote Web Clipper extensions for Chrome and Firefox you can begin to create your own University Classroom. You get to pick the topics that you want to read about at your spare time.

EverNote Web Clipper saves the data as rich text, so everything is searchable. You keep all the formatting as if you were reading the article. At any time you can use Evernote search functionality to find the data you want.

When you find an article that you want to read later, simply click on the EverNote icon in the browser toolbar and then click the big green save button. Poof! Like magic the content of the page now appears in your Evernote account.

Downtime Notebook Idea

Here's a simple project to get you excited about the possibilities of offline reading. After you setup your browser extensions, and installed EverNote on your phone try this:

Create a new Notebook called 'Downtime' then search for the following and use the Web Clipper to save the "Simplified article" to the new Notebook:

Now you have some useful tips for future vacation planning. The next time when you're on the train or subway you have something interesting to read. Maybe you can make plans to see one of the Hot movies this fall near one of the best BBQ joints in the world.

February 24, 2016

Screenshot with the Firefox Developer Toolbar

Screenshot with the Firefox Developer Toolbar

When your doing website work, you may need to take a full page screenshot before you roll out changes. This is done so that you can get a historical view of a website before you implement changes.

Skitch and Monosnap are great screen capture tools, but they won't work in this case because they can't scroll the browser.

In Chrome, 'Awesome Screenshot' is the plugin tool to make that happen. The problem is that there's way too many clicks to capture a full page image. All I want to do is get a full page screen shot of the current page that I am viewing and not have to do many clicks to perform my actions. They use to have a 'Default Local Path' and Autosave functionality, but were force to remove it in May 2014 because of security changes implanted by Chrome.

Life is much better with Firefox's Developer Toolbar . One of the tools that Mozilla provides allows you to easily make Fullpage screenshots. You simply bring up the Developer tools, type in a few commands and BAM you have your full page screen shot save to the downloads directory. It doesn't get any easier than that.

In TextExpander, I created a "quick hit" snippet to make doing the screen capture a bit easier. The snippet will auto expand to the commands that I need to type to get the full page capture. Now I don't have to remember if there's one or two dashes before the 'fullpage' parameter.

FireFox TextExpander
screenshot --fullpage %|.png

I selected 'bix' as my abbreviation shortcut because it's short enough to use and something that I can remember. In case you don't know, bix was an online bulletin board system service of BYTE magazine. (It grew in popularity in the late 80s and membership not long after Delphi Internet acquired it. )

For this particular snippet, I created it in a group call FireFox and set to only expand in FireFox. I did this because the command isn't useful in any other application.

Now when when I am on any page in Firefox, and want an instant fullpage screenshot, I put my cursor in the console and type in my abbreviation and a file name that related to why I am capturing the page.

I can enhance this by creating other snippets that use the "--selector" parameter that will work on certain websites, such as Jira or the company website. For example, this piece of code is perfect for Atlassian Jira, as it capture the a Jira Issue and not the top or side menus.

screenshot  --fullpage --selector '#issue-view' %|.png