0

photoshopで細かすぎて切り抜けない!画像の対処法

 

 

 

 

 

 

原画

女性を切り抜いて他の背景と合成したいけど、髪の毛の所をどうしよう…そんな時の方法です。ホームページ制作だけではなくDTPにも使えます。

なお、この方法はなるべく解像度の高いきれいなデータの方が上手くいきます。
小さいのしかない場合は、消しゴムブラシを不透明度50%くらいにして、すこーしずつ、髪の毛の隙間をちまちまと消していくしかないです。

2950px×2040pxのサイズでためしてみます。
このような最初から背景色がうすい画像の場合、
下のレイヤーに色を敷いておくと後で切り抜き具合を確認しやすいです。
(ここでは水色のレイヤーを敷いています)
0

ペンツールでパスをかきます。体の線は通常通りに、髪の毛はおおざっぱに周りを囲います。

最初

 

 

おおざっぱに不要な背景を消した所。

3
この選択範囲をアクティブにした状態で、「選択範囲」→「境界線を調整」ウィンドウを出します。
2

「境界線を調整」ウィンドウの左の方にブラシマークがあります。ブラシツールの要領で、髪の毛の輪郭あたりを塗っていきます。

OKを押すと、選択範囲ができています。

3

 

この選択範囲を使用して、deleteしてみます。(選択範囲が人物になっている時もあるので、その時は背景を選択するように反転させます。)

ラスト

 

完成です。

0

photoshopでフォトレタッチ(肌の修復)

20130610135458mae

写真の修復は、絵画の修復のようなイメージで取り掛かっています。

使うのは主にphotoshopのスタンプツールです。

人の肌の修復はもっとも難易度が高いです。グラデーションが細かいので、

丁寧に少しずつしないとキレイに消せません。

簡単なのは、草や柄の無い布、ですね。ホームページ制作ではこのような作業が意外に多いです。

まず、やりやすいほっぺたや背中はパッチツールかスタンプツールで肌をコピーし

傷を消していきます。↓大体消した所

?スタンプのみ

 

さらに目立たなくするために、

指先ツールでぼかします。

ぼかし

目の所はエアブラシの不透明度:例えば20%にしたもので描いていきました。

pixcelレベルにズームアップし、修復したら→ズームアウトして観察をマメに繰り返していきます。

目じりの影の紫色やまぶたの肌色をピクセルの■一個一個がら取ってきて、周りの色と同じ色になるように塗ります。

め

できました。

20130610135458

0

コンセプトから配色用カラーパレットを自作する

Web制作のカラーリングの方向性を決める時に、無限の色の中からでは迷うことがあります。

CSS niteの勉強会で習ってきたオリジナルのカラーチャートの作り方です。

Kularのパレットは便利で有名ですが5色くらいなのでもう2、3足りないことがあります。これならカバーできます。

 

クライアントから寺をテーマにしたサイト依頼があったとします。

寺から落ち着き、緑の豊かさ、静謐、伝統などのキーワードを派生させ、イメージを膨らませます。

写真を集めてphotoshopで切り張りします。

tera

photoshopフィルタのモザイクをかける。細かすぎず

大きすぎずの所で調整するのがポイント

parette

必要に応じて、トーンカーブでコントラストを付けて明るさだけ調整してください。

地味な中に、差し色が入った結果となりました。

これを知る前まではただ茶色や緑の重みのある色をそれらしく並べていたと思いますが、

全体を引き締める差し色の役割が大事だと学びました。

 

0

室内写真の画像補正をする

室内写真の画像補正をする

ホームページ制作やDTPで、撮影した写真をそのまま使用できる時もありますが
下準備が必要なこともあります。今日はインテリアの補正についてです。

 

まず、全体を見て見栄えが良くないもの(ゴミや段ボールなど)が写っていたらチェック。スタンプツールで消します。

次に…室内は暗くなりがちです。
いらない物が消せたらトーンカーブで全体を明るくします。

さらに印象を明るくするために、小物の色彩だけを選択し、鮮やさを強調すると
全体の印象まであかるく見えます。

例として植木の緑をイキイキとさせる方法です。

先輩から聞いた早いやり方を紹介します。

名称未設定-1

補正したい所を長方形選択ツールで適当に選びトーンカーブをクリック。

上に引っ張って全体を明るくします。

名称未設定-6

Rだけを減らすと緑が強くなります。

名称未設定-8

Bをこの方向に引いて黄色を足すと黄緑っぽくなります。

名称未設定-7

マスクしてある所を消しゴムのブラシで葉っぱのカタチに合わせて消します。

名称未設定-9

丁寧に作業していくと、、、全部葉っぱのカタチが鮮やかな緑になりました。

名称未設定-10

0

描画をパスにするか ビットマップにするか

 

このような吹き出しをつくる時にどんな手順がふさわしいでしょうか。
光が左上に丸くかかっているので、
直線のグラデーションツールでは塗れません。
下の階層の矩形をマットな青にしておいて、
もう1レイヤー上から重ねるようにエアブラシで描くことにしました。

上が完成例、下はギザギザしている失敗例です。

path

 

両者の違いは上はパスで描いたこと、
下は選択ツールで楕円形を選択し、中を塗って吹き出しにしたことです。

まず、楕円形ツールで楕円形を作ります。

 

名称未設定-3

 

次に、ペンツールに持ち替え、シェイプを選びます。塗りを青にします。

?名称未設定-2

しっぽを描いて用意します。角度を切り替える時はALTを押しながらするとできます。

名称未設定-4

 

二つを選んでから、レイヤー→シェイプを結合、で合体します。

名称未設定-5

 

効果レイヤーでドロップシャドウをかけ、境界線の外側【または光彩(外側)サイズを9px、スプレッド77%】にすると完成です。

ラスタライズをすると、ペイントのように矩形を塗れるので、扱いの自由さが好きですが

このようなきちんとしたカタチをかく時は、単純な選択範囲ではダメで、きちんと描かねば…と学びました。

0

ドロップシャドウの法則

itaku_03

これはあるホームページの一部なのですが、いくつの影が使われているでしょうか

 

矢印の所など、ホームページの中にたくさんありますね。

itaku_04

 

 

左からです。厚みのあるシールに見せる光です。

下のはがれているところは下に少し広く、ふんわりした影にします。

メールアイコンの影は、シールの影と少し役割が異なります。下地のオレンジから視認性を高めるために、濃い色を「光彩」で2pxくらいかけました。

ホームページ制作における視認性について書いてある投稿へ

不自然にならないよう、オレンジ系の光彩にするのがポイントです。

 

ホームページで読ませたい赤い電話番号の光。これは、レタープレスエフェクト風に制作しました。

スマホの方はタッチでコールの噴出しの影、これは他の箇所が上から光が当たっているので、「べベルとエンボス」はもちろん下にかけます。

影の方向が、バナー内でこっちの文字は上から、こっちの文字は下から、あるいは横から…とバラバラにならないように。さらに、ホームページ内でも、方向は統一した方がいいです。

最後に、このプレート自体の下側にもさりげなく、影が付いています。

プレートも、真ん中の方が少し薄い色になっていて、金属みたいな質感にしています。

影を繊細に付けてホームページ制作をすると、品質が良く見えます。

 

0

レタッチについて#01

お客様からお写真をいただいたときに

ちょっとした小物を消したいという場合があると思います。

そういった際に使うと便利なツールを紹介します。

○スポット修復ブラシ・・・これはブラシのように固さや直径が選べて、画像によってはこれ一回だけで綺麗にレタッチが可能です。

○スタンプツール・・・これは大きさが調整可能で、コピーしたい模様などの上でaltを押すとそこの部分をコピーし、他の部分へスタンプのように押すことが出来ます。

○パッチツール・・・スタンプツールとは違い、選択した範囲をドラッグさせて置き換えたい色の場所で離すと、そこの色を持ってくることが出来るツールです。

大体上の3つが良く使われますが、木目やたくさんの模様がある場合などは、

似た色の箇所を選択しコピーしたものを貼り付けて、少しはみ出た不要なところを

消しゴムのブラシで少しずつ消すと、自然にレタッチが可能です。

これとスタンプツールを合わせると、とても綺麗に出来ますが、

デザイナーは時間内に仕上げなければならないので、時間短縮するには一番は

「スポット修正ブラシ」を使うのが早いと思われます。

0

画像合成でメルヘンチックな世界を

イラストと写真との合成は少し前からトレンドです。

今回は絵と写真素材でアリスのような世界を作ってみました。

alice_07

 

まず、ボールペンでウサギを書きました。

alice_01

 

 

スキャンして、photoshopで開きます。レベル補正の白いスポイトを選んで白い背景をタッチ。

alice_03

 

 

ウサギは合成に使うために輪郭を切り抜いておきます。また、イラストの線を選択し、[ctrl]+Uで

「色相・彩度」ウィンドウを開き、色彩の統一にチェックをいれます。バーを動かし、描線が茶色になる所に調整します。

ボールペンの黒のままよりもアンティークな雰囲気が出ます。

次にウサギが女性の腕の奥にいるように見せるため、体の一部をマスクで隠します。

alice_05

ウサギが女性の周りをかくれんぼしているように見せました。

草やお花はillustratorで出来た素材を配置し、不透明度:20%にしました。

alice_07

0

しろうと写真をきれいな商品写真にしよう

自分で撮ったこの写真を

cup

 

これにしましょう。

cup-d

 

 

?かげ

 

実物と商品画像の色とを出来るだけ合わせる努力はデザイナーには必要です。しかし、訪問されたお客様の

モニターにより環境は異なるため、完全に合わせるのは不可能です。ですので、ネットショップを開くときには

「※画面上の色はブラウザや設定により、実物とは異なる場合があります。ご了承の上ご注文下さい。」と注意書きを一文添えましょう。

0

ショートカットキーについて

Illustrator(イラストレイター)やPhotoshop(フォトショップ)などで

デザイン制作を進めるにあたり、作業を簡単に行える【ショートカットキー】を

使うことが時間短縮につながります。

ということで、よく使うことがあるショートカットキーを

ご案内します。

●保存→Ctlr+S

●行った作業の取り消し→Ctlr+Z

●ひとつ前に行った作業の取り消し→Ctlr+Shift+Z

●コピー→Ctlr+C

●ペースト→Ctlr+V

●拡大→Ctlr+スペース

●縮小→Ctlr+Alt+スペース

●キャンパス内全選択→Ctlr+A

●選択範囲の解除→Ctlr+D

●ガイドの表示・非表示→Ctlr+:(コロン)

●グリッドの表示・非表示→Ctlr+@

他にも、【選択】でしたり、【カスタムシェイプツール】の

ショートカットキーがありますが、これらについてはそれぞれのツールに

マウスポインターを重ねることで知ることが可能です。

それについては、またの機会にご案内します!

それでは~^^