Webデザイン

作成方法も紹介！デザインカンプとは【初心者向け】

初心者向けにデザインカンプとは何なのか、なぜ必要なのか実際に作成しながら解説しています。Webサイト制作をする上で完成形のイメージを共有するために必要な知識となります。Webディレクターは特に知っておきたいでしょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

デザインカンプとは何なのか、実際に作成しながら解説しています。

デザインカンプは、チームでWeb制作をする上では欠かせないでしょう。自分がデザインカンプを作成しなくても細かい修正などできておくと良いでしょう。

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

デザインカンプとは

デザインカンプはワイヤーフレーム(レイアウト)に具体的な色や画像の指定を行ったもので、モックアップとも呼ばれます。

ワイヤーフレームは要素の位置関係を指定したものです。

dc_p_1

これに具体的な色や画像を設定し、完成品の模型として仕上げたものがデザインカンプとなります。

dc_p_2

デザインカンプの目的

ワイヤーフレームが各要素の配置を決定するものであるのに対して、デザインとしての完成図をイメージする目的で作成されます。

[PR] Webデザインで副業する方法とは

実際にデザインカンプを作成してみる

デザインカンプの作成にはオンライン上のデザインツールや、Photoshop・Sketchなどのソフトを使用します。
今回はAdobe Photoshop CCとそれに付属している「デザインスペース」機能を使用して簡単なデザインカンプを作成してみます。

Photoshop CCを起動し、上メニューの「ウィンドウ」から「デザインスペース(プレビュー)」を選択します。

dc_p_3

デザインスペースのモードに切り替わりました。

dc_p_4

右下の「テンプレート」から作成する形式を選択します。(今回はWebとしています)

dc_p_5

各形式に応じた画面サイズが表示されます。

dc_p_6

まず全体の配置を決めるワイヤーフレームを用意します。「長方形ツール」を選択すると長方形を画面内に作成することができます。

dc_p_7

作成した各長方形に色を設定します。また、この時要素の不透明度を指定することも可能です。

dc_p_8

図形を移動する際にはスマートガイドが自動で表示されるため、各要素の位置関係を確認しながら均等な配置が可能です。

dc_p_9

ワイヤーフレームが完成したら、次にこれに色や画像を配置してデザインカンプを作成していきます。

デザインスペースと通常のPhotoshopのモードは、いつでも切り替えることができます。
「ウィンドウ」→「標準のPhotoshopに戻る」を選択すると通常モードになります。

dc_p_10

使用したい画像を直接作業画面内にドラッグ＆ドロップします。

dc_p_11

大きさと位置を調整し、Enterキーを押して決定します。

dc_p_12

画像のレイヤーを配置したい長方形レイヤーの上に配置し、画像レイヤーを選択した状態でレイヤーウィンドウ右上のメニューをクリックします。(この時、長方形の部分は透明以外の色で塗りつぶしておきます)

dc_p_17

メニューから「クリッピングマスクを作成」を選択します。

dc_p_13

これで指定した部分にのみ画像が反映されました。

dc_p_14

ここではテキストを指定の範囲内に配置する際に、Photoshop通常モード「長方形ツール」のオプションで「パス」を選択して範囲を設定し、テキストツールでその中に入力しています。

モードの切り替えを行うことで、作業の内容により自分のやりやすい環境でデザインカンプを作成することが可能です。

dc_p_15

作成したものはPSDファイル以外にも「ファイル」→「別名で保存」からPDFなどの各種形式で保存することができます。

dc_p_16

以上、デザインカンプとはどういったもので何のために作成するのか、実際に作りながら紹介してきました。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

SCSSでforを使ってループ処理をする方法を現役エンジニアが解説【初心者向け】

SCSSでforを使ってループ処理をする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

要素の表示の仕方を覚える！CSSのdisplayとvisibilityの使い方【初心者向け】

CSSで書くdisplayとvisibilityの使い方について解説しています。要素の表示を自在にコントロールするためには重要な知識になります。特に難し...

CSS

今すぐ勉強しておきたい！タイポグラフィとは【初心者向け】

スタイリッシュな文字が並ぶタイポグラフィ。そんなタイポグラフィのデザインに憧れる方は少なからずいると思います。ただ、タイポグラフィを作っていみたいと思っ...

Webデザイン

CSSで"cursor: pointer"が効かない原因と対処方法を現役エンジニアが解説【初心者向け】

CSSで”cursor: pointer”が効かない原因と対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向け...

CSS

使いながら解説！効率良くコーディングできるSassとは【初心者向け】

CSSを簡単に書くための言語Sassについて解説しています。 Sassを理解するためにはまずCSSの知識の理解が必要となりますので、CSSの理解が進んでい...

CSS

80年代スタイルが2017年注目のトレンドになる8つの理由

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ライターのCarrie Cousins氏...

Webデザイン

あわせてよく読まれている記事

Photoshopでレイヤーを結合する方法を現役エンジニアが解説【初心者向け】

Photoshopでレイヤーを結合する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。田島悠介今回は、Photoshopに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介レイヤーを結合する方法について詳しく説明していくね！大石ゆかりお願いします！目次レイヤーの定義と種類レイヤーを結合する方法全てのレイヤーを結合する方法まとめレイヤーの定義と種類レイヤーとはレイヤーとは、透明なシートに絵を描いて、それを何枚か重ねることで全体の絵を完成させていくイメージで使われる、PhotoShopの基本的なツールです。 PhotoShopでは、デジタルの利点を最大限に活かして、レイヤーごとに画像や文字を編集するのが基本的な方式となります。例えば、こちらの画像では、海の画像とヨットの画像が別々のレイヤで用意してあり、いつでもヨットの表示・非表示を切り替えることができます。レイヤー操作パネルレイヤーは次のようなパネルで操作することができます。 1行が1レイヤとして扱われ、選択中のレイヤ以外はカンバス上でクリックしても反応しませんから、誤操作を気にすることなく決まった画像や被写体の編集に集中することができます。また、目のアイコンをクリックすることで、レイヤーの表示・非表示の切り替えができますので、２つの被写体が重なっている部分でも簡単に編集が可能です。レイヤーの種類 PhotoShopのレイヤーには様々な種類があります。代表的なレイヤーをこちらの表でご確認ください。レイヤーの種類説明画像レイヤー（通常レイヤー）画像を編集するための最も基本的なレイヤー背景レイヤー画像に対して1つだけ設定できる背景用のレイヤー調整レイヤーそれ自身は見た目の情報を持たず、他の画像に対する視覚調整効果を保持したレイヤー文字レイヤー文字情報を表示させるためのレイヤー。PhotoShopでは、文字は画像と独立したレイヤーとして扱いますシェイプレイヤー図形などのシェイプ情報を持ったレイヤーレイヤ構成のサンプル冒頭のサンプル画像は、4つのレイヤーで構成されています。こちらの絵で、どんなレイヤ構成になっているか確認してみましょう。海の画像とヨットの画像は別のレイヤで管理されており、ヨットのレイヤーを海のレイヤーの上にオーバーレイさせています。ヨットの絵はわかりやすくするために背景に色がついていますが、実際は背景が透明のため、下の海の画像が見えるようになっています。調整レイヤは、指定領域だけ海の画像の視覚効果を暗めの色で付与しています。実際は、レイヤそのものはすべて透明で、見た目の情報を持ちません。画像の上にオーバーレイさせた時だけ、画像に非破壊的に視覚効果を付与させることができる、特殊なレイヤです。文字レイヤは、見た目の通り、文字を管理するためのレイヤです。わかりやすく色を付けておきましたが、実際は白に近い色です。 [PR] Webデザインで副業する方法とはレイヤーを結合する方法レイヤー結合の方法レイヤーは、以下の方法で結合できます。 PhotoShopにおけるレイヤー結合操作レイヤーを複数選択する　＞　右クリック　＞　レイヤーを結合レイヤーを複数選択するには、レイヤーパネル上で、Ctrlキーを押しながらレイヤーの行を複数クリックします。レイヤー結合は、絵が描かれた複数枚の透明なシートを接着剤で1つにまとめるイメージですので、レイヤーの数が減ってスッキリします。レイヤー結合の注意点レイヤーは、結合すると元に戻せませんので、複数レイヤを一つの画像にまとめて問題ない場合に結合操作を実行しましょう。また、結合時に「非表示状態」の（目のアイコンが表示されていない）レイヤーは、結合後に情報が消失してしまいますので、十分注意してください。レイヤーのリンク 2つ以上のレイヤーを同時に移動させたい、位置関係を維持して編集したい場合には、「レイヤーのリンク」コマンドを使いましょう。操作方法は、「レイヤーを結合」とほとんど変わりません。右クリックメニューで「レイヤーのリンク」を選択すればOKです。こちらは目的の作業が完了した後に、リンク状態を解除して元に戻すことができます。全てのレイヤーを結合する方法画像の統合作業が全て完了して、レイヤーをすべて結合して一つの画像としてまとめたい場合には、「画像の統合」を実行します。 PhotoShopにおける画像の統合操作任意のレイヤーを右クリック　＞　画像を統合この操作により、すべてのレイヤーが一つの背景レイヤーとして統合されます。まとめ PhotoShopを使いこなす上で、レイヤーの操作は必須となります。結合時にレイヤーが消失してしまわないよう、気を付けて操作を実施していきましょう。監修してくれたメンター寺谷文宏 ( Teratani Fumihiro ) WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。万能なエンジニアとしてWEBデザインにも詳しく、WEB素材をIllustratorやPhotoshopにより制作することができます。 TechAcademyではフロントエンド、Javaコースを担当。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

これだけは知っておきたい！Photoshopのレイヤー操作の基本

Photoshopの基本中の基本となる「レイヤー操作」について初心者向けに解説した記事です。 Photoshopのファイルはレイヤーという透明のフィルムが何枚も重なっている状態で管理されています。背景・オブジェクト・文字などのレイヤーを分けることによって、それぞれ違う描画モードを設定したり、他のレイヤーの情報に影響を与えずに画像を編集できます。 (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 目次デザインカンプとはデザインカンプの目的実際にデザインカンプを作成してみる大石ゆかり田島メンター！！今日はレイヤーについて教えてください。田島悠介 Photoshop内の透明なフィルム、その1枚1枚をレイヤーというんだ。各レイヤーにはそれぞれ「描画モード」というものを設定することができるようになっているよ。大石ゆかり「描画モード」ですか？田島悠介レイヤー内の要素を、画像全体の中でどのような合成方法で使用するかという機能なんだ。試しにレイヤーを作成してモードを変更してみようか。レイヤーの「描画モード」レイヤーには様々な種類が存在します。今回はいくつか基本的なものを紹介します。田島悠介レイヤーを新規作成すると「通常」の状態で作成されるよ。また、レイヤーの描画モードはいつでも変更可能なんだ。大石ゆかりずいぶんたくさん種類がありますね！でも、これだけあると何を使っていいか分からなくなりませんか～？田島悠介各モードをクリックするとその場で画像に反映されるので、画面を見ながらどれを使ったらいいか考えることもできるからね。よく使う描画モードについて見てみよう。例として、背景のレイヤー0の上に、もみじの葉以外の部分が透明の状態になっているレイヤー1があるとします。このレイヤー1にいくつかの代表的な描画モードを設定してみましょう。描画モードは赤枠の部分をクリックすることで変更が可能です。描画モード「通常」初期設定されている描画モードが「通常」です。上のレイヤーにあるものが優先して表示され、透過の部分は下のレイヤーが見えます。描画モード「乗算」下のレイヤーの色と上のレイヤーの色を掛け合わせ、色が暗くなる演算を行います。どんな色でも黒と掛け合わせると演算結果は黒になります。逆にどんな色でも白を掛け合わせると変化はありません。描画モード「スクリーン」下のレイヤーの色と上のレイヤーの色を掛け合わせ、色が明るくなる演算を行います。描画モード「乗算」の時とは反対に、どんな色でも白と掛け合わせると演算結果は白になります。逆にどんな色でも黒を掛け合わせると変化はありません。レイヤーの「不透明度」各レイヤーには不透明度を設定できます。初期設定では100％になっており、数値を下げると下のレイヤーが透けて見えるようになります。以下は、文字ともみじのレイヤーの透明度を50％に、描画モードを通常に設定しています。 [PR] Webデザインで副業する方法とは背景レイヤー背景レイヤーという、透明ピクセルの存在しない特殊なレイヤーがあります。このレイヤーは最背面に固定されており、描画モードや不透明度を設定できません。背景レイヤーは通常のレイヤーへ変更することが可能です。背景レイヤーを右クリックし「背景からレイヤーへ」を選択します。レイヤーから背景へ変更する場合は、背景に変更したいレイヤーを選択した状態で、上メニューの「レイヤー」→「新規」→「レイヤーから背景へ」を選択します。すると、レイヤー内の透明部分が背景色で塗りつぶされ、最背面に固定されます。用途に合わせて使い分けてください。レイヤーの新規作成・複製・削除最後にレイヤーの新規作成・複製・削除といった基本操作を紹介します。レイヤーを新しく作成する場合は、このアイコンをクリックします。レイヤーを削除する場合は、削除したいレイヤーを選択した状態でこのアイコンをクリックします。 (レイヤーを右クリック→「レイヤーを削除」でもOKです。) また、レイヤーを右クリックして「レイヤーを複製」を選択すると、同じレイヤーを新たに作成できます。この時、複製されるレイヤーは描画モードや不透明度も元のレイヤーと同じ状態で作成されます。今回の記事は以上です。田島悠介レイヤーの複製や削除もよく使う機能だから覚えておこう。大石ゆかりちなみにレイヤーを分けると、具体的にどんないいことがあるんですか？田島悠介例えば文字と画像、それぞれの不透明度を別にしたり、背景部分にだけフィルターを適用したりすることが可能になる。しかも別レイヤーに分けておくことによって、好きなときに変えたい箇所だけを調整することができるよ。大石ゆかり画面内の要素によって、いろいろなレイヤーを使い分けるのが大事なんですね。よく分かりました！ Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

Photoshop（フォトショップ）で画像を切り抜く方法【初心者向け】

初心者の方でもAdobe Photoshopの使い方がわかる記事です。ここではPhotoshopで写真を切り抜いて加工する方法について解説します。目次デザインカンプとはデザインカンプの目的実際にデザインカンプを作成してみる (※今回の作業はすべてAdobe Photoshop CCのバージョンでおこなっています) なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！画像同士を加工するので切り抜きをしたいのですが、なかなかうまくいかなくて…… 田島悠介切り抜きの方法は、対象の形や周りとの色の関係などによっていろいろと使う機能も違ってくるよ。画像の状態によって方法を使い分けてみよう。大石ゆかり具体的にはどういうところを見ればいいんですか～？田島悠介そうだね、まずは一番簡単な自動選択ツールが使えるケースについて考えてみよう。自動選択ツールを使った切り抜き以下のような、切り抜きたい対象と背景とのコントラストが明確な場合は、「自動選択ツール」を使用することで簡単に切り抜きを行えます。まずは対象の画像をPhotoshopで開き、レイヤーパネルを確認します。レイヤー名が「背景」である場合は、レイヤーを右クリックし「背景からレイヤーへ」を選択して通常レイヤーへ変換しておきましょう。次に、左のツールパネルから選択ツールのアイコンを右クリックし、「自動選択ツール」を選択します。画面内の、切り取る対象以外の背景箇所でクリックします。 ※対象の方が単色に近い場合は、対象の内側をクリックし、上部メニュー「選択範囲」の「選択範囲を反転」を選び、対象以外が選択された状態にしておきましょう。自動選択ツールでは「許容値」の値が大きいほど選択される範囲が広くなり、小さいほど狭くなります。許容値は以下の項目から調整することができます。選択範囲が作成されたら、上部メニュー「編集」から「消去」を選択します。切り抜きたい部分以外が透過の状態になりました。レイヤーマスクの利用レイヤーマスクを追加することで、切り抜きたい部分以外を消去せずに元画像を保持したまま切り抜くことができ、容易に修正ができるようになります。レイヤーマスクを利用するときは、切り抜きたい部分を選択した上で、レイヤーパネルのアイコン「レイヤーマスクを追加」をクリックします。ペンツールを使った切り抜き周囲とのコントラストがあいまいな場合や自由な形の切り抜きを行いたいときは、ペンツールを使用した方法が有効です。今回は以下の画像を用いて、右側のカップを切り抜いていきます。先ほどと同様に、レイヤー名が「背景」である場合は、レイヤーを右クリックし「背景からレイヤーへ」を選択して通常レイヤーへ変換しておきましょう。左のツールパネルのペンツールのアイコンを右クリックし、「ペンツール」を選択します。画面左上の「ツールモードを選択」は「パス」を選択しておきましょう。 ※ペンツール選択時、初期設定では「シェイプ」と表示されています。切り抜きく対象の輪郭をクリックしてアンカーポイントを追加していきます。このとき、対象の1〜2pxほど内側を選択していくときれいに切り抜くことができます。パスの最後は開始点をクリックし、対象をパスで囲むことができました。次に、レイヤーパネルが表示されている付近のタブ「パス」をクリックし、パスパネルを表示させます。パスパネルのタブが見つからない場合は、上部メニュー「ウィンドウ」から「パス」を選択し表示させましょう。パスパネル下部にある「パスを選択範囲として読み込む」アイコンをクリックします。パスが変換され、対象に沿った選択範囲が作成できました。切り抜く対象以外の部分を透過の状態にします。上部メニュー「選択範囲」から「選択範囲を反転」をクリックします。さらに、上部メニューの「編集」から「消去」を選択します。対象以外の部分が透過になりました。大石ゆかり自動選択ツールがうまくいかない場合は、パスを使うんですね。田島悠介対象のちょっとだけ内側をなぞるようにすると、合成後の画像で余白が目立たなくなるよ。大石ゆかり人物とか、複雑な輪郭のものだとこのやり方は大変そうですね…… 田島悠介そういうときは「境界線を調整」を使おう。この機能ではかなり細かい部分まできれいに切り取れるようになるんだ。 [PR] Webデザインで副業する方法とは「境界線を調整」機能を使った切り抜き「境界線を調整」という機能を使うことで、比較的簡単に複雑な形状を切り抜くことが可能です。こちらの画像の人物の部分を切り抜いてみましょう。ツールパネルの選択ツールアイコンを右クリックし、「クイック選択ツール」を選びます。選択したい部分を内側からドラッグすると、自動で選択範囲が作成されます。はみ出した部分はAlt（option）を押しながらドラッグすることで解除できます。下の画像のように選択したい部分が離れて複数ある場合は、Shiftを押しながらドラッグすることで追加選択できます。また、選択範囲の追加と削除は、上のメニューからツールアイコンをクリックすることで切り替えることもできます。以下はサンプル画像の切り抜きたい部分を選択した状態です。ここからは髪の毛の部分を切り抜いていきます。より詳しく知りたい方は、Photoshopで髪の毛をきれいに切り抜く方法もあわせてご覧ください。選択ツールを選んだ状態で、オプションバーにある「選択とマスク」をクリックします。「表示モード」を「白黒」にしてみましょう。髪の毛やまつ毛などの部分が選択されていない状態であるのが分かります。次に、同じように「表示モード」の「レイヤー上」をクリックします。「スマート半径」を選択し、大きさを調整します。境界線調整ブラシツールに持ち替え、髪の毛とまつげの境界部分をドラッグします。再び「表示モード」の「白黒」で見ると、髪の部分が選択された状態になっているのが分かります。「出力先」から「新規ドキュメント」を選びOKを押します。人物の部分だけ切り抜きされ、背景が透明の画像が新規に作成されます。この模様は透過（透明）の状態（なにも描画されていない状態）を表しています。背景に色をつけてみましょう。ここでは「背景レイヤー」という名前のレイヤーを新規追加しています。レイヤーの順番を入れ替えます。（背景レイヤーが下になるようにします）「背景レイヤー」をツールパネルの「塗りつぶしツール」で塗りつぶした状態です。背景レイヤーは目的やデザインの雰囲気に合わせて編集してみましょう。いかがでしたか？ぜひバナー作成などにチャレンジしてみてください。田島悠介「境界線を調整」を使ったやり方は以上だよ。大石ゆかり髪の毛まできれいに切り取れちゃいました！田島悠介自動選択だけでできるものならこの機能は必要ないときもあるかもしれないし、逆に人物などをパスや自動選択でやろうとすると大変になる。画像の状態によってツールを使い分けよう。大石ゆかり対象をよく見て方法を選ぶのが大事ですね。ありがとうございました！ Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】現役デザイナーが解説

この記事では、Photoshopで画像の背景を透明にする方法を初心者の方にもわかりやすく解説します。画像を合成する際、不要な部分を「透過」の状態（何も描画されていない、透明の状態）にしなければいけない場合があります。 Photoshopの機能を使うと、簡単にきれいな透明（透過）処理を行うことができるので、ぜひ覚えておきましょう。目次デザインカンプとはデザインカンプの目的実際にデザインカンプを作成してみる (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 【動画の解説はこちら】田島悠介今回は透過について勉強するよ。画像合成には欠かせない要素なので必ず覚えておこう。大石ゆかり田島メンター！！透過っていうのは何ですか～？田島悠介レイヤーの中で、該当のピクセルに何も描かれていない状態のことを言うんだ。透過の部分にはその下のレイヤーの情報が適用されるよ。大石ゆかりなるほど、透明な部分ってことですね！人物写真の背景を透明にする以下の2つの作業を順を追って紹介します。大まかな範囲を選択する境界線調整ブラシツールで調整大まかな範囲を選択するまずは人物写真を使って、基本的な透過の方法を解説します。今回はこちらの画像を使用していきます。左のメニューから選択ツールアイコンを右クリックして「クイック選択ツール」を選びます。人物の形に沿ってドラッグしていきます。この際、Alt＋ドラッグで選択範囲の消去、Shift＋ドラッグで複数の選択範囲を作成できます。だいたい全体を選択した状態です。まだ髪などの細かい部分が選択できていないので調整していきます。「被写体を選択」コマンドを使う(※バージョン 21.2以降) ここまでの作業は、Photoshopのバージョン21.2以降の機能「被写体を選択」コマンドを利用すると、ワンクリックで選択できます。「クイック選択ツール」を選んだ状態で、対象が表示されているレイヤーを選択し、オプションバーの「被写体を選択」をクリックします。すると、人物に沿って選択範囲が作成されます。ここで選択されていない部分や選択を解除したい部分がある場合は、先ほどの「クイック選択ツール」で調整できます。境界線調整ブラシツールで調整では、髪などの細かい部分を選択していきます。オプションバーの「選択とマスク」をクリックし、「表示モード」を境界がわかりやすい「白黒」にしておきましょう。「エッジの検出」内の「スマート半径」にチェックを入れ、半径の長さを画面を見ながら調整します。 ※半径の値が小さければ境界がシャープになり、値を大きくするほど境界がソフトになります。 ※「スマート半径」にチェックを入れると、境界のシャープ〜ソフト具合をPhotoshopが自動で調整します。特に人物を選択する際に威力を発揮します。さらに境界を調整したい部分を指定するために、左メニューの「境界線調整ブラシツール」を選択します。髪などの細かい修正をしたい所を、塗りつぶすようにドラッグしてあげましょう。選択範囲の調整を終えたら、「出力設定」の「出力先」から「レイヤーマスク」を選択してOKボタンをクリックします。元の画面に戻り、レイヤーマスクで選択されていない部分が透過された状態になりました。髪の毛などの細かい部分も選択できています。基本的な透過の方法は以上です。田島悠介クイック選択ツールと「選択とマスク」を使った方法だね。大石ゆかりレイヤーマスクを使うことで、元の画像の情報を保持できるんですね。田島悠介消しゴムツールで消された部分なんかも透過になるよ。あと背景が1色だったりした場合はもっと簡単な方法があるんだ。大石ゆかりへー！どんなのですか？背景が1色の画像を透明にするロゴマークや文字列など、背景との境界がはっきりした画像で、背景が1色の場合はもっと簡単です。今回はこの画像を例にします。左メニューから消しゴムツールのアイコンを右クリックし、「マジック消しゴムツール」を選択します。オプションバーの設定項目の「隣接」にチェックが入った状態にしておきます。背景にしたい部分の中の適当なところをクリックします。すると、クリックした部分と同じ色の所がその場で透過状態に切り替わりました。また、この時「隣接」にチェックが入っていないと処理が少し変わってきます。試しに「隣接」のチェックを外してみましょう。「隣接」にチェックが入っているときとは違い、図形の中の白い部分まで透過になっているのがわかります。「隣接」にチェックを入れると同じ色が隣接している部分をすべて選択するのに対し、チェックを外すと画像全体で同じカラーのピクセルが選択されるようになります。文字列の背景を透過にしたい場合などでは、「隣接」のチェックを外しておくと便利です。 [PR] Webデザインで副業する方法とは手描きのイラストの背景を透明にする（線画抽出する）最後に、スキャンによって取り込んだ紙に描いたイラストなどを、加工しやすくするために背景を透明にする（線画を抽出する）方法です。ここではチャンネルを使用した方法と、クイックマスクを使用した方法の2つを解説します。線画を抽出する前の共通の手順です。スキャンした画像をPhotoshopで開き、スキャン時に入った大きな汚れなどをブラシツールで白く塗りゴミ取りをします。次に、「イメージ」から「色調補正」→「明るさ・コントラスト」を選択します。「明るさ」の部分を右に移動して画像を明るくすることで、さらに細かい汚れを消すことができます。これで下準備は完了です。チャンネルを使用した方法チャンネルパネルを表示し、「チャンネルを選択範囲として読み込む」をクリックします。すると、線画以外の白い部分が選択されました。この状態で、上メニューの「選択範囲」から「選択範囲を反転」をクリックします。選択範囲が反転し、線画の黒い部分のみが選択された状態になりました。レイヤーパネルにて、何もない新規レイヤーを作成します。元のレイヤーは左側にある目玉マークをクリックして非表示にしておきましょう。上メニュー「編集」→「塗りつぶし」を選択します。内容は「カラー」を選び、表示されたカラーピッカーで線画の色に使用したい色を選んだ上で、OKボタンをクリックします。線画の部分が塗りつぶされ、新規レイヤー上に線画を抽出することができました。クイックマスクモードを使用した方法線画を抽出する画像を開き、上メニュー「選択範囲」→「すべてを選択」をクリックします。上メニュー「編集」→「コピー」を選択します。レイヤーパネルで新規レイヤーを作成し、「編集」→「塗りつぶし」で線画の色に指定したい色で全面を塗りつぶします。そのレイヤーを選択した状態にし、元のレイヤー(下のレイヤー)は非表示にしておきます。左メニューの下から2番目にある「クイックマスクモードで編集」をクリックします。上メニュー「編集」→「ペースト」を選択します。画面では以下の画像のようになります。左メニューから先ほどと同じアイコンをクリックし、「クイックマスクモードで編集」から「画像描画モードで編集」に戻します。線画以外の部分が選択されました。上メニューの「編集」→「消去」を選択します。線画以外の部分が透過の状態になり、線画を抽出することができました。いかがでしたか？田島悠介最後に、スキャンした線画だけを残して他を透過にする方法を紹介したよ。大石ゆかりクイックマスクモードというのは、こういうこともできるんですね。田島悠介透過はレイヤーをうまく活用するためにも不可欠な機能なので、しっかり覚えておこう。大石ゆかりそうですね。ありがとうございます！ Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] Webデザインで副業する方法とは3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。 5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。垂直方向の文字が、水平方向の文字とアセンダ（アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。可読性が重視されるテキストに最適です。 6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。このフォントファミリーは51種類のウェイトから構成されています。古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。 7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。 8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。 9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。 10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade

Webデザイン

Photoshopで画像を角丸にする方法【初心者向け】現役Webデザイナーが解説

Photoshopは、選択範囲の機能を使って、写真の四隅を角丸に加工することが可能です。今回は初心者向けに、角丸加工の方法を解説します。目次今回は下記の2つの方法でご紹介します。選択範囲を使用した方法クリッピングマスクを使用した方法 ※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。選択範囲を使用した方法今回はサンプルとして、こちらの画像を使用します。まず、角丸にする加工を施す前に、対象のレイヤーが「通常のレイヤー」であるかを確認します。すでに用意してある画像を加工する場合、画像レイヤーは「背景レイヤー」であることがほとんどです。そこで、レイヤーパレット内で編集するレイヤーを右クリックし、「背景からレイヤーへ」を選択します。レイヤー名を入力し、「OK」を押します。ここでは最初から入力されている「レイヤー0」のままです。このレイヤー名は必要に応じ、変更していただいて構いません。 (カラー・描画モード・不透明度などは変更する必要はありません。) 先ほど設定した名前の通常レイヤーに変換されます。この作業をするのは、「背景レイヤー」のままだと画像の一部を切り抜いたときに、透過の処理ができないためです。角丸に切り取った後のバックを白色にする場合は、背景レイヤーのままでOKです。左のツールアイコンの選択範囲ツールを右クリックし、「長方形選択ツール」を選びます。すべてを選択、あるいは角丸の形で切り抜きたい部分を選択します。今回は以下の部分を選択しています。上下左右の縁の幅を揃えたい場合は、グリッドを表示させると便利です。上のメニューの「選択範囲」から「選択範囲を変更」→「滑らかに」を選びます。「半径」の数値を入力します。ここの数字が大きいほど角が丸くなり、小さいほど普通の直角に近くなります。今回は10pixelと設定しましょう。入力後「OK」を押すと、下のように選択範囲の形が変更されます。四隅が角丸の形になっていることが確認できます。田島悠介選択範囲を見るとどんな形になってるかな？大石ゆかりちゃんと角が丸くなってますね！田島悠介ここまできたら、あとはこの形に沿って切り抜くだけだね。次の手順に移ってみよう。「選択範囲」から「選択範囲を反転」をクリックします。これで枠内以外の縁の部分が選択されることになります。そのまま「編集」→「消去」を選択します。このように四隅が角丸になった状態で、最初に選択した部分が切り抜かれます。あとは「選択範囲」から「選択を解除」をクリックして完成です。角丸で切り抜かれた部分以外の場所は、透過の状態(何も描かれていない状態)になります。透過の部分は下にレイヤーを新規作成し、塗りつぶしや画像を入れると画像の後ろに反映されます。田島悠介設定する「半径」の数値によって形が変わるのを覚えておこう。数値が大きければ大きいほど丸い形になるんだ。大石ゆかり形の関係上、どうしても透過の部分ができてしまいますね。田島悠介角丸の外を残したい場合は、選択範囲から切り抜きではなく塗りつぶしを使うこともできるからね。大石ゆかりなるほど、ありがとうございます！ [PR] Webデザインで副業する方法とはクリッピングマスクを使用した方法つづいて、クリッピングマスクを使って写真を角丸にする方法です。今回はサンプルとして、こちらの画像を使用します。選択範囲での加工処理と同じく、加工対象のレイヤーの種類を確認します。角丸にする対象の画像が背景レイヤーの場合、通常のレイヤーに変換する必要があります。レイヤーパレット内で編集するレイヤーを右クリックし、「背景からレイヤーへ」を選択します。レイヤー名を入力し、「OK」を押します。ここでは「レイヤー0」としています。このレイヤー名は必要に応じ、変更していただいて構いません。 (カラー・描画モード・不透明度などは変更する必要はありません。) 先ほど設定した名前の通常レイヤーに変換されます。次に、画面左のツールパレットから「角丸長方形ツール」を選択します。ツールを選択した状態で、写真の上で切り抜きたいサイズにドラッグし、角丸長方形を作ります。ドラッグすると属性ツールが開くので、角丸のサイズを4辺ともに「40px」に調整します。次に、クリッピングマスクを作成するため、角丸長方形のレイヤーを写真レイヤーの下に移動します。そして写真レイヤーの上で右クリックし、開いたメニューから「クリッピングマスクを作成」を選びます。すると、写真が先ほど作成した角丸長方形の形に切り抜かれます。背景は透過になっているので写真の後ろに塗りつぶしレイヤーや画像を配置して、自由に加工できます。今回の記事は以上です。田島悠介選択範囲を使用した方法とクリッピングマスクを使用した方法、どちらの方法も使えるようになっておくといいよ。大石ゆかりどちらの方法で作業してもいいんですか〜？田島悠介いろいろなやり方があるから、自分に合うやり方を見つけていくのがいいと思うよ。大石ゆかりなるほど、ありがとうございます！執筆してくれたメンター mentor-s 専門学校卒業後、4年間ゲーム開発会社でプログラマーを担当。現在は講師兼個人ゲーム開発者。ゲーム開発ではプログラミングだけでなく、画像・音楽・モデリングなどすべて行う。もっとPhotoshopを使いこなしたい場合は、Photoshopで画像を左右反転にする方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop