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

無料でプログラミングを体験できます

下のリンクよりお申し込み頂けます。お申し込みから受講までオンラインで完結。開発環境は必要無し。パソコンとネット環境があればお試し可能です。

エンジニアと1対1のライブ講義を体験する 

1週間カリキュラムを体験する 

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

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

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

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

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

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

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

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

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

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

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

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

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

CodeCamp(コードキャンプ)デザインマスターコース第3回目のレッスン内容

  1. 課題(画像合成)のチェック

  2. 物体に影をつける方法

  3. 画像の延長方法

1.課題(画像合成)のチェック

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

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

第9章の課題

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

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

中村淑子先生
すごい!上手にできてますね。車輪のマスクを忘れずにできていて素晴らしいです
永尾圭
課題の画像では写真にテープを張っているのですが、このテープって簡単に作れますか?
中村淑子先生
このテープはおそらくIllustratorで作っていますね。テープの端のギザギザの部分はIllustratorだと簡単に再現できるのですが、Photoshopだけでキレイに表現するのは少し難しいです。

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

永尾圭
そうなんですね!あまり使わなそうなので、そこは今回はスキップします。先生から見て僕の課題で何か気になる点はありますか?
中村淑子先生
そうですね、猫に影の部分をつけると良いかと思います。課題の画像にも影が入ってますよね。

第9章課題(画像合成)

中村淑子先生
画像に影を入れることはよくあるので、簡単にできますので覚えておくといいですよ。
永尾圭
影を入れる方法知りたいです!

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

中村淑子先生
それでは物体に影を入れる方法を順番に説明しますね。

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

灰色で形を作っている

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

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

中村淑子先生
これで影っぽくなりました。後は影の形や色を調整して、影の完成度を高めていきます。
永尾圭
すごい、本当に影ができました。でも自然な影を作ろうとすると難しいですね。後で何回か練習します。

3.画像の延長方法

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

永尾圭
このように画像の右端が空いている場合に、Photoshopでは画像を右側に延長できると聞いたのですが、どうすればできるかわかりません。
中村淑子先生
それは「編集」→「塗りつぶし」→「コンテンツに応じる」を選択すれば可能ですが、もしかすると違和感のが出てしまうかもしれませんね。でも役に立つ機能なのでやってみましょう。

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

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

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

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

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

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

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

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

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

  • 課題のチェック
  • 物体に影をつける方法
  • 画像の延長方法

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

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

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

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

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

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

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

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

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

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

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

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

LINE@無料相談

無料で相談する

編集部がプログラミングスクール選びのアドバイスをさせて頂きます。「スクールがたくさんあり過ぎてどれを選べば良いのか分からない」「どの言語を勉強すれば良い?」「転職に有利なスクールはどこ?」など、どんな質問でもOKです!気軽にご連絡ください★