Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP
Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP
2016年3月19日 Webサイト制作, 便利ツール Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです! ↑私が10年以上利用している会計ソフト! 2016年3月16日 追記:Adobeがリリースしたプロトタイピングツールも試してみました!→ Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた ViewFlux ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン
内容:「web計。」は、ウェブデザイナーがよく使う計算式をコンパクトにまとめ、ブラウザ上で手軽に利用できるようにしたサービスだ。「横幅に対する画像数」「画像の比率」などを紙とペンでいちいち計算することなく、フォームに値を入力するだけで算出できる。 「web計。」は、ウェブデザイナーがよく使う計算式をコンパクトにまとめ、ブラウザ上で手軽に利用できるようにしたサービスだ。電卓を叩いたり、紙とペンを使っていちいち計算することなく、フォームに値を入力するだけで正しい値を導き出すことができる。 本サービスは4つの機能を備えており、それぞれをタブで切り替えて利用できる。ひとつめは「横幅に対する画像数」で、ウェブページの横幅を基準に、指定サイズの画像が何個入るか、またマージンがいくらになるかを簡単に算出できる。例えば「横幅1000pxで画像3個でマージン11pxの場合、画像枠の幅が326px」「横幅10
Social Media Image Makerは各ソーシャルサイト用の画像を作成できるサイトです。 FacebookやTwitterなどのアイコンや投稿写真にピッタリのサイズの画像を作成できます。 主要なソーシャルサイトに対応していますよ。 トリミングだけでなく、画像加工もできました。 以下に使ってみた様子を載せておきます。 まず「Social Media Image Maker」にアクセスしましょう。 まずは利用したいソーシャルサイトを選択しましょう。 左側のメニューにソーシャルサイト一覧があります。 また、それぞれのソーシャルサイトでどういった場面での画像かを選択できます。 このようにトリミングや画像加工、画像の反転や回転など細かい加工ができます。 Facebookのカバー写真やTwitterのプロフィールアイコンなどの作成にぜひご活用ください。
仕事上で使用する画像はウェブ上で見つけにくく、いい画像だな、と思っても商用利用ができなかったりクレジット表記が必要だったりする場合もあります。そんな時に便利なのが横断検索サイト「タダピク」で、海外や日本の計24の画像検索サイトから商用利用OK・クレジット表示不要の画像素材を横断検索することが可能です。 タダピク(tadapic) - 商用利用OK・クレジット表示も不要の画像素材検索エンジン http://www.tadapic.com/ トップページの検索欄にキーワード「子猫」を記入し、検索ボタンを押すと…… こんな感じで子猫の画像が表示されます。 気になる画像をクリック。 すると、画像元のサイトに飛びます。 なお、検索対象は「画像」なので、写真だけでなくイラストも一緒に検索されます。 検索時にはイラストやアマチュアカメラマンによる写真素材サイト足成の写真を除外したり、日本のサイトに絞り込
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r
デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2
1. foto project 無料の写真素材 フリー画像素材なら.foto project とりあえずブックマークしておくべき画像サービスです。 ブログ用の写真サービスから女性モデルの写真素材まで網羅。各サービスごとに利用規約がありますので、利用する場合は確認してください。 2. PAKUTASO PAKUTASO(ぱくたそ)-WEB制作デザイン向けの無料写真素材/商用可能 最近話題になった画像サービス。高品質な画像がたくさん! 3. モデルピース 【フリー写真素材】モデル・人物の写真素材はモデルピース 人物画像をお探しの際はこちら。以前紹介した時よりも画像が増えてきたので、選びがいがあります。 4. 足成 写真素材 足成【フリーフォト、無料写真素材サイト】 言わずとしれた超有名サービスです。ここは忘れずにブックマークしたほうがいいです。 5. Free.Stocker フリー写真素材
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか? 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6~8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
クリエイティブ・コモンズ・ライセンスで公開されており、自由に使うことが可能なPSDファイルの詰め合わせパックです。Web2.0っぽいデザインからオリジナルのデザインまで、いろいろなサイト作成やパーツ作成に応用できそうなものが山ほど詰め込まれており、かなり使えます。 ダウンロードは以下から。 Deluxive Creative Pack 001 by *Deluxive on deviantART 中に含まれているのは以下の通り。 バッジ キューブ カーテン カレンダー グリッドフレーム いろいろな文字入れができるパーツなど イラストいろいろ ポラロイド風の枠 世界地図とかお天気とか 付箋紙 押しピン シェルフ たばこ 星形のバッジ ぺらっとめくれる感じのステッカー 木の板 なお、ほかにもPhotoshopで利用できるパターンや壁紙も入っています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く