【Photoshopで模写】Webデザインを効率よく身につける模写の方法

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ม.ค. 2025

ความคิดเห็น • 22

  • @井上恒介-v8b
    @井上恒介-v8b 3 ปีที่แล้ว +5

    めちゃくちゃわかりやすいです。
    本当にありがとうございます。
    仕事で初めてデザインカンプ を頼まれたので大変さんこうになりました。
    投稿主様ご覧ください高評価100%ですよ!!笑

    • @torikumu
      @torikumu  3 ปีที่แล้ว +1

      ご覧いただきありがとうございます!
      お仕事の参考になったようで良かったです😊

  • @sakirivkx
    @sakirivkx หลายเดือนก่อน +1

    はじめまして、ありがとうございます。
    質問なのですが動画でご紹介されている内容が終わってサイトの中盤ちょい上にあるnews、リニューアル情報などが横に並んでいる単語を編集してるのですが検証ページでもわかりませんでした。
    特にリニューアル情報からnews→の間の空白がどれだけ離れているか、その他にも単語と単語の間の微妙な空白の取り方の対処方法はりますでしょうか?

    • @torikumu
      @torikumu  หลายเดือนก่อน +1

      検証ツールを使用しての模写の場合は、コーディングの知識があるといいかもしれません。
      該当部分は、以下のコードを参照してください。
      line-height
      letter-spacing
      margin

    • @sakirivkx
      @sakirivkx หลายเดือนก่อน

      @@torikumu ご回答ありがとうございます!一部はしっかりピクセルで把握できました!
      重ねての質問で申し訳ないのですが公式サイトをリニューアルしました、とお知らせの間の検証だと紫になる部分の距離はどうすれば把握できますか?

    • @torikumu
      @torikumu  หลายเดือนก่อน

      @@sakirivkx こちらも同じ要領ですので、余白系のプロパティを検証すれば数値が見えると思いますよ。

  • @堀之内唯
    @堀之内唯 10 หลายเดือนก่อน +1

    はじめまして。突然ですが質問です。ブラウザリサイズで1440で変更して保存してもPhotoshopで画像を挿入するとサイズが小さく表示されます。画像解像度でも変更できません。他に方法はありますか?ちなみにCSSの入力をしていいて画像サイズやフォントサイズ、ラインハイトを正確に測って調べたいのですが何か良い方法があれば教えていただけたら助かります。

    • @torikumu
      @torikumu  10 หลายเดือนก่อน

      はじめまして!
      どのようなパソコンや機能を使用しているかが不明なので、推測でお伝えいたします。
      1440pxでスクショを撮り、ツールに入れる際に小さくなるのであれば、元々2倍で撮ると良いかと思います。
      よくあるケースですと、Macだと2倍サイズにスクショされ、半分のサイズにしないといけない場合があります。
      その逆のような現象だと思われます。(いただいている情報だと原因は不明です。)
      そのため、2倍でスクショか小さいサイズになったものを、配置した後に1440pxの横幅に大きくしてみるといった対応になります。

    • @堀之内唯
      @堀之内唯 10 หลายเดือนก่อน +1

      @@torikumu 返信ありがとうございます。Macで作業しています。試してみようと思います。

  • @オレハレオ23
    @オレハレオ23 7 หลายเดือนก่อน

    初めまして。この動画を参考にしていくつかのWebサイトをトレースして練習しています。とてもわかりやすい解説ありがとうございます。
    質問なのですが検証ツールのサイズ表記が画面の大きさで変わってしまうので検証ツールを出すだけで幅などが変わりスクショと合いません。
    幅だけでなく高さも変わることもあり動画のようにうまく行きません。
    どうしたらいいでしょうか?
    またスクショが動画のまま撮っているのですが、検証ツールとサイズが合わないことがあります。解決法があれば教えてください。PCはMacでPC,Psどちらも最新です。

    • @torikumu
      @torikumu  7 หลายเดือนก่อน

      コメントありがとうございます!
      スクショのサイズを合わせる場合は、Chromeの拡張機能を使ってください。
      chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
      こちらで書き出したいサイズに合わせると簡単です。スクショもChromeの拡張機能がお薦めです。

    • @オレハレオ23
      @オレハレオ23 7 หลายเดือนก่อน

      @@torikumu お返事ありがとうございます!試してみます!
      検証ツールについてはいかがでしょうか?
      1番下に出てくる四角が重なってるようなところがサイズだと思うのですがこれは画面を分割したりすると変わります。動画のようにサイズが書いてない場合があるのですがどうしたらいいですか?

    • @torikumu
      @torikumu  7 หลายเดือนก่อน

      @@オレハレオ23 検証ツールはあくまでもざっくりと見る場合なので、正確な数値で見たい場合はお送りしている拡張機能が良いかと思います。

  • @taenysnsd2012
    @taenysnsd2012 3 ปีที่แล้ว +1

    とてもわかりやすかったです!
    質問なのですが、この方法でやるとphotoshop上で表示されるキャプチャしたWEBサイトの画質が劣化してしまうのですが何か対処法はありますでしょうか?

    • @torikumu
      @torikumu  3 ปีที่แล้ว +1

      参考にしていただきありがとうございます。
      この方法というのは、
      ①トレースしたいサイトをキャプチャ
      ②Photoshopに入れる
      ②の部分で劣化するということでしょうか?
      もし劣化するようであれば、大きめにキャプチャを撮影して貼り付けしてみる形だとどうでしょうか?
      元画像のサイズが小さい?可能性があるので、ご確認よろしくお願いいたします。

    • @taenysnsd2012
      @taenysnsd2012 3 ปีที่แล้ว +1

      @@torikumu
      ご返信頂きありがとうございます!
      元画像のサイズの問題でした、こちらの確認不足でお手数お掛けしてしまいすいません🙇‍♂️
      これからも動画楽しみにしてます!

  • @user-nt5ww6fi4c
    @user-nt5ww6fi4c 3 ปีที่แล้ว +1

    凄く分かりやすかったです!有難うございます

  • @にわか-s3v
    @にわか-s3v 2 ปีที่แล้ว +2

    現在、視聴中の者です。質問なのですが、download all images でzipファイルをダウンロードした際にロゴ等の画像がなく写真の画像しかフォルダに入っていない事象は、何が原因として考えられるでしょうか。

    • @torikumu
      @torikumu  2 ปีที่แล้ว

      お返事遅くなり申し訳ありません。
      プラグインに関してのことなので、なんともなのですが・・・
      ・画像の拡張子の制限
      ・PC再起動したら治るかも?
      少し違うかもですが、再起動は試してもいいかもしれません。