2010/5/21 (金)

Illustratorで作ったパスをPhotoshopに持ち込む

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 11:16:56

ピンク色のジャージで散歩してたら職務質問されそうになった善良市民atsushiです。:baikin_2:

Illustratorで作成した画像をコピーしてPhotoshopに持ち込むなんてことよくあると思いますが、Illustratorの画像をコピーしてPhotoshopのファイルにペーストするとビットマップ画像として貼り付けられますね。

これはこれでいいんですが、大きさを変えたり、色を変えたりすることができなくて:kaomoji5:不便を感じたことありませんか?

そんな不便を解消し、illustratorのパスをそのままPhotoshopに持ち込む方法をご紹介します。

やり方は簡単!すぐ終わります。:hamster_7:

1.Illustratorの「編集」メニューの「環境設定」-「ファイル管理・クリップボード」を開きます。

2.「ファイル管理・クリップボード」を開いたら終了時のクリップボードのコピー形式の「AICB(透明サポートなし)」にチェックを入れます。設定はこれだけ:kero1:

3.Illustratorでコピーをとり、Photoshopのファイルにペースト

4.ペーストの方法を「ピクセル」・「パス」・「シェイプレイヤー」から選択し、完了

これだけでパスを持ち込むことができるようになります。また、「シェイプレイヤー」を選択すれば:maruhi:オリジナルのカスタムシェイプをつくる時も便利ですよ。

お役に立てたらぽちっとお願いします。:kaomoji6:
:onegai: 人気ブログランキングへ 

2010/5/11 (火)

写真をくり抜く

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 10:00:35

先日、部屋を掃除していてSONYのクリエを見つけていじっていたら掃除が中途半端に終わったatsushiです。:baikin_2:

最近、PSD形式の素材探しにハマっているのですが、その中の一つで、レイヤーに矢印みたいなマークがついているものがありました。今まで見たことがなかったのでどんな機能を使うとそのマークがつくのかわかりませんでした。

「とりあえずどんな機能も一回はつかっておく」という変なポリシーがあるので調べてみると…

正体は「クリッピングマスク」だったんですね。

Illustratorでは、使っていましたがPhotoshopでは、ノーマークでした。
レイヤーパレットにボタンを追加しておいてくれればもっと早く気付いたのに…:kaomoji8:

なにはともあれ、このクリッピングマスクは、とっても便利です。

写真を好きな形でくり抜くことができます。

使い方は簡単!
1.切り抜きたい形を作ります。(カスタムシェイプを利用するといいかも)
2.その上のレイヤーに切り抜きたい画像を置きます。
3.レイヤーメニューから「クリッピングマスクを作成」を選択。

これだけです。↓こんな感じのものができますよ。(エコカーのイメージ)

:crown:ブログランキングの投票もお願いします:kaomoji6:
:onegai:  人気ブログランキングへ

2010/4/23 (金)

PSD形式でダウンロードできるフリー素材

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 11:23:47

洗車すると雨が降るatsushiです。:ame:

日々WEBデザインに使えそうな素材やプラグインなどを探しているのですが、なかなか「これはいい!」というものが見つからなかったり、海外のもので使い方がよくわからなかったりすることが多いんです。:kero2:

それから、GIFやJPEGで提供されていてサイズの変更や加工が難しいものもあります。

そんな中、WEBデザインの強い見方、PSD形式で無料素材を提供しているサイトがあります。

無料web素材|Styraise.com

こちらのサイトでは、数はそれほど多くはないですが、どんなWEBサイトでもマッチしそうなスタンダードなイラストやアイコンがあります。

そのほか、ナビゲーションやボタンの素材もPSD形式でダウンロードできます。:kaoemoji1:

また、そのPSDデータもレイヤーの構成を維持しているので、これからWEBデザイン(Photoshop)を学んでいく方には、デザインの方法など参考になりそうです。

結構レイヤーの構成の仕方次第で、作業効率も変わったり、修正のしやすさが変わったりするので、見た目のデザインも重要ですが、レイヤーの構成方法などの基礎もデザイナーには、大切なことだと思います。

こういったサイトで刺激を受けてまた新しいデザインに挑戦していけたらいいですね:kaomoji7:

ブログランキングの投票もお願いします:kaomoji6:

:onegai: 人気ブログランキングへ :kurikku:

2010/4/16 (金)

テキストのアンチエイリアス Illustrator編

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 14:24:00

柔軟剤の買い置きの在庫を忘れ続け気づけばストックが4つになっていたatsushiです。:ga-n:

WEB画像を制作する際に気をつけなければならないことの一つとして「アンチエイリアス」があります。

アンチエイリアスとは簡単に言ってしまえば文字の輪郭をぼかしてなじませてきれいに見せる効果といったところでしょうか

このアンチエイリアスですが、フォントサイズの大きいテキストで使う分にはきれいに見えるので:kaomoji7:OKなんですがフォントサイズの小さいテキストにアンチエイリアスをつけると輪郭がぼけて逆に見づらくなるなんてことがあります。


※88×31のバナーPhotoshopで作った場合

上記のように、場合によってはアンチエイリアスを「なし」にしたほうがいい場合もあります。:kaoemoji3:

このアンチエイリアスですが、Photoshopでは、文字パレットのアンチエイリアスの設定を選択するだけです。

illustratorでは文字パレットにアンチエイリアスの設定がありません。:kaomoji2:

Illustratorでのアンチエイリアスの設定方法をご説明します。

1.まず、アンチエイリアスを「なし」にしたいテキストを選択します。

2.「効果」メニューのラスタライズをクリックし、表示されたダイアログの各項目の設定を行います。

これで完成です。↓

 ポチッと押していただるとうれしいです。:kaomoji6:

:onegai::hand:  人気ブログランキングへ

2010/4/8 (木)

黄金比の画像を簡単にトリミング

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 13:35:15

どうらや住んでいるアパートの玄関にすずめが巣をつくっているatsushiです。:hiyoko:

デザインの仕事をすると必ず触れるであろう『黄金比』についての便利なPhotoshopのアクションをご紹介します。

まず、黄金比とは?というところからですが、黄金比とは、「1:1.618」からなる比率で、最も美しい比率と呼ばれているそうです。ギリシャのパルテノン神殿やミロのビーナスなどもこの比率が使われているそうです。:kaoemoji3:

この比率をつかうことで、人間がもっとも:hoshi1:美しいと感じるデザインを創りだすことができるのです。

また、『黄金比』のほかに『白銀比』というものもあるようです。『黄金比』が西洋で『白銀比』が和になるようです。< そんな黄金比や白銀比をwebデザインにもうまく取り入れてあげることで安定感のあるレイアウトや気持ちのいいレイアウトをつくることができます。:kaoemoji1:

そこで黄金比の画像を簡単にトリミングできるアクションを紹介

WEB用写真を黄金比&白銀比でトリミングするアクション

上記のサイトからアクションをダウンロードしてPhotoshopで読み込んであげるだけで簡単に黄金比と白銀比の画像にトリミングすることができてしまうすごくありがたいアクションです。:kaoemoji5:

また、サイズのバリエーションも揃っているのでWEBデザインに最適です。

お試しください。

ブログランキングの投票をお願い致します。
:onegai::hand:人気ブログランキングへ 

2010/4/2 (金)

ブラシでテープ

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 13:19:18

3月ちょっと太ったatsushiです。:hamster_7:

写真をテープで貼りつけたようなデザインを見ることがあると思います。

そんなテープを簡単につくるブラシを2種類ご紹介します。

セロハンテープみたいなテープのブラシ

ビニールテープみたいなテープのブラシ

このブラシを使えば簡単にテープのデザインが可能になります。:neko:

手順は簡単。
上記のブラシをダウンロードし、Photoshopでダウンロードしたブラシファイルを読み込むだけでブラシとして使えるようになります。

実際に使うとこんなデザインができますよ。
ビンテージ感を出すデザインにいいかもしれません。また、ポラロイド風の写真に合わせてもマッチしそうです。
テクスチャーなどと合わせて使うとさらに凝ったデザインができそうです。:b_body_jump:

 まだまだフリーで使えそうなブラシがいっぱいあるのでちょこちょこご紹介していきます!!:kaoemoji5:

ブログランキングの投票をお願いします:kaomoji6:

:onegai::yubiright: 人気ブログランキングへ 

2010/3/22 (月)

サイトのテーマカラーを決めるならこれ!

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 19:13:04

昨日、見てはいけないものを見てしまったatsushiです。:baikin_2:

ホームページのデザインをしていて困ることの一つに「サイトの配色」があります。これまでにもちょこちょこ配色に便利なツールを紹介してきましたが、実際のところいまひとつといったものが多かったような気がします…:body_deject:

今日も懲りずに「配色」に便利なツールをご紹介します。
その名は「Kuler」Adobeがオンラインで無料で公開しているツールです。

kuler

このツールでは、ユーザーがテーマに合わせて作った配色サンプルを参照し、カラーコードを知ることができます。
また、カラーテーマは、キーワードでの検索にも対応しているので便利です。
(hotで検索してみたら熱そうな配色がいっぱいでてきた…:ase1:

また、自分で作ることができ、作った配色をMykulerに保存することもできるようです。

それから、illustratorCS4 PhotoshopCS4などとパネルで連携しているみたいです。

そして画像からカラーを抽出して配色をつくりだす機能もあります。:cat_5:
これは便利かもしれません。

このkulerは、ホームページだけじゃなく、洋服の色合わせなどファッションにも役立たせることもできそうですね。

日本語版がないことがちょっとつらいところですが、一度お試しください。

ブログランキングの投票をお願いします。

:onegai: 人気ブログランキングへ 

2010/3/19 (金)

WEBページの色を抜き出す

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 11:26:22

卒業シーズンになりましたが、メタボから卒業できないatsushiです。:kaoemoji1:

ホームページのデザインでまず考えるのがレイアウトですが、次に悩むのが「カラー」です。:orooro:

実際、お客様のご希望のカラーを中心に配色していきますが、たとえば「ブルー系」でなんてなった時、ブルーといっても範囲が広すぎて迷ってしまいます。

そんな時、いろいろなサイトの色を見てトレンドなどを見るようにしています。:oogle:

そんな感じでいくつかサイトを見ていく中で気に入った色が見つかった時にすぐにカラーコードを知ることができると便利ですよね。:kaoemoji3:

FirefoxのアドオンにWEBページのカラーコードを表示してくるものがあるんです。

アドオンの名称→colorzilla

これをインストールするとブラウザの左したにスポイトのアイコンが表示されます。
そこをクリックしてあとは知りたいカラーコードの上をポイントしてあげるだけでカラーコードを知ることができます。

サイトのカラーで困った時などに使ってみてはいかがでしょうか

また、色で困ったときに参考にできるサイトをご紹介します。

WEBデザインのヒントに!WebSite Color Index:WEBサイトリンク集

このサイトは、テーマカラーごとに優れたデザインのサイトを紹介しています。
大手企業のサイトが多いですが、配色やレイアウトなど参考になる部分がたくさんあると思います。

私もこのサイトに掲載されるサイトデザインを追求していきたいです。:ganba:

:crown:ブログランキングの投票をお願いします:kaomoji6:

:onegai: 人気ブログランキングへ 

2010/3/9 (火)

Photoshopのちょい技

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 17:27:06

最近、趣味がなくて新たな趣味を探し求めているatsushiです。:ecoemoji1:

みんな知っている?のかわかりませんが日々の仕事の中で役立っているPhotoshopの小技をご紹介します。

今日紹介するのは、新規ファイルを作成するときの小技です。

どんな小技かというと、通常新規ファイルを作成するときは、ダイアログが表示され、そこに幅や高さの数値を入力して新規ファイルのカンバスサイズを設定するのですが、実は、コピーを取ってから新規をファイルを開こうとするとコピーを取ったサイズがデフォルトで指定されるという小技です。
※自分にとっては、便利ですけど一般的にはどうなんだろう…:baikin_2:

さてやり方ですが、

1.適当選択範囲を指定してコピーを取りましょう。
 サンプルの画像はあんまり意味はないのでつっこまないで下さい。:hamster_7:

2.「ファイル」-「新規」から「新規」ダイアログを開きます。
 するとコピーを取った大きさが指定されているはずです。:yosya:

3.貼りつけ
 あとはそのままペーストすれば完成です。:hakusyu:

この技が作ったデザインの一部だけをWEB用に保存したい時に役立ってます。
ただし、複数のレイヤーで構成されたものをコピーするときは、いったん表示レイヤーを結合するか画像を結合するかしないと選択しているレイヤー内のものしかコピーされないのでご注意を:!!!:

へぇ~と思った方は、ブログランキングの投票にご協力ください。:kaomoji6:

:onegai: 人気ブログランキングへ:yubileft:

2010/3/5 (金)

Photoshopカスタムシェイプをカスタム

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 10:56:00

気がつくと冷蔵庫の中に賞味期限切れの食べ物がけっこう入っているatsushiです。:baikin_2:

たびたび紹介しているPhotoshopのカスタムシェイプですが、フリーで配布しているシェイプがたくさんあることは非常にありがたいことですが、いざダウンロードして使うとなるともうちょっと形を変えたいなんてことがあったりします。

通常カスタムシェイプは、拡大縮小はできるのですが、形を変えることができません。

そこで今回は、カスタムシェイプをカスタムしちゃおうという小技のご紹介です。

今回はわかりやすく「矢印のカスタムシェイプの長さを変える」方法でご紹介します。

1.カスタムシェイプを使ってオブジェクトを書きましょう。
 ※わかりやすく矢印でいきます。

普通に画像の拡大・縮小をすると↓こんな形になっちゃいます。:ari1:

2.ペンツールを選択し、Ctrlキーを押しっぱなしにすると白のカーソルに変わります。
 白のカーソルでカスタムシェイプのアンカーポイントを選択します。
 ※Illustratorみたいな容量で、アンカーポイントをクリックするとクリックした部分のアンカーだけ選択できます。

3.アンカーポイントが選択できたらアンカーポイントを移動させ伸します。

以上です。ポイントは、ペンツールでCtrlキーを押すことですね。

この方法で変形させたカスタムシェイプを定義させてしまえば次回はそのまま使えるわけです。
何かと重宝するカスタムシェイプですから、よく使うものは、こうして作っておくといいですよ。

ブログランキングの投票もお願いします。:kaomoji6:
:onegai::yubiright:  人気ブログランキングへ