おためし受講中

Webデザインの基礎と実習

この授業は実際に手を動かしながら、つまりPhotoshopを起動して、受講者の皆様にも実際に制作をして頂くタイプの授業となります(実習は2週目、3週目のみ)。

Webデザインに興味はあるけどやったことはないという方はもちろん、実際の作業を見ることで、既にWebデザイナーとして活躍されている方も新しい発見があるかもしれません。

授業は全3回で構成します。

1週目はWebデザインの基礎知識についてお話しします。2週目は、WebデザインのためのPhotoshopの環境設定と基本操作、Webボタンの制作となり、3週目は広告バナーの制作方法についてお話しします。

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

参考サイト/予習教材

学生代表

  • 未定

    未定

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    00:51  (00:23 ~ )
    PhotoShopの起動の仕方
    01:35  (01:14 ~ )
    PhotoShopの環境設定
    03:01  (02:49 ~ )
    pixelとは何か?
    03:23  (05:50 ~ )
    キーボードショートカットを変更する
    04:00  (09:13 ~ )
    新しくカンバスを作成する
    03:16  (13:13 ~ )
    長方形を作ってみる
    03:31  (16:29 ~ )
    サイズを指定して図形を描く
    02:35  (20:00 ~ )
    移動ツールの設定を調整する
    02:19  (22:35 ~ )
    バウンディングボックスの操作
    04:11  (24:54 ~ )
    数値を指定して移動する
    03:46  (29:05 ~ )
    指定した位置に五つの正方形を描いてみる
    03:38  (32:51 ~ )
    複製して移動する
    04:10  (36:29 ~ )
    ドラッグで移動する際の注意
    02:40  (40:39 ~ )
    なぜPhotoshopがWebデザイン制作で使われるのか
    04:56  (43:19 ~ )
    Homeボタンを制作してみる
    04:12  (48:15 ~ )
    グラデーションをかける
    03:33  (52:27 ~ )
    カラーコードを指定する
    04:33  (56:00 ~ )
    表面のざらつきを作る
    05:00  (1:00:33 ~ )
    境界線をかける
    02:42  (1:05:33 ~ )
    ボタンの内側に影をつける
    02:55  (1:08:15 ~ )
    境界線の二重がけ
    04:26  (1:11:10 ~ )
    テキストをつける
    04:03  (1:15:36 ~ )
    2つのレイヤーの中央を揃える
    04:53  (1:19:39 ~ )
    制作したHomeボタンを保存する
    06:04  (1:24:32 ~ )
    【後半】質疑応答
    Q:保存の時に訊かれる、互換性を優先のチェックのON/OFFはどんな時ですか
    00:35  (1:31:46 ~ )
    Q:描写モードの簡単な特徴が知りたい!
    00:57  (1:32:21 ~ )
    Q:PhotoShopに最初から登録されてる、ボタンのデザインを呼び出すような、機能はありませんでしょうか?
    01:35  (1:33:18 ~ )
    Q:CS6以外で長方形のサイズを数値で指定するには、どうすればいいでしょうか?
    01:19  (1:34:53 ~ )
    Q:ノイズを乗せる量に関しては、何か考え方があるのでしょうか?それとも感覚で決めてますか?
    00:42  (1:36:12 ~ )
    Q:今回は色コードを指定して入力しましたが、実際の色選択はどのようにメインの色やグラデーションの中間色を選択されているのでしょうか?
    02:02  (1:36:54 ~ )
    Q:覚えておくべきショートカットと、その覚え方の一覧などありますか?
    02:21  (1:38:56 ~ )
    Q:さきほど紹介していただいた本を参考に勉強すれば、Webデザインの基礎はだいたい学ぶ事ができるのでしょうか?
    00:56  (1:41:17 ~ )
    Q:フラットデザインって今回やったような立体感は無くなりますよね?実際はどんな感じになるのでしょうか
    01:11  (1:42:13 ~ )
    Q:html5での制作は増えているのでしょうか?
    00:50  (1:43:24 ~ )
    Q:書籍や授業のサイトで使われている写真の加工(現像)などはあるんですか?(Web制作用途として)
    01:28  (1:44:14 ~ )
    課題発表
      (1:45:42 ~ )