アニメーションを使ったUIを楽しくデザインできる便利な無料ツール『Origami』の使い方を動画でご紹介
去年あたりから、魅力的なプロトタイプ作成ツールがいろいろリリースされ、制作の現場でもそれらをもう使ってるという人も少なくないと思います。 その中の一つ、Facebookの『Origami』の動画コンテンツが公開されたので紹介します。 Facebook Origami Origamiは簡単に説明すると、スマホやタブレット、そしてデスクトップのWebページ・アプリのユーザインターフェイスをデザインするOS X用の無料アプリです。Sketchとの相性も非常にいいのも大きな特長です。 Origamiでどんなことができるのかは、下記のExampleページに多数のデモがあります。 先日の記事で紹介した「Windy Effect」もOrigamiで作られたものです。 まずは、インタラクションのデモ。
Photoshopの最近の気になるテクニックを身につけるチュートリアルのまとめ
ポリゴン、シェイプアート、ブラー、等高線、ジオメトリック、ラインアート、シネマグラフなど、最近の気になるデザインのテクニックを身につけるPhotoshopのチュートリアルを紹介します。 時間をつくって、一つずつじっくりと攻めていきたいですね。
Illustratorで文字をかっこよくデザイン！タイポグラフィのチュートリアルのまとめ
アートワークとして見るだけでもよい刺激を受ける、そんな素晴らしいタイポグラフィ・テキストエフェクトのチュートリアルをまとめてみました。 解説は英語ですが、苦手な人でも各ステップごとにキャプチャが付いているので分かりやすいと思います。
[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート
このレトロ風の凝ったデザインのリボン、HTMLはh1要素だけで実装されています。 余分なspan, div要素もなく、もちろん画像は一切使用されていません。 Single Element Pure CSS3 Double Fold Ribbon CSSはそれなりのボリュームになりますが、スタイルシートだけでデザインする見出しのバリエーションとしてストックしておきたいですね。 HTML HTMLは非常にシンプルです。 「contenteditable」はコンテンツの編集許可で、見出しのテキストを編集できます。 <h1>Single Element - Pure CSS3 - Type here...</h1> 外部スクリプト スタイルシートのベンダープレフィックスを自動で付与するために、外部スクリプトを使用します。 CSS スタイルシートにベンダープレフィックスを記述すれば上記のスクリプトは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Illustratorのテクニックを磨こう！作って学ぶテキストエフェクトのチュートリアルのまとめ
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ
