光沢をもった感じのボタンっぽいモノを、できるだけ簡単にイラストレーターの機能でつくってみました。
ソフトはイラレ9、グラデーションで光沢を表現して透過っぽくします。
こまごました操作はなしで、できるだけ簡単につくります。
デザインに凝れば、さらにいろいろ操作は必要だと思いますが、ここでは超簡単な方法なので、多少シンプルになります。
1.角丸の四角をつくります。ここでは仮に緑色にしました。
2.コピーして、背面もしくは前面にペースト。2回繰り返します。
つまり、3枚の角丸四角が重なった状態です。
3.一番上の角丸を上にずらします。Shift押しながら、図形の真ん中あたりまで上にずらすとちょうどいいと思います。
4.ずらした角丸四角と、そのすぐ下にある角丸を選択。(つまり、2枚選択)
5.パスファインダの「交差」。交差してる部分が残ります。(画像では、解りやすいように白色にかえています)
6.交差した図形を少しだけShiftおしながら下へ。左右の幅を縮める。
(下にずらすのは、一番下の図形が少し見えるようにする為なので、ほんの少しでOK。左右の幅を縮めるのも、下の図形が少し見えるようにする為なので、ほんの少しだけでOK)
7.交差した図形の色をグラデーションで光沢っぽく設定。この設定は、お好みで。
画像では、下の方が緑色で上が白色になるようなグラデーションの設定をしています。
完成です。
グラデーションは、もともとの色から白色に変わる設定が良いかと。
イラレの基本的な機能のみ使っているので、イラレのバージョン低くても透過風なボタンが作れるかと思います。
2009年11月12日
イラストレーター9でホームページのボタンのようなモノを作ってみる
2009年10月21日
fireworks
DreamWeaverと一緒に使っています。
パスを交差させたり、合体させたりと共通する部分が多いので、
adobe製品で慣れると、他のadobe製品も使いやすいみたいです。
2009年09月22日
画像の背景をなくして、イラストレーター上で背景にイラストを使う
が付いているので、背景をなくしたい。
この場合、大きくわけて2通りの方法がよく使われると思います。
●イラストレーター上で、イラストレーターの機能でマスクをかける
ーに配置する。
今回の場合は、おそらく画像自体にあらかじめマスクをかけた方が良いかと思います。
イラストレーター上でマスクする場合は、単純なパスなら良いのですが、複雑にパスを引
いて、マスクした後、万が一マスクをずらしてしまうミスをした場合面倒です。
この方法は、下記URLにて。
単純に画像を丸くマスクしたり、四角や、角丸の四角などでマスクする場合はこの方法で良いかと思います。
次は2つめの方法、画像にマスクをあらかじめかけておく方法。
これなら、画像自体にマスクがもうしてあるので、配置した時点でもう背景はありません。
一応、慣れてない場合、予期せぬ状態で上書き保存して元データをダメにするという事がよくあるので別名保存で画像をもう一つ作成して予備にしておくとよいかも。
フォトショップで説明しますと
1.画像をフォトショップで開く。
2.背景以外(表示したい部分)にパスを引く
3、パスを保存する。
4、クリッピングマスクをする。
5、保存してイラストレーターに配置。
手順はこんな感じです。
パスを引く時に使われるベジェ曲線というものは、慣れてないと扱いにくいと思います。
独特の動きをするので・・。
例としてクマの頭をクリッピングマスクしてみます。
フォトショップで画像を開きました。
パスを頭の輪郭で引いていきます。
パスを引いて最初のパスにゴール。頭がパスで囲まれました。
パスを保存します。パスのパレットの右上の三角マークをクリックすると「パスを保存」が出てくるからクリックします。
パス名は、パス1を選ぶ。「OK」
もう一回パレットの三角マークをクリック。「クリッピングマスク」をクリック。
「パス1」を選んで「OK」
これで、クリッピングマスクができました。
保存、もしくは別名保存。
イラレに配置すると、マスクされてます。
せて、選択範囲をパスに変換する方法もありますが、あまりおすすめできません。微妙に
粗いパスになったりするので・・。
上記2つの方法がよく使われますが、方法としては、ほかにもあります。
その他の方法1
マスクではなく、画像の背景を透明にしてGIF画像にする方法。でもGIFなんで実写の写真や色数の多い画像だと汚くなる。単純なイラスト等だったらGIFで良いかと。
その他の方法2
もうひとつ、逆の発想で、画像上で背景を取り、イラレのイラストを画像上にペーストして1枚の画像にしてしまう方法。イラストが大きすぎると画像サイズがおおきくなるデメリットあり。あと、イラレだと拡大が楽だけど、画像だと拡大の際、解像度をきにしなければならなくなる事もデメリット。
画像に関して過去記事のもマスクなど掲載してるので、ご参考までに。
http://irare.seesaa.net/category/3348427-1.html
2009年09月17日
イラストレーターの文字の大きさが同じなのに違って見えるのは?
微妙な差なのですが、大きい文字になればなるほど、その差が目立ち、文字の大きさが違って見えます。
ひらがなの「う」にあわせてピンクの四角い枠をつけてあります。
全て同じフォント数なのですが、文字の端に枠を揃えると漢字の方が幅をとっている事がわかります。
アルファベットに比べ、ひらがな・カタカナ・漢字の混在する日本語ではこういう場合が多くみられます。漢字が大きく見える場合が多いです。
普通の文章(小さいフォント数)の場合は良いですが、コピー、タイトルなど目立たせたくて大き目に表示する場合は特に差が目立つのでデザイン的にも良くありません。
ケースバイケースで、一文字単位の微調整をする事で見た目がずいぶん変わります。
小さく見える文字を大きく見える文字に合わせて大き目にしてみたりします。
また、デザインとしては、逆に極端に大きさに差をつけて、強調すべき文字と、その他の文字の差別化をする場合もあります。
2009年09月02日
パスファインダで交差を使う
交差を使うと、2つのオブジェクトの重なり合った部分だけを残したオブジェクトが出来上がります。
使いかたは簡単
1.重なり合ったオブジェクトを選択
2.パスファインダの左上の2番目、「交差」をクリック
3.出来上がりです。
パスファインダを使うと面倒なオブジェクトの作成がかなり簡単にできたりします。
イラストなどを作成するときに便利です。
だけど、使用した後に、合体前のデータが必要になったりする場合がでてきたりするので、個人的には、合体前をコピーしておいて、パスファインダでもう一個の方を処理しています。
あとで、変更したい部分がでてきた場合は、元のオブジェクトがあった方が便利です。
2009年08月20日
オブジェクトにマスクをかける
マスクは、イラストレーター上の画像にかける事が多いのですが(画像にマスクをかける)、
作成した図形などにもかける事ができます。
使いかた次第では、大変便利です。
実用的な方法としては、お店までの地図などを自作で作成する場合があります。
パスで地図を作っていると、道路や川、線路など端っこまでの長さがバラバラで見た目が悪いのですが、全体に四角でマスクをかけると、余分に長い部分が四角い範囲以外見えなくなるので、四角い範囲に収まった見た目のきれいな地図をつくる事ができます。
2009年07月17日
印刷に出す時に注意する点 vol.2
配置している画像が、同じフォルダにすべて揃っているか確認する。
配置しているはずなのに画像が表示されないということになったら最悪です。
かなり慎重なチェックが必要です。
「すべてを選択」して、「アウトライン化」する。
印刷のときには、アウトラインデータを使います。これは、文字化け防止の意味があります。
自分のパソコンで文字化けしていなくても、印刷所で文字化けして印刷されたらマズイので。
すべてアウトライン化しておく必要があります。
このあと、重要なのが、「別名で保存」で、違う名前で保存すること。
これによって、アウトライン前のデータと、アウトライン化したデータが出来上がります。
上書き保存してしまうと、印刷前ギリギリで修正する緊急事態の時に困ります。
それに、アウトライン前のデータがあれば、次回データに少し修正をいれたモノを印刷する場合の文字の打ちかえ等が楽です。
自分の場合、基本、フォルダに「アウトラインデータ、必要なepsファイル、アウトライン前フォルダ」を入れています。当然アウトライン前フォルダにはアウトライン前データが入っています。
印刷所によっては、「アウトライン前はいらない」とか、PDFで納品するようとか違いがあるので、それぞれ納品の際の条件は各印刷所に確認が必要です。
実際、アウトライン前データは自分で持っていればよくて、印刷所には持っていかない場合のが多いかも・・・。
納品の際は、データの入ったCD-Rや、MOなどと一緒にデータをプているリントアウトしたモノを見本として付けます。大き目の封筒にすべていれて、封筒に、「内容物の説明(この場合CD-R1枚、プリント1枚など」を書いて、マック、ウィンドウズなど自分の使用PC、OS、イラストレーターのバージョン、自社連絡先などもかいておきます。特別な注意事項などある場合も口頭だけでなく、封筒に目立つように書いておきます。
ざっと自分の場合の納品時の注意事項でした。
細かくいえば、注意事項はもっとあるかも。
だいたいこんな感じって程度なので、あくまで、参考までに。




