おしゃべり掲示板!みんなの話題共有サイト

ズーム -1元のサイズ+1

ヒントみんなの疑問、質問、相談、体験談、意見、情報が誰かの役に立っています。

先頭から

PhotoShopで作った画像の重さを軽くしたい

メール転送可
記事 7 by
初めて書き込みします、初心者ですがよろしくお願いします。

フォトショップでイラストに着色しているのですが、出来上がった画像の
重さを軽くするにはどうすればよいのでしょうか?

使用目的は個人のホームページで、だいたい縦が600×横500ピクセル程度の
画像を作ります。これをjpgで保存してホームページにアップしているのです
が、どうしても100〜150キロバイトくらいの重さになってしまいます。
保存の際、画質を下げれば軽くなりますが、それだと画像の線が荒くなって
しまうのです。

他の方のホームページを見ていると、綺麗な画像で重さ50キロバイト前後
と、軽くなっておりますので、何か方法があるのかと思い、書き込みさせて
いただきました。

お分かりの方、いらっしゃいましたら是非教えて下さい、宜しくお願いします。
To:ミサキ

返信コメントを書き込む


コピー保険に加入(本文コピー)  写真を貼り付ける 埋め込む
カメラ 写真(画像)貼付の設定

笑 [返信内容の確認]をするときに、あなたが撮影した写真や画像を指定します。投稿すると安全処理されてから投稿欄に表示されます。

設定を閉じる

YouTube公式チャンネル 動画貼付の設定
URL:

笑 YouTube の動画枠直下にある[共有]を押すと出るURLか、再生ページのURLを以下のように入力します。
https://youtu.be/*****

貼り付けてよい動画?

笑 企業等の公式チャンネルの動画や個人が撮影して公開中の動画を掲示板等に貼り付けて共有リンクするのは著作権上合法だそうです。

貼り付け方は?

設定を閉じる

2004年3月11日(木) 22時5分 1件目のコメント
コメント 8 by うるるん
ミサキさん
多分それはフォトショップ以外のソフトを使っているのでは、と
思うのですが、ここではフォトショップ以外のソフトを使わずに
できる事を考えてみたいと思います。
お使いのフォトショップのバージョンがわからないのですが、最
新版の7.0であれば「スライス」というツールがあります。
スライスは、一つの画像を2つ以上の画像に分割する機能です。
スライスがない場合、使い方がわからない場合のやり方は以下の
通りです。

1.作業に取りかかる前に「ビュー」「スナップ」「ガイド」
  にチェックを入れてください。こうする事で選択範囲をガイ
  ドに吸着する事が出来ます(7.0ではない場合、作業方法が
  違いますので、マニュアルで「ガイドのスナップ」を調べて
  作業を行ってください)
2.画像を(600*500ピクセルなら)縦300横250等のように均等に
  なるよう、ガイドラインを描きます。
  (ガイドラインは画像の左右に定規ツールを出した状態で
  マウスを左クリックした状態でドラッグする事で描画出来ま
  す)
2.ガイドに従って選択範囲をつくり、上記の例であれば合計
  4枚の画像を作成します。
3.複数の画像に切り分けた画像をtableタグの中に置き、
  <table border=0 cellpadding=0>と指定しますと、あたかも
  画像が軽くなったかのようにする事ができます。

ご質問ありましたら、お書きください。
この投稿に返信
2004年3月12日(金) 18時49分違反通報親記事 2件目
コメント 9 by Orca
ミサキさん

jpg (JPEG) 以外の画像形式をためしてみてはどうでしょうか?
JPEGは、写真などの画像には効果的ですけど、イラストなどにはむかない形式なんですよね。

イラストには、 gif や png という形式をためしてみてください。
PhotoShop なら、 gif が使えると思うので、 gif形式で保存するのがよいと思います。

(でも、PhotoShopはつかったことが無いので、具体的な方法は知らないのです。JPEG形式で保存するときと同様にしてできるとは思います・・・)

ほかにも、画像のサイズをおとす方法はありますが、これだけでもだいぶサイズダウンできると思いますよ。
この投稿に返信
2004年3月13日(土) 16時25分違反通報親記事 3件目
コメント 10 by うるるん
>>36 Orcaさん
バナーのように小さな画像で色数少ない場合gifが有効かもしれませんが
600*500くらいの画像サイズですと(色数にもよりますが)ファイルサイ
ズが大きくなったり256色で表示すると色のアラが目立つ事があります。
PNGもこのサイズになりますとJpegより大きくなる事があるようですね。

フォトショップでは「名前を付けて保存」のときにファイル形式を選択
出来ます。
が、同名で保存しますと拡張子非表示の場合どのファイルがどの形式な
のかわからなくなりますから作業前に[コントロールパネル]-[フォルダ
オプション]の「ファイルとフォルダ表示」の「すべてのファイルとフォ
ルダを表示する」にチェックマークを入れておくと良いと思います。
この投稿に返信
2004年3月14日(日) 13時25分違反通報親記事 4件目
コメント 11 by ミサキ
>>35 うるるんさん

アドバイスありがとうございます。ミサキです。

早速試してみました。ソフトはフォトショップ7.0なので問題ないのですが、定規ツールを左右に出してガイドラインを引く、というやり方が分かりませんでした…「ものさしツール」のことでしょうか?これを出してみましたが、画像の上に線が引かれるだけで、どう使えばよいのか分かりませんでした。
また、「ガイド」は「ビュー」をクリックして「ガイドのロック」というところにチェックを入れました。

何も分からなくて申し訳ございません。

また、この場合の作業はjpgで保存する前に行うのでしょうか?

お手隙の際で結構ですので、また教えてくださると嬉しいです。

今回はありがとうございました。
この投稿に返信
2004年3月15日(月) 14時47分違反通報親記事 5件目
コメント 12 by ミサキ
>>36 Orcaさん

アドバイスありがとうございます。ミサキです。

先にうるるんさんも書いてくださいましたが、gifやpngになると画像が荒くなってしまいました。色数やフィルタを多用しているでいか、色ムラのようなものが出来てしまいます。

折角アドバイス下さったのに、申し訳ありませんでした。

ありがとうございました。

この投稿に返信
2004年3月15日(月) 14時51分違反通報親記事 6件目
コメント 13 by うるるん
>>38 ミサキさん
7.0の場合[ビュー【一番上、右から三番目】]の中に[定規【下から8番目】]という項目があります。
ここにチェックマーク(vのようなマーク)を入れますと、画像の上と左に定規が出ると思います(ものさしツールではありません)

定規を出したら、定規の上にマウスを乗せて左クリックしながらマウスを動かすと青(標準の色です)の線が出ると思います。

定規の単位は環境設定【[編集]の一番下】]の[単位・定規]で変更出来ます。HP作成されていらっしゃるのでしたら定規の単位「ピクセル」にしておくと良いと思います。

−−−ここまで準備が出来たらいよいよスライスをしてみましょう
●Step1
定規からマウスを左クリックした儘動かして、適当な場所で留めます。後ほどtableタグ内に入れる関係上、なるべく同じ大きさで切るのが良いでしょう。
逆に言えばイラストを描くときに切りやすい大きさにしておくのがスライスをしやすくします。(500*600ピクセルのように100ピクセル単位が切りやすいでしょう)

●Step2
ガイドラインを引いたら[スライスツール]を選択します。
左側のアイコン(作業ツールがいろいろ入っている)の中にある右側、上から三番目のナイフのようなアイコンを選択しますと「ガイドに沿ってスライス」というボタンが、[ファイル][編集]・・・等が並んだ下のバーに表示されていると思いますので、ここを押してください。

●Step3
[ファイル][Web用に保存]を選択します。
左上の画像の上にマウスを置き、左クリックすると画像が暗くなります。この状態で[保存]ボタンを押してください。
[ファイル名]をgazou(名前は任意で結構です)とし、[ファイルの種類]を[画像のみ]として保存してください。

●Step4
保存先にimageという名前のフォルダが出来、中にスライスされた画像が番号を振られて保存されているのが確認出来ると思います。

●Step5
画像を置きたい場所にtableタグを切ります。
縦横それぞれに切った数と同じだけの箱を用意します。
4分割なら縦2横2ですね。

tableタグの中に画像を入れます。順番を間違えないように^-^

テーブルタグの先頭を<table border="0" cellpadding="0" cellspacing="0">と書き直してください。こう表記することで「テーブルを非表示」する事が出来ます。border=0はテーブル枠非表示(0ピクセル)、cellpadding=0はテーブル間隔のピクセル値(0ピクセル)となります。

−−−−−

以上で画像を早く(実質は軽くなっていませんが)見せるように出来ると思います。
企業のHP等にいきますと、幾つもの画像がどどっと表示されて大きなバナーや画像になるのを経験された事もあるかと思いますが、多くの場合は上記に記載した「スライスで画像を切り分けてtableタグを使う」手法が取られていると思います。(違うやりかたの場合もあります)

わからない点がありましたらどのステップがわからなかったかを添えてご質問ください。
尚、[]でくくった言葉はフォトショップ内に出てくる文字、
 【】でくくった言葉は表示されるタブ内の位置とさせて頂きました。
この投稿に返信
2004年3月15日(月) 16時9分違反通報親記事 7件目
コメント 14 by ミサキ
>>40 うるるんさん

丁寧に教えてくださってありがとうございます

早速試してみたいのですが、今少々事情があってなかなかゆっくりパソコンに向かえないもので…申し訳ありません。

直ぐにレスを下さったのに、こちらからのレスが遅れたこともお詫び申し上げます。

時間が取れて、試した後、必ずまた書き込みに参りますので、図々しいようですが、その際は是非宜しくお願いします。

本当にありがとうございます
この投稿に返信
2004年3月17日(水) 18時35分違反通報親記事 8件目