2020/07/11 17:18

webデザイン入門 <前編> | Photoshopことはじめオンライン講座【アーカイブ】

-

[概要]

PhotoshopAdobe XDを使ってwebデザインをはじめてみましょう!ワークフローやAdobe XDとPhotoshopとの連携を中心に、Photoshopが活きるダイナミックなグラフィックを伴う飲食店のウェブサイトを制作していきます。

[目次]
【0;00;20】 本日の内容~Adobe XD について
【0;03;27】 Webデザイン入門(前編)~今日のテーマ
【0;04;39】 ウェブサイトはどのように作るか
【0;07;54】 ウェブデザインのサンプル(Adobe Dreamweaver)~アップロード
【0;12;03】 これだけは用意しよう
【0;14;14】 まず必要な知識
【0;15;26】 Photoshopでのウェブデザイン
【0;24;06】 なぜ不便なコトが出てきたのか?
【0;27;04】 Adobe XD とは
【0;28;34】 XD でのウェブデザイン
【0;29;48】 XDと絡めたウェブデザイン~デザインの流行
【0;32;37】 今日の作業範囲について
【0;33;19】 完成データの確認
【0;34;06】 XD の起動~長方形の作成
【0;37;35】 文字の入力(テキストツール)
【0;39;27】 繰り返し(リピートグリッド)
【0;42;11】 アセットの登録
【0;45;36】 保存
【0;47;08】 完成データの確認~Photoshop で画像補正(レンズ補正)
【0;49;33】 XDでPhotoshopファイルを使う(CCライブラリ)
【0;52;43】 レイヤーマスクを追加~グラデーションツール
【0;56;25】 ロゴの配置
【0;57;31】 レイヤースタイルを適用~カラーモードの変更
【0;59;23】 画像解像度の調整
【1;00;57】 XD に画像を配置する
【1;03;54】 Illustrator のロゴを配置する
【1;05;17】 見出し画像の作成(Photoshop)~画像解像度の調整
【1;08;55】 不要な部分を削除(スポット修復ブラシツール、パッチツール)
【1;14;13】 画像のサイズを調整する(切り抜きツール)
【1;15;24】 被写体を切り抜く(選択とマスク)
【1;17;50】 XD に見出し画像を配置する~背景色の変更
【1;19;49】 その他の画像の配置
【1;21;24】 ロゴの複製とフッターの調整
【1;23;38】 Q&A_Webデザイン業界でよく使用されるOSは?
【1;25;23】 Q&A_Photoshopをどれぐらい使えたら就職できますか?
【1;26;09】 リンク機能の確認


講座で使用するサンプルデータは下記よりダウンロードしてください。
Photoshop_Seminar07_sample.zip(51.6MB)

※サンプルデータは、個人の練習用としてお使いください。その他の目的での使用や配布などはご遠慮ください。

【CCLibrary(期間限定)】
https://assets.adobe.com/public/3245178e-6fe4-4407-589a-e10031aa1ade

【xdのプロトタイプ(期間限定)】
https://xd.adobe.com/view/61459198-921d-4193-ab7d-15dd642b4503-3416/?fullscreen


Adobe XD 製品情報
https://www.adobe.com/jp/products/xd.html

Adobe XD ダウンロードhttps://creativecloud.adobe.com/apps/download/xd


Copyright © 2020 Adobe Systems Incorporated. All rights reserved.