もう容量不足に怯えない。サンディスクのmicroSD 1.5TBは在庫があるうちに回収だ #Amazonセール
「CodeMyUI」は流行りのUIをコード付で紹介しているサイトです。GIFアニメでUIの動きを見ることができ、さらにそれを実現させるソースコードもリンクされています。デザイナーの方には重宝するサイトですね。 以下に使ってみた様子を載せておきます。まずCodeMyUIへアクセスしましょう。 このようにGIF画像とともにさまざまなUIが紹介されています。実際に動きを確かめることができるので、どんなUIなのかひと目で分かりますね。 詳細ページでは、そのUIを実現させるためのコードも閲覧できます。実際に動くサンプルがあるので、すぐに導入ができますね。デザイン段階でインスピレーションを受けたいときなどに、ぜひ覗いてみてください。 CodeMyUI (カメきち)
無限スクロールはちょくちょく実装することはあるが、追加するコンテンツの読み込みや挿入はともかく、ローディング画像の処理で悩むことがある。その表示の切り替えには実装と処理のどちらにおいてもそこそこコストがかかるからだ。かなり前に色々考えるのが面倒になり、常に表示しておくという雑な手をよく使うようになった。 Demo: Easy Loading Marker for Infinite Scroll デモでは90%ほどスクロールすると無限スクロールっぽくコンテンツが少し時間をおいてから追加される。コンテナーである#contentの最下部には常にローディング画像を背景画像として表示してあるので、特に操作することなく無限スクロールのためにコンテンツを読込中であることを示すことができる。SVGアニメーションでローディング画像を作ったためInternet Explorer 11では回らないが、おおまかに
「レスポンシブ・デザインとは?」を説明する9つのGIFアニメーションが、FastCompanyが運営するCo.Designの記事に掲載されていました。 9 GIFs That Explain Responsive Design Brilliantly | Co.Design 見習いたい表現なので、取り上げます。 たとえば、画面幅の考え方は。 image by Froont デスクトップファーストとモバイルファーストの違いは? image by Froont それぞれのGIFアニメーションのサイズは、数百キロバイトに抑えてあり、アニメーションは9つありますが表示するのにストレスは少ないです。 わかりやすく情報を伝えられるだけではなく、記事を読む側の利便性からしても、動画を9つ使うよりもGIFアニメーションを使うことに意味がありますね。
X Window System上で動作するデスクトップ環境「GNOME」の開発者であるJasper St. Pierreさんが、GIFに変わる新しいアニメーション画像フォーマット「XNG」を開発し、長らく使用されてきたGIFアニメーションに取って変わる可能性があります。 XNG: GIFs, but better, and also magical | Clean Rinse http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/ GIFはシンプルなアニメーションに使うのに適していますが、LZW圧縮形式は少し古く、カラーパレットの色の数にも256色という制限があります。GIF以外のアニメーションフォーマットにはAPNGやMNGがあるものの、サポートするブラウザが限定されているなど、ユーザーを満足させるものに
「拡張子」とは、ファイル名のうちの「.(ピリオド)」で区切られた文字列であり、そのファイルの種類を識別するためにつけられています。拡張子はオペレーティングシステム(OS)においてファイルの判別のため任意につけられるものであり、どのような場合においても必ずしも必要になるというわけではありません。音声データやテキストデータなどさまざまなデータを管理するうえで拡張子の形式の変化が重要になりますが、特に画像を保存する際はその拡張子の違いが如実に現れることになります。仕事上のデータのやりとりだけでなく思い出の写真の保存や個人ブログでの使用・アップロードなど、さまざまな場面ごとで使い分けたい画像の拡張子の性格についてご紹介致します。 ■ 画像に使える一般的な拡張子 ◎ JPEG(Joint Photograph Experts Group) jpegはjpgとも呼ばれ使用される、もっとも一般的な画像形
ゼロからGIFアニメーションを作成するのは手間がかかりますが、ボタンを押すだけで再生中のムービーをGIFアニメーションにしてくれるのがGoogle Chrome拡張機能の「Animated Gif Capture - アニメーションGifキャプチャ」です。Chromeブラウザに限らず、IEやFirefox、PCのローカル上で再生したムービーでさえもGIFアニメ化できるようになっています。 Chrome ウェブストア - Animated Gif Capture - アニメーションGifキャプチャ https://chrome.google.com/webstore/detail/animated-gif-capture/aecmckhhfknljgicfkpbinfkpnijehcm 拡張機能を使うには、まず画面右上の「無料」ボタンをクリック。 「『Animated Gif Capture
最近のトレンドカラーを使い、シンプルなオブジェクトをさまざざまな楽しいアニメーションで動かしたプリローダーの素材を紹介します。 Flat Preloaders ダウンロードできるファイルのフォーマットは3種類で、32x32, 64x64, 128x128とサイズも3種類が用意されています。 .gif (すぐに使えるGIFアニメーション) .png (スプライト用の画像) .aep (After Effect用) プリローダーは10種類で、どれもかわいく楽しいアニメーションです。
gifアニメ、ちょっと軽くしたいときがあると思う。Photoshopで「web用に保存」でgifアニメを保存するとき、いろいろオプション出るけど、今までなんとなく設定してた。そこで、どこをどうすればファイルサイズ減らせるのか実験した。 前提前提として、 解像度が小さいほうが軽いコマ数が少ない方が軽いこの2点はクリアしているとして、さらにファイルサイズ減らす方法について調べた。 元の画像元の画像。例によって tumblr で見つけた。1050kbある。 減色する ファイルサイズ減らすのには一番効果的な方法。写真とかだと減色すると変だけど、セル塗りっぽい画像だと減色してもさほど変にならない。大抵は64〜128色くらいが良いと思うけど、このgifアニメはもともと色が少ないシーンなので32色まで落としてもさほどおかしくなかった。 1050kb -> 740kb ディザを減らす 多少効果的な方法。デ
内容:「WhatFontis.com」は、ロゴなどに使われている欧文フォントの種類を オンラインで解析できるサービスだ。フォントの種類が気になった場合に手軽に調べられるのはもちろん、過去に作成したロゴに用いたフォントの種類がわからなくなった場合も、目視で比較する手間を掛けることなく、簡単に特定することができる。 「WhatFontis.com」は、ロゴなどに使われているフォントの種類をオンラインで解析できるサービスだ。フォントの種類が気になった場合に手軽に調べられるのはもちろん、過去に作成したロゴに用いたフォントの種類がわからなくなった場合も、目視で比較する手間を掛けることなく、簡単に特定することができる。 使い方は簡単で、解析したいフォントが用いられているロゴ画像を選択したのち、背景色が解析対象のフォントよりも明るいか暗いかを選んで続行。自画面で、フォントが1文字ずつ分割された状態で表示
WEBデザイナーの仕事をしてまして、職業柄様々な拡張子の画像を扱いますので使い分けについて分かってるのですが、ブログをやってる方はそこまで気を使ってない人が多いように見受けられます。 特にJPGとPNGは全然違ったフォーマットなので、画像の性質に合わせて使うべきです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く