アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

iPhone6 PlusのPSDモックアップとAppleのフォント

みなさんお久しぶりです。
デザイナーの和田です。

一昨日、iPhone6/6Plusが発表されましたね。
大きくなったiPhone。ちょっと持ち歩くのが大変かなぁと思いつつも、Full HD(6Pluas)と聞くとやっぱり欲しくなってしまいます。
でも、仕事で作る画像が増えるのは面倒くさいなぁ...と思う今日この頃です。

iPhone6 PlusのPSDモックアップ



さて、
今後、業務で使う機会が増えると思いPhone6 PlusのモックアップをPSDで作成しました。
こちらは公開いたしますので、ご使用になりたい方は以下のダウンロードから取得してください。
商用利用可です。

※ 素材そのものは再配布しないでください。

ただし、実際とは違う部分も多々あると思います(現在のAppleのサイトに掲載されている画像を見て作っただけなので...)。その辺りはご了承下さい。

ダウンロード


さてさて、今日はフォントの話しをしたいと思います。

■一つ目です


Appleのサイトを見ていたら、タイトル部分が画像ではなくテキストが配置されていました。AXISフォントっぽいけど...。
気になってCSSを見ると「AppleTP」というフォントファミリーが指定されていました。
Appleが新しく作ったのでしょうか?



でも、
/* Copyright © 2001 Isao Suzuki. All Rights Reserved. */

の記述がCSSにありました。

詳しく調べてはいないので断定出来ませんが、AXISフォントを使っているみたいですね。
ちなみに、英数字部分はMyriadっぽいです。

とても気になります。


■二つ目です


一昨日発表されたApple WATCH
このロゴフォントは何を使用しているんですかね?


Appleのサイトで掲載されていたロゴ


最初DINかな...とも思ったのですがが違うので外れっぽいです。


↑Font Shopで検索したFF DIN BLACK



MyFontsのWhatTheFontでも調べてみたのですが、近いものでも「A,C」が違いました。ピッタリなものはありませんでした。


↑MyFontsで検索した結果




う〜ん。こちらも気になります。

もし知っていらっしゃる方いましたら教えてください。

それでは、失礼いたします。

Linux でフォントのレンダリングを好みのものにする方法

PC を使っていると文字を見るのは避けては通れませんよね。
特に近年は日常的に PC を利用する機会が増えた為、長時間文字を見ることになりがちです。
文字が綺麗に表示されていれば、読みやすいだけでなく目の負担も心なしか減り、作業効率も向上します。
そこで今回は Linux のフォントのレンダリングを自分好みのものにする方法をご紹介します。

Linux では fonts.conf で各種設定・調整が行えますが、今回ご紹介するのは freetypeInfinality.net にて配布されているパッチを当てる方法です。
このパッチは環境変数を用いて freetype にパラメータを渡せるようにし、レンダリングを調整できるようにします。

Linux も近年は綺麗なレンダリングを行なっていますが、個人的には Mac の様な太く濃いレンダリングが好みなので、調整する際の目標は Mac のそれになります。
(ちなみに Windows であれば mactype を利用することでレンダリングを調整することができます。)

では早速パッチを当てた freetype をビルドしましょう。
なお、以下の内容は Kubuntu 12.04 を対象としています。
また、Fedora や Arch Linuxパッケージが用意されていますので、自前でビルドする必要はありません。

パッチを当てた freetype をビルドする



まずは Infinality Freetype Patches と freetype のソースを入手します。


$ curl -LOJ http://www.infinality.net/fedora/linux/zips/freetype-infinality-2.4.10-20120616_01-x86_64.tar.bz2
$ curl -LOJ http://downloads.sf.net/project/freetype/freetype2/2.4.10/freetype-2.4.10.tar.gz


続いて展開し、パッチを当てます。


$ tar xvf freetype-infinality-2.4.10-20120616_01-x86_64.tar.bz2
$ tar xvf freetype-2.4.10.tar.gz
$ cd freetype-2.4.10
$ patch -p1 < ../freetype-add-subpixel-hinting-infinality-20120616-01.patch
$ patch -p1 < ../freetype-enable-subpixel-hinting-infinality-20120615-01.patch
$ patch -p1 < ../freetype-entire-infinality-patchset-20120615-01.patch

※パッチは上記の順で当てる必要があります。

パッチ当てが完了したらビルド〜インストールしましょう。
(今回は /usr/local 配下にインストールします)


$ ./configure
$ make
$ sudo make install


パッチを当てた freetype を各プログラムが参照するようにする



せっかくパッチを当てた freetype をインストールしても、各プログラムがそれを参照してくれなくては意味がありません。
そこで ldconfig でパッチを当てた freetype を認識させるようにします。
(この方法以外にも環境変数 LD_PRELOAD を使う方法がありますが、今回は割愛させて頂きます。)
が、Kubuntu 12.04 ではデフォルトで /usr/local 配下のライブラリが優先されるようになっているはずなので、何もしなくても以下の様に今回インストールした freetype が最初に現れるはずです。


$ ldconfig -p | grep libfreetype
        libfreetype.so.6 (libc6,x86-64) => /usr/local/lib/libfreetype.so.6
        libfreetype.so.6 (libc6,x86-64) => /usr/lib/x86_64-linux-gnu/libfreetype.so.6
        libfreetype.so (libc6,x86-64) => /usr/local/lib/libfreetype.so


なお、ldconfig -p の結果に表示されなかったり、順序が後の方だったりした場合は適宜 ld.so.conf 等を修正する必要があります。

fontconfig による設定



さて、ここまででパッチを当てた freetype が利用できるようになりましたので、続いては設定です。
設定は fontconfig を使った設定と、環境変数を使った設定の2つがあります。

まずは fontconfig の設定を行いましょう。

設定ファイルが用意されていますので、それを /etc/fonts に配置します。


$ cd /etc/fonts
$ curl -L http://www.infinality.net/fedora/linux/zips/fontconfig-infinality-1-20120615_1.tar.bz2 | sudo tar jxvf -


いくつかプリセットが用意されています。


$ ls /etc/fonts/infinality
debug  infinality  linux  osx  osx2  win7  win98  winxp


今回は osx を使ってみます。


$ cd /etc/fonts/infinality
$ sudo ./infctl.sh setstyle osx


環境変数による設定



続いて、環境変数を使った設定を行いましょう。
レンダリングのパラメータを設定するため、好みのレンダリングにするにはこちらの設定が重要になります。

先ほどの Infinality Freetype Patches の中に infinality-settings.sh というスクリプトが含まれていますので、このスクリプトを改変・利用し、設定を行います。
まずはホームディレクトリにコピーし、ログインシェルの設定ファイルでログイン時に読み込まれるようにします。(以下は zsh の例です)


$ cp infinality-settings.sh ~/.infinality
$ echo "[[ -f ~/.infinality ]]  & & source ~/.infinality" >> ${ZDOTDIR}/.zshenv


先ほどの設定と同様、このスクリプトにもいくつかのプリセットが定義されています。
例によって OSX を使ってみましょう。
コピーしたファイルをエディタで開き、


USE_STYLE="DEFAULT"


となっている部分を


USE_STYLE="OSX"


と書き換えます。

これで大まかな設定が完了しました。
反映を確認するには一度ログアウトして再度ログインします。

結果



それではスクリーンショットで変化を確認してみましょう。

まずはデフォルトの状態。



続いてプリセット OSX を適用した状態。



どうでしょうか?
適用後の方が若干文字が濃くなっているのがわかるかと思います。

今回はプリセットを使いましたが、もちろんプリセットを用いずに各パラメータを指定することができます。
上記スクリプトにはコメントで各パラメータの詳細な説明がされていますので、そちらを参考に設定されてみてはいかがでしょうか。
また、各パラメータの説明と実際に反映させてみたスクリーンショットをまとめたものを次回の記事にしようと考えています。

フォントのレンダリングの見栄えはお使いのディスプレイやコントラスト・ガンマ値などにより大きく変わるため、なかなか好みの見た目に調整するのは骨が折れますが、自分好みに調整された文字は見ているだけでもウットリできる魅力がありますので、ぜひお試しください。

アール・ヌーヴォーの巨匠ミュシャを知る・使う

こんにちは、鴨田です。

最近は、HTML/CSSコーディング系のブログばかり書いていましたが、
たまにはデザイン系のブログも書こうと思います。

とはいえ、最近デザインワークをしていないので、
あまり旬な話題や経験に乏しいこともあり、自分の趣味に走ります。

さて、自分はアルフォンス・ミュシャが好きだったりします。
あんな画が描けたらどれだけいいものかと思ったりします。
でも全く描けないので、せめてミュシャの紹介と
ミュシャに近づくための素材の紹介をしていきたいと思います。




ミュシャの人物像


アルフォンス・ミュシャ | Wikipedia

とりあえず、ミュシャがどんな人だったのか知りましょう。
ポスターデザインや挿絵イラストが有名ですが、『スラヴ叙事詩』に代表される絵画も有名です。



ミュシャ作品解説


ミュシャ(Mucha)から学ぶ優美なデザイン | Webクリエイターボックス

ミュシャ作品の特徴やサムネイルの紹介をされています。

アルフォンス・ミュシャ-主要作品の解説と画像・壁紙 | salvastyle.com

ハイライト的に紹介されているので、まずはこちらから雰囲気を掴んでください。

Themes - Gallery | Mucha-Foundation

ミュシャ財団もサイトで作品を公開しています。



ミュシャ風フレーム












pixivからのご紹介ですが、とってもミュシャしてますね。
アール・ヌーヴォー風な無料の素材は探せばたくさん出てくるのですが、
ミュシャ風になると、あまり出てこないので、
自分で書くか、有料の素材集を買うことが多いと思いますので、
こういった素材は貴重なのではないでしょうか。



ミュシャブラシ


Alfons-Mucha-Photoshop-Brushes | BrushDirectory.com

ミュシャのドローイングがそのままブラシになっています。
どうやって使うのかは・・・。



ミュシャ風フォント


Muchaフォント | FFont

フォントも存在します。
これはなかなか使い勝手が良さそうですね。



ミュシャ塗り絵


Colour-your-own-Mucha - Gallery | Mucha-Foundation

ミュシャ財団が公式に提供している塗り絵用のPDF素材です。
塗って、飾りたくなりますね。



ミュシャの世界は如何でしたでしょうか。
個人的にリトグラフの一枚でも買いたいのですが、部屋に似合わなさそうなので、
もう少しミュシャが似合うようになったら購入したいと思っています。