webエンジニアになるために半年間死ぬ気で勉強するブログ(あと人のお金で焼肉行きたい)

可能な限り楽して生きていきたい。好きなものだけ食べて痩せたい。控えめに行っても玉の輿乗りたい。ほんとはプライベートブログにしたい。何もしてないのに尊敬されたい。家から出たくない。

Photoshop-19日目

 

 

文字のやつが一通り終わったら、5000兆円欲しいを作ってみたい。

 

 

 

 

文字、パス、シェイプ

 

文字を変形する

 

f:id:mocha0426:20170818180903p:plain

 

ここから文字のワープ変形が可能。

 

f:id:mocha0426:20170818181040p:plain

 

詳細設定のところから、長体(縦)と平体(横)の編集ができます。

この長体と平体については、変更するときはどちらか片方のみにすること。

 

 

 

 

日本語の入力で、やたら記号のところに間隔があく仕様になってます。

 

f:id:mocha0426:20170818181551p:plain

 

この記号

 

「」、。

 

これについて、「約物」というらしい。

 

間隔をつめるとき、文字間をつめるのも良きですが、

 

詳細ひらいて段落パネルで以下の設定をします。

 

 

f:id:mocha0426:20170818181746p:plain

 

 そうすると、

 

 

f:id:mocha0426:20170818181849p:plain

 

いいかんじに詰まる。

 

 

テキストエリアははじめから広めに取っておくことをお勧めします。

 

エリアのサイズ変更は、レイヤーパネルのテキストレイヤーのサムネイルをダブルクリックしてからにしましょう。

 

 

今回は短いけどここまで

 

 

 

皆さん良い土日を。

 

 

Photoshop-18日目

 

 

 

今日は最終フライトで福岡に帰るんでィ

 

とんこつラーメン食い漁ってやる

 

 

 

 

 

 

と、そのまえに 

 

前回紹介したフォトショの新規作成、

ショートカットはctrl+Nです。

 

 

f:id:mocha0426:20170818165320p:plain

 

Photoshop初期設定でもアートボード回避の新規作成ができます。この場合、幅と高さの単位がpxでなくmmになるので、pxに戻したほうがやりやすいと思います。

 

 

今日は少し話が戻って、レイヤーとクリッピングマスクのお話。

 

 

 

レイヤーマスクを使う

 

クリッピングマスクで切り抜く

 

クリッピングマスクとは、背面レイヤーの画素の形で、

前面レイヤーを型抜きするやり方です。

 

細かく言うとレイヤーマスクとは異なります。

 

テキストを使って、文字の形に切り抜いてみます。

 

 

その前に、フォントについて。

 

小塚ゴシックとか小塚明朝とか聞いたことないですか。

 

これはadobeの専用フォントらしく、一般には使えないらしい。ユーザー専用のフォントです。

 

今回は小塚のゴシックを使って作成します。

 

クリッピングマスクのクリッピングは、たぶんちょっと前に紹介してますが、効果を適用するレイヤーを一枚に決めること。

 

このレイヤーのみに適用してね!っていうやつ。

 

 

これをマスクにしたらどうなるかってことです。

 

 

 

まず、切り抜きたい型をレイヤーとして作る。

 

今回でいうと文字の形。

 

で、その切り抜きたい形のレイヤーを、切り抜かれる側のレイヤーの下にもって行きます。

 

f:id:mocha0426:20170818170858p:plain

 

こんな感じ。

 

 

そしたら、境目でalt+クリック。

 

f:id:mocha0426:20170818171006p:plain

 

 

赤い線のところ。

 

 

そうすると、一発で抜けます。

 

その後もう編集が必要ないときは、レイヤーメニューからレイヤーを結合、もしくはctrl+Eで一枚にしてしまいましょう。

 

クリッピングマスクはマスクって名前ですが、切り抜きに使う文字や図形の色は白黒関係なく、何色でも抜けるそうです。

 

 ブラシでも、選択範囲で作成した図形でも、何でも良いらしい

 

 

 

 

書体にこだわる

 

 文字を愛することが大事らしい。

 

 

文字の入力と編集

 

横書きしてみる

 

f:id:mocha0426:20170818172122p:plain

 

 

設定は今回はこれ

 

f:id:mocha0426:20170818172221p:plain

 

 

ここからより詳しい設定が可能です。

 

 

文字は普通に打てばいいだけですが、

 

enterだと確定ではなく改行と判断されます。

 

オプションバーの○ボタンで確定しましょう。

 

f:id:mocha0426:20170818172718p:plain

これね

 

 

もしくはショートカットのctrl+enter

 

 

確定後の再編集は、レイヤーパネルにある文字レイヤーのサむネイルのところダブルクリックしましょう。

 

 

テキストの一部を編集する

 

 入力済の文字の編集したい部分に帯がけ

あとは好きに編集してください。

 

ワードとかとあんまり変わらない気がします。

 

 

文字に帯がけして、

 

ctrl+shift+<>

これで文字のサイズ変更のショートカット

 

alt+→←

これでカーニングとトラッキング(文字間)のショートカット

Photoshop-17日目

 

 

フォトショもかなり進んできました。

 

今では友達のコラ画像なんか作って遊んでいます。

 

 

 

 

ドキュメントの新規作成

 

ファイルメニュー>新規

 

このときのダイアログで、ドキュメントの種類をwebにすると、

 

f:id:mocha0426:20170818161149p:plain

 

一般的なモニターのサイズになります。

しかしCC2015からアートボードという独自の考えが発生

 

 

f:id:mocha0426:20170818161216p:plain

 

 

レイヤーパネルに出てきました

 

このアートボード、

 

ひとつのデータの中にふたつ以上の台紙を作成できるというやつらしい

 

あんまり推奨しないんだって、切り抜きとか不便らしいし

画素を切り抜きじゃなくて土台ごと切り抜かれてしまいます

 

f:id:mocha0426:20170818161501p:plain

 

 

 

なので設定はカスタムにするのがいいらしい

 

f:id:mocha0426:20170818161523p:plain

 

 

カラープロファイルは作業用RGBがお勧め

 

f:id:mocha0426:20170818161619p:plain

 

 

アートボード消えました

 

人からもらったデータなんかにアートボードがあった場合、

 

f:id:mocha0426:20170818161943p:plain

 

 

アートボードを右クリックで「アートボードを解除」してあげると通常レイヤーになります。

 

 

 

色の設定とペイントの操作

 

 

 

グラデーション

 

グラデーションは、グラデーションピッカーからプリセットのグラデーションを選択するか、グラデーションエディターを使って新しいカラーを選択します。

 

 

新規作成したドキュメントを使っていきます。

 

グラデーションツールを選択し、グラデーションピッカーで描画色から背景色のグラデを選択。

 

f:id:mocha0426:20170818162421p:plain

 

 

今回はカラーパネルをRGBスペクトルに設定。

 

f:id:mocha0426:20170818162516p:plain

 

描画色をシアン、背景色をネイビー

 

f:id:mocha0426:20170818162934p:plain

 

 

 

あとはドラッグで引けます。

 

 

f:id:mocha0426:20170818163511p:plain

 

shift押しながら引くと角度制限がかかるので、簡単にまっすぐな線が引けます。

 

 

グラデーションピッカーをダブルクリックでグラデーションエディタが出てきますので、不透明度や色の追加ができます。

 

f:id:mocha0426:20170818163929p:plain

 

 

f:id:mocha0426:20170818163956p:plain

Photoshop-16日目

 

 

学校の路地裏に毛虫が大量発生しました。 

 

 

 

 

 

 

レイヤーマスクを使う

 

調整レイヤーの適用範囲の調整

 

調整レイヤーには始めからレイヤーマスクがついているので、

調整レイヤーの色調補正の範囲を変えてみます。

 

 

まずは色調補正をします。

 

レイヤーパネルで補正したい画像を選択し、

調整パネルから色調補正をすると、赤いりんごが青りんごに。

 

f:id:mocha0426:20170817175649p:plain

 

 

そしたら色調補正のレイヤーマスクを選択、

ブラシで適用範囲を描画。黒いブラシで色調補正マスクの適用範囲を削ります。

 

f:id:mocha0426:20170817175756p:plain

 

 

これは使えそう。

 

 

パネルのプロパティは以下。

 

 

f:id:mocha0426:20170817180138p:plain

 

 

 

 

べた塗りレイヤーのマスクをブラシで塗る

 

べた塗りレイヤーを追加し、レイヤーマスクで背景画像を表示する窓を作成します。

調整レイヤーのレイヤーマスクチャンネルに、色調補正コマンドを使ってみましょう。

 

f:id:mocha0426:20170817181242p:plain

 

べた塗りレイヤーにマスクを適用するので、今回はべた塗りが画像より上に配置されています。

 

このとき、不透明度を下げておくことで、今回だと写真が白塗りの背景にうっすら透けて見える仕様になってます。

 

f:id:mocha0426:20170817181618p:plain

 

 

その後、ブラシツールでレイヤーに黒く描画。

 

以上!!!!!!

 

 

 

 

 

ラフに切り抜いてぼかす

 

 

もう選択も描画もめんどくさくなってきたあなたへ、

 

別にそんなに便利でもないけどつかえそうなやり方をここでひとつ

 

 

なげなわツールで適当に選択してマスク作成

 

 

f:id:mocha0426:20170817182039p:plain

 

 

ウィンドウメニューから属性パネルを引きずりだしたらぼかしましょう

 

f:id:mocha0426:20170817182158p:plain

 

 

以上!!!!!!!!!!!!!!!!!!

 

 

 

色域指定で類似色域を透明にする

 

 

文章のみの説明になります。お許しを

 

 

 

選択範囲のみ残して、背景を透明にしたかったりとかで使えそうな小技。

かぶりとかも抹殺します。

 

 

やりかた、、、、の前に、

 

 

まず自動トーン補正でコントラストをはっきりさせておくことが条件。

 

 

で、やり方。

 

①残したいところ意外を選択→deleteで抹殺。

 

②色域指定をかける。

 

選択範囲>色域指定

 

これをすると、「この写真の白いところを選択してー!」みたいに、色を指定して選択してくれる。

 

色域指定パネルでスポイトを使って抜きたい色を吸い上げます。

 

f:id:mocha0426:20170817183341p:plain

 

真ん中のプラスで色の範囲を広げられる(黄色だけでなく、黄色~山吹色にかけて、的な)

 

そこでOKを選択すると、指定した色域について選択がかかりますので、選択範囲を反転させてマスクをかけてあげるとよき。

 

その後、

透明に削除したい部分は黒でレイヤーマスクに描画して消す

復活させたいときは白でレイヤーマスクに描画

 

これでよし。

 

 

 

背景が透明でわかりづらいとき、

蛍光グリーンを代用することが多いらしい。

 

べた塗りレイヤーを作成して、

カラーピッカーで

H:100

S:100

B:100

を指定すると、蛍光グリーンの背景が生まれます。

 

 

Photoshop-15日目

 

 

一言のねたが尽きてきた

 

 

 

 

 

 

レイヤーマスクを使う

 

 

レイヤーマスクをグラデーションで塗る

 

 

タイトルのとおり以外の何モノでもありません。

レイヤーマスクにグラデーションでいたずらすると元画像に効果が出るよっていう

 

 

前回間違いなく書いた内容ですが、改めて、、、

 

レイヤーマスク作成後、選択してグラデーションツールで描画

 

このとき黒白グレーのモノトーンでしか描画しても意味ないので注意

 

f:id:mocha0426:20170817170041p:plain

 

f:id:mocha0426:20170817170145p:plain

 

このとき透明が丸出しなのが気になる人、

 

f:id:mocha0426:20170817170231p:plain

 

レイヤーパネルにべた塗りの背景を作ってあげているのがみえますか

 

そうです  そこです

 

さすれば背景変わりに白が透けてくれるのです。 

 

 

ちなみに

 

 

f:id:mocha0426:20170817170544p:plain

 

グラデーションツールのここの部分、

左だと一回しか描けない

右だと複数回描ける

 

微調整するのに、一回しかかけないのは普通にしんどいので、右側のほうがお勧めの極み。

 

 

レイヤーをコピーして塗りつぶす

 

さっき説明したとおりに背景つきのグラデレイヤーをつくります

 

 

f:id:mocha0426:20170817171038p:plain

 

コピーして複製します

 

f:id:mocha0426:20170817171131p:plain

 

 

ここで今選択中のコピーしたレイヤーを黒で塗ります。

いまコピー元のレイヤーは死んでいる(目のマークがないので非表示)

 

 

f:id:mocha0426:20170817171339p:plain

 

すごい当たり前体操なんですが、レイヤーマスクは黒は写さないので、背景のべた塗りが見えますよね、当たり前体操。

 

 

f:id:mocha0426:20170817171549p:plain

 

なので白黒のグラデーションでレイヤーマスクに描画すると、

 

f:id:mocha0426:20170817171620p:plain

 

レイヤーマスクに白く描画された部分ができて、木の写真が浮き出てきます。背景の白いべた塗りつきで。

 

 

円形グラデーションで塗る

 

今ここで言うことじゃないと思いますが、

 

alt+deleteで描画色一発塗りが可能です。

 

 

円形グラデの塗り方

 

ガイドを使って中心を決めてからグラデします。 

 

 

①レイヤーマスクを黒で塗りつぶす

②レイヤーマスクを無効化

 

ここまでの写真

 

f:id:mocha0426:20170817172247p:plain

 

③ctrl+Rで定規を引っ張り出す

 

 

f:id:mocha0426:20170817172609p:plain

このメモリが出てくるはず

 

 

④ガイドを持ってくる

 

このとき移動ツールを使ってメモリのところからドラッグすると簡単に線が出てきます

 

 

f:id:mocha0426:20170817172717p:plain

 

水平ガイド二本出してきてしまった。。。。

 

 

ひとまずこれで大体の中心を決めます

 

 

ワシセンスがなかったのでみんなはうまくやってくれ

 

 

 

 そしたらレイヤーマスクの無効化を解除し、

 

 ガイドに沿ってグラデする。

 

 

 

 

f:id:mocha0426:20170817173151p:plain

 

 

 

半分にトリミングしてしまってみにくい、ごめん

 

 

 

別の画像で作ったガイド付き円形グラデのレイヤーはこんな感じ

 

 

 

 

f:id:mocha0426:20170817173412p:plain

 

 

 

ガイドは必ず消してから納品しようね!!

 

f:id:mocha0426:20170817174024p:plain

 

 

 

 

 

余談ですが、

 

 

フリーランスとしてフォトショでデータを作成し、納品するとき。

 

psd形式で渡してしまうと、レイヤーも全部見えてしまうので、

 

テクニックなんかの手のうちを相手に全部見せてしまうことになります。

 

もしかしたらそのまま使いまわされることもあるかもなので、確実にJPEGPNGなど他の形式にしてから渡しましょう。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Photoshop-14日目

 

 

髪がオレンジになりました

 

ブリーチ2回は頭皮が死ぬ

 

 

 

今日はレイヤーマスク!

 

 

 

 

レイヤーマスクを使う

 

レイヤーマスク

レイヤーマスクとは、レイヤー内の画像の表示/非表示を設定するための機能です。

選択範囲の作成と併用することで、元の画像をそのままに必要な部分だけを表示できます。

 

 

やり方は、

 

任意の画像でマスクをかける範囲を選択後、

 

f:id:mocha0426:20170817161024p:plain

 

レイヤーパネルのこの部分で作成します。

 

選択した部分が白くなりそのままの画素に、

選択範囲外は黒くなり透明に抜かれます。

 

レイヤーパネル内のマスクをalt+クリック

マスクのみの確認可能

 

 

 

もうひとつ別のやり方

 

選択範囲を作成せずにレイヤーマスクを作成すると、真っ白なレイヤーマスクができます

 

そのマスク内に黒白で描画すると、

それがそのままマスクとして適用されます。

なんでもできるね!

 

ただし黒白グレーに限る

グレーは半透明になるぞ いいな

 

このときツールパネルから選択しないと適用されない気がする

 

 

背景レイヤーを対象にマスクを作成する場合は通常レイヤーに戻してからやないとむりぽい

 

 

 

レイヤーマスクの階調の反転

 

 

選択範囲を用いてレイヤーマスクを作成後、選択範囲を実は反対にしたかったとき

 

必ずレイヤーマスクを選択した上で操作してね

 

 

f:id:mocha0426:20170817162609p:plain

 

ウィンドウから属性を選択

 

f:id:mocha0426:20170817162648p:plain

反転のところから反転するだけ。

 

このとき同じ属性パネル内にあるぼかしもめっちゃ使えるらしい

 

選択をレイヤーマスクじゃなくて普通のレイヤーにしたまま作業しがち

 

レイヤーマスクはalt+クリックで見るんだぞ いいな

 

 

 

 

 

レイヤーマスクを使用しないとき、

 

レイヤーマスクで右クリック

 

f:id:mocha0426:20170817164030p:plain

 

f:id:mocha0426:20170817164040p:plain

 

 

 もとに戻すときも右クリック

 

 

 

本当はshift押しながらクリックして無効化/有効化したほうがなんか賢そうな感じに見えると思うよ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

小料理屋計画

 

 

 

 

本日は休みと言うことで、、、、

 

密かに進めておりました、小料理屋プロジェクトが本格的に始動してきました。

 

 

 

 

福岡は北九州に開く予定です。

 

 

 

 

webサイトからロゴ、内装まですべて手がける予定です。

 

 

 

 

 

 

その流れもすべて、可能な範囲内で公開して行くつもりですので、

 

 

Photoshopと同時進行で、よろしくお願い申し上げます♪