PhotoshopでレスポンシブWebデザイン!

Typekitを利用して文字を入力する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ここでは、Adobeのフォントサービス「Typekit」を利用して、自分のマシン内にインストールされていないフォントを、レイアウト上で手軽に使う方法について、ご紹介します。
講師:
05:28

字幕

このレッスンでは Adobe のフォントサービスTypekit を利用して、自分のマシン内にインストールされていないフォントをレイアウト上で手軽に使う方法についてご紹介します。今ご覧頂いているのは Photoshop でレイアウトを進めている PC 向けのWeb サイトのデザインカンプです。仮にこちらのメインイメージの上に載っているキャッチコピーの部分こちらのフォントを今使っているマシンにインストールされていないものに変えてみたいと思います。テキストツールを選んでキャッチコピーを選択してみます。オプションバーに今使われているフォント名が出てきますのでクリックして開きましょう。右上に「Typekit からフォントを追加」というボタンがありますのでこちらをクリックします。そうすると、ブラウザが起動してAdobe の Typekit というフォントのサービスに移ってきます。私は既に Adobe のアカウントでログインしていますけれどもここで、もしログインしていない場合はCreative Cloud のアカウントを使ってログインをしてください。このサービスを使うにはインターネットの回線に繋がっている必要があります。 では Typekit の画面でフォントを選んでいってみましょう。Typekit がリリースされた当時は日本語のフォントが殆どありませんでしたが最近モリサワですとかタイプバンクのような著名なフォントベンダーのフォントが搭載されるようになりました。では今こちらを使ってみましょう。タイプバンクのタイポスを使ってみたいと思います。この時注意しておきたいのがこの右下のアイコンです。この始まりと終わりのタグのようなアイコンはWeb フォントとして使えるという印です。そしてこの雲からダウンロードされているアイコンはローカルにデータを同期させてPhotoshop や Illustrator などで使うことができます。このタイポス 415 に関してはどちらの利用もできるフォントになっていますので確認してみてください。ではマウスカーソルを重ねて「フォントを使用」をクリックします。「選択したフォントを同期」のボタンを押しましょう。そして「Creative Cloud アプリケーションを起動」をクリックします。このように「外部プロトコルリクエスト」のアラートが出たら右下の「アプリケーションの起動」をクリックしましょう。 そうすると、この Creative Cloud のアプリにフォントが同期されてきます。このように Kan415Typos という名前でフォントが同期されたのでPhotoshop の方に移動しましょう。レイヤーパネル上でメインのキャッチコピーが選択されていることを確認してオプションバーのフォント名のところをクリックして開きます。そしてこちらを活用するとフォントが探しやすくなっています。この TK というアイコンをクリックするとTypekit から同期したフォントだけを絞り込んで表示させることができます。もしこちらが押してないと元々マシンにインストールされているフォントも全てリストアップされてしまうので探しづらくなってしまいます。TK のアイコンをクリックしてTypekit から同期したものだけを絞り込んでそれから先程同期させた「漢字タイポス 415」こちらを選択してみましょう。このように、インターネット回線に繋ぐ必要はありますけれども自分のマシンに入っていないフォントを簡単にその場でTypekit から同期させて利用することができます。コーディングする際にこちらのフォントの扱いをどうするか、ですけれども先程 Typekit の画面で見たようにこちらの漢字タイポス 415 はWeb フォントとして利用可能ですのでコーディング時に web フォントとしてソースコードから呼び出して指定することもできますしもしそのサイトで Web フォントは利用しないというポリシーでしたらこちらの部分を画像化して利用することも可能です。 キャッチコピーですとかボタンといった要所要所でこのような少し個性的なフォントを使ってみるのも面白いかもしれません。以上、このレッスンでは Adobe のフォントサービス Typekit を利用して自分のマシン内にインストールされていないフォントをレイアウト上で手軽に使う方法についてご紹介してきました。

PhotoshopでレスポンシブWebデザイン!

モバイルデバイスにおいてWebを適切に表示させるための仕組みであるレスポンシブWebデザインは、すべてのWebデザイナーにとってもはや必須の取り組むべきテーマです。また最近ではPhotoshopでも美しいカンプを簡単に作れるようになりました。このコースではレスポンシブWebデザインのカンプをPhotoshopで効率的に作成するテクニックを具体的に説明します。

2時間16分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年03月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。