Webデザイナーが現場で使うPhotoshop画像挿入6STEP

ロードマップ

「Photoshopで画像をうまく扱えるようになりたいけど何を覚えたら良いの?」

「Webデザイナーを目指して勉強しているけれど、画像の扱い方がわからなくて止まってしまった…」

Photoshopでの画像を的確に配置するのって結構難しいですよね。

そこで本記事では、以下についてまとめました。

  • 基本的なPhotoshopの画像挿入方法6STEP
  • 整理整頓して画像を配置する方法

更に、今回はデザインの現場で使われているショートカットキーも併せてご紹介!

読み終えた頃には「現役のWebデザイナーと同レベルの画像挿入スキル」が身に着いています。

画像付きで、なるべく分かり易く解説しました、ぜひ最後まで見てみてください。

Webデザインの現場で画像は超重要

Designed by Creativeart / Freepik

いきなりですが、文字ばっかりのWebサイトって見にくいと感じた経験はありませんか?

↑の画像をもう一度見て下さい

ぱっと見て美しいですよね、そして植物系を扱うWebサイトなんだ!と感じたはず。

理由は以下の通りです。

  • 整然と画像が並んでいる
  • 植物の画像である

このように、「どんな画像を綺麗に並べるか?」というのは人の印象に大きく影響します。

画像の重要性は増すばかり

最近では、Webサイトはスマートフォンで閲覧される機会がどんどん増えています。

そのため、画像の選択や配置の重要性は増す一方です。

Photoshopで画像を扱うのに以前ご紹介したPhotoshopの超基本機能4選ではこのようなWebサイトを作れるようになると紹介しました。


これも改めてみると、インパクトに残るのは「画像」だと思います。

前置きが長くなりましたが、こんなWebデザインを実施していくためにPhotoshopの基本機能を6STEPにまとめました!

Webデザイナーが現場で使うPhotoshop画像挿入6STEP

Designed by Creativeart / Freepik

それでは、6STEPを解説していきます。

  1. 画像を読み込む
  2. 定規を表示
  3. ガイドを表示
  4. 複製する
  5. 整理整頓機能を使う
  6. 前に戻る

①画像を読み込む

Photoshopで画像加工やデザインを作成する際に画像を取り込む作業が頻繁にあります。

そんな時に活躍する画像を読み込むという初歩的な機能ですが、毎回使用する機能なので必ず覚えておくべき機能です。

画像の配置方法は2種類、2パターンあります

1.編集中のページに画像を埋め込む

方法①

  1. 画面上部のメニューバーからファイルをクリック
  2. 埋め込みを配置をクリック
  3. コンピューターの画像がでてくるので選択して配置
  4. 編集中のページに画像が配置されます
  5. サイズを調節して配置したい場所において下さい

方法②

  1. コンピューターのファイルを開く
  2. 挿入したい画像を選択してドロップアンドドラックする
  3. Photoshop内の画像の上に離す

2.新規ドキュメントに画像を配置

方法①

  1. 画面上部のメニューバーからファイルをクリック
  2. 開く
  3. コンピューターの画像が出てくるので選択
  4. 新規ドキュメントに画像が配置されます。

方法②

  1. コンピューターのファイルを開く
  2. 挿入したい画像を選択してドロップアンドドラックする
  3. Photoshopの上部のタブ部分に離す

②定規を表示させる

デザインを作成する際に均等に画像や図形を置きたい、バランスをみながら画像置く位置を決めたいとおもいませんか?

Photoshopでいざ作成しよう! となった際にまずこの機能を覚えて設定するだけでPhotoshopでデザインを作成する際の便利さが違います。

デザインの4大原則【近接・整理・反復・強弱】をデザインに反映させるために欠かせない目安となる定規やガイドを引きましょう。

  1. 画面上部メニューバーの表示をクリック
  2. 定規

定規のメモリがでてきてサイズが図りやすくなりました。

・ショートカットキー

定規を表示・非表示させます。

Windows 【Ctrl+R】
Mac 【command+R】

③ガイドを引く

ガイドを表示することでよりわかりやすく画像や図形を配置することができます。

  1. 画面上部メニューバーの表示をクリック
  2. 新規ガイド
  3. 水平・垂直の引きたい位置を入力
  4. OK

④複製する

Webデザインのお仕事は作成した図形・画像を同じサイズで何個も何個も複製する機会が多いです。

そんな時すぐに複製できる簡単な機能です。

こちらも覚えておくだけで作成のスピードが変わります!

  1. 複製したい図形・画像を指定
  2. Windows 【Altを押しながらドラッグ】・Mac【optionを押しながらドラッグ】

これだけです!

簡単ですよね?

この機能を覚えると簡単に複製できるので、効率よくデザインの作成ができます。

・ショートカットキー

複製したいものを選択する→選択した状態で

Windows 【Ctrl+J】
Mac 【command+J】

⑤整理整頓機能を使う

画像や図形、文字ブロックがバラバラに並んでいる時に簡単に整理整頓できたら良いのに…と思うことがありませんか?

そんな時に活躍する機能並列・均等を覚えて画像や図形、文字ブロックを整理整頓しましょう。

1.並列

  1. バラバラに並んだ図形や画像をshiftを押しながら選択
  2. 画像のように3つの四角を囲うように枠線ができる
  3. 左上選択マークを指定していることを確認
  4. 上の串刺しマークを押す

これだけで縦にキレイに並列できました。

2.並列させた図形を均等間隔で置く

先ほどと方法はほぼ同じです。

  1. バラバラの間隔で並んだ画像をshiftを押しながら選択
  2. 画像のように3つの四角の図形を囲うように枠線ができる
  3. 左上選択を指定していることを確認
  4. 上の串刺しマークの2つ隣を押す

こちらも簡単に均等に並びます。

⑥前に戻る

画像補正や複製、整列を間違えて何個も作成してしまった。

そんなとき任意の場所に戻れたら便利ですよね?

そんなときに活躍するヒストリー機能の使用方法です。

  1. 画面上部メニューバーよりウィンドウ
  2. ヒストリーにチェックをいれる
  3. 右側のバーにヒストリー表示される
  4. 右側サイドバーのヒストリーより戻りたい場所を指定

・ショートカットキー

一つ前に戻る

Windows 【Ctrl+Z】
Mac 【command+Z】

一つ以上前に戻る

Windows 【Ctrl+alt+Z】
Mac 【command+option+Z】

まとめ|Webデザイナーが実施する6STEP【Photoshop画像挿入】

Designed by Creativeart / Freepik

本記事では以下のWebデザイナーが実施する6STEP【Photoshop画像挿入】について、以下の内容をご紹介しました。

  • 基本的なPhotoshopの画像挿入方法6STEP
  • 整理整頓して画像を配置する方法

「現役のWebデザイナーと同レベルの画像挿入スキル」を身に着つけられたでしょうか?

Photoshopは機能がたくさんありますが、使用する機能は限られています。

徐々に他の便利な機能を覚えていけば十分なので、効率よくPhotoshopを勉強して使用していくのがおすすめです。

コメント

タイトルとURLをコピーしました