TIL I learned about a really useful, open source, image optimization app called ImageOptim. This app will help you batch resize image files (png, jpg, gif) in either lossless or lossy way.
It is so much quicker than using an image editor such as Affinity Photo. And best of all it’s free!
It has helped me cut image sizes by as much as 94%! All without noticeable compression artifacts.
To install it on macOS simply run:
brew cask install imageoptim
For source and more info:
Deckset for Mac is my favorite presentation software. Markdown-to-slides with prebuilt themes is pure joy.
Here’s a fun hack:
[. Use these to cycle through the Deckset themes for your current presentation. I like this feature because it helps me quickly pick a good color palette.
ImageMagick drawing and annotating features rely on fonts on your computer to work. But what fonts are on your computer?
On newer versions of ImageMagick, here’s how you’d find out that information:
% identify -list font Path: /usr/local/Cellar/imagemagick/7.0.8-24/etc/ImageMagick-7/type-apple.xml Font: AndaleMono family: Andale Mono style: Undefined stretch: Undefined weight: 0 glyphs: /Library/Fonts//Andale Mono.ttf ...
AndaleMondo and ~60 other fonts are installed on my machine and accessible by ImageMagick.
Here is an image from unsplash.com.
I don’t know what image I am showing you though. That’s because the URL
being sourced for the above image is
https://source.unsplash.com/random/1200x600. This tells unsplash to
randomly serve us a
1200x600 image. Try refreshing the page and you’ll see
that it is different each time. Cool!
This is a bit of a novelty, but could be useful on occasion. The Gatsby docs use it to great effect in a tutorial so as to not get caught up with the details of serving a specific image.
You can outline a stroke (similar to Illustrator) by selecting the shape and choosing layer > convert to outlines or ⇧⌘O.
To modify individual radiuses on shape, separate each value with a slash. For example
5/0/0/5 would add a 5px radius to the left two corners of a rectangle.
Today I learned how to save and load swatch libraries in multiple .AI files.
Swatch and learn:
Create a color swatch. If you’d like to be organized, save them in “Color Groups,” which are indicated with a folder icon.
Find the swatch drop-down menu and select, “Save Swatch Library as AI…”. Give your swatch library a name.
Open a new file and select, “Open Swatch Library” and where your User-Defined Swatch Library will be.
Boom—there ya have it. Your swatches can be now be used across any AI file when repeating this process.
I realize I may be part of the minority of UI designers who enjoy working in Illustrator. If you too are part of this special group, check out this sweet TIL:
Open a new AI file with web settings. Create a rectangle that represents the full width of your app. Example: 1080 px wide rectangle for a desktop grid. Align it on your artboard. Go to Object > Path > Split Into Grid. This dialog window allows you to add equidistant rows, columns, and even gutters. When you’ve got all of that covered, select “Add Guides,” then click, “OK.” This now allows you to assign guides to your AI file by selecting View > Guides > Make Guides (⌘5 on Apple).
Killer grid, man!
If you’re tired of exporting SVG icons individually, follow these 5 easy steps:
- Size your icons to scale in one artboard (make sure all elements of each icon are grouped)
- Select your “Artboard” tool in the menu and then click each of your icons, which will assign their own respective artboard.
- Open Artboards window (Window > Artboards) and name each icon’s artboard (this will become the filename suffix)
- Save As > Select “SVG” as format and make sure “Use Artboards” and “All” are both selected. Your file name will become your prefix (AI adds a “_” to separate your suffixes).
- Pick up the pieces after your mind is blown.
A distinctive feature of the font this site uses is the Q with the long tail that swoops under the next letter and the letter after that.
ROSARIO is the font with the Q
So when you see Q in SQL you know its Rosario.