chevron_left

WebデザインのためのPhotoshop基礎
PREMIUM
第3回

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

2014年6月5日 30min
WebデザインのためのPhotoshopを使った画像加工のポイント【補習アリ】 play_arrow おためし受講

スライド資料

会員登録して、全てのスライドを見よう

1 / 6

授業の概要

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

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

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

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

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

【HTMLとCSSを使って、150分で簡単な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 の一般的なキーボードショートカット】

担当の先生／パーソナリティ

チャプター

play_arrow
【前半】授業
00:00
play_arrow
自己紹介＆アジェンダ
02:13
play_arrow
Photoshopの機能スライスで切り出す為のガイド設定方法
03:40
play_arrow
スライスツールで画像を切り出す方法
01:30
play_arrow
スライスオプションで指定した範囲を選択しよう
04:30
play_arrow
Web用に保存するには？
04:23
play_arrow
なぜスライスをするのか？
04:12
play_arrow
Ｑ：スライスでの書き出しで、gifでは書き出しはしないのでしょうか？
02:24
play_arrow
Ｑ：田中先生、ガイドを引く時マウス派ですか？トラックパッド派ですか？
00:55
play_arrow
Ｑ：Light Boxの表示サイズですが、縦と横の画像が混在する場合は、どれくらいのサイズが最適ですか？
01:21
play_arrow
Ｑ：Photoshopではなくても、スライス出来るツールなどありますか？
02:12
play_arrow
レポート課題発表