0

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

 

 

 

 

 

 

原画

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

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

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

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

最初

 

 

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

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

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

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

3

 

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

ラスト

 

完成です。

0

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

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

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

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

 

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

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

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

tera

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

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

parette

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

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

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

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

 

0

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

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

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

 

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

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

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

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

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

名称未設定-1

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

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

名称未設定-6

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

名称未設定-8

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

名称未設定-7

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

名称未設定-9

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

名称未設定-10

0

キレイだけど軽量のPDFをIllustratorで書き出す

デザインをpdfにする方法です。

出来るだけ画質を落とさずに、しかしメール添付できる程度の使い勝手の良い書き出しができると

ファイルを開ける人にストレスをかけずにすみます。

色々試してみました。

1.まず印刷入稿用のキレイなpdfから。

Illustratorでファイル→別名で保存→PDF/X-1a形式を選択→サムネイルを埋め込みにチェック

::::::::結果:::::::::::

2.72MB→見た目きれいですので、お送りしてプリントして頂く場合によさそうです。

直接添付するのは避けて、どこかのサーバにアップロードしてそのURLをお伝えしましょう。

2.もう少し軽くする方法をやってみました

Illustratorでファイル→別名で保存→Illustrator初期設定を選択、Illustrator編集機能保持のチェックはずす→圧縮→ダウンサンプルをバイキュービック法にする→圧縮ZIP

bycubic

::::::::結果:::::::::::

2.41MB→あまり変わりませんでしたが少し軽くなりました。ウィンドウに150ppi ?250ppi と設定数値が入っていますが

100ppiにおとしても結果同じでした。

 

3.まだまだ重いという方はもっと軽くできます…

最小ファイル書き出しにすれば簡単じゃないの?と思わるかもしれませんが

(Illustratorでファイル→別名で保存→最小ファイル書き出し)

これは確かに結果421KBと、一気に軽くなりますが画質がこんなに荒れてしまいます。

are

 

 

そこで先ほど書き出した1または2をAcrobatで開きます。

Acrobat X Proの場合→ファイルメニュー→名前を付けて保存→サイズが縮小されたPDF→既存を保持

::::::::結果:::::::::::

492KB→これなら、メールで気軽に送れます。しかも劣化が少ないです。これくらいの画質です。

kansei

 

0

レイアウトのバランスとは

Webサイトのfirst-view内で構成の要となる、header。

その「バランスが良い」とは、どういう状態なのでしょうか?

ここにサンプルがあります。

omosa_05

 

人は、色が塗られている面を「重い」と感じ、塗られていなかったり色が薄い部分を「軽い」

と感じます。分かりやすくするため、サンプルをモノクロに変換してみます。

omosa_02

 

例の修正前は右側にヘッダが偏り、不安定です。

修正後はgloval naviを画面の端から端まで引き伸ばし、安定しました。

ただし、もし、使用するロゴが高品質で、インパクトのあるものあったり、ロゴの色面が重かった場合は

修正前のレイアウトでもOKになる場合があります。画面が持ちます。

今回の場合はロゴが薄い色でしたので、このように修正をしました。

レイアウトが完成したら、モノクロに変換してみてバランスをチェックしています。

DTPなどでも参考になるかと思います。