タグ

画像に関するhashimoyaのブックマーク (5)

  • Photoshopで変数を使って見出し画像リソースを管理する | A Day in the Life

    December 10, 2008 2エントリー連続でPhotoshop関連になります。今回は左のような見出し画像を書き出すリソースファイルを変数を使って管理します。 このような見出し画像を作成する場合、通常だと背景画像レイヤーを複数枚と見出し名テキストレイヤーを大量に作らなければなりません。私も今まではテキストレイヤーだらけになっていました。このような余分なレイヤーを作らないでリソースを管理出来る方法が変数を使ったリソース管理法になります。 簡単に変数を使った管理法の説明をすると、背景画像レイヤーを数種類用意し、日語名の見出しと英語名の見出しはCSVファイルで管理すると言う方法になります。 それでは詳しく説明をしていきます。 今回作るファイルのレイヤー構成は左のようになっています。 背景画像フォルダには背景画像が4種類。そして見出し名を設定するテキストレイヤーが日語用と英語用の2種類

    hashimoya
    hashimoya 2010/10/20
    変数を複数定義して管理もできるのか…いい時代です
  • Google、Web高速化を目指し新画像フォーマット「WebP」を発表

    Google、Web高速化を目指し新画像フォーマット「WebP」を発表:JPEGより約40%コンパクト GoogleがJPEGに代わる画像フォーマットとしてVP8技術を応用した「WebP」を発表。Webページの65%を占めるという画像を圧縮することでWeb高速化を促進する狙いだ。 米Googleは9月30日(現地時間)、新たなオープンソースの画像フォーマット「WebP」を発表した。Webに掲載する写真などの画像サイズを大幅に縮小でき、Webサイトの読み込み速度を向上させるという。開発者向けプレビュー版がGoogle codeのサイトからダウンロードできる。 Web高速化を目指す同社は、これまで高速化のためのさまざまなツールを投入してきた。ユーザーのWeb体験を遅くする主な原因はWebを構成する画像の読み込み速度にあると考え、新フォーマットの開発に取り組んだという。Googleによると、画像

    Google、Web高速化を目指し新画像フォーマット「WebP」を発表
    hashimoya
    hashimoya 2010/10/01
    画像フォーマットって、作ったあとのほうが大変そうだなぁ
  • 縮小専用。

    皆様のお陰でベクター「人気投票2011 最終決選投票」で グラフィック部門賞を受賞することができました! 拙いソフトウェアですが今後とも縮小専用をよろしくお願い致します。

    hashimoya
    hashimoya 2010/05/13
    効果などのチェックをすべて外して試してみたが、元画像とほとんど画質は変わらず、けっこうな縮小率。スゲー
  • 最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に | エンタープライズ | マイコミジャーナル

    Yahoo! User Interface Blog YSlowの開発者であり高速にロードされるWebサイトを構築するためのテクニックを紹介しているStoyan Stefanov氏による画像最適化解説シリーズの第2段がImage Optimization Part 2: Selecting the Right File Formatとして公開された。第2回目となる今回はGIF、JPEG、PNG8、PNG24/PNG32について説明し、どの場合にどのフォーマットを選択すればいいかがまとめられている。 Stoyan Stefanov氏はそれぞれのフォーマットの特徴を次のように説明。 GIF: 256色、可逆圧縮、透過機能あり(ただし透過かそうでないかの2種類だけ)、アニメーション機能あり JPEG: 何百万の色表現可能、非可逆圧縮、高い圧縮率、透過機能なし、アニメーション機能なし PNG8:

    hashimoya
    hashimoya 2010/04/06
    いまさらだけど、PNG8とPNG24の違い。PNG8ももうちょっと積極的に使おう。
  • 画像の下にテキストが回りこまないレイアウト | ヨモツネット

    概要 画像の横にテキストがあるようなレイアウトですがテキストが画像の下に回りこまないという CSS の書き方です。float を使うと、画像の下部にテキストが流れ込みますが、この方法は、画像の下にはテキストは流れ込みません。 さらに、画像の大きさは自由に設定できて、スタイルの使い回しが可能なレイアウトです。(画像が配置されるスペースの横幅は画像のサイズにフィットします。) これにより、画像のサイズごとに class 属性を設定したりスタイルを作る必要がありません。 また、画像がない場合でも画像分が詰められて表示されます。 これを応用すれば柔軟に対応できるコンポーネントをつくることができます。 動作確認用の demo 動作確認用の demo (左右逆版) 説明 display プロパティに table や table-cell を設定して実現します。構造を table 要素に置き換えて考えて

    hashimoya
    hashimoya 2008/08/17
    ずっとtable使ってた…!displayにtable-cellの発想はなかったわ。
  • 1