ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeグラフィック講座 > 花柄のテキストを使った壁紙を作成する方法

花柄のテキストを使った壁紙を作成する方法

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

このチュートリアルでは、花柄のテキストを使った壁紙を作成する方法を紹介します。

Step1:テキストの設定

Illustratorを開き、幅1024px、高さ768pxでカラーモードはRGBの新規ドキュメントを作成してください。
文字ツール(T)を使って、黒(#000000)で「FLORAL」と書いてください。
他の色を使っても構いません。下記のとおり、フォントはArial Blackでサイズは150pt、行送りを180pt、トラッキングは0に設定してください。
レイヤー名は「floral」とします。

テキストの設定

floralレイヤーを作成したら、そのレイヤーをコピーしてfloralレイヤーの下に移動します。
このレイヤーは「floral_style」という名前にしてください。
次に、「floral」レイヤーの選択を解除して「floral_style」レイヤーをクリックしてください。
「ウィンドウ」-「グラフィックスタイル」(Shift+F5)でグラフィックスタイルを開きます。
グラフィックスタイルのダイアログボックスが開いたら、右端のボタンをクリックしてドロップダウンリストを表示させます。
「グラフィックスタイルライブラリを開く」-「アーティスティック効果」を選んでください。

テキストの設定

アーティスティック効果のダイアログボックスの「ペイントブラシ」効果をクリックしてください。

テキストの設定

「floral_style」レイヤーを選択したまま、線の色を黒(#000000)にしてください。
こんな感じになるはずです。

テキストの設定

「効果」-「ぼかし」-「ぼかし(ガウス)」を選んでください。
ぼかしの半径は6.0にしてOKを押します。
これでテキストに影が出来ます。
こんな感じです。

テキストの設定



Step2:花を加える

テキストに花を加えていきます。

「fbg_lldkiejn.ai」ファイルをIllustratorで開いてください。
このファイルの個々のエレメントをバラバラに使って、花柄の効果を作成していきます。
開いたファイルの画像のグループを解除してください。

花を加える

グループを解除したら、黄色い花2本を「floral」と「floral_style」の2つのレイヤーの間においてください。
こんな感じになっているはずです。

花を加える

ここまでできたら画像の花をさらにグループ解除して、テキストの周りに配置して行きます。
次のような感じに配置してください。

花を加える

石を加えましょう。「ウィンドウ」-「シンボルライブラリ」-「自然」を選んでください。
石を画像に加えます。
全てを選択(Ctrl+A)して、(Ctrl+G)もしくは「オブジェクト」-「グループ」でグループ化します。

花を加える





Step3:背景の設定

Illustratorでの作業はここまでです。
Photoshopを開いて幅1024px、高さ768pxで新規ドキュメントを作成してください。
解像度は100pxで背景は透明にしてください。
ファイル名は「floral_wallpaper.psd」として保存します。

背景には紙のテクスチャ素材を使用します。

このテクスチャを開いてPhotoshopに配置します。
このテクスチャを選択して「編集」-「変形」-「回転」で反時計回りに90度回転させます。
ドキュメントサイズにぴったり合うようにサイズを調整してください。
このレイヤーを「paper」と名付けます。
画像の周りに黒い部分があるのをお分かりいただけると思いますが、これらを自動選択ツール(W)を使って消してください。

背景の設定

このpaperレイヤーの下に新規レイヤーを作成し#dab787の色で塗りつぶしてください。
黒い部分の削除が終わったら、paperレイヤー上でCtrl+クリックしてください。
「イメージ」-「色調補正」-「明るさ・コントラスト」を選びます。
明るさは+52、コントラストは-50に設定してOKを押します。
描画モードは輝度を選択し不透明度を57%にしてください。



Step4:画像を合わせる

グループ化した花柄のテキストをIllustratorからPhotoshopにドラッグしてください。
それをpaperレイヤーの上に置きます。
少し傾けてください。
そのfloralテキストレイヤーをダブルクリックしてドロップシャドウを適用します。
描画モードは輝度にして不透明度は45%、角度は120度、距離3px、スプレッド4%、サイズ6pxに設定してください。

画像を合わせる

画像を合わせる

ここで水彩色とコーヒーのしみのブラシを背景に適用していきます。
水彩色を数種類とコーヒーのしみブラシを適用したら、不透明度を下げて、その中のいくつかについては描画モードも変えます。
ブラシごとに異なるレイヤーを作成して、それぞれの不透明度や描画モードの調整をしやすくしておくのを忘れないで下さい。
私のはこんな風になりました。

画像を合わせる

立体的に見えるようにテキストレイヤーにさらに影をつけます。
テキストレイヤーの下に新規レイヤーを作成してください。
ブラシツール(B)を選んで、ソフトな丸い40pxのブラシで不透明度を57%に設定し、テキストの周りの部分を黒にします。
テキストと被ってしまった部分は消してください。
こんな感じです。

画像を合わせる



Step5:完成

ほぼ完成ですが、このままでは壁紙が少し寂しい感じがします。
蝶々を加えてみましょう。
私はIllustratorのデフォルトの蝶々のシンボルを使用しました。
「ウィンドウ」-「シンボルライブラリ」-「自然」から取り出すことが出来ます。

完成



引用:Web Design Library 著者:ClippingDesign 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

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