ソラマメブログ › massimo! staff blog › Photoshop講座

  

Posted by at

2008年07月21日

ブラザーな壁紙を作るPhotoshop講座 2

はい


というわけであまり役に立たないphotoshop講座の続編です


ええ、自己満足ですすめています、マイブログ


前回のお題








*参考画像




「彼が経営するショップの壁紙の一枚を作ってみよう」

欠点2 の
「2:主張がまるでない(彼ですから)」

から


「主張」





主張、ってなんなんでしょうかね

あんまり哲学的になっても話が進まないので
ここは安易に済ませておきます。


まぁ彼なので彼風味な主張ということで

ウォールアート風に主張してみる、ということにします。はい。
同じ単語ばかりが繰り返されて文章バカ丸出しです。



とはいっても、ウォールアート風にしようったって
素人がさくっと出来る物、なんかじゃ当然ありません。


ここで、フォントの力が生きてきます。


前回お話した「フォント」

普通にPOPなりポスターなんかだとベーシックなフォントが一番いいと言いましたが
いわゆる「アート」に仕上げたい場合はデザインフォントがとっても使えます。



英文フォントなんかは、フリーのものが腐るほどありますので
今回はここ
「Graffiti」カテから
Free for personal useなものを適当に選びました


フォントって、検索結構大変ですよね
ものっそい余談ですが
「@@っぽい@@で使われている@@なフォントが欲しい!」とか思ったとき
Yahooの知恵袋や教えてgoo!に質問すると
博識な方があっさり教えてくれたりするので結構使えます。




ダウンロードしたならばフォントを組み込んで
フォトショップ再起動


前回保存したファイルに
文字を入れます




あまり深く考えず適度な大きさに調整してやります
ここは荒々しく血で書いた風な色味に



レイヤースタイルから「サテン」を適用し
若干ムラをつけ
新規レイヤーを追加し、同色で少し回りを汚して
ペンキが垂れ下がってる風に仕上げます


ここで、もっとカラフルに仕上げたければ
レイヤースタイルを変更して
グラデーションオーバーレイを適用させるもよし
テキストをラスタライズさせてレイヤーを何枚か複製し
色調補正 >> 色相・彩度 で色変更させて
消しゴムツールを使ってチマチマ箇所によって色味を変えていくもよし
マスク使ってがっつりやるもよし

仕上げに影を入れます

よくある、照明があたってる風なやつです


フィルタ >> 描画 >>照明効果 
を適用

数値をこんな感じにします


これもカンなんで、バーを色々動かしてとにかく色々試してみるのがいいと思います。
もしやってみてダメだったら、ヒストリーから元に戻ることもできますので
自分の納得のいく効果を試してみてください。








できあがり



もし、もう貼り付ける壁の尺が決まっているのであれば
一枚ものならそれにあわせて最初から画像サイズを決めておくとスムーズですし
慣れてきたなら、ライティングオブジェクトを置く場所にあわせて
画像に効果を入れると、よりリアルな感じに仕上がります。


やっぱり、このくらいの出来でOKならば
そんなに時間も手間もかかる作業ではありませんし

何より、セカンドライフは自分の手で全てクリエイトできる素敵世界ですから
一度くらいお試しでやってみるのもイイカモしれません。
ま、やると結構はまりますけどね。



  


Posted by massimo! staffs at 00:00Comments(0)Photoshop講座

2008年07月20日

ブラザーな壁紙を作るPhotoshop講座 1

こんばんは



以前、知り合いのオサレ自慢の美容師が
「環七内側じゃなきゃ東京じゃない」と

給料の6割家賃なシモキタ
ワンルームと言う名の6畳一間に住み

畳にフローリングカーペットだっただなあ・・・と
ふと思い出し、熱いものがこみ上げてきた
環七外側の竜介です。



近所の宅配すし屋が




ピザ始めたみたいです。

どうでもいい前フリが大好きです。



意外に好評だったphotoshop講座
フォトショ持っているかたも
もっていないかたも

文字にちょっと気配りをすると
POPもひきたつ、と言いたかった、それだけなんです、ええ。


みなさん、SLでビルドって経験ありますか?

建物を作る

セカンドライフの建物は、柱や土台を気にしなくても
地震で崩壊してしまう建物はできないので
気軽に作れます

ただ、やっぱり建物を作るにあたって
「人とはちょっと違った雰囲気を出したい」っていうのがきっとあると思います。
壁一つ取っても、それは同じ
どうせ作るなら、ちょっと工夫をしてみると
仮想世界の建物といえど、愛着がわいたりするものです。


たとえばマイショップ
リアルな質感を出したい
ソウルフルな魂を人に伝えたい

では、本日は










*参考画像




「彼が経営するショップの壁紙の一枚を作ってみよう」

ということでレッソンいってみたいと思います。無責任風味に

*今回は折り返しのない画像を作るっちうことで一枚ものの壁髪作りでございます。
折り返しのある画像の作り方は追々やってきます。気が向いたら・・・


まずはフォトショ起動

どん





普通に新規から行きます。


次いでツールパレットの
描画色を白に、背景色を淡いクリーム色に設定してやります。


↑これね


続いて





フィルタ >> スケッチ >>ノート用紙 
を選択

すると






あっさりとフリービーで色違いでもっさり入っている壁紙の一枚の完成です。
(さっき背景色と描画色を選択した色がここのフィルタで適用されてます)



これでも、立派!に壁紙といえば壁紙です。
しかし、今日のお題のテーマは




彼ですから


彼はこれで納得するだろうか?いや、しまい。


ここで、反語で表現したくなるほど強く思えるその理由と欠点を
画像を見て考えてみましょう。


1:のっぺりしていて個性がない
(立体感に欠ける)
2:主張がまるでない
(彼ですから)


では、理由1の「のっぺりしていて個性がない(立体感に欠ける)」を解消すべく
作業してみましょう。






まず、レイヤーウィンドウの右上にある三角をクリックして
レイヤーを複製し、のっぺり壁紙レイヤーを一枚増やします。



増やしたレイヤーを選択し
イメージ >> 色調補正 >> 明るさ・コントラスト 
を選択し



↑このくらいの数値にしてやります。OKポチ

すると、元画像よりも暗くてメリハリのある画像ができた、と思います。

この前面にきているレイヤーを選択した状態で
消しゴムツール 100~200の大きめのソフトエアブラシを選択し
さらっ、さらっ とすこしずつナデるように中央から消しこみます。

こうゆうときにタブレットがあると非常~~~に便利です。





すると、若干奥行きというか、立体感というか
本物の壁っぽくなってきます。

もう少し汚したり立体感を出したいならば

新規レイヤーを上面に作り
ペンツール ソフトエアブラシ100くらいで
中央 白 端や汚れ部分 グレーで
適当にあちこち汚してやります






これでとりあえず壁らしいもの、は出来ました。

実際のところ、この程度のものだったら
フリーで出回っている壁紙のほうが良かったりするのですが

たとえば、大理石のタイルを敷き詰めて
エンボス加工をいれて影と光沢を入れて、とかすると
なかなかない個性的な一枚になりますよね

そういった画像も ほとんど今回と同じような作業をもとに作られてますので
まずはあんまり凝ったフィルターやレイヤースタイルを使わずに
基本中の基本からいってみるのがいいかと思います。


ボクも、フォトショップは試行錯誤が多いですが
どんどん使って、感覚で慣れて使うソフトであり
やり方も何十通りと思います。
自分の一番納得のいく方法で試してみるのもいいと思います。



あ、長くなった




欠点2 の
「2:主張がまるでない(彼ですから)」は



次回へ続く











  


Posted by massimo! staffs at 19:56Comments(0)Photoshop講座

2008年07月09日

本当は人に教えたくないPhotoshop講座2:文字2

えー

なんだかコギャル路線がはやってるみたいですが、内輪だけで

はっきりいっとく


いまいち



人間まぁ個性が大事なんていいますが
個性があればあるで押さえつけるくせに、なんて
歌もあるくらい、窮屈なのは第二の人生でも一緒なのでしょうか



たまには、若干考えてみたりする

結構前の話なんですが
ボクの実家の近くにある女子高
(ちなみにあそこだけは入りたくない、と有名な女子高なわけで)の学生が


「津波だーーーーーーーーー!!!」
ぐらいの勢いで
駅から猛ダッシュして、集団でチカンを追いかけてました

当時、ハイビスカスとかを髪につけるのがこの手の女子の主流だったのですが
彼女たちばしばし落っことしまくってた記憶がございます。



まあ、そんなことはどうでもよかったですね。


では気を取り直して

前回、レイヤースタイルで文字に光彩を付け
背景との区切りをつけるところまでやりました、よね、確か。


****前文引用
次いで
「欠点2:文字自体にばらつきがあってなんだか読み辛い」



これですね、これ

文字と文字の間隔、これにバラつきがあってなんだか読みにくい

フォント、っていうのはプロポーショナルフォントと呼ばれるもの(P明朝とかPゴシックってやつですね)以外は
みんな同じ大きさの四角枠で作られているので
ボリュームのない文字なんかが並ぶと、なんかスッカスカした感じになってしまいます。

***

今回はこれを解消しましょう



まず、ここは詰めてキレイにみせたい、と思う文字と文字の間に
カーソルを持っていきます。

カーソルをもっていったならば
「alt」キーを押しながら(macだとoptionキーになるのかな?) 矢印キーの
詰めたい方向のキー(詰めるならば←、広げるならば→、になります、この場合)を
ちょん!と押してみてください。


ちょこっと文字間が詰まります
一度で足りなければ2回、3回押して調整
これで、文字と文字の間をわたりながら少しずつ文字間隔を調整してあげます。

コツとしては、あまり拡大せず全体を見ながらやっていくのがいいと思います。

ただ、漢字なんかは文字そのものにボリュームがあるので詰めは必要ない場合がほとんどです。
小さい「っ」「ゅ」や、カタカナなどは結構文字間が目立つので、そこをバランスよく整える感じで


そうすると



このように文字自体がぐっと読みやすくなりましたよね。


次いで、文字全体のバランス調整
タイトルの「末子藻」の幅に合わせてガイドを置いて
その幅内に文言が収まるように若干縮小してやります。




このときは、カタカナが多く長い
「ディスコちっくな~~~~」の行だけ文字のウェイトを92%にし
強制的に幅内に収まるようにして
一番したの行だけ文字を大きくしてメリハリをつけています。



こうなってくると、ちょっとだけ末子藻も
なんだかグラビアっぽくなってきてません?


美人は3日で飽きる、なんていいますけど

ブスはだんだんかわいく見えてきたりするんで
注意が必要です。


ここからはもうフォトショップマジック




背景色を イメージ >>色調補正 >>色の置き換え で
グラドルらしくピンクに(若干くすみ気味)


メインレイヤーを複製 >> フィルタ >>ぼかし(ガウス)
幅の大きなブラシツールで顔周りだけ消して
遠近感を出す。



新規レイヤー >> ブラシツール 
白で、ブラシのバブルやフラッシュなどを弾かせて

間違った時代の間違ったアイドルを演出


文言のレイヤーを複製、コピーを書き直し、赤に
レイヤーを選択し、レイヤー >> ラスタライズ >> テキスト
編集 >> 変形 >>遠近法 

で、迫力ボディを迫り来る文字でアピール


画像自体が暗く、本当ははっきりしなくてもいいんですが
顔がはっきりしていないので
イメージ >> 色調補正 >>レベル補正 
にて、画像を明るくしてボンヤリ感を取る
*レベル補正は本当は正しいやり方、っていうのがあるんですが
プレビューしながらバーをいじってれば大体大丈夫です。多分。

レイヤーを統合し

完成


どん




どうですか?!お客さん!


とまあ、素材の割りにがんばった自分を誉めてあげたい竜介ですが




文字の並びや見せ方イッコなだけですが
慣れてしまえば、ここまで5分くらいで出来てしまう作業です。
どうせ画像を作るならひと手間かけてもいいかな、という感覚でいかがでしょうか?


と、あんま参考にならない講座は終わります。  


Posted by massimo! staffs at 16:47Comments(2)Photoshop講座

2008年07月08日

本当は人に教えたくないPhotoshop講座1:文字

どうも!

先日帰宅途中、塾帰りの小学生らが

「お前今度プープー星人な!!!」



元気に叫んでおりました。


やっぱりこのくらいの世代の子供は
脳下垂体が
コロコロコミックとバラエティー番組で出来てるな、と
一人納得する小雨まじりな夜。

平和ですね、ニッポン。


というわけで

あまりにもなんだか路線がアレなブログになりつつあるので


たまには少しでもミナサマの役にたつ内容とか出してみたりみなかったりして
「あ、このひと意外とやればできる子なんだ」と
思われたいとかほんのりと思っている
りゅプうプすプけプ です。


というわけで
みなさま、画像を編集するときに
POPだったりポスターだったり
「文字」って入れたりしますよね?

画像に文字を組み込むときに
やはりフォントとかすごく気になさると思うんですが

ボクは、実際のところ、あんまり凝ったフォントを使いすぎると
なんだか見ていて疲れる画像にしかならないなぁ、といつも思うので
極力ベーシックなフォントを使うようにしています。

ベーシックなフォントを利用しても
文字の間隔や大きさ、見せ方などにこだわると
見た目もスッキリとして説得力のある文字になったりする、これほんと。


今回はベーシックなフォントを使った
基本の文字組み、のやり方を
無責任に紹介します。



**注意**
本格的にやっている人は、イラストレーターで文字組みをしたものを利用したり
本とにやってる人は、クオーーーーーーークとか使ったりしてやっているのが本当です、バカの文章だなこれ。
ボクはSL用のちょっとした画像の文字付け、って意味でレッソンしたりしてますので
本気の人は全く参考になりません、ゴメンナサイ




利用ソフト:photoshop7
バージョン古くてスマン


まず、画像から
SLで使う画像はweb媒体になるんで、あまり解像度が高くないもので十分なんで








ま、これあたりちょっと使いまわしてやってみましょう



お題:末子藻をやる気なくグラビア風味にしてみる


まあ
材料が材料なんで微妙だなぁ、とは思ったんですが

大事なのは「文字にこだわった講座」ってことでカンベンしてください、はい。


まず、文字ツールを使って適当な場所に適当な大きさの文字を入れておきます。




文字はベーシックに角ゴシ太字、この女にはとても似合います。





文字の大きさと段落をテキトーに整えます
タイトルと文言は大きさをかえてメリハリとかつけてみたりします。



ここでちょっと画像をじっくり見てみたりして、欠点を見ましょう

欠点1:文字の色が背景とカブって見えにくい
欠点2:文字自体にばらつきがあってなんだか読み辛い
欠点3:末子藻本体画像がうざい

まぁもう「3」はどうにもならないので
「1」と「2」を解消すべくアレしたりこれしたりしましょう。


まず「欠点1:文字の色が背景とカブって見えにくい」

末子藻の名前文字色を背景に合わせたにぶい茶色に
文言をクロでくっきり させたのですが
全て背景とぶつかって見えにくくなってしまってますので

文字のレイヤーを選択し



レイヤー >> レイヤースタイル >> 光彩(外側)を選択し
文字の外から光が差し込んでいる風味にして
背景との区切をつけさせてしまいます。

ここでは、タイトルの大文字に
不透明度:75% 色:白
スプレッド10% (区切りを明確にする率、って感じでしょうか)
サイズ 13px

文言は
不透明度:100% 色:白
スプレッド 18% サイズ 3px

を適用しました。
これも感覚なので、背景の度合いにあわせて
プレビューしながらバーを動かしたり数値を変えたりしてみるといいと思います。

これでメリハリはついて文字自体は見えやすくなりました。




次いで
「欠点2:文字自体にばらつきがあってなんだか読み辛い」



これですね、これ

文字と文字の間隔、これにバラつきがあってなんだか読みにくい

フォント、っていうのはプロポーショナルフォントと呼ばれるもの(P明朝とかPゴシックってやつですね)以外は
みんな同じ大きさの四角枠で作られているので
ボリュームのない文字なんかが並ぶと、なんかスッカスカした感じになってしまいます。

次回はこれを解消しましょう



長くなったし、ひっぱとくか!  


Posted by massimo! staffs at 19:19Comments(3)Photoshop講座