2020/08/19 11:54

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

-

[概要]

PhotoshopAdobe XDを使ってwebデザインをはじめてみましょう!
XDに加えて、後半はDreamweaverを使ってHTMLやCSSの簡単なコードを書いてみます。コードの役割を交えながら、ウェブデザインならではのデザイン上の注意点や、Photoshopが活躍するポイント、最新の活用方法をご紹介します。

[目次]
【0;01;04】 前回のおさらい~ CCライブラリについて(Adobe XD)
【0;05;31】 CCライブラリファイルの読み込み(カフェのサイト.cclibs)
【0;08;37】 XD のインターフェイスの確認
【0;11;53】 アートボードの編集(レイアウトグリッド)~ ナビゲーションの追加
【0;23;12】 下層ページの作成(about)
【0;29;48】 下層ページの作成(menu)
【0;31;43】 ページ間の遷移(リンク)を設定する(プロトタイプ)~デスクトッププレビュー
【0;36;49】 ビジュアルの作成(Photoshop)~ Adobe Stock
【0;40;30】 ビジュアルの編集(Photoshop)~ CCライブラリに登録
【0;44;02】 ビジュアルの配置(XD)~ 下層ページの編集
【0;47;41】 下層ページの作成(deri)~ ご予約フォームの作成
【0;56;58】 スマートフォン用サイトの作成
【1;03;45】 ハンバーガーアイコンの作成~ ボタンの配置
【1;06;17】 コンポーネントの概念~ 初期設定のステート
【1;13;00】 アクション(オーバーレイ)の設定
【1;14;39】 ビジュアルの編集(Photoshop)~ カンバスサイズの変更
【1;18;04】 ビジュアルの配置(XD)~ レスポンシブサイズ変更
【1;19;43】 共有~ コードの書き出し方法について
【1;27;00】 プラグインについて(Web Export)

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


※サンプルデータは、個人の練習用としてお使いください。その他の目的での使用や配布などはご遠慮ください。
Copyright © 2020 Adobe Systems Incorporated. All rights reserved.