キャンパスサイズを変える

コンテンツに応じて塗りつぶしを使いこなせ！

コンテンツに応じたパッチも覚えちゃおう！

まとめ　使い分けの秘訣

• 「コンテンツに応じて塗りつぶし」→周囲のパターンを読み取って、カンバスの広げた部分のみ塗りつぶす。（元の画像には影響は無い）ある程度は複雑な背景でも適用できる。うまくいかないときは「コンテンツに応じたパッチツール」を使うのも良い。

•  「コンテンツに応じて拡大縮小」→人物など保護をかけたもの以外の背景を拡大縮小。背景の画質は少々落ちる。

物によってどれが合うか違いますので色々試してみてください。

基礎的なことかもしれませんが、画像のサイズを変えることが出来ればデザインの幅がひろがります。これでちょっと足りないを乗り切ってくださいね。

今回の写真はフリー写真素材ぱくたそ さんの素材を使わせていただきました。

「HPに載せたり営業PPTに使いたいからiPhone6Sとのハメコミ画面合成作ってよ」
客先に持って行きたいから、すぐに作って欲しいなんて無茶ぶりされることも……。

そんな時あっという間につくれる秘訣があるんです。それはPhotoshopの「Vanishing Point 」
この機能、すごく便利だけどはめ込み以外にもたくさん使えるのです。
新製品のパッケージのサンプルも某デザイナーで騒がれた空港の合成などもすぐ出来ちゃう。

今回はこの機能を使ったお話をしてみましょう。

基本編

まずは下準備として合成するための製品モックアップ画像を調達してくるところから。

ちなみにappleは全製品画像を公開しています。apple　press　info

他のパソコンやアンドロイドなどの画像はこれらのフリーの素材サイトにあります。

PAKUTASO/ぱくたそ

graphicburger

たぶんこれらで事足りるのではないでしょうか。

 ハメコミ合成を作ってみよう

今回はこのiMacの画面へのハメコミ合成をしてみます。

photoshopで元画像と（今回はiMacの画像）はめ込む画像（今回はクラウディアのHPキャプチャ）を開きます。

はめ込む画像を「⌘+A」（Mac）「Ctrl+A」(windows)全て選択。
もしくは範囲選択してから、「⌘+C」（Mac）「Ctrl+C」」(windows)でクリップボードにコピーします。

貼り付け先の画像を開き、新規レイヤーを作成します。（新規レイヤーなしでもできますが、修正する可能性を考えたら作っておいたほうがいいです）

そこで「フィルター」から「Vanishing Point」を選択してクリック。そうすると別ウィンドウで「Vanishing Point」のウィンドウが開きます。

「Vanishing Point」をかけようとフィルターを開いたら、アレレ？
「Vanishing Point」をクリックできない時があります。
フィルタが動作しない画像は、画像のカラーモードを確認。
大体がカラーモードが「CMYKカラー」や「インデックスカラー」「モノクロ2階調」だったりします。
その場合はカラーモードを「RGBカラー」に変更すると適用できるようになります。

「Vanishing Point」ウィンドウが開いたら、
「面生成ツール」を選択し、角と角を繋ぐようにするとはめ込む範囲（編集する面）を作成できます。
または、オブジェクトをクリックでもできます。

「面生成ツール」で選択して面が作成されました

編集する面を選択したら、「⌘+V」（Mac）「Ctrl+V」」(windows)で
先程クリップボードにコピーした画像を貼り付けます。

貼り付け直後。まだ角度は変わっていない。 これをドラック＆ドロップすると……

自動的に画面にフィットした！

貼り付けた画像を、「面生成ツール」で指定した編集する面にドラッグ＆ドロップすると……
画像が自動的にパースや角度も合わせた状態に設定されます。

サイズを調整する時は、Tをクリックするとバウンティボックスが表示されるのでそれで大きさを調整します。

調整がおわったところでOKをクリックすると、この作業が保存されます。

 応用編

さて、今までが基礎編。この機能を使えばもっと色々例えばこんなことができます。

画面を指でタッチしてるバージョン。こういう画像も良くありますね！
持ってる手がかぶっているなんていうのも同様のパターンです。

この場合はどうしたらいいのでしょうか。

まず元の画像のコピーレイヤーを作ります。

元画像のコピーレイヤーを作成してから指を選択しています

コピーレイヤーで手の部分を選択して「マスク」をかけます。

指を範囲選択してからレイヤーマスクをかけて指だけ選択されました

ここだけかかっているのわかりますか？指だけになっていますね。
また新しいレイヤーを開きます。
ここからは基礎編でやった手順をこなしてください。

基礎編で説明した「Vanishing Point」 を使って面に画像をハメコミました

「Vanishing Point」を使って画面をはめ込みました。

さてここでさっきのマスクをかけた手だけのレイヤーの順番を一番上に配置

指をレイヤーマスクしたレイヤーを一番上に持ってくると「Vanishing Point 」でできた面の上に指が……

ハイ出来上がりです！

これでもう少し複雑になってもできますね。

最初に紹介した某デザイナーで騒がれた空港の合成もつくってみました。

じゃん！羽田国際線ターミナルをクラウディアの広告ジャック

※この元画像はフリー画像のPAKUTASOのものです。無断転用ではありません。

Vanishing Pointの選択画面はプラスマークをクリックするとどんどん追加できます。

ちなみにEの看板のところにひさしがかぶっていますね。これには応用編で紹介した「クイックマスク」をかけて一番上に持ってくるテクニックが使われています。

「Vanishing Point」で作成した面。これらに画像を流し込んだ。

これらのテクニックを使えばパッケージなどのデザイン案のモックアップや、道路などに文字をいれるイメージ図も簡単にできそうでしょ？

こんなのもすぐできちゃう

アイデアしだいで、こんなに色々使える機能「Vanishing Point」を使って、仕事の効率化を図ってみてくださいね。

いくら美しく正確なトレース線を描けても、それに時間がかかっているようでは仕事にはなりません。

IllustratorとPhotoshopに関して、作業スピードを上げる最初の一歩は、ショートカットを使いこなすことです。

当たり前の事なのですが、これが出来ているかどうかは、プロとアマを分ける大きな差になります。

１.ショートカットキーとホームポジションの確認

今、あなたの左手はどこにありますか？

膝の上などはもっての他ですが、指がキーボドの左下端に乗っていない方は、今すぐ作業用のホームポジションに置いてください。

最も初歩でありながら、多くの人が出来ていないのはショートカットキーを「必ず」使う意識です。
メニューのプルダウンを開いてコマンド名の横にショートカットの表示がある場合には、必ずプルダウンを一度閉じて左手で操作しましょう。
一回やればすぐ覚えます。わざわざショートカットを勉強する時間は必要ありません。必要があったら必ず実践する意識を付けます。

そのためには、左手のホームポジションを死守することです。右手をマウスに置き、左手の指を以下のように置いてみましょう。

Win：【Ctrl（小指）】、【Alt(中指）】、【space（人差し指）】
Mac：【command（中指）】、【option(薬指）】、【space　（人差し指）】

※以下Winを基本にしますので、Macの方は、【Ctrl】→【command】、【Alt】→【option】に読み替えてください。

上記は手の向きに負担がかからない基本のポジションですが、実際の仕事現場では個人によって千差万別です。

ちなみに、私は 最速を求めたポジションとして、【Ctrl（小指)】、【Shift（薬指）】、【Alt（親指）】としています。

このポジションの特徴は、3つの大切な補助キーに常に指が乗っている状態だという点です。
自由になる人差し指で補助キー以外を押し、親指で【space】です。

右手がマウスを離れてキーボードに触れることはあっても、左手のホームポジションが移動することは文字入力時以外にはありません。

自分の手に合ったホームポジションを見つけ、常にショートカットを使うようにしましょう。

2.ショートカットのカスタマイズ

必ずショートカットを使う習慣がついたら、次にショートカットのカスタマイズをします。
ちなみに、この設定にさえもキーボードショートカットがありますよ。→【Alt + Shift + Ctrl + K】

設定するには、各ツールのショートカットという欄をクリックしてカーソルを移動し、当て込みたいキーを入力するだけです。

すぐにその内容が表示され、使えるようになります。

おすすめしたいショートカットは、グループ選択に【Shift+A】を当てること。
基本的には、ダイレクト選択ツール（A)→【alt】を押しながら…とするのがグループ選択ツールの使い方ですが、このショートカットを当てておくと、選択ツール（V)から直接グループ選択ツールへ移行出来るので作業内容によっては圧倒的に楽になります。

また、マウスを左手で使う方は、特にこの設定を大幅に変更することで、信じられないほどの効率化が図れます。

設定が変更できたら保存することを忘れずに。

Illustrator 初期設定フォルダーに .kys ファイルとして保存されますので、他環境でも同じフォルダにコピーすることで、自分の設定を受け継ぐことが出来ます。

3.移動単位の変更

illustratorにおいて、矢印を移動のショートカットキーとして使いこなすために、【編集】→【環境設定】→【一般】→【キーボード入力】から使いやすく変更します。
ショートカットは、【Ctrl+K】。

大きくてシンプルな作業では1mmないしは、0.5mmに、普通の印刷系の仕事では、0.1mmが良いでしょう。
ウェブ系では1pxに設定してください。
これで矢印キーを使ってのオブジェクトの移動がやりやすくなり、精度も上がります。
また、【Shift+矢印】で、設定の10倍分を移動します。
0.1mmに設定していれば、1mmですね。

これらの設定は基本的なことですが、逆に「必ず」ショートカットを使うということが出来ていない方がほとんどなのも現実です。

一度確認してみてください。

出来るビジネスマンの効果的なプレゼンテーションのためには、イラストレーターのグラフ作りを知ることは、大きな武器になるでしょう。

今回の目標として、「棒グラフを使い、最近売上が上昇していることを、印象的に見せる。」と設定します。
このように目標を明確にすることは、良いプレゼン作成のためには大変重要です。

それでは、まずグラフツールをクリックし、 アートボード上でクリックして、グラフダイヤログで大きさを設定してグラフを描画していきましょう。

グラフデータウィンドウに数字を入力します。
今回は以下のような数字を入れました。
年号のように数字を文字として扱いたい場合は、””（ダブルクォーテーション）で数字を囲みます。

一番右のチェックボタンをクリックすると、データがグラフに反映されます。

一般的には、時間軸のある売上推移を表現するには、折れ線グラフを使います。
しかし、今回のグラフの目的は最近の売上の大きさをクライアントに印象づけることにあるので、敢えて分量を目で感じられる棒グラフを使います。

さて、ここまではエクセルでも問題なく出来る内容です。
ここから、イラストレーターを駆使して、2015年の売上数字が、より大きく印象づくように工夫していきますよ。

グラフオブジェクトは、グループにしている限りは、データの書き換えを反映させることが出来ますが、解除することで普通のオブジェクトになり、自由に加工をすることが出来ます。

そこで、デザイン加工をするために、グラフのオブジェクト全体をコピーしてアートボードの外にペーストしてとっておき、元のグラフをグループ解除します。
この時、上記の内容を知らせる警告が出ますがOKして進みます。

目盛を消去し、棒グラフを見やすいようにグレーの単色（K:20%)で塗り、線の色は無しにします。

効果＞3D＞押し出しベベルを選択し、自由回転でグラフの奥行きが効果的に見えるように調整します。

大きさを表現したいので、下から見上げるような角度で、遠近感を付けます。
設定した数字はあとで使うので書き留めておきましょう。

オブジェクト＞アピアランスを分割
オブジェクト＞グループ解除します。

グラデーションパレットから、色を付けます。
スウォッチライブラリ>グラデーション>スウォッチ(明）で好きな色を選びます。
標準だと0度の角度で左から右へのグラデーションとなっています。

このグラデーションの角度を【-110度】に設定して、上が明るいグラデーションで高さを表現した上で、奥との重なりをわかりやすくします。

これだけでも美しいですが、より右端の棒が立派に見えるように加工していきましょう。

グラフ全体を選択し、コピー>同じ位置にペースト（Ctrl+F)し、変形>合体とします。

白黒のグラデーションを右が明るくなるようにかけます。

オブジェクトを選択したままで、アピアランスから、透明を乗算にすると、元のグラフに白黒グラデーションが重なりますので、目立たせたい場所が明るくなるようにグラデーションの場所や不透明度を調整します。

これでグラフ本体は完成です。

次に、最初にコピーして別に置いてあった元グラフを、もう一度コピー＆ペーストし、グラフ部分を削除して目盛と数字だけにします。
フォントを力強さを表現しやすい、Impactに変更しました。

目盛と数字をグループ化したままで、３Dにします。
設定はグラフ本体と同じですが、「押し出しの奥行き」だけ0pxに設定します。
グラフと合う位置に移動します。

最後に、色を整えて、伝わりやすくなるように説明を入れます。

シャープに見せるために白の線を入れました。
青い吹出しはシンボルライブラリの 「Webボタンとバー」から探せます。
矢印は、ブラシライブラリの「矢印」から入れて、効果>スタイライズ>ドロップシャドウをかけています。
目盛の数字が混みすぎていて右上に向かう視線を邪魔するので間引きました。
UP！の文字は、オブジェクト>エンベロープ>ワープで歪ませています。

いかがでしょうか？
このように、狙いを持ってイラストレーターを使うことで、単にグラフを提示するだけでなく、クライアントの気持ちを思いのままに誘導する洗練されたプレゼンテーションを作ることが出来るのです。

　メニューボタンを作りたい

CSS Menu Generetor

CSS Menu Builder

CSS3 Button Generator

　グラデーションを作りたい

CSS Gradient Generator

Ultimate CSS Gradient Generator

　吹き出しボックスを作りたい

CSS ARROW PLEASE

　角丸を作りたい

CSS Border Radius Generator

　フォームデザインを作りたい

Live Tools – Form Builder

　いろいろまとめてやりたい

CSS3.0 Maker

いかがでしたか？今日は CSS デザイン時に使えるジェネレーターを独断と偏見で選んでみました。みなさんのデザイン制作の一助にしていただければ幸いです。

ローカルで使う場合は上記公式サイトの Download から落として解凍してください。

サーバー上ですぐに使う場合は以下コマンドを実行して /css などお使いのディレクトリにファイルを入れてください。バージョンは新しくなっているかもしれないので、適宜バージョンの番号は変えてください。

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip
# unzip font-awesome-4.3.0.zip

fonts ディレクトリと css ファイルだけをドキュメントルートにコピーしてください。以下のような構成になっていれば問題ありません。

/var/www/html/fonts
/var/www/html/css/font-awesome.css
/var/www/html/css/font-awesome.min.css   //minファイルが不要であれば消してください

次は html ファイルの head タグで以下のようにしてください。

<head>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> //不要なら消し(ry
</head>

これでアイコンフォントを使えるようになりました。早速使ってみましょう。基本的な使い方は タグの中の class に使いたいアイコンを書きます。

<i class="fa fa-twitter fa-lg"></i></a>

// fa は fontawesome のクラスを表す必須記述
// fa-twitter はアイコン名　ここに使いたいアイコン名を入れて使う
// fa-lg はアイコンのサイズ指定　サイズは以下の中から指定可能

なし  ：100%
fa-lg : 133%
fa-2x : 200%
fa-3x : 300%
fa-4x : 400%
fa-5x : 500%

上記サンプルだとこのようにツイッターのアイコンが出ました。

その他のアイコンについては公式サイトのアイコン一覧を見て、指定してくださいね。

いかがでしたか？今日は画像を使わずにアイコンを導入できる Font Awesome の使い方をご紹介しました。2015年6月現在で 519個 のアイコンが使えます。アイコンフォントを提供しているサービスは他にもあるのですが、今のところ一番数が多いのはこの Font Awesome だと思います。みなさんも簡単に使えるアイコンフォントでサイトを飾ってみてくださいね。

まずはこちらの DEMO をご覧ください。

マウスをホバーするとホームにいたバーが追いかけてくるメニューです。
上記のものを作る際には HTML, CSS, jQuery を使います。

(HTML)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="../css/sample.css">
  <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
</head>

<body>
  <div id="menu">                                                                                                                                                                                    
    <div id="nav"> // 以下ご自由にメニューを書き換えてください
      <a href="">サービス</a>                                                                                                                                                                        
      <a href="">お問い合わせ</a>                                                                                                                                                                    
      <a href="">開発プロセス</a>                                                                                                                                                                    
      <a href="">技術ブログ</a>                                                                                                                                                                      
      <a href="">会社情報</a>                                                                                                                                                                        
      <a class="current" href="">ホーム</a>                                                                                                                                                          
      <span></span>
    </div><!-- nav -->
  </div><!-- menu -->

<script>
$(function() {
        $('#nav span').css({ 
                width: $('#nav .current').outerWidth(),
                left: $('#nav .current').position().left 
        });
        $('#nav a').mouseover(function(){
                $('#nav span').stop().animate({
                        width: $(this).outerWidth(),
                        left: $(this).position().left}
                ,{ duration: 170, easing: 'linear', });
                //上記でバーの移動スピードとイージング方法を設定できます
        });
});
</script>

</body>
</html>

(CSS)

#menu {
    font-size: 16px;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    background: #2C3E50;
}

#menu a {
    margin: 0 4% 0 0;
    text-decoration: none;
    color: white;
}

#menu a:visited {
    text-decoration: none;
    color: white;
}

#menu a:hover {
    text-decoration: none;
}

#nav {
    position: relative;
}

#nav a {
    padding:10px;
}

#nav span {
    background: #FD9802; //バーの色を設定できます
    height: 2px; //バーの太さを設定できます
    display: block;
    position: absolute;
    width: 30px;
    left: 0
}

#nav a:hover {
    cursor: pointer;
}

これだけです。バーの移動スピードが遅すぎるとユーザーがストレスを感じる可能性もありますので、個人的には 170ms あたりがオススメです。CSS デザインを変えてオリジナルのメニューを作成してみてくださいね。

まずはこちらのデモをご覧ください。

トップ画面においてネットワークに白い光を走らせるアニメーションを作っています。
白い丸を動かすだけなので作業は簡単です！

さて、アドビソフトの購入を CreativeCloud に切り替えて久しいですが、アニメーションオーサリングソフトである『Edge Animate』は現在無料で利用できます。

Flash ほど高機能ではないものの、Illustrator でオブジェクトを作って、それらを組み合わせてアニメーションを組むには良いソフトだと思います。

普段から Adobe系ソフトを使っている人ならすぐにアニメーションは作れると思いますが、意外とその出来上がったアニメーションを貼り付けるのが簡単ではないので、その点も取り上げてみたいと思います。

まずは CreativeCloud から『Edge Animate （以下、EA）』をインストールします。

インストールが終わったらソフトを起動しましょう。

意外とメニューや画面が少ないと感じるでしょう。EA 内でオブジェクトを作り込む機能はあまりなく、既存の画像を読み込んでそれらを時間軸で配置して動かすというのがメイン作業になります。

今回は既存のトップ画面を読み込んで、その上に白い丸が移動するアニメーションを作成していきます。

ファイル＞新規作成

赤い線で囲った部分で、自由にキャンバスサイズを変更できます。すぐ右は背景なので、クリックして透明にしておくと良いです。

今回はサイズを 1600px × 500px にして背景画像を読み込みました。画像のインポートは「ファイル＞読み込み」からできます。

楕円形ツールで白い小さい丸を画面外に描きました。

次に赤い線で囲まれたボタンを押して、黄色のゲージを１秒先に進めます。そして、白い丸を動かしたい場所へ移動させます。

ここまでできたら、Ctrl + Enter を押してみてください。ブラウザが起動してアニメーションが開始します。
確認しながらアニメーションを作りこんでいきます。

最終的には冒頭でご紹介したように白い線が様々にほとばしります。→DEMO

  出来上がったアニメーションを自分のページに貼り付ける

アニメーションが出来上がったら「ファイル＞名前を付けて保存」で任意の場所に保存します。すると、以下のように複数のファイルが書き出されました。

上から

・インクルード用 js ファイルが入ったフォルダ
・元画像
・Edge Animation ファイル
・出力用 HTML
・実処理 js
・関数 js

となっていて、なんだかめんどくさい印象・・・

しかし！出力用の HTML を開けばどのようにファイルをインクルードして動かしているかなんとなくつかめるかと思います。

1.　サーバーのドキュメントルートに .an ファイル以外をすべてアップロードします
2.　出力用 HTML にある meta と同じように head 内に meta を書き写す
3.　出力用 HTML にある style を 自分の css ファイルに書き写す
4.　出力用 HTML にある script を自分の HTML ファイルに書き写す
5.　アニメーションを表示したい場所にを書き写す

これで自分の HTML を開けば、各 js ファイルやイメージをインクルードして、アニメーションが開始されるはずです。

いかでしたか？今日は画面から作ったアニメーションを HTML + JavaScript に書き出してくれる便利なツールをご紹介しました。JavaScript でコードから書くとかなりの労力になりますので、簡単なアニメーションぐらいなら EA を使うのも手だと思います。
みなさんもオリジナルのアニメーションでページを飾ってみてください。

さて早速ですが Illustrator を起動して新規アートボードを作成します。
（例は 300px × 300px）

「楕円形ツール」で真円を描きます。

次は「ペンツール」を使って円の中心から外へ1本線を引きます。

続いて、先ほど描いた1本線を「選択ツール」で選択状態にし、「回転ツール」をクリックします

回転ツールを選択した状態で、「Alt」を押しながら円の中心をクリックすると、回転ツールのダイアログがでます

「角度」にお好きな角度を入れてください。例えば40度にすると「360度÷40度」で9等分の円を作ることができます。その後「コピー」を選択します。

下の図のように40度傾いた線が追加されます。そのまま「Ctrl + D」を7回繰り返します。

すると下の図にように9本のパスが簡単に描けました。

次は、全選択した状態で「パスファインダー」の「分割」を選択します。

右クリックして「グループ」解除を選択することで9つのオブジェクトが独立します。

9つのオブジェクトが独立して個別に色を変えられるようになりました。

いかがでしたか？今日は Illustrator の基本技をご紹介しました。おそらく円の分割はこの方法が一番簡単だと思います。角度を変えれば何分割にでもできますのでお好みの数値をいれて作成してみてください。

「なんだって！？オイラはいつでも明朝体で勝負でぇ！」という粋な日本男児は読み飛ばしてください。

さて、早速 Google Fonts からイケてるフォントをダウンロードする手順をば

どのフォントでもいいですが、今回は「geo」で検索します。
ちなみにゲオではなくジオだと思います´･∀･)　↓

次は「GEO」の中でダウンロードしたい字体の「Add Collection」をクリックします。↓

次に真ん中の小さいボタンをクリックします。↓

字体を選んで、下矢印のボタンをクリックします。↓

ウインドウが出ますので、一番上の文章の「zip file」をクリックするとダウンロードが開始されます。↓

あとはファイルを解凍して、インストールしたい .ttf ファイルをダブルクリックするだけです。
ちなみに regular に対して、 oblique は斜め字体のことです。

では今回は Illustrator CC から使ってみましょう。↓

ＧＥＯ フォントはうちのブログロゴで使っています。ポップで角ばったフォントで、個人的によく使うフォントのひとつです。ひとつ注意点ですが  GoogleFonts は日本語はありません(ﾉД`)　あぁ・・・無数の漢字がある日本語の切なさよ。

いかがでしたか？
今日はデザイン関連の記事でした。これだけの数のフォントが無料で使えるとはありがたいですよね。みなさんもお気に入りのフォントを見つけて、イケてるデザインを制作してください。