10/15(Tue)

今日の生放送

【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】

【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】

コース概要

1限目 Webサイトに配置する画像素材を作るためのPhotoshop基礎

【WEBデザインのためのPhotoshop】全3回の1回目です。
【HTMLとCSSを使って、150分で簡単なWEBサイト制作】で完成した、webページに設置する画像を作っていきます。

WebデザインのためのPhotoshop

Photoshopは、Adobe社が提供する、画像処理ソフトウェアです。Webデザインが初めてでも、写真やデザインに興味がある方であればその名前は一度は聞いたことがあるのではないでしょうか?

もしPhotoshopを使ったことがある方でもWebサイトをデザインする際には、Webデザインをするための設定をしていく必要があります。この授業では、WebデザインのためのPhotoshopの環境webページに設置する画像制作の技術をadobe Photoshopを使って習得します。

田中晶子


■ 授業でデザイン〜コーディングしていっている仕様書

大きなトップ画像3枚は6月17日より始まる【jQueryの基礎を理解する】の授業で設置するカルーセル(画像がスライドする仕組み)になり、小さなサムネールは、同じく【jQueryの基礎を理解する】で設置するライトボックス(サムネール画像をクリックしたら大きな画像がポップアップする仕組み)のトリガーになります。

 

2限目 WebサイトでTOP画像をより効果的に見せるためのPhotoshop基礎

【WEBデザインのためのPhotoshop】全3回の2回目です。

1回目のビルボード(TOP画像)制作で提出いただいた課題を添削していきます。ここではwebページに設置するビルボードをより効果的に見せる手法を詳しく説明していきます。このビルボードはこの後来る 【jQueryの基礎を理解する】の授業で学ぶ、カルーセル(画像がスライドする仕組み)になります。

 

 

3限目 WebデザインのためのPhotoshopを使った画像加工のポイント【補習アリ】

【WEBデザインのためのPhotoshop】全3回の最終回です。

【jQueryの基礎を理解する】の授業で学ぶ、LightBoxでポップアップする画像と、トリガーになるサムネールを制作する授業になります。最終回ですので、復習をかねて画像加工のポイントを説明します。

サムネール:画像を一覧表示する際に縮小された画像のことを指します。画像を一覧で並べたいけれど、画像が大きくて表示出来ないなどというときにサムネール表示をします。
また、サイトのロゴやマークはPhotoshopを使うべきなのかIllustratorを使うべきなのか迷うところ。それぞれのツールの使い所をお話していきます。

 

 

 

 

事前に予習しておくと良い授業

【HTMLとCSSを使って、150分で簡単なWEBサイト制作】
【WEBデザインに必要なワイヤーフレーム全3回】

をご覧になる事をオススメします。

 

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。

 

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。
 

受講にあたって準備するもの

1)adobe DreamWeaverCC
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/dreamweaver
DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)
 
・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。
http://helpx.adobe.com/jp/creative-cloud/kb/cpsid_93693.html
 
・初めてDreamWeaverに触れる人は、以下の公式サイトのトレーニングビデオやチュートリアルをを見てDreamWeaverの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。DreamWeaverではどんな事ができるか知っておきましょう。
 
【DreamweaverでWebページを作成する方法】
https://helpx.adobe.com/jp/creative-cloud/learn/start/dreamweaver.html
 
【Learn Dreamweaver CC】(Adobe TVのDreamweaverチュートリアル)
http://tv.adobe.com/show/learn-dreamweaver-cc/
 
【Dreamweaver ヘルプ】
https://helpx.adobe.com/jp/dreamweaver.html
 
【Dreamweaver CC の一般的なキーボードショートカット】
http://download.macromedia.com/pub/learn/start/jp/start_jp_dreamweaver_cheatsheet.pdf

担当の先生

参加したい受講生 : 528

月額980円で、4,600本以上の授業が見放題

授業リスト

【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】

2014年7月24日公開

92min.

[終了]生放送限定

1限目 Webサイトに配置する画像素材を作るためのPhotoshop基礎

【WEBデザインのためのPhotoshop】全3回の1回目です。
【HTMLとCSSを使って、150分で簡単なWEBサイト制作】で完成した、webページに設置する画像を作っていきます。

WebデザインのためのPhotoshop

Photoshopは、Adobe社が提供する、画像処理ソフトウェアです。Webデザインが初めてでも、写真やデザインに興味がある方であればその名前は一度は聞いたことがあるのではないでしょうか?

もしPhotoshopを使ったことがある方でもWebサイトをデザインする際には、Webデザインをするための設定をしていく必要があります。この授業では、WebデザインのためのPhotoshopの環境webページに設置する画像制作の技術をadobe Photoshopを使って習得します。

田中晶子


■ 授業でデザイン〜コーディングしていっている仕様書

大きなトップ画像3枚は6月17日より始まる【jQueryの基礎を理解する】の授業で設置するカルーセル(画像がスライドする仕組み)になり、小さなサムネールは、同じく【jQueryの基礎を理解する】で設置するライトボックス(サムネール画像をクリックしたら大きな画像がポップアップする仕組み)のトリガーになります。

 

2限目 WebサイトでTOP画像をより効果的に見せるためのPhotoshop基礎

【WEBデザインのためのPhotoshop】全3回の2回目です。

1回目のビルボード(TOP画像)制作で提出いただいた課題を添削していきます。ここではwebページに設置するビルボードをより効果的に見せる手法を詳しく説明していきます。このビルボードはこの後来る 【jQueryの基礎を理解する】の授業で学ぶ、カルーセル(画像がスライドする仕組み)になります。

 

 

3限目 WebデザインのためのPhotoshopを使った画像加工のポイント【補習アリ】

【WEBデザインのためのPhotoshop】全3回の最終回です。

【jQueryの基礎を理解する】の授業で学ぶ、LightBoxでポップアップする画像と、トリガーになるサムネールを制作する授業になります。最終回ですので、復習をかねて画像加工のポイントを説明します。

サムネール:画像を一覧表示する際に縮小された画像のことを指します。画像を一覧で並べたいけれど、画像が大きくて表示出来ないなどというときにサムネール表示をします。
また、サイトのロゴやマークはPhotoshopを使うべきなのかIllustratorを使うべきなのか迷うところ。それぞれのツールの使い所をお話していきます。

 

 

 

 

事前に予習しておくと良い授業

【HTMLとCSSを使って、150分で簡単なWEBサイト制作】
【WEBデザインに必要なワイヤーフレーム全3回】

をご覧になる事をオススメします。

 

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。

 

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。
 

受講にあたって準備するもの

1)adobe DreamWeaverCC
下記のurlより、ダウンロードしてください。
DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)
 
・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。
 
・初めてDreamWeaverに触れる人は、以下の公式サイトのトレーニングビデオやチュートリアルをを見てDreamWeaverの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。DreamWeaverではどんな事ができるか知っておきましょう。
 
【DreamweaverでWebページを作成する方法】
 
【Learn Dreamweaver CC】(Adobe TVのDreamweaverチュートリアル)
 
【Dreamweaver ヘルプ】
 
【Dreamweaver CC の一般的なキーボードショートカット】

スライド資料

プレミアム生放送

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ