タグ

tipsと画像に関するshidhoのブックマーク (5)

  • 続:PNG画像をより美しく、より軽量に最適化するテクニック | コリス

    上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード:[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し(半透明は削除)、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン

  • JPEG画像をより美しく、より軽量に最適化するテクニック

    JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ(8x8ピクセル)です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため

    shidho
    shidho 2009/07/03
    覚えておく。
  • ウノウラボ Unoh Labs: 角丸画像を簡単に作る

    Keitaです。最近、モテるためにがんばっていますが、周りの女性は誰一人として振り向いてくれません。 さて、そんなわけで、世間では、いろいろな角を丸めると、モテるといううわさを聞いてとりあえず角を丸めることにしてみました。 でも、CSSの角を丸める方法は、わりと論争の的でこれがいいよ!と人に勧める知識もないので、とりあえず、画像を丸めてみることにしました。 今回も、Webアプリケーションに関する面倒な問題を簡単に解決するツール、PHPを利用します。 画像を加工するのに何使うは、結構、選択肢があるのですが、そのものずばりの関数があるimagick 2.0を使いたいと思います。 コードはこんな感じです。 <?php $image =& new Imagick(); $image->readImage('test2.jpg'); // ファイルを読み込む $image->roundC

    shidho
    shidho 2009/04/09
    ImageMagickにはRoundcornerという関数があるらしい。
  • ヤフーの画像はなぜyimg.jpドメインなのか? サイト高速化の手法とヤフーの失敗例 | 初代編集長ブログ―安田英久

    ヤフーの画像はなぜyimg.jpドメインなのか? サイト高速化の手法とヤフーの失敗例 | 初代編集長ブログ―安田英久
    shidho
    shidho 2009/01/13
    Cookieの有無でパフォーマンスが影響するほどのサーバ、運営したことないような気がする。
  • ElementsでもOK!だんだん透明になるフォトショ画像の作り方 (1/2)

    Webサイトのデザインでよく見かける、上のような画像。2つの画像がじょじょに透明になって重なっている。ちょうど、動画でクロスフェード(フェードイン/フェードアウト)している途中のようなこの「溶かし込み合成」画像も、Photoshopならもちろん簡単に作れる。 とはいえ、中には「あれ? そういえばどうやって作るんだっけ?」という方も意外にいるはず。ヘッダー画像やバナー画像など、Webデザインのさまざまな用途に多用する超定番の加工方法だけに、改めて基のやり方を押さえておこう(以降、解説はPhotoshop CS3をもとにしている)。 よく見るアレもレイヤーマスクですぐできる はじめに、重ね合わせたい画像を2つ用意する。作業上、画像は2つとも同じサイズにしておくとスムーズだ。2つの画像は、別々のレイヤーに分けて重ねておこう。(下の画面)。先に開いておいた画像ファイルに、もう片方の画像をコピペす

    ElementsでもOK!だんだん透明になるフォトショ画像の作り方 (1/2)
  • 1