[CSS] CSS clip-path maker – CSSを使ったクリッピングパスのジェネレーター

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

by on 10月.22, 2014, under Web Design

CSSを使って画像のクリッピングパスができるジェネレーター。画面左にある様々なシェイプで画像にマスクをかける事ができます。クリップした内容はページ下部にあるコードエリアにリアルタイムに反映されるので、思った通りのクリップパスが描けたらCSSコードをコピペするだけで使えます。ここで使われるプロパティは“clip-path”というもの。シェイプを選んだり修正したりすると、polygonの値が変化します。画像を使わずにコードだけでマスクを切る事ができるので便利ですね。ただ円形についてはグレーアウトしてて選べませんでした。polygonじゃ描けないからなのか、理由はよく分かりませんが、サークルシェイプって最近よく使われる印象なので、そこだけちょっとアレだしナニではあります。

コメントを書く :, , ,

[Freebie] Apple Watch PSD –  WatchのUI PSD

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

by on 10月.21, 2014, under Material

Apple WatchのUIパーツがPSDで配布されてます。とは言えまだ発売前なので、おそらく現在公式サイトなどで見る事のできるスクリーンショットなどから制作しているんだと思います。Apple Watch用のApp配信がどういう仕組になるのかまだよく分かりませんが、Watch向けAppを制作する予定のデベロッパにとってはUIデザインの際の参考になりそうです。こうして見ると小さいディスプレイながら結構いろんな事できそうなんですよね。あ、俺もちろん買います。

コメントを書く :, , , ,

[Font] 1,075 Awesome Free Fonts For Designers – デザイナーのためのフォントまとめ記事

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

by on 10月.20, 2014, under Material

デザイナーのためのフォントをまとめた記事。しかし正確に言えば、フォントをまとめた記事をまとめた記事です。なんかややこしいですが、リンク先でさらにテーマごとにフォントがまとめられています。ちょうどわたくしこの後iMacをクリーンインストールしようと思ってるので、フォント類のバックアップとかおっぱじめるつもりです。フォントライブラリはデザイナーの命ですからね。Yosemiteの見た目、わりと不評も多いんだけど俺は好きであります。

コメントを書く :, ,

[Web Design] 85+ Free CSS3 jQuery Tab Menus Plugins – CSSとjQueryを使ったタブメニュー

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

by on 10月.17, 2014, under Web Design

CSS3とjQueryを使ったタブメニューの作例を集めた記事。なんと85の作例がまとめられてます。よくタブメニューという限定されたテーマでこれだけ集めたな・・・と感心せざるを得ません。一般的な水平方向に並んだタブ切り替えはもちろん、垂直方向でのタブ切り替え、アニメーションを併用したものなど色々あります。それぞれリンク先で導入法やデモなどが用意されてるので、タブの作例を探す際に使えそうです。

コメントを書く :, , , ,

[Misc] Beautiful Maps – 地図のギャラリーサイト

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

by on 10月.16, 2014, under Misc

美しい地図画像ばかりを集めたギャラリーサイト。クリックすると詳細を見る事ができます。今みたいに正確な地図情報がない古い時代のものもあれば、ごく最近のイラストっぽい地図作例もあったりして、こういうの好きな人なら楽しめると思います。タコが出てきちゃうのとかありますしね。あと世界地図ばかりではなく、ごく局所的な地図もあります。いるかどうか分からないけど地図マニアにおすすめ。友達に電車の路線図マニアがいたから、きっと地図マニアもいる事でしょう。

コメントを書く :

[Freebie] iOS 8 GUI PSD (iPhone 6) – iOS 8のGUI PSD

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

by on 10月.15, 2014, under Material

いつものTeehan+Laxのオッサン2人が、iOS 8のGUI PSDを作ってくれました。今回のPSDで新しくなった点は、iOS 8のGUIに対応した事と、iPhone 6の各色モックアップが入った事です。どうやら6 Plusについては入ってないようですが、毎度のように忠実に再現されていてとってもナイスです。今回通知エリアのパーツが充実してますね。新機能だし対応アプリもいくつか出てますもんね。ありがたく使わせてもらいます。

コメントを書く :, , , , ,

[Design] Starter Kit – 開発を始める際に便利なスターターキットをまとめたサイト

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

by on 10月.14, 2014, under Material

WebやMobile Appなどの様々な開発を始める際に便利なスターターキットをまとめたサイト。紹介されてる内容がかなり幅広いんだけど、例えばiOSやAndroidなどのMobile Appの開発、Webのデザインに使えるHTMLやCSSの情報リソース、アイコンやイラストなどの画像素材、フォント、マーケティングリソース、SEO、ビデオ、UI / UX関連リソースなどがあります。サイト内の情報はタグ付けされて管理されているので、調べたい分野を絞る事ができます。ある程度知識があれば、いちから自分で作るよりもこうした素材やフレームワークを使った方が効率良く仕事できますしね。なかなかナイスなコンセプトのサイトだと思います。

1 Comment :, , , , , ,

[Sketch] Sketch Plugins That Will Improve Your Workflow – Sketch用プラグインのまとめ記事

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

by on 10月.14, 2014, under Software

Sketch用のプラグインをまとめた記事。ってかこんなに数があるというのにまずビックリしました。いくつかピックアップすると、Xcodeへの書き出し、カラーコントラストチェッカー、プレイスホルダー生成、レイヤーソート、定規、ランダムユーザージェネレーター、iOS向けのAppアイコン生成、HTMLやCSSのコードジェネレーターなどがあります。UIデザイン系の仕事はSketchにシフトしていきたいなーと思いつつ、わたくしなかなか移行できておりません。

コメントを書く :,

[CSS3] CSS Gradient Animator – 動くグラデーション背景のジェネレーター

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

by on 10月.10, 2014, under Web Design

うっすらと背景のグラデーションが動くサイトってたまにありますよね。あれのジェネレーター。このサイトもよく見ると、うっすらとグラデーションが動いてますが、このコードを生成する事ができます。画面左にはグラデーションの方向と、アニメーションの方向指定があり、その下にはグラデーションで使う色の指定があります。色については2色だけでなく3色以上のグラデ指定もできるようです。これらを指定した後で「Preview」ボタンを押すと、サイトの背景に適用されます。指定した内容は随時右側に出てるCSSコードに反映されるので、気に入ったグラデーションが出来たらそれをコピーすればオッケ。いやーこのジェネレーター便利ですな。

コメントを書く :, , ,

[Typography] Trail Type – 登山道の標識ばかりを集めたアウトドアなタイポギャラリー

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

by on 10月.09, 2014, under Typography

登山道にある標識の写真ばかりを集めたフォトギャラリーサイト。ただの標識とはいえ、こういうものをタイポグラフィーの作例として見るセンスというのはアリだなと思いました。掲載されている写真も世界各地のものがあり、パっと見ただけでもアメリカ、ニュージーランド、マレーシア、そして何かと目にするYosemiteというワードも出てきます。旅行好きの人が運用してるのか、それとも投稿型なのかはよく分かりませんが、山登りとか好きなアウトドア派の人が見ても興味深いんじゃないかと。まぁ今時期的に山登りって色々言われてますけどね。デザイナー的にはフォント当てクイズとかしても楽しそうです。

コメントを書く :,

Web Services

My Profile by iddy

Twitter Status