Category Archives: Design

Handling display calibration

Though it is the expectation that a monitor is ready as soon as it is removed from the box, most monitors need to be calibrated. A much more vivid, detailed, true experience can become available after it is done that can be enjoyed and “feels right”. Calibrating a monitor correctly requires training of the eye so it initially can take a bit of work.

Hardware

All settings done to calibrate the monitor should be done on a hardware level (except for possibly gamma) as software solutions almost never adjust the image truely. Before beginning, have the monitor on for about ten minutes as it can take the lamp this long to warm up and represent accurate values.

Gamma

Gamma correction is the adjustment of mid-tone luminosity. It is used to compensate for the non-linear relationship between the input signal and the luminance of a monitor. Televisions, computers, and the internet use a gamma of 2.2 as a standard so monitors set to this to be able to correctly display output. Most monitors default to the 2.2 standard but some monitors deviate and therefore hardware and/or software gamma correction is required. A high gamma will look glowy and a low gamma will appear errie and dark.

Alternate

Gamma test and Alternate

There is likely a gamma setting on the monitor if it needs to be adjusted. If there isn’t, or for further adjustment, a software solution is available. The first software solution would be to use the EDID data built-in to the monitor of most modern-day computers. It contains details about the monitor including gamma correction. The Desktop Environment may have the ability to grab the EDID and save it as an ICC profile (GNOME does), otherwise a program like Quickgamma in windows will do. If the monitor does not have EDID information, Quickgamma also has the ability to manually-calibrate the gamma and create an ICC profile from that; it saves the ICC profiles to C:\Windows\System32\spool\drivers\color.

To load an ICC profile put it in ~/.local/share/icc/ and see if your Desktop Environment supports it. If it does not, a good program that can load them is xcalib.

In the image, lightly squint the eyes (or step away) to find the match where gamma blends with the background.

Contrast

Contrast defines the tonality of an image. Tonality is the gradient leveling from light to dark. With a high contrast the light and dark extremes become “crushed” or “blended” together, a low contrast the and images will appear flat. Contrast is also reflects the white-level (the brightness of white) of the monitor; contrast levels are often defined when buying a monitor because they will tell how bright the lamp is.

In this image, turn up the contrast to maximum and the reduce until all whites become distinct and the first block is just barely discernable.

Brightness

Brightness is better-referred to as black-level as it defines the “brightness of black”, or how bright darkness goes. Black is “black” or will be just above the black of the monitor if turned off. Adjust the image so that the left box just barely discernable. It may be necessary to go back and forth between contrast and brightness until the right balance is met.

Note: Discernability of the lightest light boxes and the blackest dark boxes should be possible on a modern monitor; however, it should be known that some monitors are unable to reproduce them.

Color balance

For color the first thing to do is adjust saturation. Saturation is the total amount of color the monitor will display. Too much saturation and images will be heavy with color, too little and they will appear faded. On some monitors the setting will be called Color, on others it will be Saturation, and on others it will be controled through an accumulative adjustment of the Red, Green, and Blue channels. Use the images below to determine saturation. Skin tone is a good indicator for this; however, also look at the colors on the color wheel as “bleeding” will at times occur when over-saturation occurs.

To adjust the color balance, also use the images below with skin tone as a reference. Do one color at a time, go back and forth, back and forth, until it feels right. When doing this be careful not to strain the eye too much as eye fatigue effects colorreception. Take a break after a little bit (get up and strech, make lunch…) and come back and you’ll immediately see, “Ah, the image is too red” or “Ah, the image is too blue”… The base colors Red, Green, and Blue also have complementary colors or complmentary light, the opposite of Red is Cyan, Green Magenta, and Blue is Yellow. If an image has too much Magenta it will need more Green. Again look at the skin tone (the gray in the first image works good). This is where the trained eye comes in. With practive eventually color bents will become discernable. Once it is achieved, the discovery of a well defined monitor can be begun to be enjoyed.

Skin-tone, gray background

Skin-tone, gray background

Light skin-tone

Light skin-tone

Darker skin-tone

Darker skin-tone

Resources

Firefox: Defining font type and size

roystonlodge_Alternate_Mozilla_Browser_Icon

What a professional typesetter knows is the importance of a good font. For centuries typesetters have evolved fonts to provide ease of reading that we know today. Having the text look good in the web browser is a nice bonus; choosing the right type and size can make a big difference to how well we read, especially if used quite a bit.

Font installation

To make a web page feel right — as the designer had in mind — the fonts should be on your system that a page requires. On some Linux systems, only the basic fonts are installed. Installing missing fonts usually adds nice touches that may have not been realized before. To help discover missing fonts, the Context Font add-on will display font type and size of a selected font. Many sites define their fonts as Arial, or sometimes, Verdana, or Georgia; these fonts can be added by installing Microsoft’s core fonts; a few define theirs with Apple fonts, and a few less with others. These font packages contain the most popular fonts (for Arch Linux):

arpa -i otf-bitter otf-exo ttf-bitstream-vera ttf-dejavu ttf-inconsolata ttf-lato ttf-liberation ttf-mac-fonts ttf-opensans ttf-win7-fonts

Font size

To get a good idea on good font size to use, look at a book. The size there that feels comfortable will likely feel comfortable on the monitor too. When choosing font size also think about making the various typefaces the same size (i.e. serif, sans-serif, and monospace).

Font type

Being able to define one’s own font can help readability quite a bit; however,keep in mind, tastes differ. In Firefox, the settings that can be defined are generic typefaces of: serif, sans-serif, and monospace (additionaly, the minimum font size can be set). It should be known though, that many sites still force a specific font type and size; however, gradually, a greater number of sites are using generic typeface definitions. In the future this means that personalizing fonts will be of greater availability. When choosing a font type, keep in mind to pick one that helps improve readability rather than one that grabs ones attention.

Font tests

Here is a basic test of what Firefox’s base-defined font types and sizes look like (click to view):

Font test: Type and size (based defined). (click to view)

Font test: Type and size (based defined).

Here are what a few of the common font groups look like (click to view):

Font test: Common webfonts group 1. (click to view)

Font test: Common webfonts group 1.

Font test: Common webfonts group 2. (click to view)

Font test: Common webfonts group 2.

What did I choose?

After adding all the new fonts and testing them, I found out I like a varied group; they read beautifully and scale good. Ultimately I came up with these:

Typeface Font Size
Serif Bitter 13
Sans-serif Open Sans 13
Monospace DejaVu Sans Mono 12
Minimum 10

DejaVu Sans Mono and Open Sans are good fonts and, for me, hard to beat. Rather than just define them in Firefox, I prefer to define my serif, sans-serif, and monospace fonts system-wide. This allows me to have a consistent overall look to me desktop. Here is my Fontconfig configuration (note: fonts are listed preferential/available first): fonts.conf.

For GNOME the fonts sizes are:

Setting Font
Window Titles Cantarell Bold 11
Interface Cantarell 11
Documents Cantarell 11
Monospace Monospace 10

What they look like:

Font type and size.

Font type and size.

Common webfont groups 1

Common webfont groups 1

Desktop

Desktop

Related

Architectural Intent – a Wallpaper Tile



I tend to use my desktop as my workspace so I like wallpapers that act as more of a background decoration rather than elaborate artwork. So I created this. This is based on a wallpaper I found on the net (sorry, can’t remember where) and I re-did it. The original was in jpeg format and it had a bit of dithering to it.

It’s real basic, just 140×140, but I tile it and it comes out real nice:

It’s a vector image so it’s able to be resized real easy if need be.



Gmail Icons

Warning: I got the base design from a Google+ website. I’m not sure if these are tradmarked logos and if Google in that case if they will have a problem with them. If they do, they will be removed.

I was hoping to use this for a Gmail notification icon but it didn’t turn out that way. I saw the Gmail icon but I couldn’t find it in scalable form, so I rebuilt it. Turned out pretty good. It’s under the CC license so be free to use it, however if you like to use it in a program please ask me and give attribution. Download.

Gmail (Red)

Gmail (Blue)

Gmail (Grayscale)

Gmail – Unread (Symbolic)

Gmail – Read (Symbolic)

Arch Linux Legacy Blue1 Toon Logo

I created this because I liked the legacy logo and was inspired by Encelo’s Arch toon logo. It needs help on the gradient. To do a curved gradient, I had to rely on a blur (because Inkscape does not appear to be able to do curved gradients) and it bleeds a bit. But otherwise, I think it turned out pretty good. Under the CC license so be free to do what you want with it.

Arachnophilia: a Beautiful, Basic, Web Editor

Screenshot from 2014-02-13 06:31:55Update (2014-02-14): Since this post I’ve moved onto Bluefish because it has better support of tables. Bluefish has the ability for pre-defined tags with snippets ability… nice.

I’d just about tossed in the towel on finding an HTML editor that I felt comfortable with when I happened upon this: Arachnophilia; and now I not sure how I could be better off.

Arachnophilia isn’t technically a Linux program, rather it’s a Java program. I’ve avoided using Java programs until now because they ran slowly; however, Java seems to have come a long way from the earlier days and Arachnophilia runs decent, decent enough for me to use on a regular basis.

Arachnophilia is designed to allow direct access to numerous tags. The tags on the two toolbars include the most popular tags and more can be easily added. The library on the left lists a good number more tags. Just about everything is editable in Arachnophilia including the menus. The huge bonus too is that Arachnophilia allows creation of new user-created tags. With this program I’ve been able to create custom tags that I use with my blog.

There is no installing Arachnophilia, just downloading the Arachnophilia Java archive and then directing Java to start it (or if on a Debian system can use the .deb below):

java -jar Arachnophilia.jar

Arachnophilia is simple, plain and enjoyable to use and has easily become my default HTML editor. Thank you Paul Lutus for your work.

Files

HTML Entities from the Command Line

While doing HTML work I tend to do my work with text editors. For this, I use Arachnophilia a Java HTML editor with easy, editable, customizable tags (Review here).

Arachnophilia has support to convert characters to HTML entities but isn’t easy to get to (HTML > More Functions > Char to Entity. There are various web sites that do but if willing to use the terminal they can be quickly gotten there as well. Thanks to script by Darren this can be done easily. It requires script Perls’ HTML::Entities module to do so (for help installing Perl modules look at this page). You’ll probably need redirect the script to point to the Perl program proper:

whereis perl

More than likely its in /usr/bin/perl. After fixing that run the script. This will put you in a sub-shell that you can copy and paste characters to be encoded:

You can also convert a whole file. This will print to standard output (terminal text):

htmlentities filename

Or convert a file by doing:

htmlentities  < file > convertedfile

Keyboard Template

I needed a keyboard template and I couldn’t find any so I made one (uh kinda). The outline was made by aphasia100stock:

Keyboard Outline

Keyboard Template

Notes

  • Converted from .ai format to .svg.
  • Removed inner borders.
  • Added Letters, Numbers, Symbols.
  • Added guidelines to be able to reference keys.
  • Requires Ubuntu font.

Thanks aphasia100stock for the outline. Free to use and distribute.

my current Desktop

Following Nikos’ query here is my current desktop:

Lightweight Gnome running Thunar.

Creating Quality Web Sized PNGs with ImageMagick

Note: This is a post with me messing around with ImageMagick and it’s good food for thought, however as a reader pointed out I accidentally started with a lossy image and turned it to a lossless image which was a mistake on my part.

I recently posted The Battle for Wesnoth – 1.4 picture review, a look at the new version of turn based strategy game. I had uploaded the post and the screenshots from a super fast pc at work. I gave it no thought when it was as easy as clicking a button. No thought until I loaded the blog at home yesterday and I patiently waited as the browser icon kept looping. Scrolling to the Wesnoth post and seeing images were only half loaded, I looked into my images folder and discovered my Wesnoth screenshots took up a whooping 4MB. Yikes! To make matters worse, I had lazily used html image resizing for thumbnails. This was a time warp I’d forgotten with fast networking but a basic html blunder: when writing for a general audience, write for the lowest common denominator. Scrolling my other posts and their images were still loading I thought, if I had visited this page for the first time and it was taking this long to load, I probably would have closed the tab by now.

And such it is on todays modern web. Not everyone has that T3 spliced into their home. On this slow connection, I have learned to be patient but I really like those pages that load quickly. Portable Network Graphics (PNG)’s the graphic format I use are designed for modern networks. A lossless format for good quality images with a reasonable file size for optic networks, cable modems and dsl. A good number of people though still use standard phone modems or experience congested networks and some images can take awhile to download. Well compressed PNG’s can be made though that load reasonably well while maintaining good image quality.

So I decided to find out what I could do to reduce the load of my web graphics. I did numerous tests over differing quality and quantity. I tested all conversions from a standard jpeg photo. The image is scaled down to 500 width (aspect preserved), a good size for viewing on this blog. First of all I have to say that GIMP does this very well – accurate color reproduction, smoothing, no color bleeds, all in a 270K file.

But often I don’t wanna fire up gimp just to convert one image in such instance I like to use ImageMagick’s command line programs: convert/mogrify.

Resizing is simple:

convert -resize 500 a-friend-in-need.jpg a-friend-in-need-500.png

The image produced is as good as quality as the one produced by GIMP but doesn’t particularly do well at compression this image is a whopping 871K which explains alot about my web page load yesterday. So next I reduced the colorspace to 256 to see if this could produce an acceptable image:

Not too bad. At 109K its a good size for the internet but after looking awhile the dithering becomes obvious. The number of colors is a big factor in determining the size of the image. I played with the colors a bit and came to that around 2000 colors as images began to look non-dithered.

convert -resize 500 -colors 2048 -depth 16 -quality 95 a-friend-in-need.jpg a-friend-in-need-500-c256.png

Quality is the compression amount and type. The first digit is the compression level (nine is the highest) and the next digit is compression type (five is adaptive). I also used optipng that can add up to 30% further compression.

optipng -o5 a-friend-in-need-500-c256.png

The images still look a bit too sharp so I used the enhance variable to smooth. Enhance is it’s own filter and will over-rule other variables so setting color and depth needs to be done in another step.

Doing these steps gives me nice quality, lightweight (comparably – 280k) images that I can use for my blog. The final product:

Creating Quality Web Sized PNGs with Imagemagick

To simplify the process, I wrote a script to make it easier:

#!/bin/bash
# resize-image-new - makes new image and resizes.
# http://www.imagemagick.org/www/command-line-options.html

SIZE=$1
NAME=$2
COLORS=2048
DEPTH=16
RESIZEDNAME="${NAME%.*}"-"$SIZE".png
#ENHANCE - options to enhance image -enhance smoothes rough images

if [[ -z $NAME ]]; then
    echo "resize-image <WIDTHxHEIGHT> <original-image>"
    exit;
fi

# Convert (SIZE is proportional least value is used and only x needs specifid.)
convert -resize "$SIZE" -enhance "$NAME" "$RESIZEDNAME"

mogrify -colors $COLORS -depth $DEPTH "$RESIZEDNAME"

# Compress PNG
optipng -o5 "$RESIZEDNAME" 

I’d like to be able to learn if I could adapt this script to batch conversions.

 

RSS Icon

Decided to play with vectors last night I tugged and pulled a good many handles and came up with a this. I needed an rss icon so why not? Just like all the others but vec-tor-ized. Made in inkscape (gawd that program is fun). Please be free to use it if ya like.

RSS Iconj

Follow

Get every new post delivered to your Inbox.

Join 52 other followers