pickup
photoshop-web

この記事ではphotoshopを使って、画像の上におしゃれなテキスト(文字)を装飾していく方法を初心者にも分かりやすく説明していきます!

Webサイトのカテゴリーページのトップ画像制作でPhotoshopを使って画像の加工をしたので、その工程を紹介していきます。

スポンサーリンク

・使用する画像の選定

まずは背景になる画像を決めます。

  • 作るサイズより大きい画像を探す事(画像のサイズが小さいと引き伸ばした時に粗く映ります)
  • 目的に合った画像を選ぶ事

主に下記の3つの方法で素材を調達してきます。

①手持ちの画像を使う

日頃スマホで撮る写真や、旅行先でキレイに撮れた写真などを使ってみるのもいいですね。

ただ素人写真だとどうしても画質が悪かったり余計な物が写っていたり、Photoshopで修正が必要になります。

②フリー素材を使う

フリー素材とは?

文字通り、無料で自由に利用できる素材の画像の事フリー画像。

・フリー写真を利用する場合は、必ず配布元のサイトでライセンスを確認してから使用するようにしましょう。

フリー素材サイト

③有料の素材を使う

有料素材とは?
一度購入すると何度でも加工・編集・使用が可能。
素材のサイズによって価格が決まっている単品購入と、1枚あたりから利用できる定額制プランなどがある。
無料写真素材と違い写真のクォリティが高く、写真の点数も豊富な上、検索機能が優れています。

有料素材サイト

・photoshopでの加工

Photoshopはパソコン上での写真や画像の加工・編集ができるアプリケーションソフトウェアです。
写真のプロ用のフォトレタッチ・画像合成をおこなうことや、印刷物・Web制作・イラスト制作・漫画制作・CG制作のために必要なワークスペースも用意されています。

画像を扱う制作の全般に使えるたいへん優秀なソフトです。

①選んだ画像をphotoshopで開く

アートボード(作業をする白紙の画面)を表示

  • Photoshopを立ち上げます
  • 新規作成→WEB→プリセットの詳細(任意)この画像の名前をつけます
  • 幅1920px  高さ1080px(任意)
  • 方向    横向き
  • 解像度72  ピクセルインチ
  • カラーモード RGB
  • カンバスカラー(アートボードの色) 白
  • 作成

photoshop-processing

画像の挿入

  • 1ファイル→スマートオブジェクトとして開く

(スマートオブジェクトで開くと拡大した時に画像が劣化しません)

  • 2選択範囲→すべてを選択(画像が動く点線で囲まれます)→3編集→コピー
  • アートボードに戻り、3編集→ペースト

(アートボードの後ろに画像が表示されます)

  • ツールバーの4移動ツールに切り替えて画像の位置を合わせます

ファイルからそのままPhotoshop上にドラッグしても表示できますが、選んだ画像サイズによっては画質が粗くなります。

②テキストの配置から装飾

テキストの入力

  • 5横書き文字ツールで文字の入力をしていきます

(フォントや文字の色、文字の大きさを上のメニューから選択します)

文字の装飾

  • レイヤーパネルの下の6『fx』レイヤースタイルを追加

(レイヤー効果が表示されるので選択します)

  • スタイル内のチェックボックスから利用したい効果を選びます

(複数選択可能)

  • 『OK」を押すと適用されます。

これでレイヤースタイルが使えました

オススメ効果
・ドロップシャドウ
文字が浮き出ている様に見えて立体感が出せます
・シャドウ(内側)
文字自体に影ができて境界線がハッキリします
・テクスチャ
パターンから柄を選択できて、それなりにオシャレに見せれます
柄の種類も様々です

③保存方法

今回はPhotoshopの編集データを保存したいので、拡張子は『.psd』に設定します。

  • ファイル→別名で保存→名前(任意)→保存場所を選択
  • フォーマット  Photoshop
  • 保存
目的別拡張子
・写真を保存するならJPEG
・Webサイトのロゴやボタンに使う画像、イラストはPNG
・背景が透明な画像を保存したいときは、PNGかGIF
・どんなPC、ソフトでも開くことのできるのはPDF

まとめ

今回ご紹介したのはあくまで私個人の制作方法です。

他にも何通りも方法やテクニックがあるので、まずはPhotoshopに触れて自分なりに一番いい方法を見つけてみるのが一番だと思います。

誰でも簡単にオシャレな装飾ができるので、Photoshop初心者の方でも楽しく制作する事ができると思います!

スポンサーリンク

Twitterでフォローしよう

おすすめの記事