CodeCamp（コードキャンプ）のデザインマスターコースレビュー・感想｜3日目

こんにちは。コードキャンプ株式会社が運営するプログラミングスクール「CodeCamp（コードキャンプ）」でプログラミングを学習している永尾です。

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

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

私が受けているコースは「デザインマスターコース」です。HTML/CSSなどWebデザインを行う上では欠かせないコーディングの知識に加えて、PhotoshopやIllustratorの使い方までマスターできる内容です。

引用：CodeCamp（コードキャンプ）

受講回数は2ヶ月（20回）、4ヶ月（40回）、6ヶ月（60回）の３つから選べます（今回は2ヶ月間受講します）。

引用：CodeCamp（コードキャンプ）

さらに、CodeCamp（コードキャンプ）の「デザインマスターコース」には厚生労働省の「教育訓練給付制度」が適用されるため、最大6万円のキャッシュバックが受けられる可能性もあり、非常にお得です！！

引用：CodeCamp（コードキャンプ）

それでは、2018年10月6日に受講した、Codecamp（コードキャンプ）「デザインマスターコース」第3回目の学習内容をレビューします。

デザインマスターコース3日目｜CodeCamp（コードキャンプ）

本日の講師：中村淑子先生

講師業を始めてから20年以上。ウェブデザインの初級・中級科の職業訓練指導員を主に行いながら、商工会のパソコン教室・各セミナーなどを多数担当してまいりました。本業は、マーケティングやSEO対策なども含めたWebディレクター兼Webデザイナーです。HTML/CSS/bootstrap を使ったコーディング。JavaScript/jQuery/PHPプログラムを使った。トータルでのサイト作成を行なっています。

制作実績は主にクライアント様のご要望の多いWordpressでの構築を合わせて大小50サイト以上の実績があります。プラグインやテーマも自作で作ります。

引用：CodeCamp（コードキャンプ）

第3回目のレッスンで学んだことは以下の内容です。

1.課題（画像合成）のチェック

今回は、事前に第９章課題（画像合成）の課題を作成していたので、それについての質問をしていきます。

以下が第９章の課題です。

第９章の課題

これに対して、僕が作成した画像がこちらです。

完成サンプルとは微妙に違いがありますが、いい感じにできたのではと個人的に思ってます。

すごい！上手にできてますね。車輪のマスクを忘れずにできていて素晴らしいです

課題の画像では写真にテープを張っているのですが、このテープって簡単に作れますか？

このテープはおそらくIllustratorで作っていますね。テープの端のギザギザの部分はIllustratorだと簡単に再現できるのですが、Photoshopだけでキレイに表現するのは少し難しいです。

方法としてはシェイプで長方形の形を作って、「フィルター」からノイズやぼかしで調整するとそれっぽいのができるかと思います。

そうなんですね！あまり使わなそうなので、そこは今回はスキップします。先生から見て僕の課題で何か気になる点はありますか？

そうですね、猫に影の部分をつけると良いかと思います。課題の画像にも影が入ってますよね。

第９章課題（画像合成）

画像に影を入れることはよくあるので、簡単にできますので覚えておくといいですよ。

影を入れる方法知りたいです！

2.第２章物体に影を入れる方法

それでは物体に影を入れる方法を順番に説明しますね。

まずは、猫の下に灰色で形を作ります。投げ縄ツールか、シェイプの楕円を使うと良いでしょう。

灰色で形を作っている

次に「フィルター」→「ぼかし（ガウス）」を選択してあげると、半径の値を調整できるので数字を変化させます。

影のぼかしを調整している

これで影っぽくなりました。後は影の形や色を調整して、影の完成度を高めていきます。

すごい、本当に影ができました。でも自然な影を作ろうとすると難しいですね。後で何回か練習します。

3.画像の延長方法

一つ僕から質問させてください。

このように画像の右端が空いている場合に、Photoshopでは画像を右側に延長できると聞いたのですが、どうすればできるかわかりません。

それは「編集」→「塗りつぶし」→「コンテンツに応じる」を選択すれば可能ですが、もしかすると違和感のが出てしまうかもしれませんね。でも役に立つ機能なのでやってみましょう。

空いているスペースを選択

まずは、空いているスペースを選択します。今回だと長方形が最適です。

「コンテンツ」に応じるを選択

次に「編集」→「塗りつぶし」→「コンテンツに応じる」を選択してOKを押します。今あるコンテンツが選択した範囲に延長されます。

キレイに空が延長されましたね。今回くらいの大きさのスペースだとキレイに延長されましたが、半分ほどスペースが空いていると、違和感が出てくることが多いんです。

今回は「空」のような均一な素材だったのでうまく画像が延長できたようです。逆に画面下の木や花の部分は少し違和感のある仕上がりになってますね。

確かに画像右下に紫の部分がめちゃくちゃ増えてます。でも空は違和感なく広がってますね。

デザインマスターコース3日目の成果と課題｜CodeCamp（コードキャンプ）

第3回を受講して学んだことと、次回に向けた課題について整理します。

次回課題はPhotoshopの最終課題です。コンセプトシートに沿って以下のようなWEBサイトをデザインしていきます。

ただし完成までに時間がかかりそうなので、次回のクラスはPhotoshopではなくJavaScriptを受講し、最終課題が完成したら、再度Phoshopのレッスンを受講する予定です。

デザインマスターコース3日目の感想｜CodeCamp（コードキャンプ）

今回は３回目のレッスンでした。Photoshopの教科書はサクサク進めるられ、私の場合は次回のクラスと合わせると４回で終了できるようです。

ただ、レッスンを受けるだけでは、Photoshopの技術が向上している気がしないので、自分でどんどんいろんな画像を加工して練習したいと思います。

また、「猫に影をつける方法」や「女性の肌をキレイに見せる方法」など、より実践的な方法を用途に合わせて覚えて行く必要があるなと感じました。

色々、書籍やネットで調べて随時テクニックを身につけていきたいです。

CodeCampの無料体験を申し込む

CodeCamp（コードキャンプ）の「デザインマスターコース」とは

CodeCamp（コードキャンプ）の「デザインマスターコース」は、Webデザイナーになるために必要な知識を基礎から実践まで学べるコースです。

＞＞無料体験レッスン受講で10,000円OFFクーポンプレゼントキャンペーン実施中

引用：CodeCamp（コードキャンプ）

CodeCamp（コードキャンプ）「デザインマスターコース」の料金

CodeCampの無料体験を申し込む