Webデザインの基礎と実習

この授業では、実際にAdobe Photoshopを起動してWebサイトを制作する際のPhotoshopの使い方が学べます。3回連続で、基礎から基本操作や環境設定を学び、最終的にはバナー制作まで出来るようになっていることがゴールです。

PhotoshopによるWebデザインの基本操作は、バナー制作やWebページのデザインカンプ制作はもちろん、iPhoneアプリのデザインなどさまざまな分野で役に立つと思います。ぜひこの機会に身につけておきましょう!

詳細を開く
Webデザインの基礎と実習
2013年4月11日公開
01:30:00
  • 自己紹介&アジェンダ
  • 01:14
  • レイアウトの4原則
  • 09:46
  • 今日のテーマ スケッチしよう
  • 03:46
  • おさえておきたい色彩・配色の基礎
  • 00:07
  • 無彩色と有彩色
  • 01:00
  • 色相
  • 00:25
  • 彩度
  • 00:43
  • 明度
  • 00:22
  • HSB色空間とRGB色空間
  • 01:46
  • 16進数によるRGB色空間の表記
  • 03:36
  • どうすれば失敗なく色を選ぶことができるのか
  • 02:44
  • HSB色空間から色を選ぶ
  • 01:01
  • トーンを統一する
  • 01:53
  • トーンの統一例
  • 01:04
  • 異なるトーンの色を選ぶ場合
  • 01:26
  • HUE/360の使いかた
  • 03:55
  • ハレーションとは、またそれを防ぐには
  • 03:25
  • Adobeのアプリケーションの役割を覚えましょう
  • 00:09
  • Photoshopの特徴
  • 01:11
  • Illustratorの特徴
  • 02:20
  • Fireworksの特徴
  • 01:05
  • Dreamweaverの特徴
  • 00:47
  • 講座の今後の方針と予定
  • 03:49
  • Q:トーン=明度と彩度の組み合わせですか?
  • 00:22
  • Q:フォトショ、イラレ、FWでweb制作する上でのメリット、デメリットが知りたいです
  • 00:57
  • Q:自分をずっと持っている大きな夢を実現するために何が一番重要でしょうか。
  • 05:17
  • Q:センスにかなり出来栄えが左右されると思います。センスの磨き方は?
  • 01:07
  • Q:最近見つけた「このサイトいいな」と思ったサイトと、理由を教えて下さい
  • 02:00
  • Q:「手書きでスケッチ」とのことですが、どの程度までスケッチするのでしょうか?
  • 00:59
  • Q:webサイトを新規デザインするにあたって、まず何を第一に考えてデザインを決めているか教えて下さい
  • 01:01
  • Q:Photoshopは購入するものと、月額利用料を払って使用するものがありますが、今後webデザインを主な目的として使用するとしたら、どちらがおススメですか?
  • 04:05
  • Q:企業のサイトカラーをカラーピッカーで採取すると、全く同じトーンでなかったりすると思いますが、プロによる配色は最終的には感覚ですか?
  • 01:57
  • Q:ギャラリーで良いと思ったサイトをPhotshopで模写するよりも、「t手書きでスケッチ」のほうがデザインの勉強には有効なのですか?
  • 01:39
  • Q:デザイン設計の段階でSEO対策も同時に設計したりするのでしょうか?
  • 01:14
  • Q:webページをデザインする際に高画質が必要となってきていますが、Photshopでデザインする時のキャンバスサイズはいくつにしていますか?
  • 03:11
  • Q:web制作をする上でjavascriptの知識は必須ですか?
  • 04:47
  • Q:新しくサイトを作る場合、HTML&CSSとWordPressどっちが良いのでしょうか?
  • 02:45
  • Q:色々なデバイスが増えていますが、レスポンシブのウェブデザインの場合、デザイン段階からどんな点を留意して考えればいいですか?
  • 03:08
  • Q:サイトデザインを検討する上で、構成と配色、またはほかの、いずれかを優先した方が効率がいいですか?
  • 02:10
  • Q:schooのwebページのデザインの評価はどれくらいなのでしょうか?
  • 01:21
  • Q:見やすさや操作のしやすさを心がけるときに、どんなことを心がけますか?
  • 03:08
  • 課題発表
開く
Webデザインの基礎と実習
2013年4月18日公開
01:30:00
  • 自己紹介&アジェンダ
  • 00:51
  • PhotoShopの起動の仕方
  • 01:35
  • PhotoShopの環境設定
  • 03:01
  • pixelとは何か?
  • 03:23
  • キーボードショートカットを変更する
  • 04:00
  • 新しくカンバスを作成する
  • 03:16
  • 長方形を作ってみる
  • 03:31
  • サイズを指定して図形を描く
  • 02:35
  • 移動ツールの設定を調整する
  • 02:19
  • バウンディングボックスの操作
  • 04:11
  • 数値を指定して移動する
  • 03:46
  • 指定した位置に五つの正方形を描いてみる
  • 03:38
  • 複製して移動する
  • 04:10
  • ドラッグで移動する際の注意
  • 02:40
  • なぜPhotoshopがWebデザイン制作で使われるのか
  • 04:56
  • Homeボタンを制作してみる
  • 04:12
  • グラデーションをかける
  • 03:33
  • カラーコードを指定する
  • 04:33
  • 表面のざらつきを作る
  • 05:00
  • 境界線をかける
  • 02:42
  • ボタンの内側に影をつける
  • 02:55
  • 境界線の二重がけ
  • 04:26
  • テキストをつける
  • 04:03
  • 2つのレイヤーの中央を揃える
  • 04:53
  • 制作したHomeボタンを保存する
  • 06:04
  • Q:保存の時に訊かれる、互換性を優先のチェックのON/OFFはどんな時ですか
  • 00:35
  • Q:描写モードの簡単な特徴が知りたい!
  • 00:57
  • Q:PhotoShopに最初から登録されてる、ボタンのデザインを呼び出すような、機能はありませんでしょうか?
  • 01:35
  • Q:CS6以外で長方形のサイズを数値で指定するには、どうすればいいでしょうか?
  • 01:19
  • Q:ノイズを乗せる量に関しては、何か考え方があるのでしょうか?それとも感覚で決めてますか?
  • 00:42
  • Q:今回は色コードを指定して入力しましたが、実際の色選択はどのようにメインの色やグラデーションの中間色を選択されているのでしょうか?
  • 02:02
  • Q:覚えておくべきショートカットと、その覚え方の一覧などありますか?
  • 02:21
  • Q:さきほど紹介していただいた本を参考に勉強すれば、Webデザインの基礎はだいたい学ぶ事ができるのでしょうか?
  • 00:56
  • Q:フラットデザインって今回やったような立体感は無くなりますよね?実際はどんな感じになるのでしょうか
  • 01:11
  • Q:html5での制作は増えているのでしょうか?
  • 00:50
  • Q:書籍や授業のサイトで使われている写真の加工(現像)などはあるんですか?(Web制作用途として)
  • 01:28
  • 課題発表
開く
Webデザインの基礎と実習
2013年4月25日公開
02:00:00
  • 自己紹介&アジェンダ
  • 02:05
  • 素材のダウンロードと準備
  • 03:45
  • ガイドを引く
  • 04:13
  • 背景のグラデーションを作る
  • 03:04
  • カラー分岐点を調整する
  • 04:51
  • カーテン模様のテクスチャを作る
  • 04:35
  • フィルターをかける
  • 03:32
  • レイヤーの不透明度を調整する
  • 04:18
  • 文字「痩身モニター募集中」を作る
  • 03:24
  • 文字を移動させる
  • 02:21
  • 文字「お試し」を作る
  • 04:40
  • 表示を拡大・縮小する
  • 02:56
  • 文字「¥2,980」を作る
  • 04:47
  • 「¥」がWindowsでうまく入力できない場合
  • 00:30
  • 位置を調整する
  • 04:40
  • 文字「7/21まで」を作る
  • 04:50
  • 赤い丸を作り、文字を重ねる
  • 04:23
  • 2つのレイヤーの中央を揃える
  • 04:17
  • 文字にグラデーションをかける
  • 04:57
  • グラデーションの角度を調整する
  • 04:00
  • 文字「プライベートエステサロン」を作る
  • 03:40
  • 微調整をする
  • 03:25
  • 仕上げをする
  • 02:28
  • WEB用に保存する
  • 04:14
  • Q:普通にJPEGで保存とWeb用に保存のJPEGの違いってなんですか?
  • 00:49
  • Q:人の切り抜き方をちょっとだけ教えて欲しいです
  • 00:32
  • Q:参考までに枠線の作り方を教えて下さい
  • 01:23
  • Q:楕円ツールなどのストロークと、レイヤー効果の境界線では使い勝手などに違いはあるのでしょうか?
  • 01:48
  • Q:実務を想定した場合、バナー制作はどれほどの時間で仕上げるのでしょうか?
  • 01:27
  • Q:枠線を鉛筆ツールで作るとの事ですが、背景をコピーして塗りを0%、境界線(内側)のレイヤー効果を付ける方法でも同じ効果を付けられるのでしょうか?
  • 01:18
  • Q:印刷用には何で保存したら良いでしょうか?
  • 01:45
  • Q:既に発売されている先生の書籍を教えて下さい。またPhotoshopのオススメの書籍を教えて下さい
  • 02:53
  • Q:バナーの画像制作で分かり易くしたり、見やすくしたりする場合に、心がけることは何ですか?
  • 02:59
  • Q:実際の制作現場ではクライアントの急な変更を想定して、バナーを指定より大きめのサイズで作っておいた方がいいのでしょうか?
  • 02:45
  • Q:スマートフォンの対応について、コンテンツによって違うと思いますが、一般的な対応と今後の見通しはどうなっていくでしょうか?
  • 02:01
  • Q:WebデザイナーのためのWebプログラミングスクールはされる予定はないですか?
  • 01:35
  • Q:新規でキャンパスを開く時、プリセットはWebを選べばよいですか?その際の「Web」や「カスタム」などの違いは何ですか?
  • 02:30
  • 課題発表
開く