最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？ 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6～8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
Web製作者やブロガーならブックマーク必須な個人商用フリーな5つの画像サービス * 男子ハック
テキストだけじゃ見にくいので適度に画像を使ってアクセントテキストばかりの記事だと読みにくい。（逆にテキストだけのほうがいいって場合もあるかもしれませんが）。見に来てくれた人が「読みやすい」と感じてもらうためのふ画像も適度に使ったほうがいいだろうし、場合によってはスクリーンキャプチャを使うこともあるでしょう。 僕の場合はテキストだけで記事を書くことができていしまう場合でも、適度に画像を使ったり、上記のように見たらすぐわかる説明のような画像を作ることもしばしば。 基本的にはキャプチャを撮ったり、画像を作ったりしていますが、それ以外にアクセントというかイメージとして画像を使いたい時には画像サービスから探すといいかもしれません。 以下に紹介するサービスの利用に関しては各サイトをご確認ください。 フリー写真素材::Free.Stocker国内外の建物や風景写真が多くある画像サービスです。
Webデザイナーが知っておく、DTPの基礎知識
Webデザイナーが知っておく、DTPの基礎知識 2011-05-08 CMYK RGB(加法混色)で表現される色を、塗料や染料では全ての色を再現できないため、印刷する場合はCMYK(減法混色)ににする必要があります。 CMYKは、シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、キー・プレート（Key Plate）から成っており、シアン、マゼンタ、イエローの三色で理論上、黒も表現できますが、実際は強く表現されないためブラックを補ったCMYKが使用されています。 しかしCMYKの黒でも本当の黒には見えません。 そこで他の色も混ぜて、本当の黒に近づけることをリッチブラックといいます。 印刷会社によっては推奨されているリッチブラックの濃度もありますが、C30%＋M20%＋Y20%＋K100%で問題ないと思います。 入稿時にはCMYKの色指定を、5%刻みで指定する様にするよ
jQueryベースの画像スライダー３０まとめ:phpspot開発日誌
Roundup of 30 jQuery Image Gallery/Slider Tutorials & Plugins | Lava360 jQueryベースの画像スライダー３０まとめエントリのご紹介。 画像スライダーといっても、実に様々なデザインがありますが、３０個もあれば自分の目的に合ったものが見つかりやすそうですね。 全体的にクオリティは高いようです。 昔では想像もできなかったことが実現できていることに色々と感動しますね。 関連エントリ JavaScript製の画像スライダー・ギャラリーいろいろ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 軽量でいい感じの画像スライダー実装jQueryプラグイン「Choco-Slider」 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」:phpspot開発日誌
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 2011年02月10日- jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に実装できてしまいます。 実際のコードは次のようにとてもシンプル。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="//www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /><
ウェブ制作に役立つ、便利な最近のオンラインサービスのまとめ -2011年1月
最近リリースされたものを中心に、デザイン、スタイルシート、ワイヤーフレーム、データベースなどに役立つオンラインサービス・ウェブアプリケーションを紹介します。
Blitz - ウェブクリエイタの人も，そうでない人も楽しめるデザインブログ
手相講座 オンラインが気になるなら、こちらのウェブサイトをよくチェックしたほうがいいです。 そして、あなたがすぐ副業になる 手相オンライン講座を購入しようとしているなら、上のウェブサイトで、すぐ副業になる 手相オンライン講座を手に入れると一体何ができるようになるのかについて、十分に理解した上で購入することをおすすめします。 また、レビューや評価が紹介されているなら、それについてもよくチェックしましょう。 下記のすぐ副業になる 手相オンライン講座についての情報も役に立つかもしれません。 商品名：すぐ副業になる 手相オンライン講座 販売商品紹介：手相をゼロから学んで副業になる！覚えなくても始められる！基本となる丘・線の解説に加え、応用力がつく読み方や豊富な実例も紹介。特典動画ではさらに学びを活用し副業にしていくための方法も解説した有料鑑定をやるための情報に特化した手相講座です。 電子書籍価格：
デザインとか加工とか出来ないからなんかいいの教えて、と言われて教えたツールいろいろ
Webツールデザインしたい！ 友人がブログを始めたのですが、 Web制作もデザインも全く経験が 無いけど、普通な感じがすごく嫌 らしく、知識が無くても加工出来る、 とか良いサイトとかソフトは無いのか、 と聞かれて教えたWebサービスや ソフトが、同じ境遇の方に役立つかも と思って記事にします。 友人がブログを始めたのですが、 Web制作もデザインも全く経験が 無いけど、普通な感じがすごく嫌 らしく、知識が無くても加工出来る、 とか良いサイトとかソフトは無いのか、 と聞かれて教えたWebサービスや ソフトが、同じ境遇の方に役立つかも と思って記事にします。 普通に写真や画像を掲載するのではなく、ちょっと個性的な感じにしたい、出来れば無料がいい、でも自分でデザイン作業は出来ないから良いサイトとか無い？とのことでした。 どうしたいのか良く分からなかったので、あんまり一貫性は無いんですが、教えたの
カラースキームを決めるのに役立つ、配色ジェネレータ17個まとめ | ライフハッカー・ジャパン
相性の良い色を選んでくれたり、配色の手助けをしてくれるジェネレータはたくさんあります。25 Free Color Tools, Apps and Palette Generatorsで、様々な配色ジェネレータが紹介されていましたので、ここから17個を厳選して以下に紹介します。 1. Color Scheme Designer 3 「Color Scheme Designer 3」は、バランスのとれた色味を生成してくれるジェネレータ。配色に困ったらまずここでヒントを得ましょう。 2. Toucan 「Toucan」では、似た色や逆の色など配色パターンが選べます。画像から色を抽出することもできますよ。 3. kuler 「kuler」は、Adobe製の配色パターン生成ツール。直感で色を決めてみましょう。Adobe製品との連携もあるようです。 4. ColoRotate 「ColoRotate」
フリーで使える商用可能な写真の効率的な5段階の探し方: 世界中の１％の人々へ
"Yawning wolf" Photo Credit:Tambako the Jaguar パブリックドメインのライブラリで写真を探し回るのは時間の無駄。Wikimedia Commonsから探すといい! 3月26日に発売される『Movable Type 5実践テクニック』には、商用利用可能なテーマが3本専用サイトからダウンロードできるようになっているのだけど、制作過程で一番苦労したのは、IAでもデザインでもなくて、コンテンツを埋めることと再配布可能な画像を探すことだった。 これたのテーマで利用した写真のほとんどはパブリックドメイン（Public Domain）の写真を使いましたが、かなりの時間を費やして写真を探した結果、パブリックドメインのライブラリを順番に探していくのはあまりにも非効率的であることに気づいた。まず多くの画像ライブラリはUIが酷すぎる。検索結果にサムネールがでないライブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
背景素材に使いやすい画像を配布しているサイト「Subtle Patterns」 | ライフハッカー・ジャパン
背景に使えるドットパターンをCSSおよび画像で生成してくれるサイト「Patternify」 | ライフハッカー・ジャパン
IDEA * IDEA
デザイナーがオススメする無料写真素材サイト15選｜ラクスルマガジン | ラクスルマガジン
アップロードした画像に使われている色の一覧を生成してくれるサイト「imgr」 | ライフハッカー・ジャパン
PNG vs. JPG ～間違いを防ぐ6つの助言～ | AUTHORITY SITE
http://www.designwalker.com/2010/05/css3.html
画像のレイアウトに困ったら「Dummy Image Generator」 | ライフハッカー・ジャパン
