CSS Nite LP34 フォローアップ(1)黒葛原 道さん(eater)『レイヤースタイルを使いたおす!よく目にする、あの表現を作ってみよう』

2014年4月19日、御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップとして、黒葛原 道さん(eater)の『レイヤースタイルを使いたおす!よく目にする、あの表現を作ってみよう』セッションのスライドなどをシェアします。

メッセージ、補足

みなさま、ご参加ありがとうございます!
ロリポおじさんこと黒葛原 道です。「つづらはら とおる」と読みます。

今回レイヤースタイルに絞って話しましたが、デフォルト、プリセットの状態でもなかなか使えると思いませんか?

今回のテーマは「アナログな表現をしよう」でも「漫画的な表現をしよう」でもありません。限られた時間やリソースの中で、いかに作りたい物を作る か、そのための一例としてのレイヤースタイルだと思っていただければありがたいです。他にもブラシやレイヤーマスクなどを併用することで、自分がイメージ したものを自分の手で作る、そのための一つの方法としてぜひ活用してください。

ブラシやマスク、その他それぞれの機能に使ってないものがたくさんあると思います。そういった普段気にしていなかった機能を掘り下げてみるのもおもしろいかもしれませんね!

あらためてレイヤースタイル活用のメリット

  • 修正できる
  • 他のレイヤーにコピーできる
  • 設定が保存できる

以上を踏まえるとただの「塗り」であってもレイヤースタイルを使用することをオススメします。

補足:レイヤースタイルの[線]も含めてレイヤーマスクでぼかし(透過)たい場合

レイヤースタイルで境界線を付けて、レイヤーマスクを使用しぼかすと線も塗りも透過してくれません。それを回避する方法です。
詳しくはサンプルファイル[05-line-blur.psd]をご覧ください。

補足:レイヤーマスクの適用方法

レイヤーマスクの適用方法はいろいろありますが、デモで行ったようにレイヤーパネル下の[レイヤーマスクを追加]ボタンがオススメです。

選択範囲を作ってボタンをクリックすると選択範囲外がマスクされ、[optionキー](Windowsは[altキー])を押しながらクリックすると選択範囲内がマスクされます。

<p><a href="http://vimeo.com/92403213">レイヤースタイルを使いたおす!よく目にする、あの表現を作ってみよう/黒葛原 道(eater)</a> from <a href="http://vimeo.com/cssnite">CSS Nite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

毎年年末に開催している「Shift」シリーズの第11弾として、2017年のWeb制作シーンを振り返ります。現在、Facebookにて参加表明を受付中