ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeグラフィック講座 > ちょっとした小技:Illustratorで簡単なパターンを使ったかっこいい背景の作り方

ちょっとした小技:Illustratorで簡単なパターンを使ったかっこいい背景の作り方

投稿日:2015年5月8日   ソフトウェア:Photoshop

このチュートリアルでは、Illustratorで簡単なパターンを使った背景の作り方を紹介します。

Step1:はじめに

IllustratorやPhotoshopのレベルが上がってくると、デザインの目標を見失い、複雑なことに没頭してしまいがちです。これは、教える方にも当てはまります。無数のアンカーポイントでグラデーションメッシュをするような、困難で時間もかかり心身ともに疲れ果てるような作業を教えてしまいがちです。

そこで、基本に戻ってみましょう。ここでは、簡単な背景やテキスチャーに関する技術を学びます。この技術は、デザインの主要素をより引き立ててくれます。

スウォッチパレットには、様々なパターンが含まれていて、それぞれのデザインにあうように簡単に色を塗り替えることができます。

下の画像は、ベタ塗りで面白味はありません。暗い冷たい色の背景に明るい色の文字があるだけです。フォントは、dafont.comのScriptinaというフォントを使っています。この画像については、これ以上、特にいうことはありません。

はじめに

これをもっと面白くなるように変えていきましょう。



Step2:背景の準備

選択ツール(V)を使って背景を選択します。コピー(Ctrl+C)して、前面に貼り付けます(Ctrl+F)。

背景の準備





Step3:パターンを選択

スウォッチパレット(ウィンドウ > スウォッチ)で、小さいフォルダアイコンをクリックし、パターン > ベーシック > ベーシック_点、ベーシック_ライン、ベーシック_テクスチャを選択します。

実際には画像のように積み重なった表示ではなく、一つのウィンドウ内でタブ表示されます。 ドラッグすればこのように配置することができます。

パターンを選択

長方形を選択した状態で、「斜線」パターンをクリックします。

パターンを選択



Step4:背景を設定

オブジェクト > 拡張を二回行います。一回目の拡張後に境界線ができます。二回目の拡張後に、その境界線はなくなります。

背景を設定

背景を設定

パスファインダウィンドウ(ウィンドウ > パスファインダ)で「合流」を選択し、オブジェクト > パス > パスの削除を選択します。そして、OKボタンを押します。

背景を設定



Step5:色を設定

スポイトツールを使って、背景にある長方形の色を抽出します。塗りをダブルクリックして、色を少し明るくして、OKボタンを押します。

色を設定

暗い背景に少し明るい線を付けると、文字を読むときに目が痛くなりません。また、浮き出て見える効果もあります。

色を設定

コントラストがうまくいくと、線が浮き出て見えます。細い線が背景から少し浮き上がって見えませんか?



Step6:文字を浮かび上がらせる

選択ツールでテキストを選択してから、オブジェクト > 拡張を選択します。それをコピー(Ctrl+C)して、背面へペースト(Ctrl+B)します。下矢印キーを一度叩いて、スポイトツールを使い、再び背景をクリックします。

文字を浮かび上がらせる

塗りをダブルクリックして、より暗い色を選択してからOKボタンを押します。

文字を浮かび上がらせる

文字を浮かび上がらせる



Step7:完成

テキストを選択し、再びスポイトツールを選択し、背景の線をクリックします。もしくは、テキストに明るい緑色をつけます。

完成



Step8:アレンジ

パターンは自由に変えることができます。下は、ベーシック_テクスチャのUSGS19浸水を使用してみました。

完成

拡張したテクスチャを回転してみましょう。下は、6 lpi 50%をベーシック_ラインから選択して作りました。下の色にたどりつくまでに、2、3回しか試行錯誤してません。

完成

次の画像は、ベーリック_点から十字を使った例です。ピンクを加えることで、だいぶ印象が変わりました。女の子のパジャマやベッドルームが連想されますね。

完成

スタイリッシュな、ルイヴィトン風のデザインはどうでしょう?ベーシック_自然から、三つ葉を選択します。このフォントではデザインとマッチしませんが、いろんなスタイルによって見た目がどう変わるかを知ってほしいので、あえてこうしています。 レザーテキスチャを加えれば、財布のようなかっこいいデザインになります。

完成



引用:Web Design Library 著者:vectorious.net 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング