Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Generator

[CSS3] Convert Photoshop Drop Shadows to CSS3 Box & Text Shadows – フォトショップのドロップシャドウ指定を入力すると、CSS3での指定に変換してくれるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Photoshopのレイヤースタイル内で指定したドロップシャドウの値を入力すると、CSS3での指定に変換してくれるサイト。数値は手入力なので手間といえば手間ですが、PSDでデザインしたものと同じプロパティ指定に正確に変換してくれるのは便利です。全く同じ影を描画したいんダ!という神経質なデザイナー・コーダー向きかもしれません。自分はそのへんいいかげんな正確なのでだいたいオッケーならオールオッケーという感じで、いつものらりくらりとやっておりますが。

[Web Design] Top 14 CSS Generators – 便利なCSSジェネレーターまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

便利なCSSがらみのオンラインジェネレーターまとめ。text-shadowを使ったテキストエフェクト、グラデーション指定、ボタンメイカー、その他CSS指定のための総合ツールなど色々あります。半分くらいはこの手のまとめ記事でよく見るツールではあるけど、初めて見るツールもいくつかあったので紹介。text-shadow指定は凝ったあしらいをしたい時に便利っすね。

[Web Design] 50 Time-Saving Web Design – Developer Tools – Webデザイナーのための時間節約ツール

  • Pocket
  • このエントリーをはてなブックマークに追加

Webデザイナーやデベロッパーのための時間節約ツール。カテゴリごとに分けて様々なオンラインツールが紹介されてます。モックアップ制作、アイコン、テクスチャ、画像素材、フォント、デバッグ、イメージギャラリー、イメージスライダー、CSSスプライト生成などがその内容。デザイン素材やコーディングツールが一通り揃ってるので、サイト制作時にちょっとズルしたい時なんかにナイスです。サクっと仕事終わってサクっと家帰ってビールが飲みたい時に是非これひとつ。

[Web Design] PlaceIMG – あらゆる解像度のイメージプレースホルダーを生成してくれるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

様々な解像度のイメージプレースホルダーを生成してくれるサイト。縦幅と横幅をそれぞれ指定して「Generate the Image」をクリックするだけで、仮置き用の画像を出してくれます。いわゆる無地に「〇〇〇px × 〇〇〇px」と書いてあるタイプのものではなく、指定した解像度にマッチする写真を選んでくれる点がポイント。またカテゴリーやフィルタリングもできるので、制作中のサイトのイメージに多少沿わせる事もできます。この手のプレースホルダ生成系のサービスの中ではわりと使える方なんじゃないかな、と思いました。

[Web Application] Makeappicon – 画像ファイルをMobile Appのアイコンにしてくれるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

画像ファイルをドラッグ&ドロップするだけで、iPhoneやAndroidなどのモバイルAppのアイコンにしてくれるという便利なウェブアプリ。サイトの点線内に画像ファイルを放り込むだけで出力してくれます(アニメーションがかわいい)。Retina対応のものやそうでないものなど、いくつかの解像度を用意してくれる点もナイス。一応どんな画像でもやってくれますが、アプリのアイコンという性質上、正方形の画像ファイルを突っ込んだ方が良さそうです。非デザイナーの人とかがとりあえずサクっとアイコン用の画像作りたい時なんかに便利です。

[Web Design] WebPlatformTools.org – Web制作における便利なオンラインツールをまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Web制作に使える便利なツールをギャラリー風にまとめたサイト。紹介されているサイト群はカテゴリごとに分けられ、目的に応じて選ぶ事ができます。その内容は様々で、抜粋するとブラウザツール、イメージツール、フォントリソース、グリッドジェネレーター、コード生成、CSS3ツール、フォーム関連ツール、イメージエディタなど。Web制作における便利なオンラインツールなら何でもあるって感じです。いわゆるまとめ記事ではなくまとめサイトなので、リソース漁りの際に重宝しそう。ナイスです。

[Color Palette] 10 Time Saving Online Color Tools for Web Designers – デザイナーの生産性を上げるための、カラーツールまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

Webデザイナーが生産性を上げるためのカラーツールをまとめた記事。色に関するオンラインツールがカテゴリごとに分けて紹介されてます。上からカラーパレット生成、カラーピッカー、カラーセオリーに関する補助ツール、CSSグラデーション生成、カラーサジェストツールという順番です。それぞれ複数のサイトが紹介されていて、目的に応じて色を選んだり抽出したり、理解を深める事ができます。この手の便利サイトはデザイナーなら知っておいて損はないですね。

[PDF] Paperkit – 好みの大きさの方眼を作れるPDFジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

好みの大きさの方眼を作れるPDFジェネレーター。設定できる内容は紙のサイズ、単位(ミリ or インチ)、方眼のサイズ、用紙のマージン、ボーダーの太さと色について。結構詳細に指定する事ができます。一通り指定できたら「Download PDF」ボタンでPDFが生成でき、それをそのまま印刷すれば自家製の方眼紙ができます。いやこれイイっすね。裏紙の再利用にもナイスです。