まず最初に絶対にやること！
1）印刷→サイズ設定、色（CMYK）
2）レイヤーにあるオブジェクトをCOPY
3）COPYしたオブジェクトの右クリック→スマートオブジェクトへの変換
段取り
アクセスMAP
・あまり細々と描かず、特徴的なものに。
DTP（DM/名刺等）
・印刷物（Illustrator）
1）画面左側のツール→四角形ツール
2）対象となる大きさにする（サブウィンドウor右側のプロパティパネル内大きさ調整）
3）画面上部オブジェクト→ガイド作成
4）画面右側プロパティパネル→中心線の位置→「線の内側」を指定
5）右クリック→
6）ファイル→WEBで出力→出力形式及び出力先の確認
※文字は6ポイント以上にて。
※サイズをピッタリでつくらず、上下左右3ｍｍ伸ばしておくこと。
・名刺
1）ツール→長方形→91mm×55mm
2）オブジェクト→トリムマーク作成
3）ラインの中心線をラインの外側に（
4）オブジェクト→パス→パスのオフセット→3mm or -3mmで内外の名刺のガイド作成
※A4サイズであれば、内側は1CMくらい余裕をもっておく。
5）それぞれのガイドを右クリック→ガイドをロック
6）名刺を作成するための各レイヤー分け（トンボ+ガイド／デザイン／文字／ロゴ／仕上がり線）
マスク（Photoshop）
・選択ツール
1）オブジェクト選択ツール
2）なげなわ選択ツール
3）多角形選択ツール
4）クイック選択ツール
5）長方形
6）マグネット選択ツール
・レイヤーマスク／レイヤーにおける指定範囲をマスク。
1）画面左側のツール→範囲指定（長方形、切り取りusw）
2）レイヤー内切り取りたい対象を囲む
3）画面左側のツール→移動ボタン押下→画面右側プロパティ→レイヤー欄株にある国旗みたいなマークを押下
4）ツール→白黒反転→パネル上部→強さや太さを選択
5）レイヤーマスクの範囲を手動で指定可能
・クリッピングマスク／特定の図形の中に画像を入れるマスク。
1）画面左側のツール→範囲指定（長方形、切り取りusw）
2）レイヤーに切り抜きたい図形を描く
2）右側のレイヤーパネルで、画像の上に置く
3）右クリック→クリッピングマスク→
※Illustratorの場合、Photoshopとは逆。残したい部分にマスク→対象となるオブジェクトとマスクを選択→右クリック→クリッピングマスク
・グラデーションマスク/
1）とりあえずプロパティパネル下部の国旗マークを押す。
2）プロパティパネルのレイヤー→マスク部分を押す
2）ツールパネル→グラデーションを選択
3）パネル上部に表示されるグラデーションバーをプルダウン→基本３種のうちの白黒を選択
4）画像の上の任意の点から、左ドラッグでひっぱる
・色を変える/家具や衣類など、同じ型の色違いのバリエーションスタイルの案内で使用。
1）ツール→スマートオブジェクト→選択範囲をとる
2）国旗マークでマスク
3）太極図のような白黒マークを押下
4）カラーパネルが出てくるので、色を指定
5）プロパティパネルにある標準等プルダウンメニューから適切なものを選択（彩度調整他）
6）
7）
サムネイル用ガイド
1）表示→ガイド→新規ガイドレイアウトを作成
2）列・行にチェック
3）数10、間隔0
4）表示→ガイド→ガイドをロック
当て込みバナー
顧客に自作バナーを当て込んだ場合のイメージを提示する場合に使用。
基本的に配置・文字・色に注意して、HP内で浮かないような雰囲気にするのが基本。
1）対象とするHPのバナーを右クリック→検証
2）画面右側に出てくる文字列の内、色の変わっているところにポインタを合わせる→Sizeが表示される
3）Photoshopを起動→新規→印刷→WEB→対象とするバナーの縦横のピクセルサイズを入力
4）バナー制作
5）対象とするHPを普通に印刷
6）バナーを当て込んだHPを印刷
フルサイズスクリーンショット
cromeの画面上で右クリック→検証→左画面側のサイズを1200にする→左側画面の3点→Caputure Full size screenshot
HTML
タグの構造
<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値
（例）
<p class=”hello”>こんにちは</p>
※必ず使う要素
・body_画面に表示させるページ内容を定義します。
・head_ドキュメントのヘッダーを定義します。
・html_HTML 文書の開始を宣言してドキュメントルートを定義します。
・link_外部ファイルへのリンクを埋め込みを指定します。
・meta_ドキュメントに関するメタ情報を指定します。
・title_ウェブページのタイトルを指定します。
※文書構造を組み立てる要素
・article_自己完結記事を定義します。
・aside_余談や補足を定義します。
・footer_セクションのフッターを定義します。
・header_セクションの先頭となるグループを定義します。
・main_文章の中で主要な内容を定義します。
・nav_ページ上の主要なナビゲーションを表します。
・section_文書構造セクションを定義します。
※基本的な構成に必要な要素
・a_リンクを指定します。
・br_改行位置を指定します。
・div_ブロックレベル要素としての範囲を指定します。
・h1 ～ h6_文書やセクションの見出しを指定します。
・img_画像を指定します。
・li_リストの項目を指定します。
・p_文章の段落を指定します。
・span_インライン要素としての範囲を指定します。
・ul_順序のないリストを指定します。
head 要素（文書情報）
・title 要素（ページタイトル）
・meta 要素（文字コード指定／charset）
・meta 要素（ページの説明文／description）
・meta 要素（ビューポート／viewport）
・link要素（外部 ファイルとの紐付け）
HTML構造化タグ
・article 要素（アーティクル）
・section 要素（セクション）
・nav 要素（ナビ）
・aside 要素（アサイド）
・h1～h6 要素（見出し）
・header 要素（ヘッダー）
・footer 要素（フッター
HTML：コンテンツのグループ化タグ
・p 要素（段落（パラグラフ））
・ol/li 要素（順序のあるリスト）
・ul/li 要素（順序のないリスト）
・dl/dt/dd 要素（定義・説明リスト）
・main 要素（メインコンテンツ）
・div 要素（ひとつのかたまりの範囲）
HTML：テキストの意味
・a 要素（ハイパーリンク）
・em 要素（強調）
・strong 要素（重要情報）
・small 要素（免責・警告・著作権など）
・i 要素（慣用句・特定用語）
・b 要素（太字）
・span 要素（特定の範囲をグループ化）
・br 要素（改行）
HTML:コンテンツの埋め込み
・img 要素（画像）
・iframe 要素（インラインフレーム）
※特殊文字
| 文字 | 名称記述 | 10進数記述 | 16進数記述 | 名称 |
|---|---|---|---|---|
| " | " | " | " | ダブルクォーテーション |
| & | & | & | & | アンパサンド |
| < | < | < | < | 小なり |
| > | > | > | > | 大なり |
| （スペース） | |   |   | ノーブレークスペース |
| © | © | © | © | 著作権記号(コピーライト) |
| ® | ® | ® | ® | 登録商標 |
FFFTP
サーバーにデータアップロードする時には必ず使用する（メニュー→検索窓で直接入力）
①ホストの設定名（任意の名前）
間違えて他のサイトにファイルをアップする事故が起きないよう、他のものと区別できるものにしましょう。案件名や会社名などの固有名詞にします。今回はご自身の氏名でも構いません。
②【ホスト名】
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。
③【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。
④【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。
・”index.html”ファイルはサーバーレンタル時に自動作成されるもので、自分でHPを製作したときには、ここが実質的なTOPPAGEとなる。
・特定企業のためのHPやポートフォリオサイトを製作する時には”index.html”とは別に特定企業用のhtmlを作成してココに張り付ける。
・とりあえず”お試し”で、先日の課題にあったものを"index.html"として挙げた。実質的にWordPressの上に位置している。
WordPressのバックアップ
RWD（レスポンシブウェブデザイン
入稿
【① 入稿データの作り方（印刷用データ）】
印刷物をデザインして、クライアントから「このデザインでOKです」と言われたら、入稿データを作ります。どのようにするか覚えています？
（入稿データとは、そのまま印刷できる状態のデータのことです。）
■チェックするポイント
・文字にアウトラインをかける（文字化け防止）
・写真がRGBならCMYKに変換
・リンク切れがないか確認
・画像は埋め込み、またはリンク切れしていないか確認
・塗り足しが設定されているか
・仕上がりサイズが正しいか
☆「印刷トラブルを起こさない」ことが一番大事です。
【② デザインを知らない人に見せるためのデータ】
入稿データーを作ってデザインを見せてもデザインを知らない人はトンボの意味が分かりません。
そのままトンボありのままでコンビニで印刷されたこともあります。
正直、そういうのを見るとがっかりします。
だから、デザインを知らない人にも分かるように、「こういう完成形になります」というラフを見せる必要があります。
■チェックするポイント
・完成イメージ用のデータを作って見せる。
・完成サイズだけが見える状態になります。
☆人がイメージしやすい形で見せることが大事
☆入稿するときは、このラフ用レイヤーの「目」を非表示にするだけ
【③ 会社内・デザイナー同士でデータを渡すとき】
会社内でこういうことがあります。
・引き継ぎ
・自分が途中まで作ったデータを渡し印刷会社に渡し整えてもらい印刷に出す
・後輩や同僚が続きを作業する
■チェックするポイント
・こういう場面では、「使いやすいデータかどうか」が重要です。
・使いやすいデータを渡せる人は、「この人とまた仕事したいな」と思ってもらえます。
☆実際に「データ触りやすいです」と言われ仕事も継続されることが多くなる
☆整理することを心がけます。
【④ 渡したくないのにどうしても渡さないといけない「ワークデータ」について】
（使われてしまうのを防ぐ方法）本当は、完成データだけ渡すのが基本です。でも現場では、
・上司に言われた
・クライアントに強く言われた
・トラブルを避けるため
■チェックするポイント
・使えない状態にしてから渡す。
・ワークデータは「商品」
・無料で渡すものではない
・渡すなら使えにくい状態にして渡す
※ただし、きちんとお金を払ってくれるクライアントの場合は、ワークデータを渡します。
☆ワークデータは「商品」
☆無料で渡すものではない
基本は誰がみてもわかりやすいデータ管理が大事
ポートフォリオ（リンク先URL）
・SANKOU https://sankoudesign.com/category/portfoliosite/
・Webデザイン制作の参考になる国内のステキなサイト集 https://sankoudesign.com/category/portfoliosite
・選ばれるクリエイターになりたいなら！参考にすべきポートフォリオサイト8選 https://design-baum.jp/project/12658/
・Webデザインスクール卒業生のポートフォリオ作品を21例紹介！ https://liginc.co.jp/629272
・BAKUup https://bakuup.com/category/site-type/type-portfolio/
・イラレでミスにつながる絶対にやってはいけない操作TOP5 https://tondemo-riron.com/adobe_illustrator_miss_top5/
・すべて無料 本当は教えたくないフリーイラスト素材サイト124個まとめ商用OK https://photoshopvip.net/
・InDesignの勉強部屋 https://study-room.info/id/
GIFアニメーション
98年頃からあるらしく、レトロな雰囲気よろしく、ドット絵との相性がいい。
セル画に相当する静止画をjpegで制作
↓
Photoshopを開く
↓
起動直後の画面において→ファイル→スクリプト→ファイルをレイヤーとして読み込む→読み込み先ファイルの指定
↓
ウィンドウ→タイムラインを選択・クリック
↓
Photoshopで開いた直後、画面下部のプルダウンメニューで『ビデオタイムラインを作成』→『フレームアニメーションを作成』に変更してクリック
↓
タイムラインのハンバーガーメニューから『レイヤーからフレーム作成』をクリック。
レイヤーにある画像がタイムライン上に登録され、アニメーションの準備ができる。
↓
なおアニメーション化する順番（セル画の順番）が逆の場合、タイムラインのハンバーガーメニュー→フレームの入れ替えを選択・クリック
↓
書き出しはいつもの通り。ファイル→書き出し→WEB用に保存
↓
ただし保存形式はGIFにすること。
