a3t3mbk’s blog

元”theネットワークエンジニアを目指していたがネットワークエンジニアとして一回も働けなかった人間”が全くキャリアを積めず自分がぐちゃぐちゃなった結果、鬱でドクターストップののち、プログラマーとして再起を目指すブログです。(やはりPCは好きなんだな

Udemyでの勉強! Day005 on コース001

コース001*1はこちら!

www.udemy.com

は私の私的なコメントであって動画の内容とは(本質的に)関係がございません。

動画No.76:文庫本の紙カバーを革カバーに。

ペンツールで4隅をクリックしておおまかに、ツールバーのパス選択ツールで微調整して、ピクセル単位で選択を完璧に。アンカーポイントの切り替えでハンドルを出して、カーブも使う。革の画像を上レイヤーにおいてクリッピングマスクで合成。メニューバーの編集から遠近法ワープでより自然に。
革だと遠近法ワープの力がわかりにくい。

動画No.77:ちょっとだけ応用編。クリッピングマスクの復習。  

ペンツールでハンドルを使って波線型のシェイプを作る。レイヤーマスクでグラデーションをつける。

動画No.78:チャレンジ。車製品のトップページを作る感じ。クリッピングマスクとしてカラーバランスの緑追加を行う。JPEGの背景の白い部分を非表示にするのにはレイヤーマスク。

動画No.レイヤーマスクとクリッピングマスクは「ものすごく使う」とのこと。

動画No.79:自動のトーン補正など。

メニューバーの自動トーン補正をすると少しだけ画像が変わる?動画でみる限り全く変化が分からん。
メニューバーのウィンドウからアクションを出して、マクロみたいな作業自動化ができる、ということを説明。アクションもダウンロードできる。拡張子はatn。ググった限りではgimpの特定フォルダに入れれば使えるみたい(?)。
アクションの結果追加されたものを確認して、自分のスキルを上げるのがいいらしい。それってスキルが上がったというよりアクションを知ったというのでは…いや、それがスキル、と呼ばれているもので、アクション作成とかは”センス”なのかもしれん。

動画No.80:レベル補正。レベル補正の調整レイヤーを追加して、RGBごとの明るさ/コントラストををいじれる。

どんな値がいいかは一概にはいえない。体で覚えろ!とのこと。

動画No.81:写真をイラスト風に。

まずは同じ写真を何枚もレイヤーコピーを重ねる。切り絵風の「カットアウト」のフィルターをつけて、ブレンドモードをスクリーンに。その上に、「鉛筆」でフィルターしたものを「乗算」でブレンドする。輪郭を「輪郭検出」で乗算でブレンド。不透明度を調整して、完成。

動画No.82:HDR風の写真にする、

って、HDRがなんだか分からない。ググると奥が深そう。動画ではプリセット使うのがいいとのこと。たしかにこれを0から調節していくのは無理。プリセットを基礎に少しいじる感じか。

動画No.83:シャープツールで目をはっきりくっきりさせる。

ツールバーのぼかしの中のシャープツール。強さは弱めで重ねていく方がきれいにできる。何回もこすっていく感じ。

動画No.84:スポット修正ブラシツールでニキビを消したり、肌をなめらかにしたり。

ブラシツール状態になり、なぞった部分の「不要な」部分をフォトショが自動で判断し、消してくれる。なめらかにするにはぼかしツールで単にこする。強さを下げて何度も重ねていくのがコツ。ハイライトを入れるには覆い焼きツール。

動画No.85:歯を白くしたり、目の充血を取ったり。またレイヤーマスク。

復習?というか、人物に対してのレッスンとしての再出?レイヤーマスクの選択範囲から、明るさをあげてカラーバランスから黄色を減らす。

動画No.ここでフォトショップ講座は終わり!次から【実践Webデザイン】(185まで100動画!)
f:id:a3t3mbk:20180907184923p:plain NESTオンラインの動画の構成が分かってきた。たぶんこんな感じ。*2

動画No.86:ワイヤーフレームの説明。ワイヤーフレームってなに?

ワイヤーフレームは部屋の間取り図。ポイントは、操作性、演出過多の回避、目的の明確化。最大の目的は、クライアントの目的を達成するための手段を考えること。実際に作ってからのロールバックを避ける目的。

動画No.87:ワイヤーフレーム制作手順とツール。

  1. 手順1は依頼内容のヒアリングかつ提案しながらがいい、
  2. 手順2同ジャンルのWebサイトを徹底調査、
  3. 手順3手書きでアイデアを書き出す、
  4. 手順4パソコンで清書。清書のレベルは、説明文まで完璧に(ダミーテキストではなく)入れた方がいい。

ツールは、
- CACOO
- MOCKUPS
- ADOBE ILLUSTRATOR
などがあると言うが動画内でのツール説明は(今のところ)無し

動画No.88:ヒアリングのコツ。

SE講座かな?依頼者の要望をそのまま聞くだけだと抽象的だし、あとから追加・変更もあり得るので、最終的に目的があやふやになりやすい。なので、引き出すヒアリングで具体化を提案。じゃあこういうツールがあるんですが、じゃあ、こういうサイトがあるんですが、こういう感じでどうでしょうか?とお客さんのイメージをこっちから確定させに動くる。

動画No.89:ヒアリングの2段階。

  1. サイトの設計や企画。及び、デザインやマークアップ、運用、集客に関して。この二つは分けた方がいい。
  2. 上記、1は、目的、ターゲット、手段、を決めてから、企画、コンテンツを考える。コンテンツの優先順位も同意を得ておく。 優先順位は、お客さんがアピールしたいところとか、サイトマップとか。問い合わせページ、アバウトページの要否など。

動画No.90:webサイトのレイアウト例とパーツ名称の確認。

ヘッダー、メインビジュアル、ローカルナビ(カテゴリ一覧など)、コンテンツ、フッター

動画No.91:初心者のためのワイヤーフレーム作成方法。

アイディアの引き出しはほかのサイトをたくさん見てつける。
PCでの清書は、最低限テキストと四角形があればいい、とのこと。

動画No.92:ワイヤーのポイント、注意点。

  1. ユーザが迷子にならない。常に同じ場所に同じボタン、同じナビというレイアウト。
  2. ファーストビュー(最初にアクセスした瞬間に見える範囲(デバイス依存))
  3. 視線の動き(左上からZ型とF型)
    失敗しないコツ:同じ目的を持つサイトを徹底的に調査して20サイトを目安に考える。

動画No.93:Webデザイン勉強法:とにかくまねして作りまくる。よくある画力上昇方法みたいだな。

io3000.comイケサイ.comなどいいと言われているものを参考にする。まねするのは、スペースやフォントや、マージン、パンでぃんぐやフェードイン、アニメーション、の細かい数値までまねるように。

動画No.94:パンくずリストの作り方。

フォトショで。ノンデザイナーむけにiconfinderをおすすめ。移動ツールでオブジェクトを選択した状態だと、選択した範囲の中央に並べることができる。
動画No.しかし、文章までフォトショで作ってどうマークアップするんだろう…?
動画No.メイリオが面妖と字幕されててワロス。面妖フォントってあったら面白そうではある。

3ピクセルの差を見抜いて全く同じにする技術が大切とのこと…ふーん? ... マジで?

動画No.95:押したくなるダウンロードボタンの作り方。

「光彩の内側」なんかはcssだと面倒か藻しれない。ググれば一応出てくるけど…
定規とかスマートガイドは便利だな。

動画No.96:広告のミニバナーの作り方。バナーなどは横幅が決まっていることが多く、文字の調節など難しい。

テキスト選択で特定の文字と文字の間の文字間を狭めたりする。
動画No.動画95と96がめっちゃ長い。復習をかねてるからだろうけど、こういう各動画の長さとかは、動画一覧からは分からんな…400動画ある!タイトルはこれだ!といわれても、内容はぜんぜん分からん。 1日25動画!とか決めるのは未達成になりやすく危険かもしれん。

動画No.97:メイン画像のバナー作成例。

写真を利用する場合、色を塗りつぶすよりは、商品写真の端っこを引き延ばした方がきれいになる。フォントはflopdesignのものを利用。
読みやすい行間は文字サイズの半分を足したもの。つまり14pxなら21px。
文字に1pxの白シャドーをかけると、リッチに見える。(動画じゃエンコのせいかぜんぜん分からない)

動画No.98:ナビゲーションの作り方。

パンくずリストではなく、ヘッダーの下か中によくある奴。横1440pxという前提で分割して各個センタライズ。

動画No.99:ウェブサイト全体のバランスについて。レスポンシブは完全無視。

しかし、このやり方の方が(デザインセンスの高い人にとっては)別個に作った方がいいのかもしれん。 *3

動画No.100:Webデザインで参考になるサイトの探し方。

企画や機能に関する参考、デザインやテイストに関する参考で、分けて参考にして自分のサイトではmixするといい。「webデザイン ギャラリー」でググる。10以上mixすればオリジナル。

101~はまた明日!

*1:自分で勝手に番号つけています

*2:フォトショ講座を受けたとは思えない画像の出来なのはたぶんペイントのせいです

*3:というか別売りっぽい