PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

Illustrator

【Illustrator】 「効果」メニューの「パスの変形」を使って図形を描く

「効果」メニューから「パスの変形」を使って、簡単な図形を描きます。前提として、円を描いておきます。 ジグザグ スパイシーな食べ物のポップや、注目商品の見出しなんかに使えそうな爆発した円を描くことができます。 大きさで破裂の長さ、折り返しでジグ…

【Illustrator】 文字の入ったリボンを作る

簡単な文字入りのリボンを作ります。 長方形ツールで、長方形と同じ高さの正方形を作ります。 正方形を選択し、全面ペースト。 いったん選択を解除し、部分選択ツールで左の辺をつかみ、ひし形を作る。 ひし形を暗めの色に塗り替えます。 正方形とひし形を、…

【Illustrator】丸いロゴを描く(スタバ風)

ポイント 文字のラインを、パスにあわせるために「パス上文字ツール」を使う。 パスの内側に文字を表示させたい場合は、選択ツールを持ったときに表示される長い棒を内側へ引っ張る。

【Illustrator】ブレンドツールで線を使ったグラデーションデザインをつくる

ブレンドツールを使い、虹色のグラデーションデザインを作ります。 作り方 120mmの正方形を長方形ツールで作り、黒で塗ります 赤色で適当にラインを左側に書きます。 そのラインを右側にコピーして、紫色に変えます。 ブレンドツールをダブルクリックして「…

【Illustrator】 複合パスとクリッピングマスクでドットモザイク風の写真を作る

複合パスとクリッピングマスクで、ドットモザイク風の写真を作ります。 楕円ツールを使い、以下のような感じにドットを並べる。 並べたドットだけを選択し、「オブジェクト」から「複合パス」 全部選択して「オブジェクト」から「クリッピングマスク」「作成…

【Illustrator】 ライブトレースを使って、イラスト風の処理をする

ライブトレース(画像トレース)を利用して、画像をイラスト風にします。 やり方 「ファイル」から「配置」で画像を置く 「ウィンドウ」から「画像トレース」を選択 各パラメーターをいじる。このときプレビューを切るとスムーズに編集ができる

【Illustrator】ブレンドツール

ブレンドツールを使うことで、グラデーションを描くことができます。 グラデーションの作り方 長方形ツールで四角を描きます。 オブジェクトに色を設定して、線をなしにします。 Shift+Alt+ドラッグで下にオブジェクトをコピーします。 コピーしたオブジェク…

【Illustrator】テキストにグラデーションをかけたり、変形させる。

テキストをアウトライン化することでグラデーションをかけたり、変形させることができます。 前提として、テキストをアウトライン化させます。 グラデーションをかける アウトライン化したテキストを選択します。 グラデーションツールでクリックして、グラ…

【Illustrator】「効果」を使って2点ロゴをつくる。

「効果」を使用することで様々なロゴを作ることができます。他にも効果がありますが、今回は2点だけ。 使用例 手書きっぽいロゴ 「効果」メニューから「スタイライズ」、「落書き」を選択。 3Dロゴ 「効果」メニューから「3D」、「押し出し・ベベル」を選択…

【Illustrator】前面ペーストを利用してアメリカっぽいロゴをつくる。

前面ペーストを利用してアメリカっぽいロゴを作ります。 作り方 太目のフォントを選択して、文字を大きくしておく。 文字色を薄くして、線の色を濃くする。 線幅を字がつぶれるぐらい線幅を太くする。 3までのオブジェクトをコピーして、前面ペースト。 線…

【Illustrator】線のバリエーション

Illustratorで様々な線を描いていきます。前提として、基準点を真ん中にしておきます。 破線 線のプロパティから、「線端」を「丸型線端」にする。 線分を0pxに、間隔を線の太さの2倍ぐらいにする。 多角形を書く場合、「長さを調整しながら、コーナーやパス…

【HTML/CSS】ホームページの解析

ホームページの解析を通して、ホームページの作りを学びます。 アウトラインを見る ホームページのアウトラインを確認するにはChromeのアドオンであるHTM5 Outlinerを使う。 HTML5 Outliner HTML5 Outliner - Chrome ウェブストア URLバー右端のHTML5 Outlin…

【Illustrator】CSS Sprites用に横並びのナビゲーションボダンを作る

150*40pxの横並びのボタンを5個作ります。 作り方 環境設定で「プレビューの境界」にチェックを入れる。 表示から「ピクセルプレビュー」にチェックを入れる。 長方形ツールを使い、750px*40pxのオブジェクトを作る。 グラデーションツールでグラデーション…

【Illustrator】丸いボタンの作り方

立体に見える丸いボタンを作ります。 作り方 新規ファイル作成 楕円形ツールを使い、Shift+ドラッグで丸いオブジェクトを描く。 グラデーションツールでオブジェクトをクリック。 グラデーションの左側を白、右側を任意の色にします。 右上から左下にかけて…

【Illustrator】かにをトレースする

かにをトレースしながら、複雑な図形を描いてみます。 ポイント 同じような図形は移動ツールとShift+Alt+ドラッグでコピーする。 線対称の図形は、リフレクトツールでコピーする。 拡大縮小ツールで縮小する場合基準点を変えることで、より直感的に縮小でき…

【Illustrator】長方形だけでロゴを描いてみる

長方形ツールをつかってロゴを描いてみます。 ITを描いてみる ポイント 描画で醜い場合は表示をアウトラインのみにすると編集しやすくなる。(Ctrl+Y) 長方形の太さは大体みんな同じなので、ひとつ長方形を作ったらそれをコピーして利用します。90度回転さ…

【Illustrator】旧ドコモ i-mode風ロゴを楕円だけで描く

作り方 楕円形ツールで、ひとつ楕円を作ります。 それを下に三つコピーします。コピーするときは選択ツールダブルクリックで、楕円の縦の直径分移動します。 もうひとつコピーを作り、二つの楕円と接線が合うように楕円を左側へ移動させる。 三つの楕円と接…

【Illustrator】 角丸長方形を角丸を丸くする

角丸長方形ツールでドラッグ中にカーソルの右を押すと、丸くなります。逆に左を押すと丸みがなくなります。上と下で角丸の大きさを微調整できます。

【Illustrator】リフレクトツール

Illustratorはベクターデータを作るツールです。 役割の一つはシンメトリー(対称)を作ることです。リフレクトツールを使い、半分しかないトンボのもう片方を表します。 時間:10秒やり方: 選択ツールでトンボの半分を選択。 リフレクターツールを使い中心…

【Illustrator】直線や曲線を描く

Illustratorではペンツールを使って線を引くことができます。 直線の引き方 ペンツールを選びクリック。 別な場所をクリック。 曲線の引き方 ペンツールを選び、プレス+ドラッグでハンドルを表示させ力の方向を決める。 別な場所をクリック、またはプレス+ド…

【Illustrator】 1枚の葉っぱを回転ツールを使って、四葉にする

回転ツールで一枚の葉っぱをコピーしながら、四葉にしていきます。 作り方 選択ツールで葉っぱを選択。 回転ツールを選択し、四葉の中心となるところをAlt+クリック。 角度を90度にしてコピー。 すると90度回転した葉っぱが一枚コピーされる。 Ctrl+Dで…

【Illustrator】イルカをトレースする。

Illustratorに慣れてきたので、イルカのテンプレートからイルカをトレースしてみます。 ポイント コーナーを作る。 なるべくアンカーポイントを少なくすると綺麗に見える。 線を太くすると見やすい。