WEBデザイン 陽炎稲妻水の月

初心者がwebデザインについて勉強しています。

【Photoshop】ポラロイド風写真を作成

Photoshopを利用してポラロイド風の写真を作成してみます。

f:id:sandw:20160621185227p:plain

ポラロイド風写真を作成する際のポイント

  • フィルターのぼかし(ガウス)により浮き上がる影を付ける
  • 写真の内側に「レイヤースタイルの追加」の「シャドウ(内側)」で奥行きの影を付ける

作成手順

  1. Photoshopより新規作成
    • 幅:500px
    • 高さ:500px
    ※幅高さは任意のサイズでOK


    f:id:sandw:20160622044419p:plain

    ↓ 

    f:id:sandw:20160622044917p:plain

    ↓ 背景色を任意に変更

    f:id:sandw:20160622044523p:plain

  2. 長方形ツールを選択

    f:id:sandw:20160622002831p:plain

  3. 上部メニューバーのシェイプレイヤーを選択し、固定値を入力
    • 幅:360px
    • 高さ:400px
    ※幅高さは任意のサイズでOK

    f:id:sandw:20160622000937p:plain

  4. カンバスをクリックし、シェイプを作成

    f:id:sandw:20160622043725p:plain

  5. 水平方向中央揃えで真ん中に配置

    f:id:sandw:20160622043632p:plain

  6. シェイプレイヤーで「Ctrl」+「a」(全選択)で選択範囲を指定し、新規レイヤーを作成

    f:id:sandw:20160621231436p:plain

  7. 黒で塗り潰す

    f:id:sandw:20160621231453p:plain

  8. 「Ctrl」+「t」(自由変形)で回転

    f:id:sandw:20160621231458p:plain

  9. 「フィルター」メニューの「ぼかし」→「ぼかし(ガウス)」を選択

    f:id:sandw:20160621231504p:plain

  10. ぼかし(ガウス)の半径を適宜調整

    f:id:sandw:20160621231509p:plain

  11. 不透明度を適宜調整

    f:id:sandw:20160621231515p:plain

  12. 当該レイヤーを「シェイプレイヤー」の下へ移動

    f:id:sandw:20160621231523p:plain

  13. 「長方形選択ツール」で削除したい(不要な影)部分を選択

    f:id:sandw:20160621231531p:plain

  14. 「delete」キーで不要な影を削除

    f:id:sandw:20160621231535p:plain

  15. シェイプレイヤーの範囲を選択し、新規レイヤーを作成

    f:id:sandw:20160621213920p:plain

  16. 「編集」メニューの「境界線を描く」を選択

    f:id:sandw:20160621213807p:plain

  17. 境界線の幅とカラーを任意の値で選択

    f:id:sandw:20160621213124p:plain

    ↓ 今回は「幅:1px」「カラー:#aaa」を設定

    f:id:sandw:20160621213028p:plain

  18. 「長方形選択ツール」より範囲選択

    f:id:sandw:20160621211605p:plain

  19. 選択範囲の中を黒く塗り潰し、「写真の枠」を作る

    f:id:sandw:20160621211536p:plain

  20. 画像を新規のレイヤーに配置

    f:id:sandw:20160621210322p:plain

  21. 「写真」レイヤーと「写真の枠」レイヤーの間を「alt」+「click」

    f:id:sandw:20160621205223p:plain

    ↓ 写真の枠の後ろに写真が入り込む形になる

    f:id:sandw:20160621205605p:plain

  22. 写真のサイズや配置を適宜変更

    f:id:sandw:20160621201400p:plain

  23. 「レイヤースタイルを追加」よりシャドウ(内側)を選択

    f:id:sandw:20160621203201p:plain

  24. 不透明度、距離、チョーク、サイズを適宜調整

    f:id:sandw:20160621204135p:plain

  25. フリーの手書きフォントをインストールし、メッセージを入力

    f:id:sandw:20160621185551p:plain

    参考:フリーフォントサイト

    fontfree.me
  26. 背景にコルクボードの画像を配置

    f:id:sandw:20160621185039p:plain

  27. 完成

    f:id:sandw:20160621185227p:plain