PREMIUM
第1回
Webサイトに配置する画像素材を作るためのPhotoshop基礎
2014年5月29日 30min
スライド資料
授業の概要
【WEBデザインのためのPhotoshop】全3回の1回目です。
【HTMLとCSSを使って、150分で簡単なWEBサイト制作】で完成した、webページに設置する画像を作っていきます。
WebデザインのためのPhotoshop
Photoshopは、Adobe社が提供する、画像処理ソフトウェアです。Webデザインが初めてでも、写真やデザインに興味がある方であればその名前は一度は聞いたことがあるのではないでしょうか？
もしPhotoshopを使ったことがある方でもWebサイトをデザインする際には、Webデザインをするための設定をしていく必要があります。この授業では、WebデザインのためのPhotoshopの環境webページに設置する画像制作の技術をadobe Photoshopを使って習得します。
■ 授業でデザイン〜コーディングしていっている仕様書
大きなトップ画像３枚は6月17日より始まる【jQueryの基礎を理解する】の授業で設置するカルーセル（画像がスライドする仕組み）になり、小さなサムネールは、同じく【jQueryの基礎を理解する】で設置するライトボックス（サムネール画像をクリックしたら大きな画像がポップアップする仕組み）のトリガーになります。
webデザイナー科目入門編は、この全3回シリーズの後、「jQueryの基礎を理解する全6回」を経て、最後にの【HTMLとCSSを使って、150分で簡単なWEBサイト制作全６回】の6回目で修了となります。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。
途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全３回】の事前受講をオススメします。
サイト制作の大まかな流れは、下記の様な物になります。
１）クライアント（お客様）へのヒヤリング
２）ターゲット設定
３）サイト設計（ワイヤーフレーム）
４）制作仕様書策定（デザインルール、コーディングルール策定）
５）開発（デザイン＆コーディング）
６）ローカルテスト
７）テストサーバーレビュー（クライアントチェック）
８）リリース（本サーバーアップ）
９）ランニング（SEO解析）
この演習では、5番の開発の部分です。
ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。
受講にあたって準備するもの
１）adobe DreamWeaverCC
下記のurlより、ダウンロードしてください。
DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は１ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)
・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入っている事が望ましいです。
・windowsXPをお使いの方はサービスパック３(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。
・初めてDreamWeaverに触れる人は、以下の公式サイトのトレーニングビデオやチュートリアルをを見てDreamWeaverの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。DreamWeaverではどんな事ができるか知っておきましょう。
【DreamweaverでWebページを作成する方法】
【Learn Dreamweaver CC】（Adobe TVのDreamweaverチュートリアル）
【Dreamweaver ヘルプ】
【Dreamweaver CC の一般的なキーボードショートカット】
