CodeCamp(コードキャンプ)のデザインマスターコースレビュー・感想|16日目

WEBデザインを学びたいと考えていても、「Photoshopの機能が多すぎて使いこなせない」「プログラミングが自分にできるかわからない」など、自分で学習を進めることに不安を持つ人は多いはず。

そんな悩みを持つ方は、オンラインでWEBデザインに関するレッスンが受けられるCodeCamp(コードキャンプ)のデザインマスターコースの受講を検討してみてください。

この記事では、CodeCamp(コードキャンプ)のデザインマスターコースを実際に受講した様子を紹介しています。今回は2018年11月10日に受けた第16回目の学習内容です。WEBデザインについて学びたいと考えている方は参考にしてください。

永尾圭
初めまして。永尾圭と申します。

オンラインでプログラミングのレッスンが受けられるコードキャンプでは、現在7種類の講義を扱っています。おしゃれなWEBサイトを作ってみたいと思っていた私は、7種の講義の中でも、PhotoshopやIllutrator、HTML &CSS、さらにはJavaScriptまで学習できる「デザインマスターコース」を受講することにしました。

CodeCamp(コードキャンプ)のデザインマスターコースとは

CodeCamp(コードキャンプ)のデザインマスターコースは、未経験の方がwebデザイン・制作スキルを身につけることを目的としたコースです。プログラミング初心者を対象としているため、写真加工・画像作成ツールによる素材作成から、webサイトのデザインやレイアウトを調整し、魅力的に表現するスキルまで、1つのwebサイトを様々な大きさの画面で綺麗に見せるための「レスポンシブデザイン」を学びます。

また、HTML &CSSを用いたコーディングのスキルも身につけられるため、スキルアップしたいデザイナーの方にもおすすめです。

デザインマスターコースの時間・料金プランは以下の通りです。

2ヶ月
  • 料金:148,000円(税抜)
  • レッスン回数:20回
  • 受講期間:60日間
  • 週の学習時間目安:20〜25時間
4ヶ月
  • 料金:248,000円(税抜)
  • レッスン回数:40回
  • 受講期間:120日間
  • 週の学習時間目安:10〜15時間
6ヶ月
  • 料金:298,000円(税抜)
  • レッスン回数:60回
  • 受講期間:180日間
  • 週の学習時間目安:5〜10時間

今回は2ヶ月のスケジュールで学習を進めていきます。

それでは、16日目の様子をお伝えします。

デザインマスターコース16日目|CodeCamp(コードキャンプ)


本日の講師:栗山 浩一(くりやまこういち)先生
都内近郊でWebサイトの企画・デザインのお仕事をしています。
また、PHPを中心に企業の技術研修の講師もしています。
プログラミングのことだけでなく、サイト制作のお仕事内容についても質問をどうぞ!特に、見やすくてわかりやすいWebページの作り方に興味のある人には、いろいろなワザを教えちゃいます。

引用:CodeCamp(コードキャンプ)

CodeCamp(コードキャンプ)Webマスターコース第16回目のレッスン内容

  • 髪の毛の選択方法
  • 選択とマスク

1.髪の毛の選択方法

永尾圭
栗山先生、本日はよろしくお願いします。今回はPhotoshopのを使っての範囲の選択方法について指導していただけたらと思います。
栗山浩一
わかりました。何か使いたい題材などはございますか?

永尾圭
はい!ちょうど先日女性の画像を切り抜いていたのですが、髪の毛のあたりを選択するのが非常に難しく、どうすれば綺麗に選択できるかご指導いただきたいです。

切り抜きたい女性の画像

栗山浩一
わかりました。見た感じそんなに難しくはなさそうですね。切り抜きの難易度としては中級くらいでしょうか。

切り抜きの手順は人によって様々だと思うので、まずは私のやり方で解説しますね。それではまず自動選択ツールを使ってで背景の部分をクリックしてください。

自動選択ツールを使用

永尾圭
頭の部分はいい感じに選択できていますが、洋服の部分がうまく選択できていないようです。

栗山浩一
そうですね。そんな場合はクリック選択ツールを使い、左上の「現在の選択範囲から一部削除」を押してください。これで余分な選択範囲を消すことができます

余分な選択範囲を除去

永尾圭
こんな感じでよろしいでしょうか?

栗山浩一
綺麗に選択できてますね。ただし今の状態だと背景を選択していることになっているので、選択範囲メニューから「選択範囲を反転」クリックしましょう。そうすると背景ではなく対象物が選択されます。

選択範囲を反転

栗山浩一
これで、大まかにですが女性の部分を選択できました。ここからは根気の勝負になってきます。あとは髪の毛の間など細かいところを手作業で削っていきます。

永尾圭
もうここから手作業になるんですか。

栗山浩一
そうですね。Photoshopはバージョンアップを繰り返し便利にはなりましたが、まだまだ人の力が必要なところはあります。

具体的にどのような作業をするか説明しますね。まずは選択範囲メニューから、「選択範囲を保存」をクリックしてください。

次に、画面右のチャンネルパネルをクリックし、アルファパネルを選択すると選択範囲外が色づけされた画面になります。

アルファパネル

永尾圭
これはわかりやすいですね。後は髪の毛の間の白い部分を消していけばいいということですか?

栗山浩一
そういうことです。ブラシツールで消したい部分を擦ると、背景尺と同じ色がついてくれます。少しやってみましょう。

選択範囲に変更前

永尾圭
細かい部分はこうやって選択していくんですね。ですがかなり時間がかかりそうです。

栗山浩一
そうなんです。ここはもうしょうがない部分ではありますね。私の友人はアフロの女性の画像の髪の毛を一つひとつ根気よく選択していました。

納得いくまで白の部分を消せたら選択範囲メニューから「選択範囲を読み込む」を押すと、色をつけた部分が選択範囲に変わります。

選択範囲に変更

2. 選択とマスク

栗山浩一
もう一つ、髪の毛の選択に便利な機能があるので紹介しますね。

なんでもいいので選択ツールを選び画面上部にある「選択とマスク」を押してください。

選択とマスク

栗山浩一
これで画像を切り取った後の状況がわかります。次に左にあるブラシツールを使って髪の毛のあたりを擦ってみてください。

ブラシツールで擦る前

ブラシツールで擦った後

永尾圭
すごい!髪の毛だけ残して背景を消してくれています。

栗山浩一
そうなんです。選択とマスクを使うと、対象物と背景を自動で判別してくれ人物の選択がかなり楽になるんです。

永尾圭
なんでこの機能を初めから使わなかったのですか?

栗山浩一
光の反射の影響で色が薄く映っている髪の毛も除去されてしまうので、必要なものも消してしまうことがあるんです。なので選択とマスクのこの機能は注意が必要です。あまり細かく選択しなくていいのであれば非常に有効な機能ですね。

選択とマスクを使った選択範囲

永尾圭
これだけ細かく選択できていたら、僕にとっては十分な気がします。こんないい機能があったんですね。

栗山浩一
そうですね。先ほども言いましたが、Photoshopはなんどもバージョンアップしているので、バージョンアップの新機能を随時チェックし、従来の作業を何か変えられるか確認するようにしてください。

デザインマスターコース16日目の成果と課題|CodeCamp(コードキャンプ)

第16回のレッスンで学んだ内容を整理します。

  • 髪の毛の選択方法
  • 選択とマスク

今回はPhotoshopの選択範囲の機能について学習しました。

次回はIllustratorの最終課題についてチェックをしてもらいます。

デザインマスターコース16日目の感想|CodeCamp(コードキャンプ)

今回のレッスンでは、物体の選択の仕方についてご教授いただきました。

プロの方がどのようにPhotoshopを使っているかを見るだけでも学びが多く、自分の作業にも活かすことができます。

実際に自分が作業しているところを見てもらい、改善点を指摘してもらうのもありかなと思いました。

次回のIllustratorのレッスンでも、自分のツールの使い方に問題ないかチェックしていただく予定です。