レビュー

CSS Nite LP34：Webデザインで使うPhotoshopレポート！（メモ書きUP）

 
CSS Nite LP34：Webデザインで使うPhotoshop

CSS Nite LP, Disk 34「Webデザインで使うPhotoshop」＠御茶ノ水ソラシティカンファレンスセンター
イベントホールEAST（2F）行ってきました。

結構急な申し込みで、事前申し込みの段階での割引も、最後の段階でした。
懇親会に至っては（申し込み方法が判らず…）当日申し込みで3,500円。計12,000円での参加です。

行こうか迷っているクリエイターの方々は、前もってチェックして早めに申し込むのが吉です！
RSSを流していないようなので、Facebookページを見ておくのがいいのかな、と思います。

CSS Nite LP, Disk 34「Webデザインで使うPhotoshop」

講師陣は、こちらの方々でした。

  1. 黒葛原 道（つづらはら・とおる）氏｜デザイン事務所eater

  2. 庄崎 大祐（しょうざき・だいすけ）氏｜Stocker.jp/diary

  3. 石嶋 未来（いしじま・みき）氏｜ウープスデザインブログ

  4. 牧下 浩之（まきした・ひろゆき）氏｜Plankton Design

2度、登壇した講師の方もいらっしゃるのでボリューム的には4人+ααといった感触です

 

今回、Photoshopを使ってウェブデザインをするにあたり、さまざまな機能で効率化、高クオリティ化を図る内容でしたが
とても印象的だったのは、「Macなんですか！？会社のPCですか！？」と、隣の席の女の子に言われたことです。

男はMacであることが第一条件だと…IT業界の女性はそう考えるのだと…

CS6～CCの内容での講義のなか、DELLのPCを広げるCS5ユーザーの僕は、確かに異質だったかもしれません。

それでも僕はWindowsが好きなんだと、声を大にして言いたい強い想いとともに、幕を開けたセミナーでした。
長くなりそうなのと、若干のチュートリアル（CS5の僕でも実現できて、さらっと読みやすいヤツ）を混ぜていきたいので、今回の記事は「前半/後半」に分けて書こうと思います

 

レイヤースタイルを使いたおす！よく目にする、あの表現を作ってみよう

黒葛原 道（つづらはら・とおる）氏｜デザイン事務所eater

素材に頼らなくても、デフォルトの機能だけで作れるものはあるのだと、実践を交えた内容です。

グラデーションで作る集中線

  • カンバスにシェイプツールで白い長方形を作成。
  • レイヤーをダブルクリックして「グラデーションオーバーレイ」にたどり着く
  • 「グラデーションタイプ」を「ノイズ」に。Photoshopグラデーションでつくる集中線
  • 「カラーモデル」を「HSB（彩度、色相、明度）」、「粗さ」を「100%」に。
    Photoshopグラデーションでつくる集中線
  • OKで確定し、「スタイル」を「角度」にして完成。不透明度はお好みで！
    Photoshopグラデーションでつくる集中線

 

こんな感じです。CS5もしくはそれ以前のバージョンでも出来るのではないでしょうか？（未検証）

Photoshopグラデーションでつくる集中線

 

ドロップシャドウの使い方

  • テキストツールで任意のテキストを書く
  • レイヤーの「塗り」を「０」に
  • レイヤーをダブルクリックして「ドロップシャドウ」を設定。
  • 「レイヤーがドロップシャドウをノックアウトする」のチェックを外す。
    Photoshopドロップシャドウでぼやんとしたテキストを作る

このように、「ぼやん」としたテキストが出来ます。使いドコロは解りませんが、
まぁ「レイヤーがドロップシャドウをノックアウトする」の意味がわかっただけでも勉強になりました

・フェルト（風）のパッチを作る

  • 「シェイプツール」で任意の図形を作成。
  • オプションバーの「ストローク」で、破線を設定。これが縫い目を表すエフェクトです
  • これだけだと、境界線が破線になっただけなので、レイヤーをダブルクリックし「境界線」でベースのカラーと同色で境界線を造り、破線の外に余裕を確保。
  • さらに「ドロップシャドウ（ベースのカラーの明度を落とした色を設定）」の距離を「0」に。「ノイズ」で量を調節し、更に立体感を出す。
  • 「パターン」で「灰色のみかげ石」など、ざらつき感を追加。
  • 「カラーオーバーレイ（ベースのカラーと同色）」＋描画モード「乗算」する。

メモ程度ですが、シェイプの「ストローク」は、CS6 以降の機能なので、気づいていなかった方は是非とも使ってみてください。

 

・マスキングテープ
  • シェイプツールでテープらしい長方形を作成。
  • 「多角形選択ツール」で選択範囲を作成して、Alt(option)+レイヤーパネル内の「レイヤーにマスクを追加」で、選択範囲外をマスク。
    Photoshopで作るマスキングテープ
  • レイヤーをダブルクリックし「ドロップシャドウ」の値を調節して立体感を出す
    Photoshopで作るマスキングテープ
  • 「パターン」で、テープの質感が出るもの　＋　任意のカラーを選択し「カラーオーバーレイ（乗算）

完成。パターンのせいで紙っぽくなりました…

Photoshopで作るマスキングテープ
古ぼけた紙を作る
  • 「シェイプツール」で任意の図形を作成。
  • レイヤーパネルから「ベクトルマスクを追加」
  • 「鉛筆ツール」でベクトルマスクを削る。破れている感じを表現する
    Photoshopでオールドペーパーをつくる
  • 「ドロップシャドウ（距離0）」で立体感とエッジを出す
  • カラーオーバーレイとパターンでヴィンテージ感を出す
  • 「シャドウ（内側）」広めの範囲で設定。
    Photoshopで作る古い紙

 

こんな感じです。いかがでしょうか。

Photoshopで作る古い紙
最後のシャドウにノイズを適用するとよりイイかもしれません。

この単元はCS5でも結構利用できますね。

試してみた！便利なPhotoshop有料プラグイン

庄崎 大祐（しょうざき・だいすけ）氏｜Stocker.jp/diary

Stocke.jpでも紹介されているPhotoshopプラグインの機能を解説してくださいました。

SVG書き出し

  • Zeick（Photoshop CCのみ対応。）
  • 画像アセット機能を使う（CS6, CC）

PNG書き出し系

  • PNG Hat
    Colisにも記事があります
    >Photoshopで8bit書き出しの場合、ドロップシャドウが汚れるがPNG Hatではアルファチャンネルをキレイに書き出せる
    >自動トリミング
    >imageタグ生成できる
  • PNG Quant
    >自動トリミング無し
    >「web用で保存」から書き出す。

CSS書き出し系

Webデザインカンプ系

    • WebZapp
      カンプを一瞬で作る
      サイドバーが微妙
      自作オブジェクトは使用できない
      ボタン、フォームのサイズや位置の変更ができない

Velosiety

      カンプというよりはモックアップ風で簡素
    矩形/テキストの等間隔配置が簡単にできる

 

WebZappの機能解説の時は、拍手が起こっていましたね…

本当に、簡単にWebサイトのレイアウトが完成してしまいます！

 

ではここらで一旦区切っておきます。
後半のレポートは後ほどUPしようと思います。

 

でわ！

セミナー
RELATED POST