Webデザインとビジネス力を磨く!体験型Webデザインスクール・オンラインサロン

【第一部】GoogleClomeデベロッパーツールの使い方【第二部】Photoshop 描画モードの基本(2019.01)

今回の勉強会は、

  • GoogleClomeデベロッパーツールの使い方
  • Photoshop 描画モードの基本

の2部構成となりました。

【第一部】 GoogleClomeデベロッパーツールの使い方

CSSの表示確認をする際に便利なのがGoogleクロームのデベロッパーツールという要素の検証機能です。

特にレスポンシブやWordPressテーマの編集などCSSが複雑になればなるほど、チェックに時間がかかります。

そんな作業を一気に楽にしてくれるのがデベロッパーツールです。
CSSの学習にもとてもおすすめのツールです!

サンプル動画(準備中)

【第二部】 Photoshop 描画モードの基本

わかっているようでわからない!?Photoshopの描画モード

レイヤーの描画モードで合成する時、何度もモードを切り替えて、試行錯誤し、結果、思った通りにビジュアルにならず、あきらめた・・・

なんてことありませんか?

Adobeのサイトや市販の参考書には描画モードの種類と合成結果の一覧しかない場合が多く、これでは、現場でどう使えばよいか、わかりません。

描画モードをマスターするコツは代表的なモードの特徴を知ることです。

どの描画モードを選ぶとどんな結果になるのか?

これが、一気に理解できる合成をパパッとやりながらWeb制作では、どんなシーンで使うのかなどを確認しながらビジュアルを作り上げていきました。

一枚の画像が「乗算・スクリーン・オーバーレイ」でとても魅力的に変わるんです!

サンプル動画(準備中)

参加者の声

  • Chromeの開発ツールで左側に画面で右クリックして該当のhtmlやらを見られることを知ることができました。大変便利なTipですね。 
  • Photoshopは膨大な内容なので基本からもう一度おさらいしようと思います。
  • 素朴な人や慣れた人、色んな人の声が聞こえて刺激になりました。
  • ディベロッパーツールが便利だということは知っていましたが、どうやってみるかがわからず「眺めて終わり」という感じでした。
    記号の意味や具体的な使い方を教えていただいて「そうだったのか!」と思いました。
  • photoshopの描画モードについて、自分でも試してみたいと思える、基本的なところから教えていただいたのでうれしかったです。
  • 最近は、ブログに掲載する画像もとても重要であることに気づき、必ず何かしらの加工をするようにはしていました。
    今日教えていただいたアレンジ方法もとても素敵だったので、早速取り入れていこうと思います。
  • ご説明が分かりやすく、理解しやすいです。
  • 他サイトのCSSのチェック方法、描画モードの使い方が参考になりました。
    動画アップされたら、再度見直して練習したいです。

関連記事

受講者の声

「動き出せない
あなたの背中を押します!」

組織に依存しない自由な働き方を
手に入れるためのオンラインスクール・オンラインサロンです。

スクール最新情報、フクモト学長の活動はメルマガで配信中~。