独学・フリーランス・在宅・SNS疲れのWebデザイナーさんへ、
ビジネス思考を磨いて「わたしの売りはコレ!」を作っていこう。

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

GoogleClomeデベロッパーツールの使い方 Photoshop

こんにちは。フクモト学長(@WebcreatorsTips)です。未経験からフリーランス歴17年のWebデザイナーです。スクール運営 10年目になります。
詳しいプロフィールはこちら


今回の勉強会は、

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

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

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

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

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

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

サンプル動画(準備中)

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

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

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

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

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

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

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

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

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

サンプル動画(準備中)

参加者の声

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

【Webクリエイターズスクール】
学長 福本 智子

Webもデザインも未経験からいきなりフリーランス歴16年。
『仕事は自分で創りだす』をモットーに生きてきた50代。
WordPress・Webマーケティングが得意。

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「マーケティング理論に基づいた、じぶん事業計画」をお伝えしてサポートしています。

関連記事

じぶんの売り方に集中できる。おひとりさま専用Webデザインスクール
フリーランスwebデザイナー個別相談

受講者の声